基于Java(SSM)+MySQL模仿天猫实战【100013018】

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