悅桔拉拉商城
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.用戶需要輸入用戶名、郵箱、密碼、以及重復密碼
- 用戶提交后會對表單數據進行校驗,用戶名不可用重復,郵箱格式也必須正確且不允許重復,密碼用戶自定義,重復密碼需要與密碼欄書寫一致,防止用戶操作失誤輸入錯誤的密碼。
- 用戶閱讀并且勾選服務協議,才可注冊。
- 注冊后,系統會向用戶注冊郵箱發送激活鏈接,用戶需要去郵箱查看并且點擊激活用戶,才可以使用此賬號進行購物操作。
圖 4.1 注冊業務流程圖
4.1.2 用戶登錄基本需求
- 用戶進入登錄頁面,輸入用戶名以及密碼進行登錄。
- 用戶還可以使用 Gitee、百度、QQ 等第三方平臺賬號進行登錄
- 首次使用第三方賬號登錄,需要綁定賬號信息,之后可以直接登錄
圖 4.2 登錄業務流程圖
4.1.3 用戶購物需求
- 未登錄用戶可以瀏覽商品,已登錄用戶可以進行購買。
- 在商品詳情頁點擊加入購物車。
- 在購物車頁面,用戶點擊去結算,進入確認訂單頁。
- 確認訂單頁,用戶可以填寫與更改收貨地址,和確認購買物品的詳細信息。
- 用戶確認無誤,提交訂單。
- 進入支付頁面,目前只支持支付寶付款,用戶需要在兩分鐘內使用支付寶 app 掃碼付款。
- 付款成功,交易完成,等待商家發貨。
圖 5.3 用戶購物流程圖
4.1.4 后臺管理系統基本需求
- 后臺主要有以下功能類別
- 今天商城后臺,需要輸入管理員賬戶與密碼,還有驗證碼
- 商品管理:管理員可以對商品信息進行增刪改查以及導入
- 類別管理:是對商品的類別進行的管理
- 會員管理:可以直接看到商城所有注冊的會員,以及對會員信息進行管理
- 激活碼管理:可以看到用戶發送的激活碼信息。
圖 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 圖,針對本系統的特點,在對所搜集的數據進行規范化之后,定義了如下十四張表格:
- 會員表,用來存放會員信息的表,密碼是存儲 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 | 性別 |
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 | 用戶狀態 |
- 商品表,此表主要存儲商品數據,主鍵也是自增 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,外鍵 |
- 商品類別表,存儲商品的分類信息,其中主要包括類別名與分類排序,主鍵亦為自增 int 類型,系統顯示類別時,可以根據類別排序號進行展示,數字越小,排名越靠前。如圖表 5.3 所示。
表 5.3 商品類別表
字段名 | 數據類型 | 字段類型 | 長度 | 是否為空 | 默認值 | 備注 |
categoryid | int(11) | int | NO | 分類唯一的 ID 號 | ||
name | varchar(50) | varchar | 50 | NO | 分類名稱 | |
sort | int(11) | int | YES | 1 | 分類排序號,默認 1 |
- 購物車中間表,用來存儲每個用戶購物車的商品信息,其中用戶與商品之間是多對多關系,表中還有商品數量字段,用來標明此用戶購物車中此商品的數量,選中狀態字段,標明用戶對自己購物車的勾選情況,用戶下次登錄,依舊顯示的是之前勾選的物品,如圖表 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 | 默認選中狀態 |
- 配送地址信息表,主要存儲用戶收獲地址信息,外鍵是 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 | 是否默認選擇 |
- 省份信息表,用戶編輯或添加收獲地址時可以選擇省份信息,如圖表 5.6 所示。
表 5.6 省份信息表
字段名 | 數據類型 | 字段類型 | 長度 | 是否為空 | 默認值 | 備注 |
id | int(11) | int | NO | |||
provinceid | varchar(20) | varchar | 20 | NO | ||
province | varchar(50) | varchar | 50 | NO |
- 行政區域地州市信息表,用戶編輯或添加收獲地址時可以選擇行政區域地州市信息,如圖表 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 |
- 行政區域縣區信息表,用戶編輯或添加收獲地址時可以選擇行政區域縣區信息,如圖表 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 |
- 激活碼表,用于存儲用或注冊后發送的激活碼信息表,激活碼是使用 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 |
- 訂單表,用戶提交訂單后,會將訂單信息存儲到表中,之后用戶可在個人中心里訂單頁面查看自己的所有訂單也可以進行刪除操作。如圖表 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)的編號 |
- 訂單條目表,詳細的保存了用戶訂單中每個商品的數量與最終金額,與訂單表是多對一關系,如圖表 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 | 關聯的訂單號(外鍵) |
- 訂單明細表,詳細的記錄用戶的訂單交易信息,方便用戶或管理員統計與管理交易信息,包括收益金額,用戶掃碼支付后,支付成功與否就是回調驗證的此表數據,如圖表 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 微信 |
- 社會化用戶表,用于存儲用戶關聯的第三方賬戶信息,用戶綁定第三方賬號后,可以直接使用第三方賬號進行登錄,如圖表 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 |
- 社會化用戶與系統用戶關系表,此表是用戶表與第三方賬號信息表直接的關聯表,用戶與社會化用戶表是一對多關系,如圖表 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、系統用例
圖 5.5 系統用例圖
說明:
用戶管理、購物車管理、訂單管理、產品展示四個模塊構成了在線銷售系統
User 是指系統用戶,包括注冊用戶和匿名用戶兩種,匿名用戶只可以瀏覽商品,匿名用戶通過用戶管理模塊注冊后就可以使用購物車和下訂單。
5.3.2、部署設計
圖 5.6 系統部署圖
說明:
Web 服務器: Linux 系統上,部署的 Tomcat 服務器與 nginx 服務器
數據庫服務器:安裝運行數據應用程序,存放數據庫文件。
5.3.3、模塊設計
- 模型設計
圖 5.7 系統模型類圖(一)
圖 5.8 系統模型類圖(二)
圖 5.9 系統模型類圖(三)
說明:
Activate 類: | 激活管理模型,對應于數據庫中的激活管碼表 |
Address 類: | 配送地址信息模型,對應于數據庫中的配送地址信息表 |
Areas 類: | 行政區域縣區信息模型,對應于數據庫中的行政區域縣區信息表 |
Cart 類: | 購物車模型,對應于數據庫中的購物車中間表 |
CartItem 類: | 購物車與商品模型,對應于數據庫中的購物車中間表 |
Category 類: | 類別模型,對應于數據庫中的類別表 |
Cities 類: | 行政區域地州市信息模型,對應于數據庫中的行政區域地州市信息表 |
Member 類: | 會員模型,對應于數據庫中的會員表 |
OrderDetail 類: | 訂單明細模型,對應于數據庫中的訂單明細表 |
OrderItem 類: | 訂單條目模型,對應于數據庫中的訂單條目表 |
Orders 類: | 訂單模型,對應于數據庫中的訂單表 |
Product 類: | 商品模型,對應于數據庫中的商品表 |
Provinces 類: | 省份信息模型,對應于數據庫中的省份信息表 |
SocialUser 類: | 社會化用戶模型,對應于數據庫中的社會化用戶表 |
SocialUserAuth 類: | 社會化用戶與系統用戶模型,對應于數據庫中的社會化用戶與系統用戶表 |
5.4、編碼設計(具體實現流程)
5.4.1 首頁設計
- 商城首頁
商城首頁,商城首頁整個頁面分為三個頁面,頭部、導航、與實體部分,使用 include 標簽進行引入,頭部有個取值判斷,從 session 中判斷是否有用戶信息,有則顯示用戶名,否則顯示“親,請登錄 免費注冊”,購物車數量也是從 session 中獲取。導航就是一些超鏈接,主題部分是商品的列表,展示了近期 60 個熱門商品。如圖 5.10 所示。
圖 5.10 商城首頁圖
5.4.2 登錄和注冊設計
- 注冊頁面
頁面主要是一個表單,用戶輸入完表單信息后,點擊注冊,使用 AJAX 發起 post 請求,請求路徑為 /shop/member/register,controller 接收到數據后,首先進行非空判斷,其次使用正則表達式校驗郵箱格式是否正確,并且校驗用戶名和郵箱是否重復(根據此用戶名與郵箱,分別遍歷用戶表,查看是否有匹配項),數據校驗無誤后,將用戶密碼進行 md5 加密并且把用戶信息存放到用戶表中,然后生成一個 uuid 作為激活碼,構建激活鏈接,再然后調用 JavaMailSender 類的 sendHtmlMail 方法進行發送激活郵件,發送郵件服務器是使用的 163 郵箱,之后用戶需要在自己郵箱里查看并且點擊激活,激活接口接收到數據口,先驗證激活碼是否正確,然后驗證激活時間是否在有效期內,驗證通過,根據激活表里的用戶 id 修改此用戶的 status 字段為 1,到此整個注冊功能已完成。如圖 5.11 所示。
圖 5.11 商城注冊圖
- 登錄頁面
- 通過用戶名和密碼登錄
登錄界面也是一個表單,用戶需要輸入用戶名與密碼,提交后,首先也是進行非空校驗,然后將用戶密碼進行 md5 加密,通過用戶的賬號與加密的密碼查詢數據庫中的用戶表,若未查詢到,則返回賬號或密碼錯誤提示信息,并且通過 model 攜帶錯誤信息,返回到登錄頁面,登錄頁面會進行取值與顯示。登錄成功后會先獲取用戶上次登錄時間,存放在 session 中,其次立即刷新數據庫中的用戶上次登錄時間字段,為此時此刻。并且還向 session 中存放用戶基本信息,便于其他頁面的顯示。如圖 5.12 所示。
- 通過第三方賬號登錄
使用了第三方授權登錄框架 JustAuth,引入此框架后,還需要第三方的 ID 和 Secret ,Gitee 和百度平臺不需要認證就能申請,QQ 需要提交個人信息,進行開發者認證后,才可進行申請,用戶點擊第三方平臺 logo 后,會跳轉到第三方平臺登錄頁,如圖 5.13 所示。登錄完成后,第三方平臺會在回調地址中返回用戶基本信息,以及用戶授權 id,先將用戶信息保存在社會化用戶信息表中,然后去社會化用戶表與系統用戶表中,進行查找,找到用戶信息,則直接進行登錄登錄操作,若沒有查找到,則會跳轉到綁定頁面,如圖 5.14 所示。若用戶未注冊,可以進行注冊與綁定操作,如圖 5.15 所示。
圖 5.12 商城登錄圖
圖 5.13 第三方授權圖
圖 5.14 用戶登錄綁定第三方賬號圖
圖 5.15 用戶注冊綁定第三方賬號圖
5.4.3 商品列表、分頁、商品詳情以及商品查找設計
- 商品列表頁
頂部也是引入的頭部文件,導航與菜單,就是商品分類欄目,為了減輕數據庫壓力,提高并發量,商品類別是存放在 Redis 中,點擊某個類別后,會在 url 中拼接 clazz 字段,值為類別 id,后端進行查找,數據通過 model 攜帶到前端頁面,前端頁面通過 thymeleaf 的循環表達式進行遍歷與顯示。用戶還可通過綜合排序、銷量排序、價格優先,點擊后也是通過 url 傳參,后端 SQL 通過 group by 進行排序。如圖 5.16 所示。
圖 5.16 商品列表圖
- 商品列表分頁效果
分頁前端使用的 bootstrap 中的分頁組件,點擊某一頁后,在 url 中拼接 pageNum 參數,頁面大小是后端固定的為 12,在查詢語句后面加 limit 進行限制。如圖 5.17 所示。
圖 5.17 商品列表分頁圖
- 查找商品
用戶輸入商品名稱,點擊搜索按鈕,傳參到后端,SQL 查找語句后拼接 like 語句 進行模糊查找。
圖 5.18 商品列表分頁圖
- 商品詳情頁
展示商品的詳細信息,根據商品 id,從數據庫中查找到此商品,進行展示,用戶可以進行購買,未登錄用戶,會提示先登錄。數量可以自定義。如圖
圖 5.19 商品詳情頁圖
5.4.4 購物車設計
- 購物車頁面
此頁面引入了 vue.js 用戶操作商品數量,可以通過模板屬性直接算出總金額,用戶對商品數量的每次更改或者對商品的勾選都會出發請求,修改購物車表中的數據,方便用戶下次查看與管理購物車,刪除是根據每個商品的商品 id 進行刪除的,此頁面的所有請求是通過 axios 發起的。如圖 5.20 所示。
圖 5.20 購物車圖
5.4.5 訂單與支付模塊設計
- 結算頁面
用戶在購物車頁面點擊結算后,跳轉到此頁面,加載頁面前,會查詢用戶地址信息,并且顯示在頁面上,用戶也可以添加與刪除或編輯地址信息,頁面地址信息,是一個對象,點擊編輯后,直接取值在表單內進行渲染。地址選擇下拉框,是一個三級聯動,頁面加載時,也會把所有的省份信息獲取到,用戶再進行選擇后,會立即發送請求,查找市級信息,區級信息也是如此。用戶點擊提交后,會在 order 表以及 order item 表中插入對應信息。并且將用戶的購物車中的已結算商品進行刪除操作。如圖 5.21 所示。
圖 5.21 訂單確認頁圖
- 支付頁面
目前只對接了支付寶支付,用戶在訂單確認頁,點擊提交訂單按鈕后,跳轉到此頁面,根據從 order 表中獲取訂單信息,例如金額,訂單名稱,配置支付信息參數 傳遞給支付寶支付寶會回傳數據,對傳遞的數據通過谷歌的 zxing 進行生成二維碼,此時頁面會每隔 3 秒進行查詢操作,查詢到訂單明細表里有數據后則視為付款成功。用戶使用支付寶掃碼并且付款,后端可以獲取到支付寶異步的回調參數,之后后使用 JSONObject 進行解析成 JSON 數據,若交易類型與交易參數都無誤,則進行把對應的數據插入到訂單明細表中。如圖 5.22 所示。
圖 5.22 支付頁圖
- 付款成功頁
用戶在付款界面操作后會根據標識,顯示相應的效果,有取消訂單標識,付款成功標識,如圖 5.23 所示。未支付標識。
圖 5.23 付款成功頁圖
5.4.6 個人中心管理與訂單管理設計
- 個人中心頁
個人中心頁,用戶訪問此類頁面會首先經過 Spring 配置的過濾器,只有登錄的用戶才可以訪問此類頁面,用戶可以進行修改頭像,頭像圖片通過 form 表單進行上傳,表單的 enctype 屬性需要設置成 multipart/form-data,否則不能進行上傳文件操作,用戶還可以更改用戶名與性別,如圖 5.24 所示。用戶還可以根據舊密碼從新設置新密碼,如圖 5.25 所示。
圖 5.24 個人中心頁圖
圖 5.25 修改密碼頁圖
- 訂單管理頁
此頁面主要展示用戶的訂單信息,用戶可以進行查看、刪除與確認收貨操作。實現流程,主要是把訂單表里此用戶的所有訂單,或者分類顯示,分類主要依據是訂單表里的 status 字段。分別分為待付款、代發貨、待收貨、已完成四種狀態。
圖 5.26 訂單管理頁圖
- 訂單詳情頁
用戶在訂單管理頁面,點擊訂單詳情后,發起 get 請求,攜帶訂單 id,后端也會從 session 中驗證用戶信息是否不為空,然后根據訂單 id 在訂單明細表中進行查詢,放入 model 中攜帶到前端,然后通過 thymelef 取值表達式進行取值。如圖 5.27 所示。
圖 5.27 商品列表分頁圖
5.4.7 后臺模塊設計
- 后臺登錄頁
后臺主要使用的若依腳手架,登錄需要輸入驗證碼,驗證碼生成流程為,頁面加載觸發函數,發起請求,后端接收到請求,會生成一個數學表達式,然后把結果存入 Redis 中,把 key 以字符串的形式表達式以 Base64 為編碼的圖片返回給前端,用戶提交后,攜帶的有驗證碼的 key 根據 key 后端去 Redis 中進行查找,然后進行比對。如圖 5.28 所示。
圖 5.28 商品列表分頁圖
- 后臺主頁
主頁展示數據有:今日登錄會員、今日付款訂單、今日收益、商品類別數量、累計收益、累計會員數量,為了查詢方便與數據的安全,將查詢語句封裝成視圖。只需執行一次,便可得到全部的數據,銷售記錄表與類別數量表,是通過 Apache ECharts 框架進行生成的,后端只需要傳遞相對應的數組,前端直接就能顯示了。
圖 5.29 后臺首頁圖
- 商品類別管理頁
商品的類別,數據從數據庫中查找,修改后,會同時修改 Redis 中的類別信息,這樣可以與前臺保持同步。
圖 5.30 商品類別管理頁圖
- 商品管理頁
商品管理,直接將商品的圖片鏈接進行顯示如圖 5.31 所示,編輯或添加商品后也可以上傳商品的封面圖,上傳到 nginx 服務器中,然后數據庫中存放圖片 url。如圖 5.32 所示。
圖 5.31 商品管理頁圖
圖 5.32 添加商品頁圖
- 會員管理頁
會員管理頁,可以管理網站已經注冊的會員,可以更改用戶的信息。
圖 5.33 會員管理頁圖
- 訂單管理頁
訂單與訂單詳情是一對多關系,訂單可以進行刪除操作,如圖 5.34 所示,點擊詳情后,根據訂單 id 查詢到訂單詳細信息,如圖 5.35 所示,可以修改訂單的狀態。
圖 5.34 訂單管理頁圖
圖 5.35 訂單詳情頁圖
- 激活管理頁
用戶發送郵件的激活碼,這個功能沒多大用,可以修改激活碼的失效時間。如圖 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 測試范圍表
序號 | 產品描述 | 測試要點 | 備注 |
1 | 注冊與登錄功能 | 手機號注冊測試 | 功能準確實現 |
表單數據校驗測試 | |||
手機號登錄測試 | |||
2 | 商品搜索功能 | 搜索商品測試 | 功能準確實現 |
3 | 購物訂單功能 | 購物車功能測試 | 功能準確實現 |
收貨地址編輯測試 | |||
提交訂單測試 |
6.4.2 測試流程圖
圖 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 測試報告
圖 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.