Java Web学习：西蒙购物网【下】
四、实现步骤
（九）准备图片资源
在web目录里创建images目录，存放项目所需图片文件：
（十）CSS样式文件
在web目录里常见css子目录，在里面创建main.css文件：
/* 样式 */
body {
margin: 0px;
text-align: center;
background: url("../images/frontBack.jpg") no-repeat;
background-size: 100%
}
table {
margin: 0 auto;
font-size: 14px;
color: #333333;
border-width: 1px;
border-color: khaki;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gainsboro;
background-color: honeydew;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gainsboro;
background-color: #ffffff;
}
/*登录页面样式*/
.login {
width: 400px;
height: 340px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -170px 0 0 -200px;
}
.login .websiteTitle, .title {
border: solid 1px floralwhite;
}
/*注册页面样式*/
.register {
width: 400px;
height: 350px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -175px 0 0 -200px;
}
/*显示类别页面样式*/
.showCategory {
width: 400px;
height: 350px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -150px 0 0 -200px;
}
/*生成订单页面样式*/
.makeOrder {
width: 400px;
height: 400px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -200px 0 0 -200px;
}
/*显示订单页面样式*/
.showOrder {
width: 400px;
height: 400px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -200px 0 0 -200px;
}
（十一）JavaScript脚本文件
在web目录里创建scripts子目录，在里面创建check.js文件：
/**
* 检验登录表单
*
* @returns {Boolean}
*/
function checkLoginForm() {
// 获取用户名文本框
var username = document.getElementById("username");
// 获取密码文本框
var password = document.getElementById("password");
// 非空校验
if (username.value == "") {
alert("用户名不能为空！");
// 让用户名文本框获得焦点
username.focus();
return false;
}
if (password.value == "") {
alert("密码不能为空！");
// 让密码文本框获得焦点
password.focus();
return false;
}
return true; // 表明可以提交数据到服务器端
}
/**
* 检验注册表单
* @returns {Boolean}
*/
function checkRegisterForm() {
// 获取用户名文本框
var username = document.getElementById("username");
// 获取密码文本框
var password = document.getElementById("password");
// 获取手机号码文本框
var telephone = document.getElementById("telephone");
// 非空校验
if (username.value == "") {
alert("用户名不能为空！");
// 让用户名文本框获得焦点
username.focus();
return false;
}
if (password.value == "") {
alert("密码不能为空！");
// 让密码文本框获得焦点
password.focus();
return false;
}
// 检验手机号码
var patrn = "/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/";
if (!patrn.exec(telephone)) {
alert("非法手机号！");
// 让手机号码文本框获得焦点
telephone.focus();
return false;
}
return true; // 表明可以提交数据到服务器端
}
（十二）添加JSTL的jar包
在WEB-INF\lib目录里添加支持jstl的jar包：
（十三）展现层页面（XXX.jsp）
1、登录页面login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
用户登录
西蒙购物网
用户登录
在web.xml文件里将login.jsp设置为首页文件：
重启服务器：
不输入用户名与密码，单击【登录】按钮：
输入用户名，但不输入密码，单击【登录】按钮：
输入管理员用户名与密码：admin，12345
去服务器端控制台查看输出信息：
重启服务器，再以普通用户登录：郑晓红，11111
去服务器端控制台查看输出信息：
重启服务器，输入错误的用户名或密码：李文丽，12340：
去服务器端控制台查看输出信息：
2、注册页面register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
用户注册
西蒙购物网
用户注册
启动服务器，切换到注册页面：
什么也不输入，单击【注册】按钮：
输入用户名，单击【注册】按钮：
输入账号，密码，电话：
单击【确定】按钮，跳转到登录页面：
打开用户表，查看新添加的用户：
3、显示商品类别页面showCategory.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
显示商品类别
启动服务器，显示登录页面，输入普通用户：郑晓红，11111
单击【登录】按钮，跳转到显示商品类别页面
单击【家用电器】超链接：
进入服务器端查看输出信息：
返回到刚才显示商品类别页面，单击【注销】超链接，返回登录页面：
4、显示购物车页面showCart.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
显示购物车
${username}的购物车
商品编号
商品名称
销售价格
购买数量
合计金额
用户操作
${shoppingItem.id}
${shoppingItem.name}
￥${shoppingItem.price}
${shoppingItem.amount}
￥${shoppingItem.sum}
删除
总金额
￥0.00
￥${totalPrice}
生成订单
生成订单
重启服务器，以普通用户登录后，访问http://localhost:8080/simonshop/frontend/showCart.jsp：
5、显示商品页面showProduct.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
显示商品信息
西蒙购物网
登录用户：${username}
注销
欢迎选购【${categoryName}】类商品
商品编号：
${product.id}
商品名称：
${product.name}
销售价格：
${product.price}
上架时间：
用户操作：
加入购物车
返回商品类别页面
启动服务器，显示登录页面，输入普通用户：郑晓红，11111：
单击【登录】按钮，跳转到显示商品类别页面：
单击【家用电器】超链接：
有问题，类别名没有显示，修改ShowProductServlet，将类别名放在session里，而不是通过url传递参数。
重启服务器，登录成功后，选择【家用电器】类别：
我们再测试加入购物车操作：
6、生成订单页面makeOrder.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
生成订单
7、显示订单页面showOrder.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
显示订单
西蒙购物网
生成订单
订单编号
${lastOrder.id}
用户名
${lastOrder.username}
联系电话
${lastOrder.telephone}
总金额
${lastOrder.totalPrice}
送货地址
${lastOrder.deliveryAddress}
我们来测试测试生成订单与显示订单页面：
重启服务器，以普通用户登录，选择【家用电器】类商品，在显示商品页面，将一些商品加入购物车，查看购物车情况：
单击【生成订单】超链接，跳转到【生成订单】页面：
输入联系电话与送货地址：
单击【支付】按钮，提示支付成功：
单击【确定】按钮，返回登录页面：
8、后台管理主页面management.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
西蒙购物网站后台管理
9、后台管理主页面左面板页面left.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
后台管理左面板
用户管理
查看用户
添加用户
更新用户
删除用户
类别管理
查看类别
添加类别
更新类别
删除类别
商品管理
查看商品
添加商品
更新商品
删除商品
订单管理
查看订单
删除订单
10、后台管理主页面顶面板页面top.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
后台管理顶面板
11、后台管理主页面主面板页面main.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
后台管理主面板
重启服务器，以管理员身份登录（admin：12345）进入后台管理页面：
12、查看用户页面showUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
显示用户信息
登录用户：${username}
注销
用户列表
编号
用户名
密码
电话
注册时间
权限
${user.id}
${user.username}
${user.password}
${user.telephone}
管理员
普通用户
重启服务器，以管理员身份登录，进入后台管理页面，查看用户：
13、待做页面todo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
待做页面
抱歉，此页面正在建设中……
重启服务器，以管理员身份登录，单击【添加用户】：
五、实训总结
本次实训一共用时一个月（四个周一周四节课），写了一个项目西蒙购物网（共四部分），本项目采用MVC模式，视图层采用JSP页面（使用了核心标签库JSTL），，控制层采用Servlet（获取页面提交数据，连接后台数据库进行处理，根据处理结果进行页面跳转），模型层采用JDBC连接了数据库，使用后台管理本项目，后台管理只完成了用户管理的【查看用户】功能，其余的，类别管理、商品管理与订单管理，并没有做，只待后续完成。通过本项目的学习，使我更进一步地了解了JSP、数据库等的使用，后续我也希望我能继续学好这门课程。