# 课程设计悦桔拉拉商城

**Repository Path**: weicodeyun/course-design-yueju-lala-mall

## Basic Information

- **Project Name**: 课程设计悦桔拉拉商城
- **Description**: 此项目采用了多种技术进行整合，希望大家多多star，谢谢啦~
- **Primary Language**: Java
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2021-12-27
- **Last Updated**: 2023-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 课程设计悦桔拉拉商城

#### 介绍
此项目采用了多种技术进行整合，希望大家多多star，谢谢啦~

#### 目录

[1. 课设目的... 1](#_Toc91494446)

[2. 开发环境... 1](#_Toc91494447)

[3. 课设内容... 1](#_Toc91494448)

[4. 需求分析... 2](#_Toc91494449)

[4.1功能性需求分析... 2](#_Toc91494450)

[4.2非功能性需求... 6](#_Toc91494451)

[4.3设计约束... 7](#_Toc91494452)

[5. 设计过程... 7](#_Toc91494453)

[5.1概要设计... 7](#_Toc91494454)

[5.2数据库设计... 8](#_Toc91494455)

[5.3系统详细设计... 17](#_Toc91494456)

[5.4、编码设计（具体实现流程）... 20](#_Toc91494457)

[6. 调试过程... 38](#_Toc91494458)

[6.1 背景... 38](#_Toc91494459)

[6.2 测试目的... 38](#_Toc91494460)

[6.3测试环境... 38](#_Toc91494461)

[6.4 测试策略... 39](#_Toc91494462)

[6.5 测试方法... 39](#_Toc91494463)

[6.4   测试需求分析... 39](#_Toc91494464)

[6.5   测试设计与测试结果... 40](#_Toc91494465)

[6.6   测试报告... 43](#_Toc91494466)

[7. 小结... 43](#_Toc91494467)

[8. 参考文献... 44](#_Toc91494468)

 



## 1. 课设目的

可以巩固自己之前所学的知识，以及学习更多的新知识。

可以掌握业务流程，学习工作的流程。

 

## 2. 开发环境

硬件环境：

   Window11 电脑、Centos7.6 服务器

软件环境：

l IntelliJ IDEA 2021.1.3 开发工具

l JDK 16 运行环境

l Mysql 8 

l Navicat 15 for MySQL

l XShell、XFtp

l Redis5

l RDM

l Docker

l Node.js 16.3.1

l Maven

l Nginx 1.9.9

 

## 3. 课设内容

完成商城的基本功能模块：

登录模块、注册模块、首页商品列表显示模块、商品列表显示模块、 商品详情模块、购物车模块、收获地址模块、订单模块、个人中心模块。

## 4. 需求分析

### 4.1功能性需求分析

网上商城主要分为两部分前台和后台，前台是面向用户的，其中包括用户在线注册、登录、购物、提交订单、付款等操作；另一部分是商城的后台，是管理员用来管理商城的，这部分包括，商成数据展示、商品分类管理、商品信息管理、会员管理、订单管理。

**4.1.1****用户注册基本需求**

\1.    用户需要输入用户名、邮箱、密码、以及重复密码

\2.    用户提交后会对表单数据进行校验，用户名不可用重复，邮箱格式也必须正确且不允许重复，密码用户自定义，重复密码需要与密码栏书写一致，防止用户操作失误输入错误的密码。

\3.    用户阅读并且勾选服务协议，才可注册。

\4.    注册后，系统会向用户注册邮箱发送激活链接，用户需要去邮箱查看并且点击激活用户，才可以使用此账号进行购物操作。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png)

图4.1注册业务流程图

**4.1.2****用户登录基本需求**

\1.    用户进入登录页面，输入用户名以及密码进行登录。

\2.    用户还可以使用Gitee、百度、QQ等第三方平台账号进行登录

\3.    首次使用第三方账号登录，需要绑定账号信息，之后可以直接登录

 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png)

图4.2登录业务流程图

 

**4.1.3****用户购物需求**

\1.    未登录用户可以浏览商品，已登录用户可以进行购买。

\2.    在商品详情页点击加入购物车。

\3.    在购物车页面，用户点击去结算，进入确认订单页。

\4.    确认订单页，用户可以填写与更改收货地址，和确认购买物品的详细信息。

\5.    用户确认无误，提交订单。

\6.    进入支付页面，目前只支持支付宝付款，用户需要在两分钟内使用支付宝app扫码付款。

\7.    付款成功，交易完成，等待商家发货。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png)

图5.3用户购物流程图

 

**4.1.4****后台管理系统基本需求**

\1.    后台主要有以下功能类别

\2.    今天商城后台，需要输入管理员账户与密码，还有验证码

\3.    商品管理：管理员可以对商品信息进行增删改查以及导入

\4.    类别管理：是对商品的类别进行的管理

\5.    会员管理：可以直接看到商城所有注册的会员，以及对会员信息进行管理

\6.    激活码管理：可以看到用户发送的激活码信息。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png)

图5.4后台系统总体功能结构图

 

### 4.2非功能性需求

安全性：前台用户密码使用了md5加密，后台使用Spring Security安全框架

性能需求：页面跳转时间小于3秒，300~800QPS

可维护与可扩展性：将系统通过功能模块化，支持灵活配置，有利于减少重复开发量，日志记录系统，易于分析错误，查找失败原因。

易用性：界面美观简洁，用户易操作。

### 4.3设计约束

本系统是B/S架构，采用TCP/IP通讯协议，开发周期为一个月。系统使用IntelliJ IDEA 2021.1.3，MySQL8.0数据库。

## 5. 设计过程

### 5.1概要设计

**5.1.1****、功能规定**

   提供用户登录、注册、商品查看、商品选购、付款、查看订单；

   提供管理员商品管理、分类管理、会员管理、订单管理、激活码管理。

**5.1.2****、系统架构**

   采用目前比较流行的B/S架构、MVC三层系统模式，这样做可以保证分工明确，每一层独立完成自己的事情，而不需要关心其他层的具体细节，后台使用的是前后端分离架构，前端页面使用vue框架，通过axios进行请求接口，大大降低了系统代码的耦合性，同时也提高了系统的可扩展性和可维护性。

**5.1.3****、结构设计**

 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image010.jpg)

图5.1系统功能结构图

 

### 5.2数据库设计

**5.2.1** **概念结构设计**

在信息世界中，信息从客观事物出发流经数据库，通过决策机构最后又回到客观世界，信息的这一~循环经历了三个领域:信息世界，数据世界，现实世界。现实世界的事物反映到人的头脑中，人的大脑对它有个认识过程，经过分析(选择、命名、分类等)进入信息世界。这些信息再进一步加工、 编码，然后进数据世界，而软件系统的开发工作需要考虑这两个方面的问题，也就是要考虑系统开发所需要的数据，以及如何对这些数据进行操作。这两个问题贯穿了整个软件系统的开发过程，这也就是数据库的设计问题，软件设计的-一个核心。

在系统设计的开始，我首先考虑的是如何用数据模型来数据库的结构与语义，以对现实世界进行抽象。目前广泛使用的数据模型可分为两种类型，- 种是独立于计算机系统的“概念数据模型”，如“实体联系模型”;另- ~种是直接面向数据库逻辑结构的“结构数据模型”。在本系统中我采用“实体联系模型”( E-R 模型)来描述数据库的结构与语义，以对现实世界进行第一次抽象。 E- R模型直接从现实世界抽象出实体类型及实体间联系，然后用E-R图来表示数据模型。它有两个明显的优点:接近于人的思维，容易理解;与计算机无关， 用户容易接受。但E R模型只能说明实体间语义的联系，不能进- -步说明详细的数据结构，它只是数据库设计的第一步。

系统ER图如图5.1所示。

![屏幕截图 2021-12-22 132931](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image012.png)

图5.2系统E-R图

商品实体属性图如图5.2所示。

![屏幕截图 2021-12-22 164301](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image014.png)

图5.3商品实体属性图

用户实体属性图如图5.3所示。

​        ![屏幕截图 2021-12-22 165127](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image016.png)

图5.4用户实体属性图

**5.2.2** **数据库逻辑结构设计**

在完成系统的E-R图之后，需要将E-R模型转化为关系模型，也就是说，要设

计出数据库所需要的表格。

​    在这里不得不提到一个概念-范式。 其实在上一节的E- R图设计中，已经运用了范式的思想，不仅如此，在数据库的表格设计中更离不开范式的思想，它是数据库设计的基础，如果不注意这个问题将会导致一系列问题的出现。

我在系统中定义的表格都严格地按照范式的思想和要求去完成，数据库中的所有表格都达到了三范式的要求。根据系统E-R图，针对本系统的特点，在对所搜集的数据进行规范化之后，定义了如下十四张表格:

 

 

 

 

\1.    会员表，用来存放会员信息的表，密码是存储md5加密后的数据，主键为int类型，自增。上次登录时间为datetime类型，记录用户上一次登录时间，用户状态字段可以标明此用户是否可以使用，注册的新用户状态为0，用户需要激活后，状态为1才可以进行登录与购物，如图表5.1所示。

表5.1会员表

| 字段名        | 数据类型     | 字段类型 | 长度 | 是否为空 | 默认值 | 备注                 |
| ------------- | ------------ | -------- | ---- | -------- | ------ | -------------------- |
| vipid         | int(11)      | int      |      | NO       |        | 会员唯一的ID号       |
| username      | varchar(50)  | varchar  | 50   | NO       |        | 用户名               |
| password      | varchar(50)  | varchar  | 50   | YES      |        | 密码                 |
| sex           | varchar(10)  | varchar  | 10   | YES      | 2      | 性别                 |
| email         | varchar(50)  | varchar  | 50   | YES      |        | 邮箱                 |
| photo         | varchar(200) | varchar  | 200  | YES      |        | 头像                 |
| score         | bigint(20)   | bigint   |      | YES      |        | 等级（根据积分判断） |
| question      | varchar(200) | varchar  | 200  | YES      |        | 密码提示问题         |
| answer        | varchar(200) | varchar  | 200  | YES      |        | 答案                 |
| lastlogintime | datetime     | datetime |      | YES      |        | 上一次登录时间       |
| status        | tinyint(1)   | tinyint  |      | YES      | 0      | 用户状态             |

 

\2.    商品表，此表主要存储商品数据，主键也是自增int类型商品的封面存放的是图片地址，并未直接将图片转码进行存储，大大减小了数据库的压力。此表有分类外键，表明了此商品属于哪个分类，与商品分类表是一对一关系，如图表5.2所示。

表5.2商品表

| 字段名     | 数据类型      | 字段类型 | 长度  | 是否为空 | 默认值 | 备注             |
| ---------- | ------------- | -------- | ----- | -------- | ------ | ---------------- |
| productid  | int(11)       | int      |       | NO       |        | 商品唯一的ID号   |
| name       | varchar(50)   | varchar  | 50    | NO       |        | 商品名称         |
| price      | decimal(10,2) | decimal  |       | YES      |        | 价格             |
| markprice  | decimal(10,2) | decimal  |       | YES      |        | 市场价           |
| quality    | int(11)       | int      |       | YES      | 100    | 库存量           |
| hit        | int(11)       | int      |       | YES      | 0      | 浏览量           |
| time       | date          | date     |       | YES      |        | 上架时间         |
| photo      | varchar(200)  | varchar  | 200   | YES      |        | 封面             |
| content    | text          | text     | 65535 | YES      |        | 商品介绍         |
| categoryid | int(11)       | int      |       | YES      |        | 所属分类id，外键 |

 

\3.    商品类别表，存储商品的分类信息，其中主要包括类别名与分类排序，主键亦为自增int类型，系统显示类别时，可以根据类别排序号进行展示，数字越小，排名越靠前。如图表5.3所示。

表5.3商品类别表

| 字段名     | 数据类型    | 字段类型 | 长度 | 是否为空 | 默认值 | 备注              |
| ---------- | ----------- | -------- | ---- | -------- | ------ | ----------------- |
| categoryid | int(11)     | int      |      | NO       |        | 分类唯一的ID号    |
| name       | varchar(50) | varchar  | 50   | NO       |        | 分类名称          |
| sort       | int(11)     | int      |      | YES      | 1      | 分类排序号，默认1 |

 

 

\4.    购物车中间表，用来存储每个用户购物车的商品信息，其中用户与商品之间是多对多关系，表中还有商品数量字段，用来标明此用户购物车中此商品的数量，选中状态字段，标明用户对自己购物车的勾选情况，用户下次登录，依旧显示的是之前勾选的物品，如图表5.4所示。

表5.4购物车中间表

| 字段名      | 数据类型   | 字段类型 | 长度 | 是否为空 | 默认值 | 备注         |
| ----------- | ---------- | -------- | ---- | -------- | ------ | ------------ |
| cart_id     | int(11)    | int      |      | NO       |        | 主键         |
| user_id     | int(11)    | int      |      | NO       |        | 用户id       |
| product_id  | int(11)    | int      |      | NO       |        | 商品id       |
| product_num | int(11)    | int      |      | YES      |        | 商品数量     |
| selected    | tinyint(1) | tinyint  |      | YES      | 1      | 默认选中状态 |

 

 

 

 

 

 

 

\5.    配送地址信息表，主要存储用户收获地址信息，外键是vipid与会员表相关联，如图表5.5所示。

 

表5.5配送地址信息表

| 字段名        | 数据类型     | 字段类型 | 长度 | 是否为空 | 默认值 | 备注              |
| ------------- | ------------ | -------- | ---- | -------- | ------ | ----------------- |
| addressid     | int(11)      | int      |      | NO       |        | 唯一的ID号        |
| receiver_name | varchar(25)  | varchar  | 25   | YES      |        | 收货人姓名        |
| province      | varchar(20)  | varchar  | 20   | YES      |        | 省份              |
| city          | varchar(20)  | varchar  | 20   | YES      |        | 市                |
| area          | varchar(20)  | varchar  | 20   | YES      |        | 区                |
| addressname   | varchar(200) | varchar  | 200  | NO       |        | 收货详细地址      |
| postcode      | varchar(32)  | varchar  | 32   | NO       |        | 邮编              |
| receiver      | varchar(32)  | varchar  | 32   | NO       |        | 联系电话          |
| vipid         | int(11)      | int      |      | NO       |        | 关联会员表（vip） |
| is_selected   | tinyint(1)   | tinyint  |      | YES      | 1      | 是否默认选择      |

 

 

\6.    省份信息表，用户编辑或添加收获地址时可以选择省份信息，如图表5.6所示。

表5.6省份信息表

| 字段名     | 数据类型    | 字段类型 | 长度 | 是否为空 | 默认值 | 备注 |
| ---------- | ----------- | -------- | ---- | -------- | ------ | ---- |
| id         | int(11)     | int      |      | NO       |        |      |
| provinceid | varchar(20) | varchar  | 20   | NO       |        |      |
| province   | varchar(50) | varchar  | 50   | NO       |        |      |

 

 

\7.    行政区域地州市信息表，用户编辑或添加收获地址时可以选择行政区域地州市信息，如图表5.7所示。

表5.7行政区域地州市信息表

| 字段名     | 数据类型     | 字段类型 | 长度 | 是否为空 | 默认值 | 备注 |
| ---------- | ------------ | -------- | ---- | -------- | ------ | ---- |
| id         | int(11)      | int      |      | NO       |        |      |
| cityid     | dvarchar(20) | varchar  | 20   | NO       |        |      |
| city       | varchar(50)  | varchar  | 50   | NO       |        |      |
| provinceid | varchar(20)  | varchar  | 20   | NO       |        |      |

 

 

 

\8.    行政区域县区信息表，用户编辑或添加收获地址时可以选择行政区域县区信息，如图表5.8所示。

表5.8行政区域县区信息表

| 字段名 | 数据类型    | 字段类型 | 长度 | 是否为空 | 默认值 | 备注 |
| ------ | ----------- | -------- | ---- | -------- | ------ | ---- |
| id     | int(11)     | int      |      | NO       |        |      |
| areaid | varchar(20) | varchar  | 20   | NO       |        |      |
| area   | varchar(50) | varchar  | 50   | NO       |        |      |
| cityid | varchar(20) | varchar  | 20   | NO       |        |      |

 

\9.    激活码表，用于存储用或注册后发送的激活码信息表，激活码是使用uuid加md5加密生成，存储在code字段，激活码验证时，会验证失效时间。如图表5.9所示。

表5.9激活码表

| 字段名     | 数据类型     | 字段类型 | 长度 | 是否为空 | 默认值 | 备注     |
| ---------- | ------------ | -------- | ---- | -------- | ------ | -------- |
| activateid | int(20)      | int      |      | NO       |        | id       |
| code       | varchar(100) | varchar  | 100  | YES      |        | 激活码   |
| out_time   | datetime     | datetime |      | YES      |        | 失效时间 |
| vipid      | int(20)      | int      |      | YES      |        | 用户id   |

 

\10.  订单表，用户提交订单后，会将订单信息存储到表中，之后用户可在个人中心里订单页面查看自己的所有订单也可以进行删除操作。如图表5.10所示。

表5.10商品表

 

| 字段名      | 数据类型      | 字段类型 | 长度 | 是否为空 | 默认值 | 备注                    |
| ----------- | ------------- | -------- | ---- | -------- | ------ | ----------------------- |
| orderid     | varchar(50)   | varchar  | 50   | NO       |        | 唯一，设置成主键        |
| ordertime   | datetime      | datetime |      | YES      |        | 下单时间                |
| status      | int(20)       | int      |      | YES      | 0      | 订单状态                |
| addressname | varchar(255)  | varchar  | 255  | NO       |        | 收货详细地址            |
| postcode    | varchar(32)   | varchar  | 32   | NO       |        | 邮编                    |
| receiver    | varchar(50)   | varchar  | 50   | NO       |        | 收货人                  |
| phone       | varchar(32)   | varchar  | 32   | NO       |        | 收货人联系电话          |
| totalprice  | decimal(10,2) | decimal  |      | YES      |        | 订单的总价格            |
| content     | varchar(400)  | varchar  | 400  | YES      |        | 备注                    |
| vipid       | int(11)       | int      |      | NO       |        | 关联会员表（vip）的编号 |

 

 

 

\11.  订单条目表，详细的保存了用户订单中每个商品的数量与最终金额，与订单表是多对一关系，如图表5.11所示。

 

表5.11商品表

| 字段名    | 数据类型      | 字段类型 | 长度 | 是否为空 | 默认值 | 备注                 |
| --------- | ------------- | -------- | ---- | -------- | ------ | -------------------- |
| id        | int(11)       | int      |      | NO       |        | 唯一的ID号           |
| buycount  | int(11)       | int      |      | NO       |        | 购买数量             |
| total     | decimal(10,2) | decimal  |      | NO       |        | 该商品总价格         |
| productid | int(11)       | int      |      | NO       |        | 商品id，外键         |
| name      | varchar(50)   | varchar  | 50   | NO       |        | 商品名称             |
| price     | decimal(10,2) | decimal  |      | YES      |        | 价格                 |
| photo     | varchar(255)  | varchar  | 255  | YES      |        | 封面                 |
| orderid   | varchar(50)   | varchar  | 50   | NO       |        | 关联的订单号（外键） |

 

 

\12.  订单明细表，详细的记录用户的订单交易信息，方便用户或管理员统计与管理交易信息，包括收益金额，用户扫码支付后，支付成功与否就是回调验证的此表数据，如图表5.12所示。

表5.12商品表

| 字段名      | 数据类型      | 字段类型 | 长度 | 是否为空 | 默认值 | 备注                       |
| ----------- | ------------- | -------- | ---- | -------- | ------ | -------------------------- |
| id          | bigint(20)    | bigint   |      | NO       |        | 主键，自动生成             |
| orderid     | varchar(50)   | varchar  | 50   | YES      |        | 外键，订单id               |
| ordertitle  | varchar(255)  | varchar  | 255  | YES      |        | 订单名称                   |
| userid      | int(11)       | int      |      | YES      |        | 外键，用户id               |
| tradeno     | varchar(100)  | varchar  | 100  | YES      |        | 交易流水号                 |
| create_time | datetime      | datetime |      | YES      |        | 交易时间                   |
| update_time | datetime      | datetime |      | YES      |        | 交易修改时间               |
| username    | varchar(100)  | varchar  | 100  | YES      |        | 付款人                     |
| price       | decimal(10,2) | decimal  |      | YES      |        | 付款金额                   |
| paymethod   | varchar(10)   | varchar  | 10   | YES      |        | 付款方式：1支付宝  ，2微信 |

 

 

 

 

 

\13.  社会化用户表，用于存储用户关联的第三方账户信息，用户绑定第三方账号后，可以直接使用第三方账号进行登录，如图表5.13所示。

 

表5.13社会化用户表

| 字段名        | 数据类型     | 字段类型 | 长度 | 是否为空 | 默认值 | 备注                   |
| ------------- | ------------ | -------- | ---- | -------- | ------ | ---------------------- |
| id            | int(20)      | int      |      | NO       |        | 主键                   |
| uuid          | varchar(50)  | varchar  | 50   | NO       |        | 第三方系统的唯一ID     |
| source        | varchar(100) | varchar  | 100  | NO       |        | 第三方用户来源         |
| access_token  | varchar(100) | varchar  | 100  | NO       |        | 用户的授权令牌         |
| expire_in     | int(10)      | int      |      | YES      |        | 用户的授权令牌的有效期 |
| refresh_token | varchar(100) | varchar  | 100  | YES      |        | 刷新令牌               |
| open_id       | varchar(50)  | varchar  | 50   | YES      |        | 第三方用户的 open id   |
| uid           | int(50)      | int      |      | YES      |        | 第三方用户的 ID        |
| access_code   | varchar(100) | varchar  | 100  | YES      |        | 个别平台的授权信息     |
| union_id      | varchar(50)  | varchar  | 50   | YES      |        | 第三方用户的 union id  |
| scope         | varchar(100) | varchar  | 100  | YES      |        | 第三方用户授予的权限   |
| token_type    | varchar(100) | varchar  | 100  | YES      |        | 个别平台的授权信息     |
| id_token      | varchar(100) | varchar  | 100  | YES      |        | id token               |
| mac_algorithm | varchar(100) | varchar  | 100  | YES      |        | 小米平台用户的附带属性 |
| mac_key       | varchar(100) | varchar  | 100  | YES      |        | 小米平台用户的附带属性 |
| code          | varchar(100) | varchar  | 100  | YES      |        | 用户的授权code         |

 

 

 

\14.  社会化用户与系统用户关系表，此表是用户表与第三方账号信息表直接的关联表，用户与社会化用户表是一对多关系，如图表5.14所示。

表5.14社会化用户与系统用户关系表

| 字段名         | 数据类型    | 字段类型 | 长度 | 是否为空 | 默认值 | 备注         |
| -------------- | ----------- | -------- | ---- | -------- | ------ | ------------ |
| id             | int(10)     | int      |      | NO       |        | 主键         |
| user_id        | varchar(50) | varchar  | 50   | NO       |        | 用户id       |
| social_user_id | varchar(50) | varchar  | 50   | NO       |        | 社会化用户ID |

 

 

 



### 5.3系统详细设计

**5.3.1****、系统用例**

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image018.jpg)

图5.5系统用例图

说明：

l 用户管理、购物车管理、订单管理、产品展示四个模块构成了在线销售系统

l User是指系统用户，包括注册用户和匿名用户两种，匿名用户只可以浏览商

品，匿名用户通过用户管理模块注册后就可以使用购物车和下订单。

   

 

 

 

 

 

 

 

 

**5.3.2****、部署设计**

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image019.png)

图5.6系统部署图

说明：

l Web 服务器: Linux系统上，部署的tomcat服务器与nginx服务器

l 数据库服务器:安装运行数据应用程序，存放数据库文件。

**5.3.3****、模块设计**

\1)   模型设计

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image021.jpg)

图5.7系统模型类图（一）

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image023.jpg)

图5.8系统模型类图（二）

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image025.jpg)

图5.9系统模型类图（三）

说明：

| l Activate类：       | 激活管理模型，对应于数据库中的激活管码表                     |
| -------------------- | ------------------------------------------------------------ |
| l Address类：        | 配送地址信息模型，对应于数据库中的配送地址信息表             |
| l Areas类：          | 行政区域县区信息模型，对应于数据库中的行政区域县区信息表     |
| l Cart类：           | 购物车模型，对应于数据库中的购物车中间表                     |
| l CartItem类：       | 购物车与商品模型，对应于数据库中的购物车中间表               |
| l Category类：       | 类别模型，对应于数据库中的类别表                             |
| l Cities类：         | 行政区域地州市信息模型，对应于数据库中的行政区域地州市信息表 |
| l Member类：         | 会员模型，对应于数据库中的会员表                             |
| l OrderDetail类：    | 订单明细模型，对应于数据库中的订单明细表                     |
| l OrderItem类：      | 订单条目模型，对应于数据库中的订单条目表                     |
| l Orders类：         | 订单模型，对应于数据库中的订单表                             |
| l Product类：        | 商品模型，对应于数据库中的商品表                             |
| l Provinces类：      | 省份信息模型，对应于数据库中的省份信息表                     |
| l SocialUser类：     | 社会化用户模型，对应于数据库中的社会化用户表                 |
| l SocialUserAuth类： | 社会化用户与系统用户模型，对应于数据库中的社会化用户与系统用户表 |

### 5.4、编码设计（具体实现流程） 

5.4.1 首页设计

\1.    商城首页

商城首页，商城首页整个页面分为三个页面，头部、导航、与实体部分，使用include标签进行引入，头部有个取值判断，从session中判断是否有用户信息，有则显示用户名，否则显示“亲，请登录 免费注册”，购物车数量也是从session中获取。导航就是一些超链接，主题部分是商品的列表，展示了近期60个热门商品。如图5.10所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image027.jpg)

图5.10商城首页图

 

5.4.2 登录和注册设计

\1.    注册页面

```
页面主要是一个表单，用户输入完表单信息后，点击注册，使用Ajax发起post请求，请求路径为 /shop/member/register，controller接收到数据后，首先进行非空判断，其次使用正则表达式校验邮箱格式是否正确，并且校验用户名和邮箱是否重复（根据此用户名与邮箱，分别遍历用户表，查看是否有匹配项），数据校验无误后，将用户密码进行md5加密并且把用户信息存放到用户表中，然后生成一个uuid作为激活码，构建激活链接，再然后调用JavaMailSender类的sendHtmlMail方法进行发送激活邮件，发送邮件服务器是使用的163邮箱，之后用户需要在自己邮箱里查看并且点击激活，激活接口接收到数据口，先验证激活码是否正确，然后验证激活时间是否在有效期内，验证通过，根据激活表里的用户id修改此用户的status字段为1，到此整个注册功能已完成。如图5.11所示。
```

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image029.jpg)

图5.11商城注册图

 

\2.    登录页面

\1)   通过用户名和密码登录

登录界面也是一个表单，用户需要输入用户名与密码，提交后，首先也是进行非空校验，然后将用户密码进行md5加密，通过用户的账号与加密的密码查询数据库中的用户表，若未查询到，则返回账号或密码错误提示信息，并且通过model携带错误信息，返回到登录页面，登录页面会进行取值与显示。登录成功后会先获取用户上次登录时间，存放在session中，其次立即刷新数据库中的用户上次登录时间字段，为此时此刻。并且还向session中存放用户基本信息，便于其他页面的显示。如图5.12所示。

\2)   通过第三方账号登录

使用了第三方授权登录框架[JustAuth](https://gitee.com/yadong.zhang/JustAuth)，引入此框架后，还需要第三方的ID和Secret ，Gitee和百度平台不需要认证就能申请，QQ需要提交个人信息，进行开发者认证后，才可进行申请，用户点击第三方平台logo后，会跳转到第三方平台登录页，如图5.13所示。登录完成后，第三方平台会在回调地址中返回用户基本信息，以及用户授权id，先将用户信息保存在社会化用户信息表中，然后去社会化用户表与系统用户表中，进行查找，找到用户信息，则直接进行登录登录操作，若没有查找到，则会跳转到绑定页面，如图5.14所示。若用户未注册，可以进行注册与绑定操作，如图5.15所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image031.jpg)

图5.12商城登录图

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image033.jpg)

图5.13第三方授权图

 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image035.jpg)

图5.14用户登录绑定第三方账号图

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image037.jpg)

图5.15用户注册绑定第三方账号图

 

5.4.3 商品列表、分页、商品详情以及商品查找设计

\1.    商品列表页

顶部也是引入的头部文件，导航与菜单，就是商品分类栏目，为了减轻数据库压力，提高并发量，商品类别是存放在redis中，点击某个类别后，会在url中拼接clazz字段，值为类别id，后端进行查找，数据通过model携带到前端页面，前端页面通过thymeleaf的循环表达式进行遍历与显示。用户还可通过综合排序、销量排序、价格优先，点击后也是通过url传参，后端sql通过group by 进行排序。如图5.16所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image039.jpg)

图5.16商品列表图

 

\2.    商品列表分页效果

分页前端使用的bootstrap中的分页组件，点击某一页后，在url中拼接pageNum参数，页面大小是后端固定的为12，在查询语句后面加limit进行限制。如图5.17所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image041.jpg)

图5.17商品列表分页图

 

\3.    查找商品

用户输入商品名称，点击搜索按钮，传参到后端，sql查找语句后拼接like语句 进行模糊查找。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image043.jpg)

图5.18商品列表分页图

\4.    商品详情页

展示商品的详细信息，根据商品id，从数据库中查找到此商品，进行展示，用户可以进行购买，未登录用户，会提示先登录。数量可以自定义。如图

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image045.jpg)

图5.19商品详情页图

 

5.4.4 购物车设计

\1.    购物车页面

此页面引入了vue.js 用户操作商品数量，可以通过模板属性直接算出总金额，用户对商品数量的每次更改或者对商品的勾选都会出发请求，修改购物车表中的数据，方便用户下次查看与管理购物车，删除是根据每个商品的商品id进行删除的，此页面的所有请求是通过axios发起的。如图5.20所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image047.jpg)

图5.20购物车图

 

5.4.5 订单与支付模块设计

\1.    结算页面

用户在购物车页面点击结算后，跳转到此页面，加载页面前，会查询用户地址信息，并且显示在页面上，用户也可以添加与删除或编辑地址信息，页面地址信息，是一个对象，点击编辑后，直接取值在表单内进行渲染。地址选择下拉框，是一个三级联动，页面加载时，也会把所有的省份信息获取到，用户再进行选择后，会立即发送请求，查找市级信息，区级信息也是如此。用户点击提交后，会在order表以及order item表中插入对应信息。并且将用户的购物车中的已结算商品进行删除操作。如图5.21所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image049.jpg)

