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;
    }
%>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章