登录页面
<%@ 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;
}
%>