图5.21订单确认页图

 

\2.    支付页面

目前只对接了支付宝支付，用户在订单确认页，点击提交订单按钮后，跳转到此页面，根据从order表中获取订单信息，例如金额，订单名称，配置支付信息参数 传递给支付宝支付宝会回传数据，对传递的数据通过谷歌的zxing进行生成二维码，此时页面会每隔3秒进行查询操作，查询到订单明细表里有数据后则视为付款成功。用户使用支付宝扫码并且付款，后端可以获取到支付宝异步的回调参数，之后后使用JSONObject进行解析成json数据，若交易类型与交易参数都无误，则进行把对应的数据插入到订单明细表中。如图5.22所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image051.jpg)

图5.22支付页图

 

\3.    付款成功页

用户在付款界面操作后会根据标识，显示相应的效果，有取消订单标识，付款成功标识，如图5.23所示。未支付标识。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image053.jpg)

图5.23付款成功页图

 

5.4.6 个人中心管理与订单管理设计

\1.    个人中心页

个人中心页，用户访问此类页面会首先经过spring配置的过滤器，只有登录的用户才可以访问此类页面，用户可以进行修改头像，头像图片通过form表单进行上传，表单的enctype属性需要设置成multipart/form-data，否则不能进行上传文件操作，用户还可以更改用户名与性别，如图5.24所示。用户还可以根据旧密码从新设置新密码，如图5.25所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image055.jpg)

