(一)资源层
(1)图片资源
在web目录里创建images目录,存放项目所需要的图片资源
(2)CSS风格样式资源
在web目录里创建目录css,在里面创建main.css文件
(二)引入JavaScript脚本文件
在web目录里创建script子目录,在里面创建check.js文件
(三)添加第三方jar包:JSTL的jar包
(四)视图层的页面(xxx.jsp)
1、登录页面login.jsp
在web.xml文件里更改配置,将login.jsp设置为首页
重启服务器:
重启服务器,再以普通用户登录:郑晓红,11111
重启服务器,输入错误的用户名或密码:李文丽,12340
2、注册页面register.jsp
3、显示商品类别页面showCategory.jsp
单击【家用电器】超链接:
我们去服务器端控制台查看输出信息:
4、显示购物车页面showCart.jsp
这个页面要包含在显示商品页面里,因此没有导入CSS样式文件。
重启服务器,以普通用户登录后,访问http://localhost:8080/simonshop/frontend/showCart.jsp
5、显示商品页面showProduct.jsp
6、生成订单页面makeOrder.jsp
7、显示订单页面showOrder.jsp
下面我们来测试生成订单与显示订单页面。
重启服务器,以普通用户登录,选择【家用电器】类商品,在显示商品页面,将一些商品加入购物车,查看购物车情况:
8、后台管理主页面management.jsp
9、后台管理主页面左面板页面left.jsp
10、后台管理主页面顶面板页面top.jsp
11、后台管理主页面主面板页面main.jsp
重启服务器,以管理员身份登录(admin:12345)进入后台管理页面:
12、查看用户页面showUser.jsp
重启服务器,以管理员身份登录,进入后台管理页面,查看用户:
13、待做页面todo.jsp
重启服务器,以管理员身份登录,单击【添加用户】:
–总结–
本项目采用MVC模式,视图层采用JSP页面(使用了核心标签库JSTL,以前的项目版本没有采用核心标签库,采用的是纯粹的JSP脚本<%…%>),控制层采用Servlet(获取页面提交数据,连接后台数据库进行处理,根据处理结果进行页面跳转),模型层采用JDBC操作后台数据库(老师建议采用数据源的方式获取数据库连接,我也不知为什么)。
如果希望界面美观一点,老师推荐可以考虑使用前端框架,比如比如Bootstrap,页面效果如下图所以: