天猫整站Springboot 从零开始搭建(二)

本文详细阐述了如何按商业项目开发流程进行,涉及需求分析、表结构设计、前端与后端交互,以及后台管理(分类、属性、产品、用户、订单等)和前端页面(首页、产品页、分类页等)的开发,包括HTML结构、AJAX交互和数据库操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1 技术准备

2 开发流程

2.1 需求分析

2.2.1 需求分析-展示

2.2.2 需求分析-交互

2.2.3 需求分析-后台

2.2 表结构设计

2.3 原型

2.4 后台-分类管理

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.6 前台-首页

2.6.1 前台-首页

2.7 前台无需登录

2.8 前台需要登录

2.8.1 购物流程

2.8.2 购物流程环节与表关系

2.8.3 订单状态图

2.9 总结



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.首页

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

2.产品页

  1. 显示分辨率为950x100的当前商品对应的分类图片
  2. 显示本商品的5个单独图片
  3. 商品的基本信息,如标题,小标题,加个,销量,评价数量,库存等
  4. 商品详情
  5. 评价信息
  6. 5张商品详细图片
  7. 立即购买
  8. 加入购物车

3.分类页

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

4.搜索结果页

  1. 显示满足查询条件的商品

5.购物车查看页

  1. 在购物车中显示订单项
  2. 调整订单项数量
  3. 删除订单项

6.结算页

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

7.确认支付页

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

8.支付成功页

  1. 付款成功时,显示本次付款金额

9.我的订单页

  1. 显示所有订单,以及对应的订单项

10.确认收货页

  1. 显示订单项内容
  2. 显示订单信息,收货人地址等
  3. 确认收货

11.评价页

  1. 显示要评价的商品信息,商品当前的总评价数
  2. 评价成功后,显示当前商品所有的评价信息
  3. 提交评价信息

12.页头信息展示

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

13.所有页面

  1. 搜索

 

2.2.3 需求分析-后台

-----------------------分类管理--------------------------

  1. 分页查询
  2. 新增分类
  3. 编辑修改
  4. 删除

-----------------------属性管理--------------------------

  1. 产品属性(同一类产品,都有相同的属性)
  2. 分页查询
  3. 新增属性
  4. 编辑修改
  5. 删除

-----------------------产品管理--------------------------

  1. 分页查询
  2. 新增产品
  3. 编辑修改
  4. 删除

--------------------产品图片管理-----------------------

  • 产品图片概念:一件产品,对应多条 单个图片

                         一件产品,对应多条 详情图片

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

  • 产品图片管理

--------------------产品属性设置-----------------------

根据属性管理中的讲解,一种产品所具有的属性,在其对应的分类中进行了维护。

那么要修改产品的这些属性,就在本页面进行。

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

-----------------------用户管理--------------------------

  • 分页查询

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

所以,增,删,改功能在后台就不提供了,仅仅提供一个分页查询

-----------------------订单管理--------------------------

  1. 订单分页查询
  2. 查看详情(查看本订单都由哪些订单项组成)
  3. 发货

---------------------后台需求列表----------------------

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

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 总结


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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Baymax_wyl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值