图5.24个人中心页图

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image057.jpg)

图5.25修改密码页图

 

\2.    订单管理页

此页面主要展示用户的订单信息，用户可以进行查看、删除与确认收货操作。实现流程，主要是把订单表里此用户的所有订单，或者分类显示，分类主要依据是订单表里的status字段。分别分为待付款、代发货、待收货、已完成四种状态。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image059.jpg)

图5.26订单管理页图

 

\3.    订单详情页

用户在订单管理页面，点击订单详情后，发起get请求，携带订单id，后端也会从session中验证用户信息是否不为空，然后根据订单id在订单明细表中进行查询，放入model中携带到前端，然后通过thymelef取值表达式进行取值。如图5.27所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image061.jpg)

图5.27商品列表分页图

 

5.4.7 后台模块设计

\1.    后台登录页
 后台主要使用的若依脚手架，登录需要输入验证码，验证码生成流程为，页面加载触发函数，发起请求，后端接收到请求，会生成一个数学表达式，然后把结果存入redis中，把key以字符串的形式表达式以Base64为编码的图片返回给前端，用户提交后，携带的有验证码的key根据key后端去redis中进行查找，然后进行比对。如图5.28所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image063.jpg)

图5.28商品列表分页图

 

\2.    后台主页

主页展示数据有：今日登录会员、今日付款订单、今日收益、商品类别数量、累计收益、累计会员数量，为了查询方便与数据的安全，将查询语句封装成视图。只需执行一次，便可得到全部的数据，销售记录表与类别数量表，是通过Apache ECharts框架进行生成的，后端只需要传递相对应的数组，前端直接就能显示了。 

 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image065.jpg)

