文章目录
登录页面注册页面（含表单校验）首页（商品展示，JS中cookie的操作）购物车页面（JS的cookie操作、自定义属性传值）收银台页面（JS清除cookie）订单页（jQuery的hover效果，input隐藏域的使用）订单详情页（request.getParameter）登录校验的工具页（静态包含）
登录页面
<%@ 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;
}
%>
