JSP练习(cookie、隐藏域使用等)

登录页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .msg{
            color: lightcoral;
        }
        .slogan{
            color: cadetblue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <div class="page-header">
                <h1>
                    欢迎登录
                    <%if ("loginFail".equals(request.getAttribute("msg"))) {%>
                    <small class="msg">用户名或密码错误,请重新输入。</small>
                    <%} else {%>
                    <small class="slogan">人生如逆旅,我亦是行人。</small>
                    <%}%>
                </h1>
            </div>
            <form action="<%=request.getContextPath()%>/LoginServlet" method="post">
                <div class="form-group">
                    <label for="uname">用户名</label>
                    <input type="text" class="form-control" id="uname" name="uname" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="upass">密码</label>
                    <input type="password" class="form-control" id="upass" name="upass"
                           placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <a href="<%=request.getContextPath()%>/jsp/register.jsp">还没有账号?点此注册</a>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

注册页面(含表单校验)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .msg {
            color: lightcoral;
        }

        .slogan {
            color: cadetblue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var check1 = false;
            var check2 = false;
            var check3 = true;
            $("#uname").blur(function () {
                if ($(this).val() === "") {
                    $(".msg").html("用户名不能为空");
                    check1 = false;
                } else {
                    $(".msg").html("雄关漫道真如铁,而今迈步从头越。");
                    check1 = true;
                }
            });
            $("#upass").blur(function () {
                if ($(this).val() === "") {
                    $(".msg").html("密码不能为空");
                    check2 = false;
                } else {
                    $(".msg").html("雄关漫道真如铁,而今迈步从头越。");
                    check2 = true;
                }
            });
            $("#uphone").change(function () {
                var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!phoneReg.test($(this).val())) {
                    $(".msg").html("手机号格式有误。");
                    check3 = false;
                } else {
                    $(".msg").html("雄关漫道真如铁,而今迈步从头越。");
                    check3 = true;
                }
            });
            $("#myform").submit(function () {
                console.log(check1);
                console.log(check2);
                console.log(check3);
                return check1 && check2 && check3;
            });
        })

    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <div class="page-header">
                <h1>
                    欢迎注册
                    <%
                        if ("unameRepeat".equals(request.getAttribute("msg"))) {
                            out.print("<small class='msg'>用户名或手机号已被占用。</small>");
                        } else {
                            out.print("<small class='msg'>雄关漫道真如铁,而今迈步从头越。</small>");
                        }
                    %>
                </h1>
            </div>
            <form id="myform" action="<%=request.getContextPath()%>/RegisterServlet" method="post">
                <div class="form-group">
                    <label for="uname">用户名*</label>
                    <input type="text" class="form-control" id="uname" name="uname" placeholder="请输入用户名"
                           value="<%String uname = request.getParameter("uname");
                           if (uname != null){
                               out.print(uname);
                           }%>">
                </div>
                <div class="form-group">
                    <label for="upass">密码*</label>
                    <input type="password" class="form-control" id="upass" name="upass" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="uphone">联系方式</label>
                    <input type="text" class="form-control" id="uphone" name="uphone" placeholder="请输入联系方式">
                </div>
                <div class="form-group">
                    <label for="uremark">备注</label>
                    <input type="text" class="form-control" id="uremark" name="uremark" placeholder="请输入备注">
                </div>

                <button type="submit" class="btn btn-primary">注册</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

首页(商品展示,JS中cookie的操作)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        tr td img{
           width: 50px;
            height: 50px;
        }
    </style>
    <script>
        $(function (){
            $(".addProd").click(function () {
                var pid = $(this).attr("pid");
                var num = 1;
                var cookies = document.cookie.split("; ");
                $.each(cookies,function (i,d) {
                    var kvArr = d.split("=");
                    if (kvArr[0].indexOf("prod_") === 0 && kvArr[0] === pid){
                        num = parseInt(kvArr[1]);
                        num += 1;
                    }
                })
                document.cookie=pid+"="+num+";path=/;expires="+new Date("2020-8-2 11:11:11");
            });
        })
    </script>
</head>
<body>
<%@include file="/jsp/notNullCharge.jsp"%>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>
                欢迎您:<%=loginUser.getUname()%>
            </h3>
            <ul class="nav nav-tabs">
                <li role="presentation" class="active">
                    <a href="<%=request.getContextPath()%>/QueryAllProductServlet">首页:商品展示</a>
                </li>
                <li role="presentation">
                    <a href="<%=request.getContextPath()%>/OrderServlet">订单页</a>
                </li>
            </ul>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品图片</th>
                    <th>商品描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<MyProduct> myProductList = (List<MyProduct>) request.getAttribute("myProductList");
                    if (myProductList != null) {
                        for (MyProduct product : myProductList) {
                %>
                <tr>
                    <td><%=product.getPid()%>
                    </td>
                    <td><%=product.getPname()%>
                    </td>
                    <td><%=product.getPrice()%>
                    </td>
                    <td><img src="<%=request.getContextPath()%>/<%=product.getPimg()%>">
                    </td>
                    <td><%=product.getPdesc()%>
                    </td>
                    </td>
                    <td><input type="button" pid="prod_<%=product.getPid()%>" class="btn btn-primary addProd" value="添加至购物车">
                    </td>
                </tr>
                <%}
                    }%>
                </tbody>
            </table>
            <%--<a class="btn btn-success" href="<%=request.getContextPath()%>/jsp/addProduct.jsp">新增商品</a>--%>
            <a class="btn btn-success" href="<%=request.getContextPath()%>/ShoppingCartServlet">去购物车结算</a>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

