基于HTML5的定制糕坊系統(tǒng)設(shè)計(jì)①

鐘玲玲， 黃 鵬， 黃 靚， 吳 密

(安徽新華學(xué)院，安徽 合肥 230088)

0 引 言

隨著互聯(lián)網(wǎng)應(yīng)用技術(shù)的不斷發(fā)展，給蛋糕定制行業(yè)帶來(lái)了巨大的變化，從而使得蛋糕定制行業(yè)擺脫傳統(tǒng)的定制方式，實(shí)現(xiàn)客戶占主導(dǎo)地位，滿足客戶的選擇性和要求性。隨著App的普及，客戶根據(jù)自己的需要發(fā)表需求表，店家根據(jù)自己的成本等核算來(lái)確定是否接單，更能貼近客戶本身的意愿和要求，更加人性化、多樣化，是當(dāng)前蛋糕定制的新亮點(diǎn)。由此提出一種基于HTML5的定制糕坊系統(tǒng)，并對(duì)其實(shí)現(xiàn)過(guò)程進(jìn)行分析與闡述。

1 前臺(tái)客戶終端App設(shè)計(jì)與實(shí)現(xiàn)

采用Ionic技術(shù)，Ionic是一個(gè)非常強(qiáng)大的 HTML5混合式應(yīng)用程序開發(fā)框架，Ionic 的樣式組件十分豐富，非常適合與應(yīng)用程序的進(jìn)行UI 交互，適用于基于混合的開發(fā)模式[1]。

1.1 功能設(shè)計(jì)

App主要分成三個(gè)模塊，分別是登錄模塊，發(fā)布訂單模塊，購(gòu)買模塊。登錄模塊功能是客戶注冊(cè)信息登錄此平臺(tái)，進(jìn)入平臺(tái)后使用此平臺(tái)的相應(yīng)功能。發(fā)布訂單模塊功能是客戶在此平臺(tái)上發(fā)布自己的蛋糕定制需求，商家看到此訂單進(jìn)行接單，給用戶制作蛋糕。購(gòu)買模塊功能是用戶瀏覽其它商家產(chǎn)品，如果感覺(jué)滿意可以直接購(gòu)買。如圖1所示。

圖1 前臺(tái)客戶終端功能設(shè)計(jì)

1.2 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)是以MySQL為主的關(guān)系型數(shù)據(jù)庫(kù)，采用Wamp Server合成開發(fā)軟件與Sublime編輯器。其中Sublime編輯器主要是編寫html/css/javascript前端頁(yè)面代碼以及PHP接口代碼；Wamp主要是負(fù)責(zé)搭建后臺(tái)環(huán)境，鏈接服務(wù)器；MySQL數(shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)數(shù)據(jù)[2]。數(shù)據(jù)庫(kù)邏輯有四個(gè)表格，分別為用戶表(User)、商品表(Product)、管理員表(Manage)、訂單表(Orderform)。如圖2所示。

1.3 前臺(tái)客戶端實(shí)現(xiàn)

1.3.1 登錄模塊

如圖3所示是登錄界面的頁(yè)面實(shí)現(xiàn)，在這個(gè)頁(yè)面中有輸入用戶名和密碼的輸入框，用戶可以根據(jù)自己注冊(cè)的賬號(hào)進(jìn)入主頁(yè)。此頁(yè)面采用的就是柵格布局方式，可以兼容各個(gè)類型的屏幕大小。

圖2 數(shù)據(jù)庫(kù)分析圖

圖3 登錄界面

1.3.2 主頁(yè)模塊

主頁(yè)模塊分為四個(gè)模塊：首頁(yè)模塊，訂單模塊，我的模塊，更多模塊。

訂單模塊：瀏覽商家產(chǎn)品和發(fā)布訂單，如圖4(a)所示。 首頁(yè)模塊：進(jìn)行產(chǎn)品的簡(jiǎn)單介紹，如圖4(b)所示。 我的模塊：點(diǎn)擊可以查看自己預(yù)定的訂單，和已發(fā)布的訂單，如圖4(c)所示。

更多模塊：是輔助功能，如圖4(d)所示。

1.3.3 訂單模塊功能設(shè)計(jì)

客戶根據(jù)自身需求填寫需求表，發(fā)布訂單，如圖5所示。

1.3.4 我的模塊

模塊里面有已定訂單和發(fā)布訂單兩個(gè)按鈕，點(diǎn)擊進(jìn)入，如圖6(a)、(b)所示。

(a) 訂單模塊 (b)首頁(yè)模塊 (c)我的模塊(d)更多模塊

圖5 訂單模塊

(a) 已定訂單 (b) 發(fā)布訂單

