基于微信小程序的校園訂餐管理系統(tǒng)的設(shè)計與實現(xiàn)

韋婉辰，盧 華

（廣西農(nóng)業(yè)職業(yè)技術(shù)大學(xué) 廣西 南寧 530007）

0 引言

隨著計算機技術(shù)的快速發(fā)展，網(wǎng)絡(luò)對人們產(chǎn)生了越來越深遠(yuǎn)的影響，網(wǎng)上訂餐由于具備方便快捷的特征，更容易被大學(xué)生群體所接受。美團、餓了么等網(wǎng)上訂餐服務(wù)方式深受在校大學(xué)生歡迎，但是由于外賣訂餐的店鋪離學(xué)校往往較遠(yuǎn)，配送時長較長，支付的總費用要比在店面就餐費用高出不少，餐品新鮮程度也大打折扣；很多高校的校園面積較大，大學(xué)生宿舍和上課教室往往離食堂比較遠(yuǎn)，一些同學(xué)不想從宿舍去食堂就餐，一些同學(xué)經(jīng)過緊張學(xué)習(xí)后沒有時間到食堂就餐，這些同學(xué)都希望提供快捷校園餐飲送餐上門的服務(wù)；在校園上下課高峰期會有人員擁堵、排隊時間長、供應(yīng)時間短、傳統(tǒng)人工處理就餐流程效率低下等問題。在這種情況下，為了更好地實現(xiàn)校園信息化建設(shè)，為學(xué)生提供方便快捷的就餐服務(wù)，開發(fā)一個立足于校園食堂和餐飲店，主要面向校園師生的校園網(wǎng)上訂餐管理系統(tǒng)[1]，是一個較好的解決辦法。

1 基于微信小程序的校園餐飲訂餐管理系統(tǒng)的意義

騰訊是中國500強公司，于2011年開發(fā)微信產(chǎn)品，這款產(chǎn)品給人們的工作生活帶來了極大便利，至今微信每月活躍用戶數(shù)超過12億人。2017年，微信推出小程序平臺，馬上受到用戶追捧，迅速占領(lǐng)國內(nèi)外市場。據(jù)相關(guān)部門統(tǒng)計[2]，2021年每日使用小程序的用戶數(shù)達(dá)到4.5億人以上，日平均使用次數(shù)同比2020年增長32%以上。小程序不僅僅在一二線城市普及，如今在三四線、農(nóng)村也已覆蓋，未來這個數(shù)字還會進一步增長，小程序市場會更大。小程序具有很多優(yōu)點，不但內(nèi)存小而且運行速度比較快，操作比較方便快捷，用戶不需安裝和下載就可以直接使用，掃一掃二維碼或輸入關(guān)鍵詞搜索一下就可以打開相應(yīng)的小程序。

基于微信小程序的校園網(wǎng)上訂餐管理系統(tǒng)，不僅操作方便，在就餐效率和校園服務(wù)方面都有重大意義[3]。（1）學(xué)校在后勤處專門成立了膳食科對食堂和餐飲店銷售的食品進行監(jiān)督管理，學(xué)生更放心訂餐食用。（2）通過搜集信息結(jié)合在線留言、改進菜品的種類與質(zhì)量、增加預(yù)定功能減少了食品的浪費，節(jié)約食堂成本實現(xiàn)提高銷售收入的提高。（3）師生可提前在訂餐系統(tǒng)上點餐，能夠節(jié)省師生就餐時間，避免食堂阿姨口算總價可能出現(xiàn)的錯漏問題，提升就餐效率。就餐效率提升后，越來越多的師生會選擇在校園訂餐管理系統(tǒng)進行校園食堂和餐飲店訂餐，又進一步提升校園食堂和餐飲店的銷售收入。（4）可以安排在校學(xué)生協(xié)助完成網(wǎng)站管理工作，讓勤工儉學(xué)的學(xué)生完成送餐上門服務(wù)，人工費用相對較低，既給學(xué)生提供了在校實習(xí)鍛煉機會，又為學(xué)生提供了增加收入的機會，還避免外來人員送餐進入學(xué)校帶來的未知風(fēng)險。