购物车页面(JS的cookie操作、自定义属性传值)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>购物车页面</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        tr td img {
            width: 50px;
            height: 50px;
        }
        .prodNum {
            width: 50px;
            text-align: center;
        }
        .mybtn1, .mybtn2 {
            width: 25px;
            height: 28px;
        }
        .totalPay {
            font-weight: bold;
        }
    </style>
    <script>
        $(function () {
            $(".mybtn1").click(function () {
                var pnumText = $(this).next();
                var pNum = parseInt(pnumText.val());
                pNum -= 1;
                pnumText.val(pNum);
                document.cookie = pnumText.attr("cookieKey") + "=" + pNum + ";path=/;expires=" + new Date("2020-8-2 11:11:11");// 修改cookie
                if (pNum === 1) { // 如果数量为1,减号框不可点击
                    $(this).prop("disabled", true);
                }
                location.reload(); // 刷新页面
            });
            $(".mybtn2").click(function () {
                var pnumText = $(this).prev();
                var pNum = parseInt(pnumText.val());
                pNum += 1;
                pnumText.val(pNum);
                document.cookie = pnumText.attr("cookieKey") + "=" + pNum + ";path=/;expires=" + new Date("2020-8-2 11:11:11");// 修改cookie
                pnumText.prev().prop("disabled", false);// 减号框可点击
                location.reload(); // 刷新页面
            });

            $(".deleteProd").click(function () {
                document.cookie = $(this).attr("cookieKey") + "=" + $(this).attr("cookieVal") + ";path=/;expires=" + new Date("1969-11-11 11:11:11");// 删除cookie
                location.reload(); // 刷新页面
            })
        })
    </script>
</head>
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>
                尊贵的会员:<%=loginUser.getUname()%>
            </h3>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">购物车</a>
                </li>
            </ul>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品图片</th>
                    <th>商品描述</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<MyProduct> myProductList = (List<MyProduct>) request.getAttribute("CartProd");
                    BigDecimal totalPay = new BigDecimal("0");
                    if (myProductList != null) {
                        for (MyProduct product : myProductList) {
                            totalPay = totalPay.add(product.getProdPay());
                %>
                <tr>
                    <td><%=product.getPname()%>
                    </td>
                    <td><%=product.getPrice()%>
                    </td>
                    <td><img src="<%=request.getContextPath()%>/<%=product.getPimg()%>">
                    </td>
                    <td><%=product.getPdesc()%>
                    </td>
                    <td><input type="button" value="-" class="mybtn1"
                        <% if (product.getPnum()== 1){
                            out.print("disabled");
                    }%>>
                        <input type="text" class="prodNum" value="<%=product.getPnum()%>" readonly
                               cookieKey="prod_<%=product.getPid()%>">
                        <input type="button" value="+" class="mybtn2">
                    </td>
                    </td>
                    <td><%=product.getPrice().multiply(new BigDecimal(product.getPnum()))%>
                    </td>
                    </td>
                    <td><input type="button" class="btn btn-primary deleteProd" value="删除"
                               cookieKey="prod_<%=product.getPid()%>" cookieVal="<%=product.getPnum()%>">
                    </td>
                </tr>
                <%
                        }
                        ;
                    }
                %>
                <tr class="danger totalPay">
                    <td colspan="5">合计</td>
                    <td colspan="2"><%=totalPay%>
                    </td>
                </tr>
                </tbody>
            </table>
            <form action="<%=request.getContextPath()%>/PlaceOrderServlet" method="post">
                <input id="totalPay" type="hidden" name="totalPay" value="<%=totalPay%>"/>
                <input class="btn btn-danger" type="submit" value="下单结算" />
            </form>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

收银台页面(JS清除cookie)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>支付成功</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .scanner {
            text-align: center;
        }

        .scanner img {
            width: 100px;
            height: 100px;
            margin-top: 100px;
        }
    </style>
    <script>
        // 下单完成,清除购物车cookie
        $(function () {
            var num = 1;
            var cookies = document.cookie.split("; ");
            $.each(cookies, function (i, d) {
                var kvArr = d.split("=");
                if (kvArr[0].indexOf("prod_") === 0) {
                    num = parseInt(kvArr[1]);
                    document.cookie = kvArr[0] + "=" + num + ";path=/;expires=" + new Date("1969-11-11 11:11:11");
                }
            })
        })
    </script>