图5.29后台首页图

 

\3.    商品类别管理页

商品的类别，数据从数据库中查找，修改后，会同时修改redis中的类别信息，这样可以与前台保持同步。 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image067.jpg)

图5.30商品类别管理页图

 

\4.    商品管理页

商品管理，直接将商品的图片链接进行显示如图5.31所示，编辑或添加商品后也可以上传商品的封面图，上传到nginx服务器中，然后数据库中存放图片url。如图5.32所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image069.jpg)

图5.31商品管理页图

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image071.jpg)

图5.32添加商品页图

 

\5.    会员管理页

会员管理页，可以管理网站已经注册的会员，可以更改用户的信息。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image073.jpg)

图5.33会员管理页图

 

\6.    订单管理页

订单与订单详情是一对多关系，订单可以进行删除操作，如图5.34所示，点击详情后，根据订单id查询到订单详细信息，如图5.35所示，可以修改订单的状态。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image075.jpg)

图5.34订单管理页图

 

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image077.jpg)

图5.35订单详情页图

 

\7.    激活管理页

用户发送邮件的激活码，这个功能没多大用，可以修改激活码的失效时间。如图5.36所示。

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image079.jpg)

图5.36激活码管理页图

 

## 6. 调试过程

### 6.1 背景

悦桔拉拉商城是本次课程设计开发的一个b2c商城，可以在线销售图书、音像、电子书刊，家用电器，电脑、办公，个护化妆，钟表，母婴食品，饮料、保健食品，手机数码，家居家装，厨具，服饰鞋帽，礼品箱包，珠宝，运动健康，汽车用品，玩具，乐器彩票、旅行、充值、票务18大类数万个品牌百万种商品。

 