因此，開發(fā)一個基于微信小程序的校園訂餐管理系統(tǒng)，滿足了師生、食堂和餐飲店的需求，規(guī)避了外賣送餐可能帶來的一些問題，具有較好的應(yīng)用價值。

2 校園餐飲點餐管理系統(tǒng)的功能模塊設(shè)計與實現(xiàn)

2.1 關(guān)鍵技術(shù)概述

本文基于微信小程序開發(fā)，首先對小程序平臺開發(fā)環(huán)境和開發(fā)要求進行研究，科學(xué)選擇合適的開源框架和開發(fā)工具，在平臺上進行開發(fā)調(diào)試、代碼編寫、測試與預(yù)覽、上傳和發(fā)布等工作，采用包括ES5、WXML、WXSS和Mustache等編寫。

由于微信小程序會在iSO、Android以及Chrome 3個平臺運用[4]，微信會將ES6語法轉(zhuǎn)換為三端都支持的ES5代碼，因此在系統(tǒng)開發(fā)時直接使用ES5代碼。

WXML(Weixin Markup Language)是當(dāng)前基于微信小程序而開發(fā)的主流標(biāo)簽語言，是風(fēng)靡于程序開發(fā)人員的主流框架標(biāo)簽語言，其由基礎(chǔ)組件、事件系統(tǒng)組成，可以輕松實現(xiàn)頁面的構(gòu)建，簡而言之，其就是小程序的HTML5語言。它運行在小程序的.wxml文件中，使用時，無需在頁面頭部進行聲明。

WXSS(WeiXin Style Sheets)是微信平臺常用的一套樣式語言，用于表述WXML的組件樣式，可以構(gòu)建出頁面的結(jié)構(gòu)[5]。WXSS用來決定WXML的組件應(yīng)該如何顯示。

小程序的WXML文件里，采用了Mustache語法。Mustache深受開發(fā)人員歡迎，因此其是一個高效簡單的模板解析引擎，通過它來實用用戶界面和業(yè)務(wù)數(shù)據(jù)隔離，并使用標(biāo)準(zhǔn)的HTML文檔，便于應(yīng)用。

2.2 平臺系統(tǒng)結(jié)構(gòu)設(shè)計

本文所研發(fā)的系統(tǒng)，是從用戶端開始進入訂餐流程，通過掃一掃或搜索關(guān)鍵詞進入小程序的主界面，如果是游客僅能查看首頁的公告欄、餐廳等基本信息，系統(tǒng)會引導(dǎo)游客到注冊登錄界面進行注冊登錄，登錄后將轉(zhuǎn)變?yōu)榭捎啿蜖顟B(tài)，可以以會員身份選擇菜品進行訂餐，將選好的菜品放入購物車中，下單完成后選擇配送方式然后付款，用戶在完成了用餐后即可對此訂單進行評價留言。

經(jīng)過對校園用戶的實際調(diào)研，針對學(xué)校110名學(xué)生用戶問卷調(diào)查了解到，學(xué)生希望系統(tǒng)具備菜品搜索、菜品訂購、訂單支付和菜品推薦等重要功能。我們在進行系統(tǒng)結(jié)構(gòu)設(shè)計時，先對網(wǎng)上訂餐系統(tǒng)的總體架構(gòu)進行設(shè)計，然后再增加前后臺的功能模塊設(shè)計，經(jīng)過討論研究，對菜品搜索、菜品訂購模塊、訂單支付模塊和菜品推薦等重要功能模塊進行詳細(xì)設(shè)計和描述。針對系統(tǒng)面向的4類不同用戶賦予不同權(quán)限，設(shè)置不同的子功能模塊，這4類不同的用戶分別是游客、會員、食堂管理員和系統(tǒng)管理員[6]。構(gòu)建出來的網(wǎng)上訂餐系統(tǒng)整體功能結(jié)構(gòu)圖見圖1。

