Q：为什么有这篇文章呢？
A：开学就要搞一个软件工程实验课设(以前都是期末弄课设的，不知道为什么这次弄到前面了。。。或许学院是为了早点放假方便学生找暑期实习？还是什么别的原因,这就不得而知了)，统一哥看到题目里正好有一个是关于网上购物商城。于是就搬出假期的项目来应对了哈哈哈。
关于这个项目的介绍之前还写了：电商项目:高仿小米商城(一) 和 电商项目：高仿小米商城(API文档) 这两篇。而这次课设按照指导书的要求，项目小组用软件工程的方法(如画UML图，作概要设计等)更深入地分析了商城的结构等等。可以说大家都学到了不少东西。现在购物网站已经部署在 www.tongyi.site 了，github上完整代码也已开源:https://github.com/ZTY18873242003/tongyimall。觉得项目不错的话可以给个Star，如有建议或者问题欢迎评论留言指出，我会继续完善项目。
目录
2.3、功能需求分析（类图、用例图及用例描述、状态图、系统活动图）
一、项目小组规约
1.1、项目名称
网上购物网站
1.2、项目组长、成员
| 姓名 |
学号 |
电话 |
编号 |
| 统一哥 |
1805010414 |
1887324200X |
1 |
| 刘晨明 |
1805010402 |
1886745696Y |
2 |
| 张鹏 |
1805010408 |
1660747936X |
3 |
| 张之卓 |
1805010412 |
1886737673Y |
4 |
1.3、分工
按两个层次进行
A、 执笔人:
1号: 统一哥，负责详细设计规约。
2号:张鹏,负责需求规约。
3号:张之卓,负责概要设计规约。
4号:刘晨明,负责画UML图
B 、功能模块分工(登录、首页顶部下拉栏、首页左边目录栏、首页商品大类、底部推荐栏、登录、注册、购物车、收货地址管理、下单):
1号: 统一哥，负责后台。
2号:张鹏,负责登录、首页顶部下拉栏、首页左边目录栏
3号:张之卓,负责首页商品大类、底部推荐栏、登录
4号:刘晨明,负责注册、购物车、收货地址管理、下单
1.4后端接口规范
函数命名风格遵守阿里巴巴编码规范,如方法名、参数名、变量名统一使用lowerCamelCase，必须遵守驼峰命名
1.4.1、请求格式
采用restful风格的接口。 目前使用GET、POST、PUT、DELETE来表示请求、更新和删除三种内容语义。
1、GET请求
GET API_URL?params
例如
GET /carts/SelectAll 或者 GET /carts/updatecart?goodid=4
2、POST请求
POST API_URL
{
body
}
例如
POST /createorder 或者
POST /createorder
{
name: "ZTY",
shippingId:
}
3、PUT请求(本质上和GET一样)
PUT API_URL?params
例如
PUT /push
{
id: 2,
username:'ZTY'
}
4、DELETE请求(本质上和GET一样)
DELETE API_URL?params
例如
DELETE /push
{
id: 2
}
1.4.2、响应格式
Content-Type: application/json;charset=UTF-8
{
body
}
而body是存在一定格式的json内容：
{
status: XXX,
data: {}
}
1, 普通对象
{
status: 0,
data: {}
}
2, 数组对象
{
status: 0,
data: {
list: [],
total: XX，
}
}
list是对象数组，total是数组长度。
二、需求规约
2.1、网上购物商城简介
网上购物就是通过互联网检索商品消息，通过电子订单方式发起购物请求，然后在线付款，商家通过邮寄等方式把商品寄送给用户，最后完成购物流程。其中还包括售后服务等必要的功能。
本项目为网上购物商城项目。网上购物商城为了方便用户需求，用户只需要注册后登录再进行几个简单的操作就可以进行下单购物，多种商品检索方式，便捷的购物流程，符合B2C电子商务的用户体验，使顾客可以快速方便地找到符合自己要求的商品并下单购物。完善的订单管理流程使商家和用户可以方便地跟踪和查看自己的订单状态，并及时进行操作和管理，使整体的购物流程易于管理和操作。
需求规约部分确定网上购物商城项目的需求。
2.2、需求概述
网上商城共分两个部分，一部分是面向用户的部分，包括：顾客在线注册、登录、购物、提交订单、付款等操作；另外一部分是商城管理部分，这部分的内容包括：产品的添加、删除、查询、订单的管理、商品图片的管理、注册用户的管理等。
2.3、功能需求分析（类图、用例图及用例描述、状态图、系统活动图）
本系统用户主要由2种角色组成：
- 用户
- 游客（未登录只能看商品不能买商品）
其中用户角色分为
- 买家
- 商家
2.3.1、类图（整体架构）
2.3.2、用例图及用例描述
用户用例图：
游客用例图:
客户信息管理用例:
部分用例描述:
商城端部分：
- 用户注册活动
| 名称： |
注册 |
| 参与者： |
用户 |
| 描述： |
用户注册购物商城账号 |
| 前置条件： |
输入注册消息且验证成功 |
| 正常流程： |
|
2.买家下单
| 名称： |
下订单 |
| 参与者： |
买家 |
| 描述： |
买家把所选商品提交订单 |
| 前置条件： |
买家选定商品，点击提交按钮 |
| 正常流程： |
|
管理端部分：
1.商家上架商品
| 名称： |
上架商品 |
| 参与者： |
商家 |
| 描述： |
上架新商品，商品名称、商品价格 |
| 前置条件： |
登陆管理员账号后点击上架商品 |
| 正常流程： |
提交商品相关信息、通过上架 |
2.商家下架商品
| 名称： |
下架商品 |
| 参与者： |
商家 |
| 描述： |
选择已经上架的商品进行下架 |
| 前置条件： |
进行商品下架操作 |
| 正常流程： |
选择想要下架的商品，确认下架 |
3.商家修改商品信息
| 名称： |
修改商品信息 |
| 参与者： |
商家 |
| 描述： |
修改商品相关信息，包含商品名称、商品图片、商品价格、商品描述、细节展示等 |
| 前置条件： |
选择已上架的商品进行修改 |
| 正常流程： |
选择需要修改信息的商品，修改相关信息，最后确认修改信息 |
4.商家处理订单
| 名称： |
处理订单 |
| 参与者： |
商家 |
| 描述： |
对买家订单进行处理：退货、换货、发货、退款、售后 |
| 前置条件： |
买家联系店铺客服，对订单进行操作 |
| 正常流程： |
买家提交申请，商家进行处理 |
2.3.3、状态图
购物车状态图：
首页状态图：
2.3.4、系统活动图
登录活动图：
下订单活动图：
货物上架活动图：
三、概要设计规约
3.1、文档描述
该文档描述了网上购物商城的概要设计，小型购物商城是给用户停供在线浏览商品，购买商品。以及商家后台管理的功能性网站。系统主要面向以下四种用户。
- 游客(没有登录的用户,可以正常的浏览商品,但不能购买商品)
- 会员(完成了登录注册的用户，可以购买商品)
- 商家(提供后台管理功能,以及提供后台管理的服务)
不同的用户有不同的操作权限和操作页面，该平台的目的是为了给用户提供良好的购物体验。
3.2、目的
编写目的：进一步挖掘用户的需求，整理系统的功能，为接下来的设计和实现提供思路。
阅读对象：概要设计的主要阅读对象为客户以及设计人员。
3.2.1、建设目标
(1)人性化
根据软件界面设计的黄金三原则，我们应该尽量保持界面始终置于用户的控制之下，减轻用户的记忆负担，保持界面的一致性。
- 操作人性化
购物商城将会建设成用户习惯的windows系统和通用类购物网站的操作习惯，以便于用户最短的时间内可以适应操作界面。为用户停供良好的购物体验
- 界面人性化
整个界面与小米商城等等购物网站界面类似，提供人性化的提示。采用图文并茂的方式推荐商品，比如首页的商品推荐区。不同的时间段推荐不同的商品。
网站中不同角色会有不同的操作界面，普通用户在网站上可以浏览商品，管理购物车、下单付款。合作商经过管理端可以进行商品的添加，删除，删改。
(2)规划化商品的分类
设计合理的产品分类，方便用户检索自己心仪的商品。设立了多级目录。在商品类别的显示和后台管理上，都能够尽可能的完整。
3.3、体系机构设计
3.3.1、总的体系结构
网上购物商城系统采用MVC模式开发，支持PC通过浏览器访问。采用前后端分离的结构
MVC模式，把一个交互式应用程序划分为3个部分，
- 模型：包含核心功能和数据(核心数据部分)
- 视图：将信息呈现给用户(有多个视图)
- 控制器：处理用户输入的信息
这样做是为了将信息的内部表示与信息的呈现方式分离开来，并接受用户的请求。它分离了组件，并允许有效的代码重用。
3.3.2、技术体系
开发技术栈采用Vue2.0 + Vue脚手架4 + SpringBoot 2.X + Mybatis + MySql。
1、前端框架
目前web开发前后端分离已成为互联网项目开发的业界标准使用方式，前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。前端拟采用现在国内普遍推广的前端三大框架之一的Vue。
2、数据库框架
Mybatis：MyBatis是一款优秀的持久层框架，它支持定制化SQL、 存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解来配置和映射原生信息，将接口和Java的POJOs(PlainOldJavaObjects,普通的Java对象)映射成数据库中的记录。Mybatis学习门槛低，简单易学，程序员直接编写原生态sql，可严格控制sql执行性能，灵活度高，非常适合对关系数据模型要求不高的软件开发，例如互联网软件、企业运营类软件等，因为这类软件需求变化频繁，一但需求变化要求成果输出迅速。但是灵活的前提是mybatis无法做到数据库无关性，如果需要实现支持多种数据库的软件则需要自定义多套sql映射文件，工作量相比与其他会更大。
3、后端框架
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。
4、其他技术。
- Spring：Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。
- JSON：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
- RSA加密算法: RSA是被研究得最广泛的公钥算法，从提出到现在已近三十年，经历了各种攻击的考验，逐渐为人们接受，普遍认为是最优秀的公钥方案之一
- Token(在计算机身份认证中是令牌的意思，在词法分析中是标记的意思。一般作为邀请、登录系统使用)方面则采取json web token(简称 JWT):JWT:JWT规定了数据传输的结构，一串完整的JWT由三段落组成每个段落用英文句号连接（.）连接，他们分别是：Header、Payload、Signature，所以，常规的JWT内容格式是这样的：AAA.BBB.CCC
使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：
- 客户端使用用户名跟密码请求登录
- 服务端收到请求，去验证用户名与密码
- 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
- 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
- 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
- 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据。
3.3.3、开发环境
综上所叙述，整个项目的开发环境如下:
- Java应用程序开发，以及支持java的Web应用服务器，我们选用java1.8版本。
- 选用IntelliJ IDEA 2020.2.1 x64作为服务端开发平台
- 选用WebStorm 2020.1 x64作为前端开发平台。
- 选用DataGrip 2020.1 x64作为数据库管理工具
- 选用v12.18.4版本的node.js将前端vue跑起来
3.3.4、接口设计(部分)
1、首页商品分类目录
| 接口名 |
所需参数 |
返回参数 |
说明 |
| Getgoodbycategory |
Int category_id |
List<categrorygood> |
返回首页目录商品 |
| Getcatecount |
NULL |
Int number |
返回商品数 |
| GetGoodcategory |
Int category_id |
Goodcategory good |
返回所查找的列表项 |
2、购物车相关接口
| 接口名 |
所需参数 |
返回参数 |
说明 |
| Getgoodbyid |
String userid,Int id |
Cartgood good |
通过id查找购物车中的商品 |
| Delgoodbyid |
String userid,Int id |
null |
删除购物车中指定商品 |
| Getgoodbyidinsert |
Int goodid |
Cartgood good |
通过商品id查找商品并加入购物车 |
| Updatecartselect |
String userid |
Null |
选定商品 |
| Updatecarttunselcet |
String userid |
Null |
取消选定 |
| Insertcartgood |
String userid,int goodid,String goodname,int price,int count, String Subtitle,int ProductStock,int Status,boolean select,int totalprice |
Bool status |
向购物车插入商品 |
| Updatecartgood |
String userid,int count,int goodid,int totalprice |
Int totalprice |
计算购物车总价格
|
3、地址相关
| 接口名 |
所需参数 |
返回参数 |
说明 |
| getAddress |
String userid,Int id |
address add |
查询某一个特定收货地址 |
| Insertorder |
int orderNo,int payment,int paymentType ,String receiveName,String receiveMobile ,String receiveProvince,String receiverCity ,String receiverAddress,String receiverZip |
Null |
插入一个收货地址 |
| Getorderbyid |
Int userid |
List<address> add |
查询某一用户所有的收货地址 |
| Delateaddress |
String userid Int id |
Null |
删除某一特定收货地址 |
4、推荐相关
| 接口名 |
所需参数 |
返回参数 |
说明 |
| Getproductinfo |
Int id |
Productinfo info |
获取首页大图推荐分类 |
| GetProductFootInfo |
String goodname |
ProfuctFootinfo |
获取底部推荐 |
| Getproducthead |
Int categoryId |
List<productheadinfo> |
获取头部推荐 |
| 接口名 |
所需参数 |
返回参数 |
说明 |
| Getuserbyname |
String userid |
User user |
根据id查询用户 |
| InsertUser |
String userid ,String name,String email ,String pwd,String phone,String status ,String date,String prikey |
Void |
创建一个用户 |
3.3.5、数据结构设计
1、管理员信息表
| 字段 |
类型 |
说明 |
| Username |
String |
管理员用户名 |
| Password |
String |
密码(采用RSA加密后的密文存储在数据库中) |
| Id |
String |
管理员账号唯一id (主键) |
2、用户信息表
| 字段 |
类型 |
说明 |
| Userid |
String |
用户唯一id（主键，使用随机数工具类生成） |
| Name |
String |
账号名 |
| |
String |
邮箱 |
| Password |
String |
密码(经过RSA加密后存储密文) |
| Tel |
String |
电话 |
| Status |
Bool |
用户是否可用(管理端可禁用) |
| Date |
String |
注册日期 |
| Privatekey |
String |
私钥 |
3、地址表
| 字段 |
类型 |
说明 |
| Id |
Int |
id（主键）auto_increament |
| userid |
String |
用户id（外键），非空 |
| Receivername |
String |
收货人 |
| Receivemobile |
String |
收货人联系方式 |
| Receiverprovice |
String |
收货省份 |
| Receivercity |
String |
市区 |
| Receiveraddress |
String |
收货具体地址 |
| Receiverzip |
String |
邮编（非空,6位数） |
4、购物车表
| 字段 |
属性 |
说明 |
| Id |
Int |
主键 |
| User_id |
string |
用户id（外键） |
| Good_id |
int |
商品id（外键） |
| Good_name |
String |
商品名（非空） |
| Price |
Int |
价格（非空） |
| Count |
Int |
数量 |
| Pic_url |
String |
图片url |
| Add_time |
String |
加入购物车时间 |
| Update_time |
String |
更新购物车时间 |
| Subtitle |
String |
子标题 |
| Productselected |
Bool |
购物车中商品是否被选中 |
| Productstock |
Int |
库存 |
| Producttotalprice |
int |
商品总价格 |
5、商品表
| 字段 |
属性 |
说明 |
| Id |
Int |
主键 |
| Good_id |
Int |
商品id（外键） |
| Name |
String |
商品名 |
| Subtitle |
String |
二级标题 |
| Price |
Int |
实际价格 |
| Oldprice |
Int |
旧价格 |
| Category_id |
int |
所属分类目录id |
| Imagehost |
String |
图片来源网址 |
| Describe |
String |
商品描述 |
| Productstock |
Int |
库存 |
| Statu |
Bool |
是否销售 |
6、订单表
| 字段 |
属性 |
说明 |
| Orderno |
Int |
订单号（主键） |
| Productid |
Int |
商品id |
| Productname |
String |
商品名 |
| Productimage |
String |
购物车商品url |
| Quantity |
Int |
商品数量 |
| Totalprice |
Int |
购物车商品总价格 |
| Createtime |
String |
订单创建时间 |
四、详细设计规约
4.1、设计前提
项目由四个人共同合作完成，包括项目题目选择，接口设计，数据库设计，以及前端ui设计
4.2、设计思路
整个项目是基于web最新的技术来开发的，我们小组放弃了已经渐渐被淘汰的jsp技术。采用目前最流行SprintBoot整合MyBatis来进行开发，同时数据库的连接方面采用JDBC连接池。同时开发模式采用目前大企业普遍采用的前后端分离模式来进行开发。前端则采用vue进行开发。
4.3、项目结构
4.3.1、代码结构图
图1前端(WebStorm)、图2后端(IDEA)
4.3.2、技术栈架构图
4.4、界面UI设计(部分)
4.4.1、用户端部分
- 商品分类及轮播图
- 商品细节图
- 登录注册模块
- 购物车模块
- 地址管理
- 底部商品推荐
4.4.2、管理端部分
1、商品上下架 
2、商品图片管理 
4.5、商城API服务
4.5.1、首页
初始化时加载五个请求:sum、product、category、productfoot、productfootnormal
1、sum
请求路径:/carts/sum
请求方式:GET
Request URL: http://localhost:8080/carts/sum?username=ZTY
作用：返回购物车的总数量
2、product（小米手机、笔记本、电视 下拉导航栏）
请求路径:/index/product?categoryId=?(?=1,2,3,9)
请求方式:GET
RequestURL:http://localhost:8080/index/product?categoryId=1
作用：返回商品分类品牌（每种8个商品）
3、 category(轮播图左侧分类栏)
请求路径: /index/category
请求方式:GET
Request URL: http://localhost:8080/index/category
作用：返回商品分类目录
4、productfoot(商品大类展示手机、家电、智能、搭配、配件、周边热门商品)
请求路径: /index/productfoot
请求方式:GET
RequestURL:http://localhost:8080/index/productfoot?categoryId=i(i=1,2,3,4,5,6)
作用：返回热门商品
5、productfootnormal (商品大类展示手机、家电、智能、搭配、配件、周边普通商品)
请求路径: /index/productfootnormal
请求方式:GET
RequestURL:http://localhost:8080/index/productfootnormal?categoryId=I (i=1,2,3,4,5,6)
作用：返回非热门 手机、家电、智能、搭配、配件、周边商品
4.5.2、商品细节
1、 getinfo(获取商品信息)
请求路径: /product/getinfo
请求方式:GET
Request URL: http://localhost:8080/product/getinfo?id=16
作用：返回商品详细信息，包括价格、一级介绍、二级介绍等
2、点击播放视频按钮
RequestURL:https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section2-2.mp4 (不会请求后端，资源链接为小米官网的CDN加速视频，前端代码提供视频播放的组件)
作用：弹出视频框并播放视频
4.5.3、购物车
1、点击全选:
请求路径:/carts/SelectAll
请求方式:GET
RequestURL:http://localhost:8080/carts/selectAll(unSelectAll)?username=ZTY
作用：将productSelected都改为true
2、取消全选:
请求路径:/carts/unSelectAll
作用：将productSelected都改为false
3、购物车单个商品数量+1/-1：
请求路径:/carts/updatecart
请求方式:GET
RequestURL: http://localhost:8080/carts/updatecart?goodid=4&username=ZTY&quantity=2&selected=true
作用：改变list中的count以及cartTotalQuantity,cartTotalPrice
4.5.4、订单确认页
初始化时加载三个请求:sum,getAll和getcarts
1、sum
请求路径:/carts/sum
请求方式:GET
Request URL: http://localhost:8080/carts/sum?username=ZTY
作用：返回购物车的总数量
2、getAll
请求路径: /shippings/getAll
请求方式:GET
Request URL: http://localhost:8080/shippings/getAll?username=ZTY
作用：返回用户填写过的所有地址
3、getcarts
请求路径:/carts/getcarts
请求方式:GET
Request URL: http://localhost:8080/carts/getcarts?username=ZTY
作用：返回购物车中所有商品详细信息
4.5.5、下单付款页
订单确认页点击“去结算”按钮后跳转至下单付款页，页面初始化时加载四个请求createorder,sum,getorder,getorderdetail：
1. createorder
请求路径: /orders/ createorder
请求方式:POST
Request URL: http://localhost:8080/orders/createorder
作用：创建订单并返回一个随机订单号、付款类型、收货人信息
2.sum(同见3.5.4 ，返回购物车商品种类数)
3.getorder
请求路径: /orders/getorder
请求方式:GET
Request URL: http://localhost:8080/orders/getorder?id=655875211
作用：根据订单号(id)查询数据库中相应订单的详细数据
4.getorderdetail
请求路径: /orders/ getorderdetail
请求方式:GET
RequestURL: http://localhost:8080/orders/getorderdetail?username=ZTY作用：根据当前用户的账号名查询数据库中相应订单的详细数据，如是否支付，商品详细数据等
