吳家旭 吳建勝 王新元 郎書旭

摘要：近些年來(lái)，隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，生活質(zhì)量的不斷提高。受互聯(lián)網(wǎng)的影響，人們開始注意飲食的健康，對(duì)食材的要求有所提高，傳統(tǒng)的購(gòu)買方式無(wú)法得知食材的來(lái)源與新鮮的程度。相較于傳統(tǒng)的購(gòu)買方式，果蔬配送平臺(tái)使得人們購(gòu)買更加方便，購(gòu)買的產(chǎn)品品質(zhì)優(yōu)良，節(jié)省時(shí)間精力。通過系統(tǒng)中的“智慧果蔬”功能保證了食品的質(zhì)量與可靠性，方便了用戶的使用，相信果蔬配送平臺(tái)會(huì)受到大眾的青睞，在未來(lái)逐漸代替線下售賣。

關(guān)鍵詞：前后端分離架構(gòu);果蔬配送;后端設(shè)計(jì);uni-app

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）16-0046-02

1 系統(tǒng)設(shè)計(jì)

1.1 需求分析

隨著科技的進(jìn)步，網(wǎng)絡(luò)的日益發(fā)展，人們不滿足于線下耗時(shí)久、貨源少的購(gòu)物方式，而是通過網(wǎng)上購(gòu)物，選擇更多且更有質(zhì)量保證的產(chǎn)品?，F(xiàn)如今，蔬菜水果的售賣集中于線下個(gè)體店或大型超市，部分人不愿意耗費(fèi)時(shí)間或精力再去挑選果蔬等物品。開發(fā)果蔬配送平臺(tái)小程序正是基于此社會(huì)需求分析的結(jié)果。

線下售賣需從廠家進(jìn)貨，由線下售賣點(diǎn)進(jìn)行銷售，利潤(rùn)來(lái)源于中間差價(jià)，此平臺(tái)由廠家直接進(jìn)行配送，廠家負(fù)責(zé)配送周邊的區(qū)域，減少了商品流動(dòng)，降低了成本。使得所配送的果蔬價(jià)格低廉。小程序所開發(fā)的功能齊全，包括預(yù)訂配送、每日推薦商品、購(gòu)物記錄、意見反饋和訂單等功能。平臺(tái)還提供特有的“智慧果蔬”功能來(lái)保障果蔬的質(zhì)量，只需回家烹飪菜肴即可。優(yōu)化了用戶體驗(yàn)，提高用戶的購(gòu)物滿意度，更加貼合市場(chǎng)需求。且不用安裝，即開即用，節(jié)省手機(jī)空間，相較于App開發(fā)成本更低，并且降低了用戶的使用難度，為用戶節(jié)省時(shí)間。

1.2 技術(shù)需求

本系統(tǒng)需要可靠的穩(wěn)定性與安全性，數(shù)據(jù)自動(dòng)備份，加密用戶信息，控制訪問用于系統(tǒng)管理員控制用戶對(duì)服務(wù)器、目錄、文件等網(wǎng)絡(luò)資源的訪問。前端采用uni-app與VUE.JS框架快速搭建頁(yè)面，運(yùn)用最新的HTML5及CSS3技術(shù)與JavaScript。后端使用基于C# 語(yǔ)言的 ASP.NET Core Webapi框架。數(shù)據(jù)庫(kù)采用SQL Server 2019。

1）Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，可以進(jìn)行雙向數(shù)據(jù)綁定，進(jìn)行組件化開發(fā)，輕量高效，使用路由超鏈接跳轉(zhuǎn)時(shí)不會(huì)刷新頁(yè)面，優(yōu)化用戶體驗(yàn)。

2）uni-app框架是一個(gè)使用Vue.js開發(fā)的框架。uni-app只需要編寫一套代碼多端實(shí)現(xiàn)，就可以發(fā)布到iOS、Android、H5以及各種小程序等多個(gè)平臺(tái)，實(shí)現(xiàn)跨端并支持原生代[1]。

3）Microsoft SQL Server是一款功能強(qiáng)大的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，具有使用方便可伸縮性好與相關(guān)軟件集成程度高等優(yōu)點(diǎn)，為關(guān)系型數(shù)據(jù)和結(jié)構(gòu)化數(shù)據(jù)提供了更安全可靠的存儲(chǔ)功能。