### 6.2 测试目的

测试是“为了尽可能的发现软件中的错误，而不是为了证明程序的正确性”,测试的目的就是在软件投入运行之前，按照测试的原则要求，尽可能多的发现软件中的错误。本文档主要描述《悦桔拉拉商城》中用户前台登录模块、用户注册模块、购物车模块的测试。本章的主要描述了该系统功能测试点及测试方法。

### 6.3测试环境

软件环境：

u 测试代码编写工具：PyCharm 2021.1.3

u 运行环境：python 3.8

u 浏览器：Google Chrome 96.0.4664.110

硬件环境：

   Window11 电脑

网络环境：

   100Mbps 移动光纤

版本管理：

​        Git、Gitee远程仓库

### 6.4 测试策略

考虑应用程序和它的所要求的架构的稳定性和可靠性，从用户角度考虑应用程序，也就是说，应用程序将如何使用，以及其是否满足了必要的质量标准。变更标准将在测试开始之前由测试团队和开发团队确定。例如，标准可能包括对期望功能的影响、提议的变更对代码影响的量、以及提议的变更所要求的设计。测试人员将评估标准。测试领导将确定变更需求是否接受变了更要求的状态还是没有，缺陷报告将翻译成变更要求并传递给开发。

### 6.5 测试方法

