基于uni-app的果蔬配送平臺系統的設計與實現

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

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

關鍵詞：前后端分離架構;果蔬配送;后端設計;uni-app

中圖分類號：TP311? ? ? 文獻標識碼：A

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

1 系統設計

1.1 需求分析

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

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

1.2 技術需求

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

1）Vue是一套用于構建用戶界面的漸進式框架，可以進行雙向數據綁定，進行組件化開發，輕量高效，使用路由超鏈接跳轉時不會刷新頁面，優化用戶體驗。

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

3）Microsoft SQL Server是一款功能強大的關系型數據庫管理系統，具有使用方便可伸縮性好與相關軟件集成程度高等優點，為關系型數據和結構化數據提供了更安全可靠的存儲功能。

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

1.3 功能板塊

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

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

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

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

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

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

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

1.4 創新技術支持板塊

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

1.5 數據庫設計

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

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

3）購物車表：將被選中的商品導入到購物車表，每個用戶對應一個購物車表，提供商品的所有信息，標識價格，購買數量number。

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

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

2 項目內容分析

2.1 項目創新內容

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

2.2 擬解決問題及優化內容

對于監控果蔬生長的設備維護成本設備在非人為的情況下損壞由供貨商承擔。

創新點：應用uni-app技術實現了一端開發多端運行。告別了傳統的開發模式，節約了人力物力，提高程序的可維護性。

2.3 代碼示例

第三方登錄微信授權具體實現：

wxGetUserInfo（） {

uni.login（{

provider： 'weinxin'，

success： res => {

if （res.code） {

uni.getUserInfo（{

success： user => {

uni.request（{

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

method： "POST"，

3 系統測試優化及使用

3.1 系統測試

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

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

3.2 系統優化

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

4 結束語

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

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

參考文獻：

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

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

[3] 楊曉燕.基于ASP.NET的項目管理系統的設計與實現[J].科技傳播，2015，7（16）：128-129.

[4] 沈佳棋，倪珊，王杰，等.基于Vue+SpringBoot的分類學科競賽管理系統設計[J].無線互聯科技，2020，17（17）：74-77.

[5] 李威威.基于前后端分離架構的工作臺賬系統設計與實現[J].云南民族大學學報（自然科學版），2021，30（2）：174-178，184.

【通聯編輯：謝媛媛】