萬(wàn)玲娜

（東華理工大學(xué)軟件學(xué)院，南昌 330013）

0 引言

根據(jù)統(tǒng)計(jì)局?jǐn)?shù)據(jù)，2019年全社會(huì)商品零售總額約為40 萬(wàn)億元，其中線上消費(fèi)約占10 萬(wàn)億元，也就是說(shuō)還有30 萬(wàn)億的商品是通過(guò)線下來(lái)完成流通的，社區(qū)團(tuán)購(gòu)［1］就是實(shí)現(xiàn)對(duì)這一線下部分線上化的王牌武器。當(dāng)然，線下購(gòu)物不可能被完全替代，這其中連鎖大商超、大型購(gòu)物中心以及其他一些能帶來(lái)獨(dú)特購(gòu)物體驗(yàn)的場(chǎng)所的市場(chǎng)份額就很難被社區(qū)團(tuán)購(gòu)替代，這部分市場(chǎng)份額加起來(lái)不超過(guò)10 萬(wàn)億。除此之外，遍布農(nóng)村城市、大街小巷的小商超、小餐館，都可以被社區(qū)團(tuán)購(gòu)線上化［1］。雖然消費(fèi)者總是會(huì)有即時(shí)性購(gòu)物需求，通常來(lái)說(shuō)只有線下場(chǎng)景才能滿足這部分需求，但這部分本應(yīng)屬于便利店的市場(chǎng)份額也可以通過(guò)社區(qū)團(tuán)批的方式（即社區(qū)團(tuán)購(gòu)平臺(tái)成為便利店的供應(yīng)商）被社區(qū)團(tuán)購(gòu)平臺(tái)間接占領(lǐng)。

同時(shí)，社區(qū)團(tuán)購(gòu)的涉及范圍不僅僅局限于商品流通，還可以作用于服務(wù)類產(chǎn)品的流通，比如理發(fā)、配鏡這些本地生活服務(wù)，乃至教育類服務(wù)產(chǎn)品，都可以通過(guò)社區(qū)團(tuán)購(gòu)平臺(tái)實(shí)現(xiàn)和消費(fèi)者的連接。如果把這個(gè)因素考慮進(jìn)去，社區(qū)團(tuán)購(gòu)的潛在市場(chǎng)規(guī)模還會(huì)更加龐大［1］。

社區(qū)團(tuán)購(gòu)的經(jīng)濟(jì)價(jià)值和社會(huì)價(jià)值已經(jīng)獲得了充分證明。而當(dāng)?shù)鼐用竦南M(fèi)空間還很大。在當(dāng)前的數(shù)字經(jīng)濟(jì)形勢(shì)下，社區(qū)團(tuán)購(gòu)有效地推動(dòng)了鄉(xiāng)村振興和農(nóng)民的快速致富。在疫情爆發(fā)的早期，對(duì)于經(jīng)營(yíng)著社區(qū)團(tuán)購(gòu)的企業(yè)來(lái)說(shuō)，發(fā)展都是不錯(cuò)的，為當(dāng)?shù)氐娜藗兲峁┝撕芏嗟纳畋匦杵贰８鶕?jù)數(shù)據(jù)平臺(tái)的預(yù)測(cè)，中國(guó)的本地生活服務(wù)市場(chǎng)將再創(chuàng)新高，這種快速的發(fā)展趨勢(shì)表明，人們對(duì)生活的需求日益增加，對(duì)生活的期望也越來(lái)越高。

另一方面，社區(qū)團(tuán)購(gòu)在經(jīng)歷了多次市場(chǎng)整頓和資本介入，也逐步走上了正軌；經(jīng)過(guò)三年的磨礪和培養(yǎng)，社區(qū)團(tuán)購(gòu)逐漸從肆意成長(zhǎng)的過(guò)程中摸索出經(jīng)驗(yàn)，經(jīng)歷了轉(zhuǎn)型、整頓的時(shí)期之后，逐漸進(jìn)入了平穩(wěn)的發(fā)展時(shí)期。

