目录
1 技术准备
1. Java
Java基础 和 Java中级 的大部分内容
2. 前端
html, CSS, Javascript, JSON, AJAX, JQuery ,Bootstrap, Vue.js
3. 框架部分
spring springmvc springboot
4. 中间件
redis, nginx, elasticsearch, shiro
5. 数据库:
MySQL
6. 开发工具
Intellij IDEA,Maven
2 开发流程
模仿天猫整站是一个比较大的项目,将按照商业项目的开发流程有条不紊的一一展开:
2.1 需求分析
首先确定要做哪些功能,需求分析包括前台和后台。
前台又分为单纯要展示的那些功能-需求分析-展示,以及会提交数据到服务端的哪些功能-需求分析-交互。
2.2.1 需求分析-展示
- 完整页面效果
- 横向导航栏上提供四个分类链接
- 在纵向导航栏上提供全部17个分类链接
- 当鼠标移动到某一个纵向分类链接时,显示这个分类的推荐商品
- 按照每种分类显示5种商品,共显示17个分类
①完整页面效果
②横向导航栏上提供四个分类链接
③在纵向导航栏上提供全部17个分类链接
④当鼠标移动到某一个纵向分类链接时,显示这个分类的推荐商品
⑤按照每种分类显示5种商品,共显示17个分类
----------------------------产品页------------------------------
- 显示分辨率为950x100的当前商品对应的分类图片
- 显示本商品的5个单独图片
- 商品的基本信息,如标题,小标题,价格,销量,评价数量,库存等
- 商品详情
- 评价信息
-----------------------------分类页--------------------------
- 显示分辨率为950x100的当前分类图片
- 显示本分类下的所有产品
--------------------------搜索结果页------------------------
- 显示满足查询条件的商品
-------------------------购物车查看页----------------------
- 在购物车中显示订单项
----------------------结算页------------------------
- 在结算页面显示被选中的订单项
---------------------确认支付页---------------------
- 确认支付页面显示本次订单的金额总数
----------------------支付成功页----------------------
- 付款成功时,显示本次付款金额
---------------------我的订单页------------------------
- 显示所有订单,以及对应的订单项
--------------------确认收货页--------------------
- 显示订单项内容
- 显示订单信息,收货人地址等
---------------------评价页---------------------
- 显示要评价的商品信息,商品当前的总评价数
- 评价成功后,显示当前商品所有的评价信息
--------------------页头信息展示--------------------
- 未登录状态
- 已登录状态
2.2.2 需求分析-交互
这里的交互是指:通过POST,GET等HTTP协议,与服务器进行同步或者异步数据交互。比如购买,购物车,生成订单,登录等功能。
--------------------分类页排序--------------------
- 按照综合,人气,新品,销量,价格排序
- 进行价格筛选,这个不算,这个是做在浏览器端的,并不是和服务器端的交互
----------------------立即购买---------------------
- 在产品页,未登录状态时候,点击立即购买=====》会弹出登录模态窗口
- 在产品页,如果已经登录,点击购买=====》会提交数据到服务端,生成订单项,并且跳转到结算页面
--------------------加入购物车--------------------
- 在未登录状态,点击加入购物车====》会弹出模态窗口
- 在已登录状态,点击加入购物车====》使用ajax异步提交数据到服务端,生成订单项,并且使当前 "加入购物车" 按钮变得不可点击
-----------------调整订单项数量-----------------
- 在购物车页面,调整订单项数量
--------------------删除订单项--------------------
- 在购物车页面,删除订单项=====>首先弹出模态窗口确认是否要删除,如果要删除,则通过Ajax异步发送指令到服务端,并且在当前页面删除该条订单项
-----------------------生成订单--------------------
- 在结算页面,提交订单====>根据结算页面的收货人信息,订单项信息,生成订单数据
--------------------订单页功能--------------------
- 订单页面上有3个按钮,付款,确认收货和评价,这些按钮都没有提交数据到服务端,而是提交到下一个页面的二次操作,才提交数据到服务端的。
----------------------确认付款---------------------
- 点击确认支付,提交本信息到服务端,服务端修改订单中的支付日期
---------------------确认收货----------------------
- 确认收货页面=====>点击确认支付,提交数据到服务端,并且修改订单中的确认收货日期
------------------提交评价信息-------------------
- 评价页面,提交评价信息到服务端
-----------------------登录--------------------------
- 输入正确账号密码,登录成功后跳转到首页,失败提示错误信息
-----------------------注册--------------------------
-----------------------退出--------------------------
-----------------------搜索--------------------------
- 提交关键字到服务端,服务端查询数据库,并返回匹配的产品
--------------------前台需求列表-----------------
绿色表示展示的需求
红色表示与服务器有交互的需求
1.首页
- 在横向导航栏上提供4个分类连接
- 在纵向导航栏上提供全部17个分类连接
- 当鼠标移动到某一个纵向分类连接的时候,显示这个分类下的推荐商品
- 按照每种分类,显示5个商品的方式显示所有17种分类
2.产品页
- 显示分辨率为950x100的当前商品对应的分类图片
- 显示本商品的5个单独图片
- 商品的基本信息,如标题,小标题,加个,销量,评价数量,库存等
- 商品详情
- 评价信息
- 5张商品详细图片
- 立即购买
- 加入购物车
3.分类页
- 显示分辨率为950x100的当前分类图片
- 显示本分类下的所有产品
- 分类页排序
4.搜索结果页
- 显示满足查询条件的商品
5.购物车查看页
- 在购物车中显示订单项
- 调整订单项数量
- 删除订单项
6.结算页
- 在结算页面显示被选中的订单项
- 生成订单
7.确认支付页
- 确认支付页面显示本次订单的金额总数
- 确认付款
8.支付成功页
- 付款成功时,显示本次付款金额
9.我的订单页
- 显示所有订单,以及对应的订单项
10.确认收货页
- 显示订单项内容
- 显示订单信息,收货人地址等
- 确认收货
11.评价页
- 显示要评价的商品信息,商品当前的总评价数
- 评价成功后,显示当前商品所有的评价信息
- 提交评价信息
12.页头信息展示
- 未登录状态
- 已登录状态
- 登录
- 注册
- 退出
13.所有页面
- 搜索
2.2.3 需求分析-后台
-----------------------分类管理--------------------------
- 分页查询
- 新增分类
- 编辑修改
- 删除
-----------------------属性管理--------------------------
- 产品属性(同一类产品,都有相同的属性)
- 分页查询
- 新增属性
- 编辑修改
- 删除
-----------------------产品管理--------------------------
- 分页查询
- 新增产品
- 编辑修改
- 删除
--------------------产品图片管理-----------------------
- 产品图片概念:一件产品,对应多条 单个图片
一件产品,对应多条 详情图片
所以这部分单独做一个页面进行管理。
- 产品图片管理
--------------------产品属性设置-----------------------
根据属性管理中的讲解,一种产品所具有的属性,在其对应的分类中进行了维护。
那么要修改产品的这些属性,就在本页面进行。
这里采用异步提交方式,编辑即修改,修改成功用绿色边框表示。
-----------------------用户管理--------------------------
- 分页查询
用户管理就提供了一个分页查询,做的比较简约,几个原因:
1. 用户是不能删除的
2. 用户信息的修改,应该交由前端由客户自己修改,比如密码,基本信息等
3. 用户的增加,是前端注册导致的,后台不负责用户的增加
所以,增,删,改功能在后台就不提供了,仅仅提供一个分页查询
-----------------------订单管理--------------------------
- 订单分页查询
- 查看详情(查看本订单都由哪些订单项组成)
- 发货
---------------------后台需求列表----------------------
- 分类管理
- 分页查询
- 新增分类
- 编辑修改
- 删除
- 属性管理
- 属性概念
- 分页查询
- 新增属性
- 编辑修改
- 删除
- 产品管理
- 分页查询
- 新增产品
- 编辑修改
- 删除
- 产品图片管理
- 产品图片概念
- 产品图片管理
- 产品属性设置
- 产品属性值设置
- 用户管理
- 分页查询
- 订单管理
- 订单分页查询
- 查看详情
- 发货
2.2 表结构设计
2.3 原型
接着是界面原型,与客户沟通顺畅的项目设计流程里一定会有原型这个环节。
借助界面原型,可以低成本,高效率的与客户达成需求的一致性。 同样的,原型分为了前台原型和后台原型。
2.3.1 前台原型
2.3.2 后台原型
2.4 后台-分类管理
接下来开始进行功能开发,按照模块之间的依赖关系,首先进行后台-分类管理功能开发。
严格来说,这是开发的第一个功能,所以讲解的十分详细,不仅提供了可运行的项目,还详细解释了其中用到的HTML 包含关系,
以及每个具体的功能: 查询,分页,增加,删除,编辑,修改。 把每个细节都掰的很细,可以更好的理解,消化和吸收。
在把后台-分类管理 吃透之后,后续的其他后台管理功能,做起来就会更加顺畅。
2.4.1 后台-分类管理
2.4.2 HTML 包含关系
2.4.3 查询
2.4.4 分页
2.4.5 增加
2.4.6 删除
2.4.7 编辑
2.4.8 修改
2.5 后台-其他管理
在把后台-分类管理 消化吸收之后,就可以加速进行 后台其他页面的学习。
2.5.1 后台其他页面
2.6 前台-首页
前台也包括许多功能, 与后台-分类管理类似的,首先把前台-首页这个功能单独拿出来,进行精讲。前台-首页 消化吸收好之后,再进行其他前台功能的开发。
2.6.1 前台-首页
2.7 前台无需登录
从前台模块之间的依赖性,以及开发顺序的合理性来考虑,把前台功能分为了 无需登录 即可使用的功能,和需要登录 才能访问的功能。
建立在前一步前台-首页的基础之上,开始进行一系列的无需登录功能开发。
2.8 前台需要登录
最后是需要登录的前台功能。 这部分功能基本上都是和购物相关的。 因此,一开始先把购物流程 单独拿出来捋清楚,
其中还特别注明了购物流程环节与表关系,这样能够更好的建立对前端购物功能的理解。
随着这部分功能的开发,就会进入订单生成部分,在此之前,先准备了一个 订单状态图,在理解了这个图之后,可以更好的进行订单相关功能的开发。
2.8.1 购物流程
2.8.2 购物流程环节与表关系
2.8.3 订单状态图
2.9 总结
最后总结整个项目的项目结构,都实现了哪些典型场景,运用了哪些设计模式,把学习到的知识都沉淀下来,转换,消化,吸收为自己的技能