2 后臺(tái)服務(wù)器端設(shè)計(jì)與實(shí)現(xiàn)

2.1 Html頁(yè)面實(shí)現(xiàn)--Bootstrap框架

Bootstrap框架為當(dāng)下最流行的前端UI框架，其特點(diǎn)是組件簡(jiǎn)潔大方，代碼規(guī)范精簡(jiǎn)，界面自定義性強(qiáng)[3]。后臺(tái)采用Bootstrap所有實(shí)現(xiàn)彈窗、樣式、表格列表，添加商品彈出框表格如圖7所示。

圖7 添加商品彈出框

圖8 商品表格圖

后臺(tái)主頁(yè)采用左右布局，左邊是菜單，右邊是顯示內(nèi)容。管理員點(diǎn)擊右邊菜單，左邊的內(nèi)容會(huì)跳到相應(yīng)的內(nèi)容部分。與后臺(tái)交互采用Ajax技術(shù)，運(yùn)用Ajax實(shí)現(xiàn)局部刷新數(shù)據(jù)，無(wú)跳轉(zhuǎn)頁(yè)面搜索功能[4]。在頁(yè)面點(diǎn)擊搜索商品欄，會(huì)出現(xiàn)搜索商品的組件模塊出現(xiàn)，通過(guò)商品類別與商品名稱，由Ajax傳送數(shù)據(jù)到后臺(tái)，經(jīng)過(guò)服務(wù)器轉(zhuǎn)換成SQL語(yǔ)句進(jìn)行查找，最后通過(guò)Ajax返回查找數(shù)據(jù)，并根據(jù)返回?cái)?shù)據(jù)動(dòng)態(tài)渲染到Html頁(yè)面中，商品表格圖如圖8所示。

2.2 PHP后臺(tái)服務(wù)器

PHP后臺(tái)服務(wù)器是后臺(tái)服務(wù)器向前端文本頁(yè)面發(fā)送固定格式的數(shù)據(jù)，一般有XML、Json數(shù)據(jù)類型。因?yàn)榍岸隧?yè)面不能直接與MySQL數(shù)據(jù)庫(kù)連接，所以采用PHP語(yǔ)言來(lái)編寫數(shù)據(jù)庫(kù)語(yǔ)句操作MySQL數(shù)據(jù)庫(kù)[5]，如圖9所示。

2.3 MySQL圖形化界面工具

Wamp工具軟件集成了圖形化PHPMyAdmin管理頁(yè)面，可以更加直觀，詳細(xì)，精確的完成MySQL的數(shù)據(jù)庫(kù)操作。實(shí)現(xiàn)提前設(shè)置用戶密碼，手動(dòng)創(chuàng)建表單，添加數(shù)據(jù)信息，表格分析功能與導(dǎo)出的數(shù)據(jù)表格的功能，完成數(shù)據(jù)庫(kù)設(shè)置，如圖10所示。

圖9 PHP操作數(shù)據(jù)庫(kù)代碼

圖10 PHPMyAdmin圖形管理

3 結(jié) 論

文中在分析蛋糕在線定制需求的基礎(chǔ)上，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)蛋糕網(wǎng)上定制系統(tǒng)。系統(tǒng)分為兩個(gè)模塊，分別是用戶使用的定制糕坊和定制糕坊后臺(tái)管理系統(tǒng)。用戶使用端主要是提供給用戶一個(gè)瀏覽的平臺(tái)，包括發(fā)布訂單，下單等功能。定制糕坊后臺(tái)管理系統(tǒng)主要是對(duì)用戶的訂單進(jìn)行管理、查看。測(cè)試表明，系統(tǒng)性能滿足設(shè)計(jì)要求，運(yùn)行穩(wěn)定可靠。但也存在問(wèn)題，頁(yè)面沒(méi)有下載快捷鍵和信息詳細(xì)查詢功能，稍顯得人機(jī)交互性差，后期進(jìn)行改進(jìn)完善，讓用戶搜索查詢更方便。系統(tǒng)運(yùn)用Bootstrap響應(yīng)式開發(fā)框架，用其柵格系統(tǒng)和媒體查詢完成響應(yīng)式開發(fā)。相對(duì)于市場(chǎng)上Web開發(fā)的老牌框架，可以實(shí)現(xiàn)一份代碼即可在手機(jī)、平板、PC端上正常運(yùn)行，從而隨時(shí)隨地的進(jìn)行系統(tǒng)管理與查閱。該系統(tǒng)方便顧客定制蛋糕，為蛋糕銷售提供了一個(gè)優(yōu)秀平臺(tái)，具有“下單方便，交互直觀，銷售效率較高”的特點(diǎn)，有良好的經(jīng)濟(jì)效益和廣泛的推廣價(jià)值。