1.测试方法：黑盒测试结合白盒测试法，静态测试和动态测试，确认测试，单元测试和组装测试。

2.选取测试用例的原则：严格遵照测试用例设计的基本原则，对每个概念都详尽描述，尽量避免含糊的测试用例：尽量将具有相类似功能的测试用例抽象并归类。在设计测试用例时，应包括合理的输入条件和不合理的输入条件，对每一个测试结果做全面的检查。

3.单元测试：采用白盒法和黑盒法相结合的方法，对于逻辑结构复杂的模块采用白盒法，对于以输入、输出为主的模块采用黑盒法测试，以提高测试的效率。

4.组装测试：对软件结构中较上层使用的自顶向下与对软件结构中较下层使用的自底向上方法相结合。

5.确认测试：由用户参与按需求规格说明书验收。

系统测试：采用人工测试方法。

### 6.4 测试需求分析

**6.4.1****测试范围概览**

表6.1测试范围表

| 序号             | 产品描述       | 测试要点       | 备注         |
| ---------------- | -------------- | -------------- | ------------ |
| 1                | 注册与登录功能 | 手机号注册测试 | 功能准确实现 |
| 表单数据校验测试 |                |                |              |
| 手机号登录测试   |                |                |              |
| 2                | 商品搜索功能   | 搜索商品测试   | 功能准确实现 |
| 3                | 购物订单功能   | 购物车功能测试 | 功能准确实现 |
| 收货地址编辑测试 |                |                |              |
| 提交订单测试     |                |                |              |

