李 涵 葉 子
基于Android系統(tǒng)的指尖訂餐軟件
李 涵 葉 子
本系統(tǒng)借助移動互聯(lián)網(wǎng),構建一個C/S結(jié)構的訂餐系統(tǒng),為學生訂餐提供便利,同時也方便學校食堂的經(jīng)營管理工作。服務器端由Node.js實現(xiàn),具有數(shù)據(jù)查詢操作、Web管理界面、向Android客戶端提供JSON API的功能;Android客戶端通過此API與服務器進行數(shù)據(jù)交換,提供登錄、查看菜單、購物車、下單、查看訂單的功能。用戶可在Android設備上通過客戶端遠程訂餐,食堂可通過網(wǎng)頁對后臺訂單信息進行管理,以在一定程度上緩解食堂在就餐高峰期的混亂問題,提升學生的食堂訂餐體驗。
在當今社會,蓬勃發(fā)展的移動互聯(lián)網(wǎng)已滲透到人們?nèi)粘I畹姆椒矫婷?,在不斷為大家?guī)肀憷耐瑫r也在漸漸地改變著人們的生活方式。餐飲業(yè)是有著悠久歷史的傳統(tǒng)行業(yè),對于大學校園中的學生而言,一日三餐自然必不可少。本系統(tǒng)旨在借助移動互聯(lián)網(wǎng),為學生訂餐提供便利,同時也方便學校食堂的經(jīng)營管理工作。
本系統(tǒng)主要針對大學校園中的食堂點餐問題而設計,其目的在于構建一個軟件系統(tǒng),使學生可在Android設備上通過客戶端遠程訂餐,而食堂可通過網(wǎng)頁對后臺訂單信息進行管理,以在一定程度上緩解食堂在就餐高峰期的混亂問題,提升學生的食堂訂餐體驗。
本系統(tǒng)具備以下功能:
服務器端:
1)通過數(shù)據(jù)庫管理用戶信息、訂單信息。
2)提供與客戶端交互的應用程序接口。包括用戶管理操作(注冊、登錄、個人信息管理),菜品查詢操作,訂單操作(提交、取消、修改、查看)。
3)提供后臺管理功能,實現(xiàn)對菜品信息、用戶信息、訂單信息的相關操作。
客戶端:
1)實現(xiàn)用戶的注冊、登錄、個人信息管理。
2)實現(xiàn)校園餐廳餐點信息查詢。
3)實現(xiàn)訂餐訂單的提交、修改、取消等管理工作。
Node.js
Node.js致力于簡化高速、可擴展網(wǎng)絡應用的開發(fā)。Node.js的一大特色是使用事件驅(qū)動的非阻塞I/O模式,使運行在不同設備上的數(shù)據(jù)密集型實時應用更加輕量、高效。Node.js是運行在服務器端的JavaScript。要在服務器端運行JavaScript代碼,需要編譯、執(zhí)行。而Node.js利用谷歌的V8虛擬機完成了這些工作。Node. js提供大量的實用模塊,開發(fā)人員不必從最底層開始編寫程序。因此,Node.js實際上由運行時和庫這兩部分組成。
后端框架Sails
Sails是使用Node.js技術的Web后端開發(fā)框架。為使開發(fā)過程更高效、更具可控性,Sails與其它 MVC Web應用程序框架有著相同的設計理念,并提供清晰合理的應用程序模板。
Waterline是預裝在Sails中的功能強大的對象關系映射層,它與數(shù)據(jù)的存儲方式無關,在很大程度上簡化了對一個或多個數(shù)據(jù)庫的操作。在底層的數(shù)據(jù)庫之上,Waterline提供了一個抽象層,允許開發(fā)者統(tǒng)一地查詢和操作數(shù)據(jù),而無需對特定的數(shù)據(jù)庫特定的代碼。
為充分利用Waterline的抽象性,本系統(tǒng)在設計數(shù)據(jù)庫時,不通過底層接口通過原生SQL語句手動實現(xiàn)外鍵與多表連接查詢,而使用Waterline提供的關聯(lián)(Association)來實現(xiàn)類似于外鍵的結(jié)構,使用populate( )實現(xiàn)類似于多表連接查詢的查詢操作。
模板引擎EJS
EJS是一個JavaScript模板庫,常用于從JSON數(shù)據(jù)中構建HTML字符串。它致力于解決JavaScript動態(tài)生成HTML代碼時的代碼可讀性與可維護性問題。傳統(tǒng)的做法是在JavaScript中將HTML標簽及動態(tài)數(shù)據(jù)連接成字符串后再處理,HTML代碼與JavaScript代碼混雜在一起,程序的編寫及維護有所不便。而EJS通過使用運行于客戶端的模板,能避免HTML標簽夾雜在JavaScript代碼中,使程序代碼更簡潔。同時,EJS封裝了許多視圖輔助函數(shù),這些視圖輔助函數(shù)使諸如創(chuàng)建鏈接、創(chuàng)建表格等視圖展示代碼更加便捷。
在本系統(tǒng)中,Sails在服務器端將標記語言模板編譯成HTML頁面,此即是Sails中的視圖(View)。在多數(shù)情況下,它用于對傳入的HTTP請求的響應。用戶可通過Android客戶端查看食品、下單、查看訂單列表,食堂方可通過瀏覽器對用戶、食品、訂單進行管理。
圖1 系統(tǒng)模塊示意圖
本系統(tǒng)分前后臺兩部分,前臺是Android客戶端,后臺利用Web頁面進行管理。
Web管理模塊:實現(xiàn)對管理員的身份認證,以及對用戶信息、食品信息、訂單信息的查看與修改。
客戶端模塊:實現(xiàn)新用戶注冊、用戶登錄、食品信息查看、訂單的下達及查看操作。
本系統(tǒng)各模塊的示意如圖1所示。
后端設計
后端的主要作用是為其它的模塊提供數(shù)據(jù)存儲、執(zhí)行訪問權限控制策略、提供API。
數(shù)據(jù)存儲:使用Waterline ORM對數(shù)據(jù)庫的抽象,建立模型及模型間的關聯(lián),以實現(xiàn)不同表之間的聯(lián)合查詢操作。使用數(shù)據(jù)模型的生命周期回調(diào)自動完成數(shù)據(jù)維護操作。例如創(chuàng)建用戶時,在寫入數(shù)據(jù)庫存前對明文密碼進行散列;添加訂單時,計算訂單的金額并更新數(shù)據(jù)庫存中相應的字段等。
控制器:完成對請求的接收、整理,根據(jù)請求對數(shù)據(jù)庫進行相應操作,整理并返回操作結(jié)果。
訪問權限控制:對Web管理界面及API執(zhí)行訪問權限控制。對于Web管理界面采用會話認證,在用戶登錄后,將該用戶的身份信息存儲在會話中,在請求頁面時檢查會話中的用戶身份信息,實現(xiàn)對不同權限用戶的訪問控制。對于API的訪問采用Token認證,每當API被訪問時,將請求中的Token信息與數(shù)據(jù)庫中的用戶Token進行比對,若某次請求中的Token與某用戶的Token對應,則服務器視該請求為該用戶所發(fā)出,并使得該用戶可以且僅能訪問與自己相關的操作,如下單、查詢歷史訂單等。
(1)用戶表
本系統(tǒng)使用Passport.js實現(xiàn)基于本地用戶名/密碼的身份驗證,需要一個額外的模型來在存儲用戶的身份認證信息,故用戶信息實際上存儲在兩個相關聯(lián)的模型中,即User模型和Passport模型。它們的定義分別位于api/models/User.js和api/models/Passport.js中。
User模型只保存了用戶名、訂單等基本系統(tǒng)。
Passport模型用于處理用戶的身份驗證,預留了本地驗證或第三方平臺驗證的方法。本系統(tǒng)中只使用了本地驗證。由于在每一次會話中,應用程序只需要驗證一個用戶,故把身份驗證相關的數(shù)據(jù)封裝到一個模型中,程序就只用對會話中的不包含用戶身份驗證信息的基本信息進行處理,由此使會話本身盡可能地輕量。
(2)食品表
食品表中存有各種食品的基本信息。api/models/ Food.js中的內(nèi)容如下:
(3)訂單表
訂單模型Order中只包含了訂單的編號、下單的用戶編號,并與存儲有訂單明細的OrderItem建立關聯(lián),來描述一份訂單的完整信息。api/models/Order.js中對數(shù)據(jù)的定義如下:
(4)訂單明細表
一個訂單對應的商品種類、數(shù)量是靈活的,使得在一個模型中存儲訂單中的所有物品比較困難。于是單獨設立一個訂單明細模型OrderItem,記錄訂單中的商品種類、數(shù)量信息,并使每個Order模型與OrderItem模型建立一對多的關系,便于訂單明細的查詢。
api/models/OrderItem.js中對數(shù)據(jù)的定義如下
Web管理
管理員可通過Web瀏覽器訪問管理界面,對系統(tǒng)中的用戶數(shù)據(jù)、食品數(shù)據(jù)、訂單數(shù)據(jù)進行操作。界面頂部的導航條可在不同管理項目之前切換。主要包括登錄界面、用戶管理界面、食品管理界面,以及訂單管理界面的設計。
Sails應用程序的目錄結(jié)構如圖2所示。
下對其中重要的目錄、文件作簡要說明。
圖2 Sails應用程序的目錄結(jié)構
api/controllers目錄:此目錄中含有應用程序的控制器。在Sails中,控制器是包含用于與模型交互、向客戶端渲染對應的視圖的邏輯的JavaScript文件。
api/models目錄:此目錄中含有應用程序使用的模型。在Sails中,模型是對應用程序中數(shù)據(jù)的存儲結(jié)構的定義。在此可配置記錄在數(shù)據(jù)庫中如何定義。
api/policies目錄:這是保存認證策略文件的目錄。認證策略實質(zhì)上是用于對應用訪問進行身份驗證的Express中間件。
api/services目錄:此目錄中包含有服務。服務的作用類似于控制器,但服務與請求和響應無關。為了保持控制器的簡潔,任何與請求、響應無關的邏輯都可以寫成服務。
assets目錄:此目錄用于存儲靜態(tài)資源文件。例如,在assets/someFolder/ someFile.txt創(chuàng)建一個文件,當Sails應用程序啟動后,可通過http://localhost:1337/someFolder/ someFile.txt來訪問到它。
config/env/development.js:運行于開發(fā)模式時,Sails會加載此文件。本系統(tǒng)在此文件中指定數(shù)據(jù)模型默認的數(shù)據(jù)庫連接。不指定運行模式相關的配置時,Sails默認運行于開發(fā)模式。
config/local.js:本文件用于Sails應用程序的本地環(huán)境配置,可指定監(jiān)聽的端口號以及Sails的運行模式。
config/http.js:本文件常用于配置Sails的HTTP服務器所使用的中間件,以及中間件的順序。
config/connections.js:配置數(shù)據(jù)庫適配器。如連接數(shù)據(jù)庫的參數(shù)、使用的數(shù)據(jù)庫名稱等。
config/policies.js:配置默認的認證策略。
config/routes.js:此文件配置用戶的URL與控制器的映射關系。
views目錄:此目錄中含有所有自定義的視圖。要創(chuàng)建新的自定義視圖,可在此文件夾中建立一個新的文件夾,并在這個新文件夾中建立新的.ejs文件。若要向客戶端渲染這個視圖 ,可在config/routes.js中為它配置一個路由,或在控制器的動作中使用res.view()方法。
Android客戶端設計
Android客戶端包括如下模塊:
(1)注冊/登錄模塊:實現(xiàn)用戶的登錄過程,登錄后取得用戶的Token用于身份認證。
(2)食品查看模塊:實現(xiàn)食品列表的展示,并能將食品添加進購物車。
(3)訂單操作模塊:實現(xiàn)購物車查看、訂單提交、歷史訂單查看功能。
圖3 登錄界面
圖4 食品管理界面
圖5 訂單管理界面
圖6 查看訂單詳情
Web管理
在本機啟動服務器:進入服務器項目所在目錄,在命令行中執(zhí)行sails lift即可開啟服務器。在默認配置下,服務器將監(jiān)聽本機的1337端口。
可進入管理系統(tǒng)的登錄頁面。登錄界面如圖3所示。
在Web界面,管理員成功登陸后可以管理用戶信息。在食品管理界面,顯示了食品ID、名稱、單價、圖片等信息,并可對食品信息進行添加、編輯、刪除操作。在訂單管理中,訂單詳情界面顯示了訂單的下單用戶、下單時間,訂單中食品的圖片、名稱、數(shù)量、價格,以及訂單的總價格。圖4至圖6顯示了Web頁面的管理信息。
圖7 登錄界面
圖8 登錄頁面加載動畫
圖9 食品列表界面
圖10 加入購物車提示
圖11 添加購物車成功
圖12 刪除購物車中的項目
圖13 購物車下單
圖14 歷史訂單
Android客戶端測試
Android客戶端的登錄界面如圖7和圖8所示。登錄成功后,將會顯示食品列表界面。
食品列表界面如圖9和圖10所示所示。
點擊界面右下方的“訂單”標簽將進入圖11所示的購物車頁面,此頁面可進行下訂單前的確認,并可以刪除不想要的項目。長按購物車中的某一項,會提示用戶是否要刪除,如圖12所示。確認無誤后可點擊“立即下單”按鈕,向服務器提交訂單,如圖13所示。
從訂單界面左滑,或點擊上方的“訂單”可進入歷史訂單界面。下拉會向服務器請求登錄用戶的訂單信息。訂單按照時間升序,如圖14所示。
本系統(tǒng)主要針對大學校園中的食堂點餐問題而設計,其目的在于構建一個系統(tǒng),使學生可在Android設備上通過客戶端遠程訂餐,而食堂可通過網(wǎng)頁對后臺訂單信息進行管理。服務器端由Node.js實現(xiàn),具有數(shù)據(jù)查詢操作、Web管理界面、向Android客戶端提供JSON API的功能;Android客戶端通過此API與服務器進行數(shù)據(jù)交換,提供登錄、查看菜單、購物車、下單、查看訂單的功能。用戶可在Android設備上通過客戶端遠程訂餐,食堂可通過網(wǎng)頁對后臺訂單信息進行管理,以在一定程度上緩解食堂在就餐高峰期的混亂問題,提升學生的食堂訂餐體驗。
10.3969/j.issn.1001-8972.2015.21.016