登錄頁面
<%@ 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");
if (pNum === 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");
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");
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>
$(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;
}
%>