基于uni-app的果蔬配送平臺系統(tǒng)的設(shè)計與實現(xiàn)

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

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

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

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

文章編號：1009-3044（2022）16-0046-02

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

1.1 需求分析

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

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

1.2 技術(shù)需求

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

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

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

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

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

1.3 功能板塊

該平臺主要分為六大板塊分別對應(yīng)首頁、分類及商品詳情、購物車、活動、智慧農(nóng)場和個人中心。

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

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

3）購物車：在本頁面，消費者可以查看自己所要購買的所有物品，提供價格總和。

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

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

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

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

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

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

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

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

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

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

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

2 項目內(nèi)容分析

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

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

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

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

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

2.3 代碼示例

第三方登錄微信授權(quán)具體實現(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)測試優(yōu)化及使用

3.1 系統(tǒng)測試

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

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

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

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

4 結(jié)束語

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

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

參考文獻(xiàn)：

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

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

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

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

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

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