1 社區(qū)銷售平臺(tái)總體方案選擇和設(shè)計(jì)

1.1 程序語(yǔ)言的選擇和Web框架選擇

本項(xiàng)目的后端主要使用Java 語(yǔ)言進(jìn)行開(kāi)發(fā)。Java 語(yǔ)言自一九九五面世至今，現(xiàn)在仍然是最常用的一種Web 程序設(shè)計(jì)語(yǔ)言。而Java 編程語(yǔ)言也被開(kāi)發(fā)者們普遍所認(rèn)可，這必定與這門編程語(yǔ)言的設(shè)計(jì)框架和語(yǔ)言特點(diǎn)有著莫大的關(guān)系，正如SUN 公司在Java 語(yǔ)言白皮書(shū)中透露的那樣：Java是一門簡(jiǎn)單、面向?qū)ο蟆⒎植?、解釋、穩(wěn)健、安全、結(jié)構(gòu)獨(dú)立、輕量化、高性能、多線程和動(dòng)態(tài)的編程語(yǔ)言［2］。在近三十年的發(fā)展過(guò)程中，Java 已經(jīng)擁有龐大而完善的生態(tài)系統(tǒng)［3］，比如此項(xiàng)目使用的開(kāi)源應(yīng)用框架就是Java 生態(tài)中的Spring Boot 框架。后端的技術(shù)棧涵括了SpringBoot 框架、MyBatis、tkMappper、Quartz、Swagger、ngrok 等；前端的技術(shù)棧涵括了Vue、Axios、Layui、Element-ui等。

1.2 數(shù)據(jù)庫(kù)選擇

該項(xiàng)目使用了當(dāng)前市場(chǎng)上最受歡迎的關(guān)系數(shù)據(jù)庫(kù)MySQL，在Web 應(yīng)用方面，MySQL 是最好的關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)應(yīng)用軟件之一。同時(shí)MySQL也是開(kāi)源免費(fèi)的，可以滿足開(kāi)發(fā)需求。

1.3 系統(tǒng)總體方案設(shè)計(jì)

根據(jù)功能分析，本文推導(dǎo)出該項(xiàng)目的結(jié)構(gòu)圖，如圖1所示。

圖1 項(xiàng)目結(jié)構(gòu)圖

2 社區(qū)銷售平臺(tái)具體設(shè)計(jì)

2.1 平臺(tái)整體構(gòu)建

本項(xiàng)目的編碼設(shè)計(jì)采用的并不是傳統(tǒng)的模型-視圖-控制器（Model-View-Controller，MVC）開(kāi)發(fā)模式，其中Model 負(fù)責(zé)作為數(shù)據(jù)封裝的載體，View 負(fù)責(zé)頁(yè)面數(shù)據(jù)的顯示，Controller 負(fù)責(zé)數(shù)據(jù)的邏輯處理，充當(dāng)模型和視圖之間的橋梁［4］。于此同時(shí)，MVC模式也暴露了一些缺點(diǎn)，從用戶體驗(yàn)來(lái)看，每個(gè)請(qǐng)求都要通過(guò)“Controller-Model-View”過(guò)程，而且視圖與模型緊密相關(guān)，沒(méi)有這個(gè)模型視圖就不能顯示出最后的結(jié)果；從效率上來(lái)看，渲染視圖和數(shù)據(jù)處理是通過(guò)同一個(gè)服務(wù)器進(jìn)行的，從而造成服務(wù)器的過(guò)載，這對(duì)于有著千萬(wàn)級(jí)并發(fā)量的項(xiàng)目來(lái)說(shuō)，無(wú)疑是很致命的，因?yàn)榉?wù)器繁忙宕機(jī)是較為常見(jiàn)的事情，無(wú)法保證對(duì)每一個(gè)請(qǐng)求都能做出響應(yīng)，由此可見(jiàn)，這種開(kāi)發(fā)模式顯然已經(jīng)不太適合如今的企業(yè)級(jí)開(kāi)發(fā)了［5］。

