目录

一、需求分析-交互

1.1 商品排序

1.2 立即购买

1.2.1 未登录

1.2.2 登录

1.3 加入购物车

1.3.1 未登录

1.3.2 登录

1.4 调整订单项数量

1.5 删除订单项

1.6 生成订单

1.7 订单页功能

1.8 确认付款

1.9 确认收货

1.10 提交评价信息

1.11 登录

1.12 注册

1.13 退出

1.14 搜索

1.15 总结

二、需求分析-后台

2.1 分类管理&＃xff08;CRUD&＃xff09;

2.1.1 分页查询

2.1.2 新增

2.1.3修改

2.1.4 删除

2.2 属性管理&＃xff08;CRUD&＃xff09;

2.2.1 属性的概念

2.2.2 分页查询

 2.2.3 新增

2.2.4 修改

2.2.5 删除

2.3 产品管理&＃xff08;CRUD&＃xff09;

2.3.1 分页查询

2.3.2 新增产品

2.3.3 编辑修改

2.3.4 删除

2.4 产品图片管理

2.5 产品属性设置

2.6 用户管理

2.7 订单管理

2.7.1 订单分页查询

2.7.2 查看详情

2.7.3 发货

2.8 总结

一、需求分析-交互

1.1 商品排序

但是价格区间是在前端完成的&＃xff0c;并没有后台交互。

1.2 立即购买

1.2.1 未登录

在产品页&＃xff0c;未登录状态的时候&＃xff0c;点击立即购买

1.2.2 登录

在产品页&＃xff0c;如果已经登录&＃xff0c;点击购买&＃xff0c;会提交数据到服务端&＃xff0c;生成订单项&＃xff0c;并且跳转到结算页面。

1.3 加入购物车

1.3.1 未登录

在未登录状态&＃xff0c;点击加入购物车&＃xff0c;会弹出模态窗口

1.3.2 登录

在已登录状态&＃xff0c;点击加入购物车&＃xff0c;使用ajax异步提交数据到服务端&＃xff0c;生成订单项&＃xff0c;并且使当前 "加入购物车" 按钮变得不可点击

1.4 调整订单项数量

在购物车页面&＃xff0c;调整订单项数量

1.5 删除订单项

在购物车页面&＃xff0c;删除订单项&＃xff0c;首先弹出模态窗口确认是否要删除&＃xff0c;如果要删除&＃xff0c;则通过Ajax异步发送请求到服务端&＃xff0c;并且在当前页面删除该条订单项。

1.6 生成订单

在结算页面&＃xff0c;提交订单时候&＃xff0c;根据结算页面的收货人信息&＃xff0c;订单项信息&＃xff0c;生成订单数据

1.7 订单页功能

订单页面上有3个按钮&＃xff0c;付款&＃xff0c;确认收货和评价&＃xff0c;这些按钮都没有提交数据到服务端&＃xff0c;而是提交到下一个页面的二次操作&＃xff0c;才提交数据到服务端的。

1.8 确认付款

点击确认支付&＃xff0c;提交本信息到服务端&＃xff0c;服务端修改订单中的支付日期

1.9 确认收货

确认收货页面&＃xff0c;点击确认支付&＃xff0c;提交数据到服务端&＃xff0c;并且修改订单中的确认收货日期

1.10 提交评价信息

提交评价信息到后台

1.11 登录

输入正确账号密码&＃xff0c;登录成功后跳转到首页&＃xff0c;失败提示错误信息。

1.12 注册

1.13 退出

1.14 搜索

提交关键字到服务端&＃xff0c;服务端查询数据库&＃xff0c;并返回匹配的产品

1.15 总结

绿色表示展示的需求
红色表示与服务器有交互的需求

首页

• 在横向导航栏上提供4个分类连接
• 在纵向导航栏上提供全部17个分类连接
• 当鼠标移动到某一个纵向分类连接的时候&＃xff0c;显示这个分类下的推荐商品
• 按照每种分类&＃xff0c;显示5个商品的方式显示所有17种分类

产品页

• 显示分辨率为950x100的当前商品对应的分类图片
• 显示本商品的5个单独图片
• 商品的基本信息&＃xff0c;如标题&＃xff0c;小标题&＃xff0c;加个&＃xff0c;销量&＃xff0c;评价数量&＃xff0c;库存等
• 商品详情
• 评价信息
• 5张商品详细图片
• 立即购买
• 加入购物车

分类页

• 显示分辨率为950x100的当前分类图片
• 显示本分类下的所有产品
• 分类页排序

搜索结果页

• 显示满足查询条件的商品

