天猫整站（简易版）SSM（一）

目录

一、项目简介

1.1 技术准备

1.2 开发流程

1.2.1 需求分析

1.2.2 表结构设计

1.2.3 原型

1.2.4 后台-分类管理

1.2.5 项目重构

1.2.6 后台-其他管理

1.2.7 前台-首页

1.2.8 前台无需登录

1.2.9 前台需要登录

1.2.10 总结

二、需求分析-展示

2.1 概述

2.1.1 前端展示

2.1.2 前端交互

2.1.3 后台功能

2.2 首页

2.2.1 整体效果

2.2.2 顶部横向导航

2.2.3 左侧纵向导航

2.2.4 商品显示

2.3 产品页

2.3.1 商品图片展示 

2.3.2 商品缩略图

2.3.3 商品基本信息展示

2.3.4 商品详情

2.3.5 评价信息

2.3.6 商品详情图片

2.4 分类页

2.4.1 显示分类图片

2.4.2 显示分类下的所有产品

2.5 搜索结果页

2.6 购物车查看页

2.7 结算页

2.8 确认支付页

2.9 支付成功页

2.10 我的订单页

2.11 确认收货页

2.11.1 显示订单项内容

2.12.2 显示订单详细信息

2.12 评价页

2.13 页头信息展示

2.13.1 未登录状态

2.13.2 已登录状态

---

一、项目简介

为了加深对SSM框架的学习，做一个简易版的天猫网站。

1.1 技术准备

为了完成这个J2ee项目，需要掌握如下技术：

前端：HTML、CSS、JavaScript、jQuery、Bootstrap
J2EE：Tomcat、Servlet、JSP、Filter

框架：SSM

数据库：MySQL

开发工具： Intellij IDEA、Maven

1.2 开发流程

模仿天猫整站是一个比较大的项目，将按照商业项目的开发流程有条不紊的一一展开：

1.2.1 需求分析

首先确定要做哪些功能，需求分析包括前台和后台。 

前台又分为单纯要展示的哪些功能：需求分析展示，以及会提交数据到服务端的哪些功能：需求分析交互。

1.2.2 表结构设计

接着是表结构设计，表结构设计是围绕功能需求进行，如果表结构设计有问题，那么将会影响功能的实现。除了表与表关系，建表SQL语句之外，为了更好的理解表结构以及关系，还把表与页面功能一一对应起来

1.2.3 原型

接着是界面原型，与客户沟通顺畅的项目设计流程里一定会有原型这个环节。 借助界面原型，可以低成本，高效率的与客户达成需求的一致性。 同样的，原型分为了前台原型和后台原型。

1.2.4 后台-分类管理

接下来开始进行功能开发，按照模块之间的依赖关系，首先进行后台-分类管理功能开发。具体的功能就是： 查询，分页，增加，删除，编辑，修改。 

1.2.5 项目重构

在完成了分类管理之后，会发现使用SSM框架存在的一些问题，比如SQL语句都要手动编写，效率低下，并且容易出错，分页方式也需要采用手动方式等等，这些问题既会导致开发效率降低，也容易诱发更多编码错误。

1.2.6 后台-其他管理

在把后台-分类管理 完成以后，就可以加速进行 后台其他页面的开发。

1.2.7 前台-首页

前台也包括许多功能， 与后台-分类管理类似的，首先实现前台-首页这个页面。前台-首页 完成之后，再进行其他前台功能的开发。

1.2.8 前台无需登录

从前台模块之间的依赖性，以及开发顺序的合理性来考虑，把前台功能分为了 无需登录 即可使用的功能，和需要登录 才能访问的功能。 建立在前一步前台-首页的基础之上，开始进行一系列的无需登录功能开发。

1.2.9 前台需要登录

最后是需要登录的前台功能。 这部分功能基本上都是和购物相关的。 因此，一开始先把购物流程 单独拿出来捋清楚，其中还特别注明了购物流程环节与表关系，这样能够更好的建立对前端购物功能的理解。随着这部分功能的开发，就会进入订单生成部分，在此之前，先准备了一个 订单状态图，在理解了这个图之后，可以更好的进行订单相关功能的开发。

1.2.10 总结

最后总结整个项目的项目结构，都实现了哪些典型场景，运用了哪些设计模式，把学习到的知识都沉淀下来，转换，消化，吸收为自己的技能

二、需求分析-展示

2.1 概述

2.1.1 前端展示

在前端页面上显示数据库中的数据，如首页，产品页，购物车，分类页面等等。

2.1.2 前端交互

这里的交互指的是通过POST,GET等http协议，与服务端进行同步或者异步数据交互。 比如购买，购物车，生成订单，登录等等功能。

2.1.3 后台功能

对支撑整站需要用到的数据，进行管理维护。 比如分类管理，分类属性管理， 产品管理，产品图片管理，用户管理，订单管理等等。

2.2 首页

2.2.1 整体效果

2.2.2 顶部横向导航

2.2.3 左侧纵向导航

当鼠标移动到某一个纵向分类连接的时候，显示这个分类下的推荐商品。

2.2.4 商品显示

按照每种分类显示5个商品的方式，显示所有17种分类

2.3 产品页

2.3.1 商品图片展示 

显示分辨率为950X100的当前商品对应的分类图片

2.3.2 商品缩略图

2.3.3 商品基本信息展示

2.3.4 商品详情

2.3.5 评价信息

2.3.6 商品详情图片

显示5张商品相关图片

2.4 分类页

2.4.1 显示分类图片

2.4.2 显示分类下的所有产品

2.5 搜索结果页

显示满足查询条件的商品

2.6 购物车查看页

在购物车种显示订单选项

2.7 结算页

在结算页面显示被选中的订单项

2.8 确认支付页

确认支付页面显示本次订单的金额总数

2.9 支付成功页

付款成功时，显示本次付款金额

2.10 我的订单页

显示所有订单，以及对应的订单项

2.11 确认收货页

2.11.1 显示订单项内容

2.12.2 显示订单详细信息

2.12 评价页

 显示评价的商品信息

 评价成功后，显示当前所有商品的评价信息

2.13 页头信息展示

2.13.1 未登录状态

2.13.2 已登录状态