4）使用.NET（C#）平臺(tái)。從數(shù)據(jù)處理效率來(lái)說(shuō)，當(dāng)軟件內(nèi)容較為復(fù)雜或數(shù)據(jù)處理量比較大時(shí)，使用.NET（C#）平臺(tái)提升運(yùn)行效率則顯得尤為重要[2]。

1.3 功能板塊

該平臺(tái)主要分為六大板塊分別對(duì)應(yīng)首頁(yè)、分類及商品詳情、購(gòu)物車、活動(dòng)、智慧農(nóng)場(chǎng)和個(gè)人中心。

1）首頁(yè)：可以查看用戶附近支持配送的門店、商品分類、售后、預(yù)定配送、每日推薦商品、每日限定特價(jià)福利商品和產(chǎn)品銷量排行榜。

2）分類及商品詳情：本頁(yè)面提供商品的詳細(xì)分類和商品售賣情況，顯示商品近一周內(nèi)的價(jià)格波動(dòng)情況，還提供搜索詞條和加入購(gòu)物車功能，在分類選項(xiàng)中特設(shè)秒殺專欄，由廠家限量推送特價(jià)產(chǎn)品。點(diǎn)擊商品進(jìn)入詳細(xì)界面可查看物品詳情與買家評(píng)價(jià)曬圖，并推送相關(guān)產(chǎn)品。

3）購(gòu)物車：在本頁(yè)面，消費(fèi)者可以查看自己所要購(gòu)買的所有物品，提供價(jià)格總和。

4）活動(dòng)：在活動(dòng)界面特推出“健康均衡，私人訂制”，我們會(huì)為用戶提供每日膳食搭配，為用戶搭配均衡的營(yíng)養(yǎng)菜系并推薦適合做營(yíng)養(yǎng)菜系的優(yōu)質(zhì)食材。這種定制，可以根據(jù)客戶家庭成員喜好，需求進(jìn)行搭配，會(huì)讓消費(fèi)者覺得很高級(jí)，很享受。此界面會(huì)根據(jù)不同用戶需求不斷更新補(bǔ)充更多優(yōu)質(zhì)活動(dòng)。

5）智慧果蔬：我們使每個(gè)果蔬的包裝上都貼有自己成長(zhǎng)歷程的二維碼，掃描二維碼，會(huì)彈出用戶所購(gòu)買果蔬的生長(zhǎng)視頻，上面詳細(xì)記錄著它的選種、施肥時(shí)間、澆水時(shí)間、農(nóng)藥使用等情況。保證每個(gè)產(chǎn)品都能追根溯源，從根本上保證農(nóng)產(chǎn)品質(zhì)量。

6）個(gè)人中心：個(gè)人中心提供購(gòu)物記錄，我的商品，意見反饋和訂單功能，用戶可以通過查找購(gòu)物記錄，查看購(gòu)買商品的記錄和購(gòu)買時(shí)填寫的信息記錄。我的商品里面可以修改上傳的商品信息，還提供下架功能。同時(shí)賣家可以查看意見反饋。在訂單欄中設(shè)置全部、待付款、待發(fā)貨、待收貨、已完成等5個(gè)欄，用戶中心中特設(shè)有存儲(chǔ)款，用戶可以通過存續(xù)款獲取優(yōu)惠券，以得到更多的優(yōu)惠，每一筆費(fèi)用都會(huì)通過后臺(tái)實(shí)時(shí)顯示在收支記錄中。

1.4 創(chuàng)新技術(shù)支持板塊

uni-app 是一個(gè)使用Vue.js 開發(fā)所有前端應(yīng)用的框架，一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）以及各種小程序、快應(yīng)用等多個(gè)平臺(tái)。基于Vue打造的小程序端框架，在頁(yè)面文件、數(shù)據(jù)綁定及事件處理方面遵循Vue單文件組件（SFC）規(guī)范，同時(shí)，其組件標(biāo)簽、接口能力（JS API）又依托于小程序的規(guī)范[3]。采用懶加載的加載模式，減少了因網(wǎng)速而導(dǎo)致的頁(yè)面崩潰等問題，MyBstis中的延遲加載，也稱為懶加載，例如在加載很多東西的時(shí)候，MyBstis再發(fā)出SQL語(yǔ)句進(jìn)行查詢。這樣延遲加載就可以減少數(shù)據(jù)庫(kù)的壓力。機(jī)器打印二維碼，在商品的包裝外部打印二維碼可通過二維碼查詢此產(chǎn)品的所有生產(chǎn)信息。數(shù)據(jù)庫(kù)：SQL Server 2019。C#語(yǔ)言ASP.NET Core Webapit框架，其中C#就是一種精確且簡(jiǎn)單的一種，它是一種類型全面且面向?qū)ο蟮恼Z(yǔ)言，并擁有其強(qiáng)大的周邊，數(shù)據(jù)傳輸以json的數(shù)據(jù)格式進(jìn)行數(shù)據(jù)的傳輸與儲(chǔ)存，通過分流算法解決負(fù)載均衡問題合理分?jǐn)傁到y(tǒng)壓力。

