“掌上食堂”系統(tǒng)的研究與開發(fā)

文/朱芃璇 劉子夕 賀陳玉 何沁瑋

2016年 9月 21日，微信小程序正式開啟內(nèi)測。小程序是一種無需下載即可使用的應(yīng)用，它依托于微信，實現(xiàn)了跨安卓和IOS 平臺進行使用，同時開發(fā)成本較低，用戶也不需要下載注冊，簡化了操作流程。除此之外，小程序還具有非常良好的靈活性，基于微信平臺客戶可以在微信里聊天進入小程序，也可以在小程序隨時切換回聊天，靈活快捷。小程序也可以在微信、在APP 各種環(huán)境下打開使用。基于小程序在多平臺的靈活操作，小程序線上線下推廣都十分便捷，它擁有多種分享方式，能夠有效的打通傳統(tǒng)線下使用場景與線上的完美結(jié)合，比如它可以在微信公眾號，附近小程序，線下等都可以進行推廣。在小程序所具有的這一系列優(yōu)勢的基礎(chǔ)上，我們把小程序與食堂信息二者的特性結(jié)合起來進行開發(fā)，極大的提高了學(xué)生對食堂各類信息的了解程度以及提供了一條便捷的途經(jīng)給食堂管理人員來收集對學(xué)生對菜品種類的偏好信息。最終，該項目獲批省級大學(xué)生創(chuàng)新創(chuàng)業(yè)項目。

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

掌上食堂系統(tǒng)主要包括系統(tǒng)的管理員后臺功能設(shè)計，前端用戶功能設(shè)計（完整系統(tǒng)功能見圖1），系統(tǒng)的數(shù)據(jù)庫設(shè)計。

1.1 管理員后臺系統(tǒng)功能模塊設(shè)計

圖1：系統(tǒng)功能設(shè)計圖

管理員后臺功能設(shè)計包括添加、刪除管理員賬號，添加菜品，管理會員這四個功能。添加管理員賬號后，每個食堂的管理員可以根據(jù)食堂的分類直接上傳各個食堂對應(yīng)的菜品信息。針對會員管理，如果用戶在使用過程中對菜品進行惡意評論，管理員可以直接禁掉該用戶的賬號。后臺管理員操作用戶流程圖如圖2所示。

1.2 前端用戶功能設(shè)計

小程序的下欄包括了“首頁”，“購物車”，“我的”三個欄目。在首頁用戶可以直接查看每個食堂每天對應(yīng)的菜品，在搜索欄中根據(jù)關(guān)鍵字搜索對應(yīng)的菜品，點擊菜品圖標(biāo)進入菜品詳情頁面可以看到該菜品對應(yīng)的評論。菜品的詳情頁面包括了加入購物車和立即購買這兩個服務(wù)，用戶可以將當(dāng)日的菜品提前加入購物車，到食堂開放時間時即可直接下單進行購買或是不添加購物車直接購買。點擊“購物車”欄目即可直接看到已經(jīng)放在購物車中的菜品，上面有對應(yīng)的金額，訂單號和對應(yīng)的下單時間?！拔业摹币粰邳c擊后可以看到“我的訂單”，“我的收貨地址”，“我的評價”三個功能，在“我的訂單”中可以看到訂單信息，包括待付款，待發(fā)貨，待收貨，待評價，已完成，已關(guān)閉留個欄目。如果用戶提交訂單后在五分鐘內(nèi)不進行付款則訂單自動關(guān)閉。交易完成后用戶可以對所選夠的菜品進行評論，評論將實時反饋到前端展示給所有用戶。在“我的收貨地址”這個功能中可以添加學(xué)生對應(yīng)的宿舍地址信息?！拔业脑u價”一欄可以直接看到針對不同菜品的評論和評分。

圖2：管理員刪除用戶操作流程圖

1.3 系統(tǒng)數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫包括管理員表，管理員操作記錄表，管理員操作報錯信息表，會員表，會員信息認(rèn)證表，食品表，食品分類表，食品庫存對應(yīng)表，會員地址表，會員記錄表等，數(shù)據(jù)庫之間通過關(guān)鍵字段進行鏈接，成功地完成了數(shù)據(jù)的存儲和讀取。

2 系統(tǒng)實現(xiàn)

2.1 后臺系統(tǒng)實現(xiàn)

后臺系統(tǒng)使用Python Flask 代碼編程和MySQL 數(shù)據(jù)庫進行實現(xiàn)，通過代碼完成對后臺界面的部署以及后臺信息記錄的創(chuàng)建和提交。管理員可以在后臺進行用戶的管理，選擇對應(yīng)的菜品進行展示，并且查看每個菜品對應(yīng)的變更信息。后臺架構(gòu)如圖3所示，后臺頁面總覽如圖4所示。

表1

圖3：后端架構(gòu)

2.2 前端功能的實現(xiàn)

前端界面顯示如圖5(a)和圖5(b)所示所示。

2.2.1 菜品查看功能

前端實現(xiàn)了菜品查看，菜品訂單每個菜品包含了菜品名稱，價格，庫存，分類，圖片等信息已經(jīng)存在數(shù)據(jù)庫中的food 表中，后端構(gòu)建查詢語句查到數(shù)據(jù)庫中存儲的信息將結(jié)果發(fā)送回前端，前端js 對時間進行處理后將返回的結(jié)果在wxml 中進行展示，wxss 對wxml 中的標(biāo)簽信息進行渲染。

2.2.2 菜品支付功能

我們在菜品詳情界面設(shè)計了一個提交事件，點擊后返回對應(yīng)的數(shù)據(jù)字段，在js 列表里進行處理之后將數(shù)據(jù)返回給后端，再由后端把支付狀態(tài)存儲數(shù)據(jù)庫中。

2.2.3 菜品評論功能

菜品完成支付之后即可通過“去評論”按鈕進入到菜品評論界面對菜品進行評論并提交，評價表單如圖6所示。

2.2.4 收貨地址功能

在“我的”欄目中可以看到“我的收貨地址”，點擊進入之后可以看到對應(yīng)的編輯頁面，使用微信的數(shù)據(jù)字段獲取方法，可以將填入表格中的信息傳入到后端，存儲到數(shù)據(jù)庫中后再調(diào)出到前端進行渲染即可展示，如圖7所示。

2.2.5 查看“我的評價”功能

用戶對菜品進行評論后可以查看自己的所有評論，前端獲取用戶的id 字段返回后端，由id 查詢出對應(yīng)的評論（包括對應(yīng)的評論對應(yīng)的菜品，評論日期等）信息。

2.3 測試

通過對“掌上食堂”各個功能進行測試，我們得到了如表1所示的測試結(jié)果。

3 結(jié)論

隨著微信小程序的發(fā)展，它的市場占有率不斷提高，發(fā)展前景較好。小程序所具有的優(yōu)秀特點可以幫助開發(fā)者以較小的開發(fā)成本在最短的時間內(nèi)開發(fā)出符合需求的程序。

本次微信小程序完成了從后端管理員控制臺到前端菜品信息的展示與菜品支付一套完整的api 開發(fā)，在今后的學(xué)習(xí)中會根據(jù)用戶需求的變更以及小程序代碼的更新來不斷完善小程序，給用戶提供更多更實用的功能。

圖4：管理員后臺頁面總覽圖

圖5：前端頁面顯示圖

圖6：菜品評論單

圖7：收貨地址編輯顯示圖