目录
大项目之网上书城（十一）——前台完成
主要改动
新增代码
1.head.jsp
效果图
2.changeinfo.jsp
效果图
3.shou.jsp
效果图
4.changeinfo.js
5.ChangeInfoServlet
6.ShouhuoServlet
7.ShouhuoChangeServlet
8.order.jsp
9.orderitem.jsp
10.cart.jsp
11.NewOrderServlet中购物车的修改
购物车加订单效果展示
大项目之网上书城（十一）——前台完成
主要改动
昨天的问题解决了，用户界面一分为三，原本的用户页面变成了现在的浏览历史界面，并多了一个修改信息界面和收货地址设置界面。同时，购物车和订单的代码完善，之前的bug进行修改。前台显示算是完成了。还差管理员的管理界面，以及填充数据库了。哦，对了，我今天新加了一个表，专门用来存收货地址，和用户表是n对1的。
新增代码
1.head.jsp
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<!DOCTYPEhtml>
<html>
<head>
<title>Inserttitlehere</title>
<!--这里的href请写自己的bootstrap的css的链接。如果没有下载，可以用这个-->
<!--https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css-->
<linkrel="stylesheet"href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<linkrel="stylesheet"href="${pageContext.request.contextPath}/css/font.css">
<scripttype="text/javascript"src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<styletype="text/css">
a:link{text-decoration:none;color:black}/*未访问的链接*/
a:visited{text-decoration:none;color:black}/*已访问的链接*/
a:hover{text-decoration:none;color:#068}/*鼠标移动到链接上*/
a:active{text-decoration:none;color:#068}/*选定的链接，即鼠标按下去的时候不松开显示的状态*/
a{
font-size:18px;
}
</style>
</head>
<body>
<divstyle="height:100px;width:100%;float:left">
<!--BookStore字样--><!--和搜索框-->
<divstyle="line-height:120px;height:100px;width:45%;margin-left:15%;float:left">
<formaction="${pageContext.request.contextPath}/SouSuo"method="post">
<ahref="${pageContext.request.contextPath}/client/index.jsp"style="float:left;"><fontface="myFont"color="black"style="font-size:60px">BookStore</font></a>
<divclass="col-sm-6"style="margin-top:25px;">
<inputtype="text"name="word"class="form-controlinput-lg"
placeholder="请输入要搜索书籍"style="float:left"/>
</div>
<divclass="col-sm-3"style="margin-top:25px;margin-left:-20px;">
<inputtype="submit"value="搜索"class="form-controlinput-lgbtnbtn-primary"style="float:left;"/>
</div>
</form>
</div>
<!--导航栏-->
<divstyle="height:100px;width:25%;float:left;margin-right:15%">
<divstyle="height:100px;width:25%;float:left;padding-top:40px">
<ahref="${pageContext.request.contextPath}/client/cart.jsp"><spanclass="glyphiconglyphicon-shopping-cart"></span>购物车</a>
</div>
<divstyle="height:100px;width:25%;float:left;padding-top:40px">
<c:iftest="${sessionScope.user!=null}"var="f">
<ahref="${pageContext.request.contextPath}/client/order.jsp">我的订单</a>
</c:if>
<c:iftest="${sessionScope.root!=null&&!f}"var="f1">
<ahref="${pageContext.request.contextPath}/client/login.jsp">切换用户</a>
</c:if>
<c:iftest="${!f&&!f1}">
<ahref="${pageContext.request.contextPath}/client/login.jsp">登录下单</a>
</c:if>
</div>
<divstyle="height:100px;width:25%;float:left;padding-top:40px">
<c:iftest="${sessionScope.user!=null}"var="f">
<divclass="dropdown">
<aclass="dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">
<fontcolor="black">${sessionScope.user.username}</font>
<spanclass="caret"></span>
</a>
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">
<li><ahref="${pageContext.request.contextPath}/client/user.jsp">浏览历史</a></li>
<li><ahref="${pageContext.request.contextPath}/client/changeinfo.jsp">修改信息</a></li>
<li><ahref="${pageContext.request.contextPath}/client/shou.jsp">收货地址</a></li>
</ul>
</div>
</c:if>
<c:iftest="${sessionScope.root!=null&&!f}"var="f1">
<ahref="${pageContext.request.contextPath}/admin/index.jsp">管理图书</a>
</c:if>
<c:iftest="${!f&&!f1}">
<ahref="${pageContext.request.contextPath}/client/login.jsp">我的账户</a>
</c:if>
</div>
<divstyle="height:100px;width:25%;float:left;padding-top:40px">
<ahref="${pageContext.request.contextPath}/client/register.jsp">用户注册</a>
</div>
</div>
</div>
</body>
</html>
效果图
2.changeinfo.jsp
如果不填原密码的话，就代表不修改密码。
<%@pageimport="cn.edu.bdu.mc.beans.User"%>
<%@pageimport="cn.edu.bdu.mc.utils.CookieUtil"%>
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<!DOCTYPEhtml>
<html>
<head>
<title>个人信息</title>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/client/js/user.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/client/js/changeinfo.js"></script>
<styletype="text/css">
.inc{
float:left;
margin-left:3%;
margin-top:1%;
width:16%;
height:90%;
background-color:rgba(160,128,255,0.8);
}
</style>
</head>
<bodystyle="background-color:#bbb;width:1400px;margin:0auto">
<c:iftest="${user==null}"var="f">
<jsp:forwardpage="login.jsp"></jsp:forward>
</c:if>
<c:iftest="${!f}">
<!--是否退出？-->
<divstyle="position:absolute;left:46%;top:46%;height:100px;width:200px;display:none;background-color:rgba(145,162,196,0.9);border:1px;text-align:center;"id="quit1">
<h3>是否要退出？</h3><aclass="btnbtn-info"href="${pageContext.request.contextPath}/Logout">是</a> <buttonclass="btnbtn-info"id="no">否</button>
</div>
<!--调用头部页面-->
<divstyle="width:100%;height:100px;float:left">
<jsp:includepage="/client/head.jsp"></jsp:include>
</div>
<!--通用内容体大小-->
<divstyle="width:70%;height:720px;float:left;margin-left:15%;">
<divstyle="width:100%;height:250px;float:left;background-image:url(img/banner.png);background-size:100%100%;">
<divstyle="margin-top:200px;margin-left:40px;float:left;width:300px">
<fontstyle="float:left">欢迎您，<a>${user.username}</a> <c:iftest="${user.gender=='男'}"var="f">先生</c:if><c:iftest="${!f}">女生</c:if>！</font>
<fontstyle="float:left"><ahref="#"id="quit">退出登录</a></font>
</div>
</div>
<divstyle="width:100%;height:470px;float:left;background-color:rgba(85,139,84,0.8)">
<center>
<divstyle="width:45%;height:80%;margin-top:4%">
<formaction="../ChangeInfo"method="post"class="form-horizontal"role="form">
<!--form表单的每一项都由bootstrap展示效果。-->
<divclass="form-group">
<!--名称占3个长度col-sm-3，加大化input-lg-->
<labelfor="firstname"class="col-sm-3control-labelinput-lg">邮箱</label>
<!--输入框和提示一共占9个长度col-sm-9，输入框加大化input-lg，提示使用不同颜色的列表（可用警告代替，两者很相似。）-->
<divclass="col-sm-9">
<inputtype="text"name="email"id="email"class="form-controlinput-lg"
placeholder="请输入邮箱"style="width:45%;float:left"value="${user.email}"/>
<ulclass="list-group">
<liclass="list-group-itemlist-group-item-info"style="float:left;width:55%;"id="text1">请输入有效的邮箱地址</li>
<liclass="list-group-itemlist-group-item-danger"style="float:left;width:55%;display:none"id="emailMsg"></li>
<liclass="list-group-itemlist-group-item-success"style="float:left;width:55%;display:none"id="emailS">通过</li>
</ul>
</div>
</div>
<!--以下如法炮制-->
<divclass="form-group">
<labelfor="lastname"class="col-sm-3control-labelinput-lg">昵称</label>
<divclass="col-sm-9">
<inputtype="text"name="username"id="username"class="form-controlinput-lg"
placeholder="请输入昵称"style="width:45%;float:left"value="${user.username}"/>
<ulclass="list-group">
<liclass="list-group-itemlist-group-item-info"style="float:left;width:55%;"id="text2">昵称请设置4~20位字符</li>
<liclass="list-group-itemlist-group-item-danger"style="float:left;width:55%;display:none"id="usernameMsg"></li>
<liclass="list-group-itemlist-group-item-success"style="float:left;width:55%;display:none"id="usernameS">通过</li>
</ul>
</div>
</div>
<divclass="form-group">
<labelfor="firstname"class="col-sm-3control-labelinput-lg">原密码</label>
<divclass="col-sm-9">
<inputtype="password"name="yuan"
class="form-controlinput-lg"placeholder="请输入原密码"style="width:45%;float:left"id="yuan"/>
<ulclass="list-group">
<liclass="list-group-itemlist-group-item-info"style="float:left;width:55%;"id="text4">此项为空则不修改密码</li>
<liclass="list-group-itemlist-group-item-danger"style="float:left;width:55%;display:none"id="yuanMsg">密码错误</li>
<liclass="list-group-itemlist-group-item-success"style="float:left;width:55%;display:none"id="yuanS">通过</li>
</ul>
</div>
</div>
<divclass="form-group">
<labelfor="firstname"class="col-sm-3control-labelinput-lg">新密码</label>
<divclass="col-sm-9">
<inputtype="password"name="password"id="password"
class="form-controlinput-lg"placeholder="请输入新密码"style="width:45%;float:left"/>
<ulclass="list-group">
<liclass="list-group-itemlist-group-item-info"style="float:left;width:55%;"id="text3">密码请设置4~20位字符</li>
<liclass="list-group-itemlist-group-item-danger"style="float:left;width:55%;display:none"id="passwordMsg"></li>
<liclass="list-group-itemlist-group-item-success"style="float:left;width:55%;display:none"id="passwordS">通过</li>
</ul>
</div>
</div>
<divclass="form-group">
<labelfor="lastname"class="col-sm-3control-labelinput-lg">确认密码</label>
<divclass="col-sm-9">
<inputtype="password"name="repassword"id="repassword"
class="form-controlinput-lg"placeholder="请再次输入密码"style="width:45%;float:left"/>
<ulclass="list-group">
<liclass="list-group-itemlist-group-item-danger"style="float:left;width:55%;display:none"id="confirmMsg"></li>
<liclass="list-group-itemlist-group-item-success"style="float:left;width:55%;display:none"id="confirmS">通过</li>
</ul>
</div>
</div>
<divclass="form-group">
<labelfor="firstname"class="col-sm-3control-labelinput-lg">性别</label>
<divclass="col-sm-9">
<labelclass="radio-inlineinput-lg">
<inputtype="radio"name="gender"value="男"checked="checked"/>男
</label>
<labelclass="radio-inlineinput-lg">
<inputtype="radio"name="gender"value="女"/>女
</label>
</div>
</div>
<divclass="form-group">
<labelfor="firstname"class="col-sm-1control-labelinput-lg"></label>
<divclass="col-sm-5">
<inputtype="submit"name="submit"value="修改"
class="form-controlinput-lgbtnbtn-primary"style="width:100%;float:left"/>
</div>
<divclass="col-sm-5">
<inputtype="reset"name="reset"value="重置"id="re"
class="form-controlinput-lgbtnbtn-warning"style="width:100%;float:left"/>
</div>
</div>
</form>
</div>
</center>
</div>
</div>
<!--调用底部页面-->
<divstyle="width:100%;height:60px;float:left">
<jsp:includepage="/client/foot.jsp"></jsp:include>
</div>
</c:if>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html