模仿天猫实战【SSM】——总结

第一篇文章链接:模仿天猫实战【SSM版】——项目起步
第二篇文章链接:模仿天猫实战【SSM版】——后台开发

总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了,比想象中的开发周期要久的多,并且大部分的时间都花在了前端页面的编写上...仅以此文来总结一下

模仿天猫实战【SSM】——总结

项目总结 功能一览表

模仿天猫实战【SSM】——总结

大致理了一下功能列表,应该是齐全的,其中推荐链接暂时不支持修改。

项目页面一览表

模仿天猫实战【SSM】——总结

后端页面: 后台所需要用到的页面,从名字很好区分功能,其中 index.jsp 只有一行代码用于跳转

公共页面: 都是前端页面,从对天猫页面的分析提取出一些复用比较高的页面用于动态的包含在其他前端页面中。

前台页面:前台相较于后台页面 CSS 更加复杂,交互也更多,我把每一个页面的需要用到的 css 和 js 代码均保留在了当前 JSP 页面中,方便浏览学习。

项目主要逻辑类

模仿天猫实战【SSM】——总结

控制器(Controller): 用于控制页面的逻辑, 提取出一个 PageController 来专门控制页面的跳转,ForeController 用于前台所有的逻辑操作

拦截器(Interceptor): LoginInteceptor 用于对登录进行判断,因为有一些页面需要登录之后才能访问的,例如:购物车;OtherInterceptor 用于向页面中添加一些其他的数据,例如:购物车数量。

业务层(Service层): 业务处理层,其中封装了 Dao 层,用于完成主要的逻辑处理。

不需要登录就能访问的页面(以下为拦截器中的代码片段):

模仿天猫实战【SSM】——总结

其中包括:主页、搜索结果页、产品展示页、登录页、注册页。

还包括一些其他的路径用于处理逻辑,test 为开发过程中用于测试的页面

前台总结

前台花费了大部分的时间,不仅仅是繁杂的样式和页面需要自己去编写,业务逻辑也比后台要复杂一些,因为是模仿,所以大部分的 CSS 我都是参照着天猫官网写的(利用FireFox来查看元素和元素样式):

模仿天猫实战【SSM】——总结

另外一部分是参照了how2j.cn上模仿的前端教程:戳这里

首页

模仿天猫实战【SSM】——总结

简要的首页大概就是这样,请别在意轮播下面的【女装/内衣】中的产品,因为在4月份的时候,第一个分类的名字还叫【女装 /男装 /内衣】(好像是这个),后来项目写着写着突然改了...

观察大部分的页面,其实都是包含了其中的三个部分:

模仿天猫实战【SSM】——总结

即顶部导航栏、一个搜索框、还有底部,我们可以单独把他们写成一个 jsp ,并动态的包含在我们的页面中

首页分类栏

因为一开始,我以为分类栏中保存的是一些直接的产品,但是分析前端的时候发现它们只是一些 hot-word 热词,所以为了和天猫的首页保持一致,我直接把分类栏写死了写成了一个单独的 JSP 文件并包含进了主页:

模仿天猫实战【SSM】——总结

我还自己写了一个小程序,用来将这些 hor-word 转换成对应的 html 代码,不然这手写 2000 行可能真的够呛...

产品搜索页

模仿天猫实战【SSM】——总结

并且支持按照【综合(销量*评价)】、【人气(评论量)】、【销量】、【价格】来排序产品,使用 Java 8 的新特性来完成该功能:

模仿天猫实战【SSM】——总结

产品展示页

模仿天猫实战【SSM】——总结

所有的产品展示图片均是来自how2j.com上的一张图,前面有链接,表示有参照这个教程来做。

购买页

模仿天猫实战【SSM】——总结

在产品页中点击立即购买,或者在购物车点击结算都会跳转到该页面,创建订单。

付款页面

模仿天猫实战【SSM】——总结

无耻的黏了一张自己的收款二维码...

付款成功页

模仿天猫实战【SSM】——总结

当点击确认支付按钮之后,就会跳转到该页面来。

购物车页

模仿天猫实战【SSM】——总结

该页面支持删除订单和对订单项进行相关的操作,点击结算页面跳转到购买页。

我的订单页

模仿天猫实战【SSM】——总结

该页面用于对订单的管理,可以查看和操作订单。

评价页

模仿天猫实战【SSM】——总结

当完成购买,即经过购买→支付→发货→确认收货的流程之后,即可对产品进行评论,评论完成后能看到其他用户的评价信息:

模仿天猫实战【SSM】——总结

注册页

模仿天猫实战【SSM】——总结

用户注册页,在前端判断两次密码是否相同,并提交给后台判断用户名是否唯一。

登录页

模仿天猫实战【SSM】——总结

因为分辨率的问题有一点 BUG,不过不影响体验,登录之后顶部导航栏出现用户信息:

模仿天猫实战【SSM】——总结

后台总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywgpy.html