</head>
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>
                尊贵的会员:<%=loginUser.getUname()%>
            </h3>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">收银台</a>
                </li>
            </ul>
            <div class="scanner">
                <img src="<%=request.getContextPath()%>/img/paySuccess.png"/>
                <h2>支付成功</h2>
                <h3><%=request.getParameter("totalPay")%>
                </h3>
                <br><br><br>
                <a href="<%=request.getContextPath()%>/QueryAllProductServlet" type="button"
                   class="btn btn-success">确定</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

订单页(jQuery的hover效果,input隐藏域的使用)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单页</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            $(".seeDetails").css("visibility", "hidden");
            $(".mytr").hover(function () {
                $(this).find($(".seeDetails")).css("visibility", "visible");
            }, function () {
                $(this).find($(".seeDetails")).css("visibility", "hidden");
            });
        })
    </script>

</head>
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>
                欢迎您:<%=loginUser.getUname()%>
            </h3>
            <ul class="nav nav-tabs">
                <li role="presentation">
                    <a href="<%=request.getContextPath()%>/QueryAllProductServlet">首页</a>
                </li>
                <li role="presentation" class="active">
                    <a href="<%=request.getContextPath()%>/OrderServlet">订单页</a>
                </li>
            </ul>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>订单编号</th>
                    <th>付款账户</th>
                    <th>订单总额</th>
                    <th>付款时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<Map<String, Object>> list = (List<Map<String, Object>>) request.getAttribute("order");
                    if (list != null) {
                        for (Map<String, Object> map : list) {
                %>
                <tr class="mytr">
                    <td><%=map.get("oid")%>
                    </td>
                    <td><%=map.get("uname")%>
                    </td>
                    <td><%=map.get("osum")%>
                    </td>
                    <td><%=map.get("odate")%>
                    </td>
                    <td>
                        <form action="<%=request.getContextPath()%>/OrderDetailsServlet" method="post">
                            <input type="hidden" name="oid" value="<%=map.get("oid")%>"/>
                            <input type="hidden" name="uname" value="<%=map.get("uname")%>"/>
                            <input type="hidden" name="osum" value="<%=map.get("osum")%>"/>
                            <input type="hidden" name="odate" value="<%=map.get("odate")%>"/>
                            <input type="submit" class="btn btn-primary seeDetails" value="查看详细信息">
                        </form>
                    </td>
                </tr>
                <%
                        }
                    }
                %>
                </tbody>
            </table>

        </div>
    </div>
</div>

</body>
</html>

在这里插入图片描述

订单详情页(request.getParameter)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单详情页</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .mytr td img {
            width: 50px;
            height: 50px;
        }
    </style>

</head>
<body>
<%@include file="/jsp/notNullCharge.jsp" %>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>
                欢迎您:<%=loginUser.getUname()%>
            </h3>
            <ul class="nav nav-tabs">
                <li role="presentation">
                    <a href="<%=request.getContextPath()%>/QueryAllProductServlet">首页</a>
                </li>
                <li role="presentation" class="active">
                    <a href="#">订单详情页</a>
                </li>
            </ul>
            <br>
            <table class="table table-bordered">
                <tr class="danger">
                    <th>订单编号</th>
                    <th>付款账户</th>
                    <th>订单总额</th>
                    <th>付款时间</th>
                </tr>
                <tr class="info">
                    <td><%=request.getParameter("oid")%>
                    </td>
                    <td><%=request.getParameter("uname")%>
                    </td>
                    <td><%=request.getParameter("osum")%>
                    </td>
                    <td><%=request.getParameter("odate")%>
                    </td>
                </tr>
            </table>

            <table class="table table-striped">
                <thead>
                <tr class="danger">
                    <th>购买商品名称</th>
                    <th>购买商品价格</th>
                    <th>购买商品图片</th>
                    <th>购买商品数量</th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<Map<String, Object>> list = (List<Map<String, Object>>) request.getAttribute("orderDetails");
                    if (list != null) {
                        for (Map<String, Object> map : list) {
                %>
                <tr class="mytr">
                    <td><%=map.get("pname")%>
                    </td>
                    <td><%=map.get("price")%>
                    </td>
                    <td><img src="<%=request.getContextPath()%>/<%=map.get("pimg")%>"/>
                    </td>
                    <td><%=map.get("pnum")%>
                    </td>
                </tr>
                <%
                        }
                    }
                %>
                </tbody>
            </table>
            <a class="btn btn-info" href="<%=request.getContextPath()%>/OrderServlet">返回上一级</a>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

登录校验的工具页(静态包含)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    MyUser loginUser = (MyUser) session.getAttribute("loginUser");
    if (loginUser == null) {
        response.sendRedirect(request.getContextPath() + "/index.jsp");
        return;
    }
%>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章