本項(xiàng)目采用前后端分離模式進(jìn)行開(kāi)發(fā)，很好地解決了上述問(wèn)題。后端僅處理向前端界面提供的數(shù)據(jù)，而前端則只負(fù)責(zé)數(shù)據(jù)和頁(yè)面的渲染繪制。作為互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式，前后端分離模式的核心思想是前端HTML頁(yè)面［6］通過(guò)AJAX［7］調(diào)用后端封裝的且符合RESTFUL風(fēng)格的API接口，并使用JSON［8］格式的數(shù)據(jù)進(jìn)行交互，即后端提供數(shù)據(jù)接口，前端調(diào)用接口獲得數(shù)據(jù)，前端將獲取的數(shù)據(jù)再進(jìn)行處理。與之前的JavaWeb 單體項(xiàng)目身兼數(shù)職相比，前后端分離模式的后端專注于數(shù)據(jù)的處理［9］，而前端只需要專注頁(yè)面的設(shè)計(jì)和數(shù)據(jù)的渲染［10］，這樣不僅可以有效降低前端和后端之間的耦合，同時(shí)也會(huì)提高項(xiàng)目的開(kāi)發(fā)效率。

2.2 用戶注冊(cè)和登錄模塊

用戶注冊(cè)界面如圖2所示。在設(shè)計(jì)用戶的登錄與注冊(cè)環(huán)節(jié)中，均對(duì)密碼采用了MD5 密碼加密，以保障賬號(hào)的安全性，同時(shí)也在登錄環(huán)節(jié)中采用了token 令牌校驗(yàn)的方式，相比于傳統(tǒng)的采用session 來(lái)存儲(chǔ)用戶信息，每次驗(yàn)證用戶發(fā)起的請(qǐng)求時(shí)，服務(wù)器都需要去創(chuàng)建一個(gè)存儲(chǔ)對(duì)應(yīng)信息的記錄，但當(dāng)用戶發(fā)起多次請(qǐng)求時(shí)，服務(wù)器的壓力就會(huì)變大。

圖2 用戶注冊(cè)

而本系統(tǒng)的身份驗(yàn)證流程如下所示：

（1）用戶通過(guò)用戶名與密碼向后端發(fā)送請(qǐng)求；

（2）后端通過(guò)程序驗(yàn)證token；

（3）程序返回一個(gè)token令牌；

（4）客戶端存儲(chǔ)token 信息并用于用戶請(qǐng)求部分受限資源；

（5）服務(wù)器對(duì)用戶攜帶token 的請(qǐng)求進(jìn)行校驗(yàn)并返回對(duì)應(yīng)數(shù)據(jù)。

2.3 分類索引和關(guān)鍵詞索引

商品類別效果圖如圖3所示。用戶可以通過(guò)點(diǎn)擊分類或者在搜索欄中輸入關(guān)鍵字來(lái)對(duì)商品進(jìn)行查詢，并且該頁(yè)面也支持在原有基礎(chǔ)上進(jìn)行二次品牌查詢，做到更為準(zhǔn)確化和人性化的查詢操作。

圖3 商品類別效果圖

2.4 商品詳情頁(yè)

商品詳情是該系統(tǒng)的核心頁(yè)面之一，包含了多種數(shù)據(jù)的展示，包括商品基本信息展示、商品參數(shù)展示、商品評(píng)論展示以及商品推薦展示等多個(gè)版塊。用戶通過(guò)該頁(yè)面進(jìn)行購(gòu)物車加購(gòu)操作。

2.5 購(gòu)物車/訂單的實(shí)現(xiàn)