不同的人員具有不同的權(quán)限，針對游客而言，因為他們不是學(xué)校常駐人員，一般是學(xué)院食堂的臨時客戶，在學(xué)校用餐次數(shù)很少，所以在設(shè)計的時候，從他們使用的角度來看，登錄系統(tǒng)主要想查看菜品樣式和菜品評價，無需給他們設(shè)置過多的功能，不需給他們設(shè)置留言、評價和點餐等操作。如果他們在頁面停留的時間較長，往往表明希望獲得訂餐等服務(wù)，系統(tǒng)會將頁面跳轉(zhuǎn)至注冊頁面，引導(dǎo)其注冊成為系統(tǒng)會員，以便獲取更多服務(wù)。

會員主要是學(xué)校的學(xué)生和老師，他們具有較多的權(quán)限，系統(tǒng)為每個會員生成個人空間，便于儲存他們的個人信息和操作記錄。一般存放在數(shù)據(jù)庫中，包括用戶名、密碼，購物車、訂單。會員既可以查看菜品等網(wǎng)站的各種信息，又可以通過學(xué)校安裝的攝像頭分享了解餐位情況，以便選擇去食堂就餐還是送餐。會員按需選擇菜品存放于購物車后，依次填寫送餐地址、聯(lián)系號碼，選擇用餐方式，提交完成支付后系統(tǒng)自動生成有效訂單。用餐完畢后，會員可就菜品質(zhì)量、送貨上門服務(wù)質(zhì)量進行打分和留言，以便食堂更好改進提升。

經(jīng)調(diào)研，食堂管理員主要側(cè)重以下3個功能：第一是菜品管理功能，以食堂管理員身份登錄后可填寫菜品名稱、種類、價格，發(fā)布公告信息，設(shè)置每日折扣菜品吸引會員點餐提升銷量；第二是訂單管理功能，按照用戶下單后生成訂單編號順序進行菜品準(zhǔn)備和打包，按照指定的配送方式將菜品送到會員手上；第三是留言管理功能，食堂管理員可查看會員留言和點評，回復(fù)或刪除會員問題。

系統(tǒng)管理員負(fù)責(zé)整個系統(tǒng)的運維，包括用戶管理、系統(tǒng)管理、數(shù)據(jù)管理等，具有最高權(quán)限。比如用戶管理，分游客和會員兩類，包括查重、增刪，還有密碼重置等業(yè)務(wù)；系統(tǒng)管理主要側(cè)重于界面的管理，包括頁面布局美化和優(yōu)化，欄目內(nèi)容的增刪，最新菜品,展示和廣告宣傳等；數(shù)據(jù)管理主要是數(shù)據(jù)安全考慮，包括數(shù)據(jù)統(tǒng)計、數(shù)據(jù)異地備份，還要本地存儲，建議定時打印存檔。

2.3 平臺主要功能模塊的設(shè)計與實現(xiàn)

校園訂餐系統(tǒng)采用B/S架構(gòu)，由前端和后臺構(gòu)成。其中前端是用戶直接操作的界面，包括瀏覽查詢、網(wǎng)上訂餐、留言評分3部分，同時可以在上面添加一些滾動菜品宣傳信息；后臺也分用戶管理、內(nèi)容管理和系統(tǒng)管理3部分，不同對象賦予不同的權(quán)限，實現(xiàn)不同內(nèi)容的操作，具體見圖2。

各功能模塊說明如下。

（1）瀏覽查詢模塊。前臺用戶可以查看網(wǎng)站公告、菜品圖片、菜品價格等信息，可以查看菜品分類，按關(guān)鍵字進行菜品搜索查詢，還可以查看用戶的留言和評價。以會員身份登錄后可獲得更多權(quán)限。

（2）網(wǎng)上訂餐模塊。通過該模塊主要實現(xiàn)菜品查看、菜品加購、送餐方式選擇、查看購物車、提交訂單、配送路徑跟蹤、支付結(jié)算等功能。游客的權(quán)限小于會員的權(quán)限，如果他們在頁面停留的時間較長，系統(tǒng)會將頁面跳轉(zhuǎn)至注冊頁面，引導(dǎo)其注冊成為系統(tǒng)會員，以便獲取更多服務(wù)。該模塊運行流程圖見圖3。

（3）留言評分模塊。該模塊給會員提供留言和評分服務(wù)，會員用餐完畢后，可以在相應(yīng)頁面對菜品和送餐服務(wù)進行打分和發(fā)表留言。食堂管理員查看評分和留言后，了解服務(wù)情況和用戶需求，能更好改善菜品質(zhì)量和服務(wù)質(zhì)量。

