第一篇文章链接:模仿天猫实战【SSM版】——项目起步
第二篇文章链接:模仿天猫实战【SSM版】——后台开发
总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了,比想象中的开发周期要久的多,并且大部分的时间都花在了前端页面的编写上...仅以此文来总结一下
项目总结 功能一览表大致理了一下功能列表,应该是齐全的,其中推荐链接暂时不支持修改。
项目页面一览表后端页面: 后台所需要用到的页面,从名字很好区分功能,其中 index.jsp 只有一行代码用于跳转
公共页面: 都是前端页面,从对天猫页面的分析提取出一些复用比较高的页面用于动态的包含在其他前端页面中。
前台页面:前台相较于后台页面 CSS 更加复杂,交互也更多,我把每一个页面的需要用到的 css 和 js 代码均保留在了当前 JSP 页面中,方便浏览学习。
项目主要逻辑类控制器(Controller): 用于控制页面的逻辑, 提取出一个 PageController 来专门控制页面的跳转,ForeController 用于前台所有的逻辑操作
拦截器(Interceptor): LoginInteceptor 用于对登录进行判断,因为有一些页面需要登录之后才能访问的,例如:购物车;OtherInterceptor 用于向页面中添加一些其他的数据,例如:购物车数量。
业务层(Service层): 业务处理层,其中封装了 Dao 层,用于完成主要的逻辑处理。
不需要登录就能访问的页面(以下为拦截器中的代码片段):
其中包括:主页、搜索结果页、产品展示页、登录页、注册页。
还包括一些其他的路径用于处理逻辑,test 为开发过程中用于测试的页面
前台总结前台花费了大部分的时间,不仅仅是繁杂的样式和页面需要自己去编写,业务逻辑也比后台要复杂一些,因为是模仿,所以大部分的 CSS 我都是参照着天猫官网写的(利用FireFox来查看元素和元素样式):
另外一部分是参照了how2j.cn上模仿的前端教程:戳这里
首页简要的首页大概就是这样,请别在意轮播下面的【女装/内衣】中的产品,因为在4月份的时候,第一个分类的名字还叫【女装 /男装 /内衣】(好像是这个),后来项目写着写着突然改了...
观察大部分的页面,其实都是包含了其中的三个部分:
即顶部导航栏、一个搜索框、还有底部,我们可以单独把他们写成一个 jsp ,并动态的包含在我们的页面中
首页分类栏
因为一开始,我以为分类栏中保存的是一些直接的产品,但是分析前端的时候发现它们只是一些 hot-word 热词,所以为了和天猫的首页保持一致,我直接把分类栏写死了写成了一个单独的 JSP 文件并包含进了主页:
我还自己写了一个小程序,用来将这些 hor-word 转换成对应的 html 代码,不然这手写 2000 行可能真的够呛...
产品搜索页并且支持按照【综合(销量*评价)】、【人气(评论量)】、【销量】、【价格】来排序产品,使用 Java 8 的新特性来完成该功能:
产品展示页所有的产品展示图片均是来自how2j.com上的一张图,前面有链接,表示有参照这个教程来做。
购买页在产品页中点击立即购买,或者在购物车点击结算都会跳转到该页面,创建订单。
付款页面无耻的黏了一张自己的收款二维码...
付款成功页当点击确认支付按钮之后,就会跳转到该页面来。
购物车页该页面支持删除订单和对订单项进行相关的操作,点击结算页面跳转到购买页。
我的订单页该页面用于对订单的管理,可以查看和操作订单。
评价页当完成购买,即经过购买→支付→发货→确认收货的流程之后,即可对产品进行评论,评论完成后能看到其他用户的评价信息:
注册页用户注册页,在前端判断两次密码是否相同,并提交给后台判断用户名是否唯一。
登录页因为分辨率的问题有一点 BUG,不过不影响体验,登录之后顶部导航栏出现用户信息:
后台总结