該模塊作為本系統(tǒng)最核心的一部分，用戶通過(guò)商品詳情頁(yè)對(duì)商品進(jìn)行加購(gòu)后，可以在購(gòu)物車中查詢商品的信息，并對(duì)加購(gòu)的商品進(jìn)行刪改操作，如圖4所示。

圖4 購(gòu)物車頁(yè)面效果圖

用戶通過(guò)選中需要結(jié)算的商品，點(diǎn)擊結(jié)算按鈕，即可跳轉(zhuǎn)到結(jié)算頁(yè)面進(jìn)行結(jié)算操作。用戶可以通過(guò)點(diǎn)擊來(lái)選擇收貨地址以及付款方式，在頁(yè)尾可以根據(jù)選中的數(shù)據(jù)信息進(jìn)行動(dòng)態(tài)的更新，如圖5和圖6所示。

圖5 訂單結(jié)算頁(yè)面效果圖

圖6 訂單支付成功效果圖

通過(guò)點(diǎn)擊提交訂單按鈕來(lái)生成訂單數(shù)據(jù)以及通過(guò)請(qǐng)求微信支付平臺(tái)得到的支付短鏈接，前端頁(yè)面再通過(guò)頁(yè)面渲染將支付短鏈接轉(zhuǎn)變?yōu)槎S碼，用戶通過(guò)手機(jī)掃碼支付，向微信支付平臺(tái)發(fā)請(qǐng)對(duì)應(yīng)的支付請(qǐng)求，微信支付平臺(tái)根據(jù)支付結(jié)果響應(yīng)對(duì)應(yīng)結(jié)果，系統(tǒng)再根據(jù)響應(yīng)數(shù)據(jù)給予用戶頁(yè)面提示。為了便于理解，本文給出訂單生成以及訂單支付的流程分析圖，如圖7所示。

圖7 訂單生成以及訂單支付流程分析圖

2.6 個(gè)人中心頁(yè)

本系統(tǒng)的個(gè)人中心頁(yè)提供個(gè)人信息修改、個(gè)人訂單管理、個(gè)人地址管理和個(gè)人評(píng)價(jià)管理等四個(gè)模塊。

2.7 輪播圖管理

輪播圖作為首頁(yè)版面較大且位置特殊的一個(gè)元素，能夠迅速抓住用戶的眼球，突顯網(wǎng)站近期的賣點(diǎn)以及方向，管理員通過(guò)配置對(duì)應(yīng)的信息來(lái)改變首頁(yè)輪播圖效果，增強(qiáng)用戶體驗(yàn)。輪播圖管理效果圖如圖8所示。

圖8 輪播圖管理效果圖

2.8 商品分類管理

分類索引作為商品索引的主要部分，在本系統(tǒng)中分類的最高級(jí)別為三級(jí)，管理員可以對(duì)不同級(jí)別的分類進(jìn)行刪改操作，用戶也可以根據(jù)首頁(yè)的分類信息來(lái)查詢不同的商品。

2.9 用戶管理

考慮到可能存在用戶有不良昵稱或者違規(guī)操作，管理員可以通過(guò)修改昵稱或者禁用用戶賬號(hào)的方法來(lái)實(shí)現(xiàn)社區(qū)銷售平臺(tái)的和諧氛圍。

2.10 商品管理

管理員通過(guò)完善商品信息，使用文字加圖片的方式，讓消費(fèi)者能夠充分掌握商品信息，增加消費(fèi)者的購(gòu)物欲望，同時(shí)也可以對(duì)庫(kù)存不足的商品進(jìn)行下架處理。

2.11 訂單管理

管理員可以通過(guò)查詢訂單狀態(tài)去控制訂單的流程，如商品的發(fā)貨以及訂單的關(guān)閉。

2.12 評(píng)論管理

評(píng)論是衡量商品是否值得購(gòu)買的一個(gè)判斷依據(jù)，管理員可以通過(guò)禁言某種不良評(píng)論來(lái)達(dá)到商品控評(píng)的效果。