**6.4.2****测试流程图**

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image081.png)

图6.1测试流程图

 

### 6.5  测试设计与测试结果

**6.5.1**    **测试用例**

表6.2测试用例表

| 序号 | 检查项         | 测试需求分析                                                 | 检查结果          | 说明 |
| ---- | -------------- | ------------------------------------------------------------ | ----------------- | ---- |
| 1    | 登录功能测试   | 1.  点击首页登录按钮，跳转到登陆页面  2.  输入正确的用户名和密码登录成功  3.  输入错误的用户名密码登录失败  4.  用户名正确，密码错误，是否提示输入密码错误？  5.  用户名错误，密码正常，是否提示输入用户名错误？  6.  用户名和密码都错误，是否有相应提示？  7.  用户名密码为空时，是否有相应提示？  8.  如果用户未注册，提示请先注册，然后进行登录  9.  短信登录输入非手机号，是否有提示  10. 密码框是否加密显示？  11. 用户名是否支持中文、特殊字符？  12. 用户名是否有长度限制？  13. 密码是否支持中文，特殊字符？  14. 密码是否有长度限制？  15. 密码是否区分大小写？  16. 密码为一些简单常用字符串时，是否提示修改？如：123456 | 是（）     否（） |      |
| 2    | 注册功能测试   | 1.  点击‘立即注册’按钮，跳转到注册页面  2.  输入手机号，验证码  3.  点击‘同意并注册’按钮，跳转到登陆页面  4.  输入已注册过的手机号获取验证码再次注册  5.  输入不符合手机号规则的号码获取验证码进行注册  6.  输入欠费的手机号获取验证码进行注册  7.  输入10位数字获取验证码进行注册  8.  输入12位数字获取验证码进行注册  9.  输入11位字母获取验证码进行注册  10. 不输入任何内容获取验证码点击注册  11. 输入空格获取验证码点击注册  12. 输入表情符号获取验证码点击注册  13. 输入有效未注册的手机号和错误的验证码点击注册 | 是（）     否（） |      |
| 3    | 购物车功能测试 | 1.  添加商品，商品数量是否有上下限  2.  点击减少按钮，商品数量是否可以小于等于零  3.  是否可以快速删除多个商品  4.  点击商品图片或链接，是否可以跳转到商品详情  5.  商品编辑，编辑数量输入框是否可以输入非数字，或负数  6.  未登录用户是否可以添加商品到购物车 | 是（）     否（） |      |