购物车查看页

• 在购物车中显示订单项
• 调整订单项数量
• 删除订单项

结算页

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

确认支付页

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

支付成功页

• 付款成功时&＃xff0c;显示本次付款金额

我的订单页

• 显示所有订单&＃xff0c;以及对应的订单项

确认收货页

• 显示订单项内容
• 显示订单信息&＃xff0c;收货人地址等
• 确认收货

评价页

• 显示要评价的商品信息&＃xff0c;商品当前的总评价数
• 评价成功后&＃xff0c;显示当前商品所有的评价信息
• 提交评价信息

页头信息展示

• 未登录状态
• 已登录状态
• 登录
• 注册
• 退出

所有页面

• 搜索

二、需求分析-后台

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

2.1 分类管理&＃xff08;CRUD&＃xff09;

2.1.1 分页查询

2.1.2 新增

2.1.3修改

2.1.4 删除

2.2 属性管理&＃xff08;CRUD&＃xff09;

2.2.1 属性的概念

这里的属性&＃xff0c;指的是产品属性。 比如太阳镜这种产品&＃xff0c;有镜片材质&＃xff0c;适合脸型&＃xff0c;眼镜配件类型等属性。而平板电视这种产品&＃xff0c;有操作系统&＃xff0c;能效等级&＃xff0c;网络连接方式等属性。

不同的产品&＃xff0c;有不同的属性&＃xff0c;以及对应的属性值。按照传统的数据库的设计方式&＃xff0c;就会在产品表里设置不同的字段&＃xff0c;而天猫的产品五花八门&＃xff0c;有成百上千种不同的属性&＃xff0c;难道给一张产品表设置成百上千的字段吗&＃xff1f; 这样做出来的系统&＃xff0c;肯定是不具备维护性的。

为了解决这个问题&＃xff0c;引入了产品属性这个概念&＃xff0c;假定同一类产品&＃xff0c;都有相同的属性。比如所有的女装&＃xff0c;都有 材质成分&＃xff0c;尺码&＃xff0c;上市年份季节等等属性。 具体到某一件女装&＃xff0c;其区别只是在于属性值不一样。这样在一个分类下&＃xff0c;就可以维护一系列的产品属性&＃xff0c;针对于不同的产品&＃xff0c;再设置不同的值&＃xff0c;即可达到保存和维护大量产品属性值的效果。

2.2.2 分页查询

 2.2.3 新增

2.2.4 修改

点击编辑按钮后跳转到修改页面 

2.2.5 删除

2.3 产品管理&＃xff08;CRUD&＃xff09;

2.3.1 分页查询

2.3.2 新增产品

2.3.3 编辑修改

点击编辑按钮&＃xff0c;然后进行修改

2.3.4 删除

2.4 产品图片管理

一件产品&＃xff0c;对应多条 单个图片&＃xff0c;即缩略图
一件产品&＃xff0c;对应多条 详情图片

所以这部分单独做一个页面进行管理

2.5 产品属性设置

根据前边的属性管理可知&＃xff0c;一种产品所具备的属性&＃xff0c;在其对应的分类中进行了维护。

那么&＃xff0c;要修改产品的这些属性值&＃xff0c;就在本页面进行。

这里采用异步提交方式&＃xff0c;编辑即修改,修改成功用绿色边框表示

2.6 用户管理

用户管理就提供了一个分页查询&＃xff0c;做的比较简约&＃xff0c;几个原因&＃xff1a;
1. 用户是不能删除的
2. 用户信息的修改&＃xff0c;应该交由前端由客户自己修改&＃xff0c;比如密码&＃xff0c;基本信息等
3. 用户的增加&＃xff0c;是前端注册导致的&＃xff0c;后台不负责用户的增加
所以&＃xff0c;增&＃xff0c;删&＃xff0c;改功能在后台就不提供了&＃xff0c;仅仅提供一个分页查询

2.7 订单管理

2.7.1 订单分页查询

2.7.2 查看详情

2.7.3 发货

2.8 总结

1. 分类管理
   • 分页查询
   • 新增分类
   • 编辑修改
   • 删除
2. 属性管理
   • 属性概念
   • 分页查询
   • 新增属性
   • 编辑修改
   • 删除
3. 产品管理
   • 分页查询
   • 新增产品
   • 编辑修改
   • 删除
4. 产品图片管理
   • 产品图片概念
   • 产品图片管理
5. 产品属性设置
   • 产品属性值设置
6. 用户管理
   • 分页查询
7. 订单管理
   • 订单分页查询
   • 查看详情
   • 发货