基于Java+MySQL 實現(Web)網上商城

悅桔拉拉商城

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 會員表

字段名

數據類型

字段類型

長度

是否為空

默認值

備注

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

用戶狀態

  1. 商品表,此表主要存儲商品數據,主鍵也是自增 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,外鍵

  1. 商品類別表,存儲商品的分類信息,其中主要包括類別名與分類排序,主鍵亦為自增 int 類型,系統顯示類別時,可以根據類別排序號進行展示,數字越小,排名越靠前。如圖表 5.3 所示。

表 5.3 商品類別表

字段名

數據類型

字段類型

長度

是否為空

默認值

備注

categoryid

int(11)

int

NO

分類唯一的 ID 號

name

varchar(50)

varchar

50

NO

分類名稱

sort

int(11)

int

YES

1

分類排序號,默認 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

默認選中狀態

  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

是否默認選擇

  1. 省份信息表,用戶編輯或添加收獲地址時可以選擇省份信息,如圖表 5.6 所示。

表 5.6 省份信息表

字段名

數據類型

字段類型

長度

是否為空

默認值

備注

id

int(11)

int

NO

provinceid

varchar(20)

varchar

20

NO

province

varchar(50)

varchar

50

NO

  1. 行政區域地州市信息表,用戶編輯或添加收獲地址時可以選擇行政區域地州市信息,如圖表 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

  1. 行政區域縣區信息表,用戶編輯或添加收獲地址時可以選擇行政區域縣區信息,如圖表 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

  1. 激活碼表,用于存儲用或注冊后發送的激活碼信息表,激活碼是使用 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

  1. 訂單表,用戶提交訂單后,會將訂單信息存儲到表中,之后用戶可在個人中心里訂單頁面查看自己的所有訂單也可以進行刪除操作。如圖表 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)的編號

  1. 訂單條目表,詳細的保存了用戶訂單中每個商品的數量與最終金額,與訂單表是多對一關系,如圖表 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

關聯的訂單號(外鍵)

  1. 訂單明細表,詳細的記錄用戶的訂單交易信息,方便用戶或管理員統計與管理交易信息,包括收益金額,用戶掃碼支付后,支付成功與否就是回調驗證的此表數據,如圖表 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 微信

  1. 社會化用戶表,用于存儲用戶關聯的第三方賬戶信息,用戶綁定第三方賬號后,可以直接使用第三方賬號進行登錄,如圖表 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

  1. 社會化用戶與系統用戶關系表,此表是用戶表與第三方賬號信息表直接的關聯表,用戶與社會化用戶表是一對多關系,如圖表 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、模塊設計
  1. 模型設計

圖 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 首頁設計
  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 測試范圍表

序號

產品描述

測試要點

備注

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.

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/94393.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/94393.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/94393.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

高并發搶單系統核心實現詳解:Redisson分布式鎖實戰

一、方法整體流程解析 #mermaid-svg-MROZ2xF7WaNPaztA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MROZ2xF7WaNPaztA .error-icon{fill:#552222;}#mermaid-svg-MROZ2xF7WaNPaztA .error-text{fill:#552222;strok…

Android12 User版本開啟adb root, adb remount, su, 關閉selinux

開啟adb root 直接看adb源碼: __android_log_is_debuggable就是判斷ro.debuggable屬性值,感興趣可以在 源碼下grep下實現看看。auth_required :在adb源碼下定義的全局變量,默認等于true,。看名字就是是否需要用戶授權的flag, 這里不再繼續跟…

金融專業高分簡歷撰寫指南

一、金融求職簡歷原則:深度與亮點并存在金融行業求職時,一份出色的簡歷需突出經歷深度與亮點。01 教育背景需如實填寫畢業院校、專業、GPA及所學課程。金融行業不少公司對求職者學校和學歷有嚴格標準,如“985”“211”院校或碩士以上學歷等。…

專題:2025生命科學與生物制藥全景報告:產業圖譜、投資方向及策略洞察|附130+份報告PDF、原數據表匯總下載

原文鏈接:https://tecdat.cn/?p43526 過去一年,全球生命科學VC融資回暖至1021.5億美元,并購交易雖下滑23%卻聚焦關鍵賽道,創新藥管線中GLP-1受體激動劑以170億美元市場規模領跑,AI技術將研發周期縮短60%……這些數據背…

Compose筆記(四十)--ClickableText

這一節主要了解一下Compose中的ClickableText,在Jetpack Compose中,ClickableText是用于創建可點擊文本的組件,其核心功能是通過聲明式語法將文本設置為交互式元素,用戶點擊時可觸發特定操作。簡單總結如下:API含義 text&#xff…

面試必刷的數組三連:原地刪除與合并

堅持用 清晰易懂的圖解 多語言代碼,讓每道題變得簡單! 呆頭個人主頁詳情 呆頭個人Gitee代碼倉庫 呆頭詳細專欄系列 座右銘: “不患無位,患所以立。” 面試必刷的數組三連:原地刪除與合并前言目錄1.移除元素2.刪除有序…