### 6.6  测试报告

![img](file:///C:/Users/ke/AppData/Local/Temp/msohtmlclip1/01/clip_image083.jpg)

图6.2测试报告图

 

6.7 测试分析与总结

**6.7.1**    **缺陷分析**

\1. 没有手机号加验证码验证，用户可以输入别人的手机号进行注册。

\2.  登录没有验证码，安全级别不够，别人可以对密码进行暴力破解

**6.7.2**    **测试结论**

可以再提高一下注册和登录模块的安全性，保障用户数据安全。

## 7. 小结

通过本次的课程设计，用了一个多月的时间，完成了这个商城系统，也让我学习到了很多知识，也让我意识到自己还有很多不足的地方，今后会更加努力学习，不断学习新知识，完善自我的知识体系。

另外我还深刻体会到了，从事软件开发行业，每一步开发都要经过深思，每一个细微的细节都必须十分的注意，如果不认真思考决策，就会出现或大或小的错误，如果早期的错误隐藏下来，对后面的工作影响就会很大，甚至有时要推倒很多前面做的工作重来。例如数据库订单表中的金额字段，创建时用了float类型，由于精度问题，导致了金额与实际的金额不一致，查阅了资料，才发现要使用decimal类型。

最后，感谢郝莉萍老师对我的指导，以及同学的帮助，这次课程设计才能顺利完成。

 

 

 

 

 

 

 

 

 

 

 

 

### 8. 参考文献

[1]  光耀，张树有，基于设计结构矩阵的产品变异设计约束重建．《 CNKI;WanFang 》2010.

[2]  张海藩，牟永敏，《软件工程导论》. 清华大学出版，2013.

[3]  [美]埃尔克（Eckel，B），《Java编程思想 （第4版）》2007.

[4]  张帆《Vue.js项目开发实战》机械工业出版社出版2018.

 

# 附录：

项目git地址：https://gitee.com/weicodeyun/course-design-yueju-lala-mall.git