（4）用戶管理模塊。該模塊給系統(tǒng)管理員提供后臺登錄后的相關(guān)操作，包括用戶信息增加、刪除和修改操作，如果會員忘記密碼，可為會員提供重置密碼服務(wù)。

（5）內(nèi)容管理模塊。該模式主要實現(xiàn)以下3個功能：訂單管理針對用戶更改、修改或者取消訂單，予以審核并進行退回、修改、刪除等操作；菜品管理主要是增刪菜品名稱、簡介、類別和價格、剩余份數(shù)；留言管理主要是供會員和食堂管理員互動，可以留言、點評，也能回復(fù)或者屏蔽不合理發(fā)言。

（6）系統(tǒng)管理模塊。該模塊一般是系統(tǒng)管理員使用，擁有最高權(quán)限，主要是以下兩大功能。數(shù)據(jù)管理，包括數(shù)據(jù)導(dǎo)出、數(shù)據(jù)備份、數(shù)據(jù)異地容災(zāi)和數(shù)據(jù)打印存檔；系統(tǒng)維護主要是界面管理、欄目管理、內(nèi)容管理、運維監(jiān)管等。該系統(tǒng)的首頁見圖4。

3 校園餐飲訂餐管理系統(tǒng)的測試與應(yīng)用

完成訂餐系統(tǒng)小程序的總體設(shè)計后，需要進行小程序系統(tǒng)平臺的實現(xiàn)。通過微信開發(fā)者工具對系統(tǒng)界面的整體設(shè)計和代碼來編程實現(xiàn)，同時，還要依賴系統(tǒng)所需要的開發(fā)環(huán)境、開發(fā)工具對代碼進行執(zhí)行，如若發(fā)現(xiàn)編碼問題，并解決這些問題，最后使系統(tǒng)功能得以實現(xiàn)。

本系統(tǒng)通過數(shù)據(jù)庫的設(shè)計、代碼的實現(xiàn)、開發(fā)基本完成，接下來進行上線前的系統(tǒng)測試。

3.1 測試環(huán)境

幾種常用的測試環(huán)境見表1。

表1 幾種測試環(huán)境

3.2 測試內(nèi)容及結(jié)果

3.2.1 測試內(nèi)容

（1）表單測試。表單主要測試確認(rèn)、保存、提交等功能，當(dāng)測試成功時，系統(tǒng)就能正常工作，在測試時系統(tǒng)準(zhǔn)確率達(dá)到98%，經(jīng)過后期修復(fù)，已經(jīng)全部正常運行。

（2）瀏覽器兼容性測試。本系統(tǒng)商家后臺采用B/S架構(gòu)，需要測試各種常見瀏覽器的兼容性問題，測試內(nèi)容包括：IE、Chrome、Firefox、360 安全瀏覽器、百度瀏覽器、QQ 瀏覽器。全部通過測試，運行流暢。測試表明，本系統(tǒng)具有很好的兼容性。

（3）邏輯功能測試。該測試包括微信掃碼登錄、類目信息管理、商品信息管理、訂單信息管理、微信支付、微信授權(quán)管理、訂單消息實時異步通知等多個模塊。經(jīng)過測試，顯示正常。

3.2.2 測試結(jié)果

經(jīng)過反復(fù)修改、優(yōu)化和測試，系統(tǒng)功能界面友好，穩(wěn)定性強、運行流暢，實現(xiàn)預(yù)期目標(biāo)。系統(tǒng)的應(yīng)用滿足了用戶需求，用戶滿意度高，為師生提供了良好的校園服務(wù)。

4 結(jié)語

本文主要對校園訂餐管理系統(tǒng)進行了研究，提出了基于微信小程序搭建系統(tǒng)的思路，設(shè)計并實現(xiàn)了校園訂餐管理系統(tǒng)。經(jīng)過測試與應(yīng)用證明，平臺開發(fā)滿足了用戶需求，不僅操作方便，提升了就餐效率，滿足了師生訂餐需求，用戶滿意度高，為師生提供了良好的校園服務(wù)。