力扣經典算法篇-41-旋轉圖像(輔助數組法,原地旋轉法)

1、題干 給定一個 n n 的二維矩陣 matrix 表示一個圖像。請你將圖像順時針旋轉 90 度。 你必須在 原地 旋轉圖像,這意味著你需要直接修改輸入的二維矩陣。請不要 使用另一個矩陣來旋轉圖像。 示例 1:輸入:matrix [[1,2,3],[4,5,6],[7,8,9]]…

譯|用戶增長策略如何使用因果機器學習的案例

來自上傳文件中的文章《[Causal Machine Learning for Growth: Loyalty Programs, LTV, and What to Do When You Can’t Experiment | by Torty Sivill | Towards AI]》 本文探討了當 A/B 測試不可行時,如何利用因果推斷從歷史數據中獲取洞察。技術亮點在于通過構建…

java~final關鍵字

final關鍵字final基本介紹final的使用細節final基本介紹 final是最終的意思,可以修飾類,屬性,方法,局部變量什么時候會要使用到final呢? 1.想要類不被繼承時 2.不希望類的某個屬性的值被改變時 3.不想父類的某個方法被…

Node.js(四)之數據庫與身份認證

數據庫與身份認證 目錄 數據庫與身份認證 十三、數據庫的基本概念 13.1 什么是數據庫 13.2 常見的數據庫及分類 13.3 傳統型數據庫的數據組織結構 1. Excel 的數據組織結構 2. 傳統型數據庫的數據組織結構 3. 實際開發中庫、表、行、字段的關系 十四、安裝并配置MySQ…

SpringBoot+SpringMVC常用注解

文章目錄發展歷程項目創建項目結構入門案例配置文件的兩種方式:只能使用一種創建項目二入門案例常用知識及注解Controller:類上面加,SpringMVC的注解GetMapping:方法上面加Spring框架的兩項核心功能Component:組件。控制反轉,加在業務類上面&…

標準GS相位恢復算法

標準GS相位恢復算法詳解與MATLAB實現 Gerchberg-Saxton (GS) 算法是一種經典的相位恢復方法,廣泛應用于光學成像、衍射成像和全息技術等領域。該算法通過迭代過程從未知相位的強度測量中恢復相位信息。 算法原理 GS算法的核心思想是利用傅里葉變換關系在空間域和頻率…

【Linux網絡編程基礎--socket地址API】

一、主機字節序和網絡字節序主機字節序(Host Byte Order):你當前電腦的內存字節順序(比如 x86 是小端)網絡字節序(Network Byte Order):統一規定為大端序(高位字節在高位…

Linux路徑MTU發現(Path MTU Discovery, PMTU)

Linux路徑MTU發現(Path MTU Discovery, PMTU)機制是TCP/IP協議棧中確保數據包高效傳輸的核心技術。其核心目標是動態探測源主機到目的主機路徑上的最小MTU(Maximum Transmission Unit),從而避免IP分片,提升…

【MySQL進階】------MySQL程序

MySQL程序簡介 MySQL安裝完成通常會包含如下程序: Linux系統程序?般在 /usr/bin?錄下,可以通過命令查看: windows系統?錄:你的安裝路徑\MySQL Server 8.0\bin,可以通過命令查看: 每個 MySQL 程序都有許…

Linux大頁內存導致服務內存不足

Linux大頁內存導致服務內存不足的解決方法 大頁內存(Huge Pages)是Linux內核提供的一種機制,用于減少TLB(轉換后備緩沖區)的壓力,提高內存訪問性能。然而,如果配置不當,大頁內存可能…

超寬帶測距+測角+無線通信一體化模組:智能門鎖、智能遙控器、AR頭戴、智能穿戴

超寬帶測距測角無線通信一體化模組:智能門鎖、智能遙控器、AR頭戴、智能穿戴UWB測距測角技術,因其高精度、低延遲、抗干擾能力,正廣泛應用于“人-物-設備”的空間感知場景,成為構建智能空間和精準互動的重要底層技術。代表廠商與產…

基于單片機空氣質量檢測/氣體檢測系統

傳送門 👉👉👉👉其他作品題目速選一覽表 👉👉👉👉其他作品題目功能速覽 概述 隨著環境污染問題日益嚴重,空氣質量監測成為社會關注的焦點。基于單片機的空氣質量檢…

網絡安全 | 從 0 到 1 了解 WAF:Web 應用防火墻到底是什么?

🤔 寫在前面 2020年 我參加公司的安全技能大賽,隊友在實操環節啟用了 WAF 防火墻,這是我第一次接觸到 Web 應用防火墻。作為一個 Web 開發老鳥,真是羞愧呀😂。 🔐 Web應用防火墻 WAF 全稱是 Web Applica…

服務器突然之間特別卡,什么原因?

原因總結:1.一般是本地網速的問題,服務器網速的問題,服務器CPU被占滿的問題今天發現另一個會導致特別卡的問題,是主存占滿也會導致卡頓。解釋如下:當服務器的主存(物理內存)被完全占滿時&#x…