1.5 數(shù)據(jù)庫(kù)設(shè)計(jì)

1）商品表：商品ID為主鍵，作為唯一標(biāo)識(shí)，可通過商品ID查詢到每一個(gè)商品，屬性分別為商品名稱、商品價(jià)格、商品數(shù)量、商品詳情、商品評(píng)價(jià)、商品配圖等。

2）用戶表：用于存放用戶的登錄ID，登錄User Name和Password信息，同時(shí)在用戶表存儲(chǔ)管理員賬號(hào)，此表ID為表的主鍵[4]。

3）購(gòu)物車表：將被選中的商品導(dǎo)入到購(gòu)物車表，每個(gè)用戶對(duì)應(yīng)一個(gè)購(gòu)物車表，提供商品的所有信息，標(biāo)識(shí)價(jià)格，購(gòu)買數(shù)量number。

4）分類表：作為產(chǎn)品分類的表格，通過class 屬性，系統(tǒng)會(huì)將售賣的商品自動(dòng)添加到屬于它的總類頁(yè)面上。

5）訂單表：屬性為商品ID，購(gòu)買數(shù)量number，計(jì)算總價(jià)格allprice，自動(dòng)生成的訂單編號(hào)。訂單編號(hào)時(shí)間年月日時(shí)分秒加兩位隨機(jī)數(shù)生成并存儲(chǔ)到訂單編號(hào)屬性中。

2 項(xiàng)目?jī)?nèi)容分析

2.1 項(xiàng)目創(chuàng)新內(nèi)容

基于uni-app的果蔬配送平臺(tái)系統(tǒng)可以多平臺(tái)使用，作為一個(gè)小程序無(wú)須安裝，即開即用，節(jié)省了手機(jī)空間。相較于App開發(fā)，小程序的成本更低，用戶使用更加便捷，公眾號(hào)關(guān)聯(lián)小程序使小程序更容易推廣。其中智慧果蔬功能將每個(gè)出售的果蔬包裝上配備二維碼，買家可以通過掃二維碼來(lái)獲取果蔬的生長(zhǎng)視頻，詳細(xì)記錄著它的選種、施肥時(shí)間、澆水時(shí)間、農(nóng)藥使用等情況。區(qū)域定位匹配功能分配給每個(gè)廠家各自的配送區(qū)域，用戶填寫收貨地址后，通過算法定位匹配負(fù)責(zé)配送的廠家。

2.2 擬解決問題及優(yōu)化內(nèi)容

對(duì)于監(jiān)控果蔬生長(zhǎng)的設(shè)備維護(hù)成本設(shè)備在非人為的情況下?lián)p壞由供貨商承擔(dān)。

創(chuàng)新點(diǎn)：應(yīng)用uni-app技術(shù)實(shí)現(xiàn)了一端開發(fā)多端運(yùn)行。告別了傳統(tǒng)的開發(fā)模式，節(jié)約了人力物力，提高程序的可維護(hù)性。

2.3 代碼示例

第三方登錄微信授權(quán)具體實(shí)現(xiàn)：

