悦桔拉拉商城

1. 课设目的

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

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

2. 开发环境

硬件环境：Window11 电脑、Centos7.6 服务器

软件环境：IntelliJ IDEA 2021.1.3 开发工具

JDK 16 运行环境

Mysq8

Navicat 15 for MySQL

XShell、XFtp

Redis5

Docker

Node.js 16.3.1

Maven

Nginx 1.9.9

3. 课设内容

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

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

4. 需求分析

4.1 功能性需求分析

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

4.1.1 用户注册基本需求

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

1. 用户提交后会对表单数据进行校验，用户名不可用重复，邮箱格式也必须正确且不允许重复，密码用户自定义，重复密码需要与密码栏书写一致，防止用户操作失误输入错误的密码。
2. 用户阅读并且勾选服务协议，才可注册。
3. 注册后，系统会向用户注册邮箱发送激活链接，用户需要去邮箱查看并且点击激活用户，才可以使用此账号进行购物操作。

图 4.1 注册业务流程图

4.1.2 用户登录基本需求

1. 用户进入登录页面，输入用户名以及密码进行登录。
2. 用户还可以使用 Gitee、百度、QQ 等第三方平台账号进行登录
3. 首次使用第三方账号登录，需要绑定账号信息，之后可以直接登录

图 4.2 登录业务流程图

4.1.3 用户购物需求

1. 未登录用户可以浏览商品，已登录用户可以进行购买。
2. 在商品详情页点击加入购物车。
3. 在购物车页面，用户点击去结算，进入确认订单页。
4. 确认订单页，用户可以填写与更改收货地址，和确认购买物品的详细信息。
5. 用户确认无误，提交订单。
6. 进入支付页面，目前只支持支付宝付款，用户需要在两分钟内使用支付宝 app 扫码付款。
7. 付款成功，交易完成，等待商家发货。

图 5.3 用户购物流程图

4.1.4 后台管理系统基本需求

1. 后台主要有以下功能类别
2. 今天商城后台，需要输入管理员账户与密码，还有验证码
3. 商品管理：管理员可以对商品信息进行增删改查以及导入
4. 类别管理：是对商品的类别进行的管理
5. 会员管理：可以直接看到商城所有注册的会员，以及对会员信息进行管理
6. 激活码管理：可以看到用户发送的激活码信息。

图 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、结构设计

图 5.1 系统功能结构图

5.2 数据库设计

5.2.1 概念结构设计

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

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

系统 ER 图如图 5.1 所示。

图 5.2 系统 E-R 图

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

图 5.3 商品实体属性图

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

图 5.4 用户实体属性图

5.2.2 数据库逻辑结构设计

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

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

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

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

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

表 5.1 会员表

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

表 5.2 商品表

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

表 5.3 商品类别表

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

表 5.4 购物车中间表

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

表 5.5 配送地址信息表

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

表 5.6 省份信息表

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

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

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

表 5.8 行政区域县区信息表

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

表 5.9 激活码表

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

表 5.10 商品表

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

表 5.11 商品表

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

表 5.12 商品表

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

表 5.13 社会化用户表

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

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

5.3 系统详细设计

5.3.1、系统用例

图 5.5 系统用例图

说明：

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

User 是指系统用户，包括注册用户和匿名用户两种，匿名用户只可以浏览商品，匿名用户通过用户管理模块注册后就可以使用购物车和下订单。

5.3.2、部署设计

图 5.6 系统部署图

说明：

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

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

5.3.3、模块设计

1. 模型设计

图 5.7 系统模型类图（一）

图 5.8 系统模型类图（二）

图 5.9 系统模型类图（三）

说明：

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

5.4.1 首页设计

1. 商城首页

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

图 5.10 商城首页图

5.4.2 登录和注册设计

1. 注册页面

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

图 5.11 商城注册图

1. 登录页面

1. 通过用户名和密码登录

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

1. 通过第三方账号登录

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

图 5.12 商城登录图

图 5.13 第三方授权图

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

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

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

1. 商品列表页

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

图 5.16 商品列表图

1. 商品列表分页效果

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

图 5.17 商品列表分页图

1. 查找商品

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

图 5.18 商品列表分页图

1. 商品详情页

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

图 5.19 商品详情页图

5.4.4 购物车设计

1. 购物车页面

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

图 5.20 购物车图

5.4.5 订单与支付模块设计

1. 结算页面

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

图 5.21 订单确认页图

1. 支付页面

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

图 5.22 支付页图

1. 付款成功页

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

图 5.23 付款成功页图

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

1. 个人中心页

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

图 5.24 个人中心页图

图 5.25 修改密码页图

1. 订单管理页

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

图 5.26 订单管理页图

1. 订单详情页

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

图 5.27 商品列表分页图

5.4.7 后台模块设计

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

图 5.28 商品列表分页图

1. 后台主页

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

图 5.29 后台首页图

1. 商品类别管理页

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

图 5.30 商品类别管理页图

1. 商品管理页

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

图 5.31 商品管理页图

图 5.32 添加商品页图

1. 会员管理页

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

图 5.33 会员管理页图

1. 订单管理页

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

图 5.34 订单管理页图

图 5.35 订单详情页图

1. 激活管理页

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

图 5.36 激活码管理页图

6. 调试过程

6.1 背景

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

6.2 测试目的

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

6.3 测试环境

软件环境：

测试代码编写工具：PyCharm 2021.1.3

运行环境：python 3.8

浏览器：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 测试范围表

6.4.2 测试流程图

图 6.1 测试流程图

6.5 测试设计与测试结果

6.5.1 测试用例

表 6.2 测试用例表

6.6 测试报告

图 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.