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

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

0 引 言

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

1 前臺客戶終端App設(shè)計與實現(xiàn)

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

1.1 功能設(shè)計

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

圖1 前臺客戶終端功能設(shè)計

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

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

1.3 前臺客戶端實現(xiàn)

1.3.1 登錄模塊

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

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

圖3 登錄界面

1.3.2 主頁模塊

主頁模塊分為四個模塊：首頁模塊，訂單模塊，我的模塊，更多模塊。

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

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

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

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

1.3.4 我的模塊

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

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

圖5 訂單模塊

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

2 后臺服務(wù)器端設(shè)計與實現(xiàn)

2.1 Html頁面實現(xiàn)--Bootstrap框架

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

圖7 添加商品彈出框

圖8 商品表格圖

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

2.2 PHP后臺服務(wù)器

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

2.3 MySQL圖形化界面工具

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

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

圖10 PHPMyAdmin圖形管理

3 結(jié) 論

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