wxGetUserInfo（） {

uni.login（{

provider： 'weinxin'，

success： res => {

if （res.code） {

uni.getUserInfo（{

success： user => {

uni.request（{

url： "http：//localhost：3000/wxLogin"，

method： "POST"，

3 系統(tǒng)測(cè)試優(yōu)化及使用

3.1 系統(tǒng)測(cè)試

在前后端開發(fā)完成后進(jìn)行前后端的交互，根據(jù)需求分析進(jìn)行測(cè)試，是否達(dá)到預(yù)期功能，測(cè)試包括前端測(cè)試，是否能流暢地切換各種頁(yè)面，是否有卡頓與加載延遲，調(diào)整界面細(xì)節(jié)進(jìn)行美觀優(yōu)化等。后端提供json格式的數(shù)據(jù)傳輸，測(cè)試數(shù)據(jù)傳輸?shù)姆€(wěn)定性[5]，掛載到服務(wù)器上測(cè)試界面刷新速度判斷是否要增加延遲加載處理界面崩潰等問題，登錄管理員網(wǎng)頁(yè)界面，將數(shù)據(jù)添加、刪除、修改等操作，是否會(huì)出現(xiàn)無(wú)用數(shù)據(jù)的殘留，能否達(dá)到預(yù)期的效果，測(cè)試微信授權(quán)登錄是否運(yùn)行正常，重要信息數(shù)據(jù)是否暴露在外，并進(jìn)行調(diào)整，測(cè)試訂單數(shù)據(jù)，訂單編號(hào)能否通過大量瞬時(shí)的數(shù)據(jù)測(cè)試 。

測(cè)試完成后將問題集中寫成文檔，通過交流前后端協(xié)同將問題進(jìn)行處理與優(yōu)化，直到達(dá)到預(yù)期的設(shè)計(jì)需求，就可以打包并上線使用。經(jīng)過幾輪的測(cè)試與修改優(yōu)化，本系統(tǒng)可在微信小程序中可以進(jìn)行良好的運(yùn)行，數(shù)據(jù)不會(huì)出現(xiàn)丟失的情況，管理界面可及時(shí)獲取各類數(shù)據(jù)并擁有權(quán)限修改，如下架、上架、封號(hào)等處理手段，運(yùn)行界面如圖1所示。

3.2 系統(tǒng)優(yōu)化

減少HTTP的請(qǐng)求，例如刪除沒必要的圖片、js代碼、多余的css和多余插件等等，使用預(yù)加載與緩存技術(shù)，提高加載速度，對(duì)于后端的處理主要是提高請(qǐng)求能力、效率、硬件性能，這些都可以提升系統(tǒng)的性能，檢查程序代碼規(guī)范，數(shù)據(jù)庫(kù)結(jié)構(gòu)對(duì)性能的影響，比如一些糟糕的循環(huán)語(yǔ)句、查詢語(yǔ)句、索引表等，檢查接口功能是否單一，子類父類是否有多余重復(fù)定義，達(dá)到高內(nèi)聚低耦合。

4 結(jié)束語(yǔ)

基于uni-app開發(fā)的果蔬配送平臺(tái)小程序緊跟時(shí)代的腳步。通過uni-app框架開發(fā)使得其性能更加強(qiáng)大，流暢。同時(shí)跨多種平臺(tái)開發(fā)，減少了開發(fā)成本。基于人們愈發(fā)重視食材選擇的大環(huán)境，此平臺(tái)的出現(xiàn)具有必然性。

本系統(tǒng)尚處于開發(fā)階段，會(huì)不斷開發(fā)出新的功能模塊，并且會(huì)完善智慧農(nóng)業(yè)模塊的相關(guān)功能，進(jìn)一步地優(yōu)化系統(tǒng)算法，使得系統(tǒng)的運(yùn)行更加穩(wěn)定與快速，此平臺(tái)使用戶與廠家達(dá)到了共贏，極大地解決果蔬產(chǎn)品因儲(chǔ)存太久而造成經(jīng)濟(jì)損失的問題。小程序方便快捷，開發(fā)成本低，可一端多開發(fā)，且具有龐大的微信用戶支持的特點(diǎn)，會(huì)使這款平臺(tái)越走越遠(yuǎn)。

參考文獻(xiàn)：

[1] 陳思，冷雪.微信小程序開發(fā)方式對(duì)比[J].電子制作，2020（2）：22，52-53.

[2] 魏恒.PDMS二次開發(fā)語(yǔ)言PML與.NET（C#）的對(duì)比[J].電子世界，2021（2）：186-187.

[3] 楊曉燕.基于ASP.NET的項(xiàng)目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].科技傳播，2015，7（16）：128-129.

[4] 沈佳棋，倪珊，王杰，等.基于Vue+SpringBoot的分類學(xué)科競(jìng)賽管理系統(tǒng)設(shè)計(jì)[J].無(wú)線互聯(lián)科技，2020，17（17）：74-77.

[5] 李威威.基于前后端分離架構(gòu)的工作臺(tái)賬系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].云南民族大學(xué)學(xué)報(bào)（自然科學(xué)版），2021，30（2）：174-178，184.

【通聯(lián)編輯：謝媛媛】