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

第一篇文章链接：模仿天猫实战【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 行可能真的够呛…

产品搜索页