3 社區(qū)銷售平臺(tái)測(cè)試效果

軟件測(cè)試就是利用人工或自動(dòng)化的方法來(lái)操作或測(cè)量一個(gè)特定的系統(tǒng)，以檢測(cè)該系統(tǒng)是否符合預(yù)期的要求，或找出期望和現(xiàn)實(shí)的不同。從軟件開(kāi)發(fā)的角度出發(fā)，從開(kāi)發(fā)模式、工具和技術(shù)等方面找出問(wèn)題和不足，防止再出現(xiàn)的問(wèn)題。在軟件測(cè)試中，盡量使用最少的經(jīng)濟(jì)成本、人力成本和時(shí)間成本去發(fā)現(xiàn)軟件的不足之處，以確保軟件的質(zhì)量，同時(shí)為后期的軟件測(cè)試積累經(jīng)驗(yàn)。從用戶的要求出發(fā)，軟件測(cè)試可以檢測(cè)出軟件是否與用戶的要求相一致，評(píng)價(jià)和衡量軟件的質(zhì)量，從而為用戶評(píng)價(jià)軟件提供了強(qiáng)有力的基礎(chǔ)。

對(duì)于軟件測(cè)試來(lái)說(shuō)，靜態(tài)測(cè)試、動(dòng)態(tài)測(cè)試、功能測(cè)試、性能測(cè)試、黑盒測(cè)試和白盒測(cè)試都是諸多測(cè)試方式的一種。在本系統(tǒng)中，僅使用了黑盒測(cè)試和白盒測(cè)試。黑盒測(cè)試的對(duì)象是呈現(xiàn)給用戶的功能，白盒測(cè)試則注重于代碼邏輯與數(shù)據(jù)。

在前期的開(kāi)發(fā)過(guò)程中，本文使用Postman 這款軟件進(jìn)行接口的測(cè)試，在開(kāi)發(fā)的中期，利用Swagger 插件構(gòu)建了一個(gè)系統(tǒng)的在線接口文檔，方便測(cè)試，如圖9所示。設(shè)計(jì)的絕大部分功能都可以通過(guò)測(cè)試，絕大部分的頁(yè)面符合預(yù)期效果。

圖9 Swagger接口在線文檔

4 結(jié)語(yǔ)

本文對(duì)目前市面上成熟的社區(qū)銷售軟件進(jìn)行了分析，結(jié)合了前后端分離開(kāi)發(fā)思想，通過(guò)使用SpringBoot+Vue的技術(shù)，設(shè)計(jì)開(kāi)發(fā)了該社區(qū)銷售平臺(tái)系統(tǒng)。

本文所設(shè)計(jì)實(shí)現(xiàn)的系統(tǒng)主要完成了以下工作：

系統(tǒng)數(shù)據(jù)方面，主要完成了對(duì)應(yīng)數(shù)據(jù)庫(kù)功能表的設(shè)計(jì)，系統(tǒng)中的絕大部分?jǐn)?shù)據(jù)均來(lái)自真實(shí)商品數(shù)據(jù)。

系統(tǒng)文檔方面，主要建立了涵括了所有接口的文檔，方便二次開(kāi)發(fā)和調(diào)試。

系統(tǒng)后端方面，本系統(tǒng)作為一個(gè)Web 項(xiàng)目，由SpringBoot 框架進(jìn)行搭建，整合了多種第三方框架，在減少了繁雜配置、降低開(kāi)發(fā)難度的同時(shí)，也增強(qiáng)了代碼的可讀性以及代碼的復(fù)用性。

系統(tǒng)前端方面，主要是采用了Vue.js 和layui 以及Element.ui 框架，界面風(fēng)格參照了美團(tuán)優(yōu)選和京東購(gòu)物，采用分頁(yè)模式加載數(shù)據(jù)，保證了數(shù)據(jù)的完整與顯示。