在21世紀互聯(lián)網已經進入了一個快速發(fā)展和成熟階段，電子產品成為了生活中不可缺少角色。隨著社會的發(fā)展和生活觀念的改變，我們的消費意識也生了巨大的變化，孕育出了一種新網絡營銷模式，即外賣行業(yè)。外賣行業(yè)具有廣闊的發(fā)展空間和潛在動力，有大市場，大的消費群體，可以為我們創(chuàng)造可觀的財富價值。鑒于當前此行業(yè)的蓬勃發(fā)展，研發(fā)一個迎合當前大眾消費習慣和生活方式，結合地方特色建立一個區(qū)域性的特色的名為“小香廚”的H5 APP外賣平臺。該系統(tǒng)使用了主流的HTML5、原生JS、CSS（CSS3）、JS類庫（jQuery）、CSS框架（bootstrap）、Cordova插件（調用設備上的API）等做前臺頁面的開發(fā)，使用Java開發(fā)后臺服務，使用Apache做Web服務器以及數據庫技術（Mysql）。此平臺使用可視化界面的Wex5作為開發(fā)工具。應用的操作系統(tǒng)為Android 或IOS.

        1 前言

        1.1 系統(tǒng)開發(fā)目的和背景

        手機最初作為一種通訊工具為人們所熟知，現如今它已不單是一種通訊設備了，多樣化的功能賦予了它更多的實用價值，手機越來越普及，小到學生大到老人，在各個領域的人都在使用手機。我們交流和溝通的內容在不斷的擴大，那么社會服務也必須緊跟著社會發(fā)展方向發(fā)展和前進。如今電子商務得到了很好的發(fā)展和遍及。生活中傳統(tǒng)的餐飲業(yè)，大多數都是實體店的經營模式存在的。而餐飲業(yè)是多元化，個性化的服務性行業(yè)，那么最能體現這兩點的服務方式就是電商。網上訂餐系統(tǒng)隨著人們生活方式的改變也越來越成熟。隨著手機訂餐APP的普及，外賣作為一種便捷的就餐方式以走進我們的日常生活。為了打造一個獨特的網上訂餐APP，為顧客提供周到就餐服務，建立獨特的區(qū)域性餐飲服務，開發(fā)“小香廚”外賣平臺?！靶∠銖N”外賣APP項目總的指標是運用數字通信技術，電子商務，互聯(lián)網技術等多種前沿技術。開發(fā)一個以個人，民眾為主體，以居民樓和小區(qū)為基本單元，結合平板，手機等電子通性設備，提供及時和美味的飲食服務平臺。

        1.2外賣平臺現狀綜述

        1.2.1外賣平臺的發(fā)展情況

        近年來，移動互聯(lián)網取得了前所未有發(fā)展，它打破了傳統(tǒng)模式日益成為提供信息的最佳渠道。線上購餐成為了一種全新的美食購物途徑，它豐富了我們的生活方式，為我們帶來巨大的便利，因而它快速的崛起，在網絡購物中占據一席地位，它誕生就很快得到大家的認可和歡迎，并快速的接受了這一服務方式。餐飲業(yè)務加入到網絡平臺上它就不僅要注重食物的味道，還得提高餐品的外送速度上。就針對我們的大學生而言，他們在生活中使用外賣服務的比例竟然高達87%。在此可以簡單的看出我們的就餐行為在慢慢的向隨時性，隨地性，自由性的方向發(fā)展，不在受到空間和時間的約束，通俗的說就是想吃就定餐，而不是之前的按時就餐。大學生對網絡的使用率高也是促進以大學為中心的區(qū)域性網上消費網絡。我們的生活習慣的改變極大的加快了外賣行業(yè)的發(fā)展，呈現了一種相互促進的態(tài)勢現如今，國內的網上訂餐平臺得到了快速的發(fā)展，具有良好的前景和發(fā)展空間。已有很多人一起來分這塊大蛋糕。此前國內外賣市場上呈現了包含糯米網，美團，淘點點，餓了么，百度外賣，點我吧，外賣超人等十幾種相互競爭大型的外賣平臺。餓了么與美團在大學生占有了較大的份額，由此可見大學生已認可外賣這一消費理念。

        1.2.2外賣市場分析

        按照相關數據顯示，有很多飲食店利用網上銷售的銷售額還高出了實體店的營業(yè)額。近年來外賣市場在不斷的擴大，據一些報告顯示，僅在2015年一年中，線上外賣交易額達到了216.84億元。而在2015年第一季度，交易額是32.18億元，到第四季度就漲到了81.7億元，季度增速達到20點，由此可見外賣發(fā)展速度的驚人。

        1.2.3消費者分析

        快節(jié)奏的城市生活，催出了一種叫做“宅居”的社會現象。外賣服務滿足了“民以食為天”的生存需要，這就讓“外賣”擁有了很大的市場，“宅”生活的盛行加快了這一行業(yè)的發(fā)展。雖然人們愿意“宅在家里”的原因是很多的，這樣的社會現象促進了“外賣業(yè)”的發(fā)展，“宅生活”與“外賣業(yè)”緊緊的聯(lián)系在一起。“送餐到家”形成了一條特色產業(yè)，讓更多的人養(yǎng)成了“外賣情結”，通俗的說就是一想到吃就想到了外賣?，F在，假如你問我們生活中的“宅人”是如何解決自己吃飯問題的，他們既不進廚房自己做飯也不去外賣餐廳吃飯，那么能送飯上門的“外賣”則成了他們不二的選擇。外賣業(yè)的產生和發(fā)展促進了社會的發(fā)展，極大的方便了我們的生活。

        1.2.4商家分析

        傳統(tǒng)的餐飲業(yè)基本上都是到店用餐，而隨著社會的進步，時代的發(fā)展，我們的生活方式也在發(fā)生著巨大的改變，因此傳統(tǒng)的經營模式也慢慢的發(fā)生向著人們的發(fā)展的方向發(fā)展?，F在流行這一種生活方式那就是“宅居”，隨著“宅”生活的漸漸流行，不論是年輕人，還有未成年人，以及老人都不愿意出門，那么外賣就成了滿足人們生活需要的最好的方式，也是越來越多的商家的加入外賣這一行業(yè)，提高了他們的利潤來源。就我們大學校園而言，大多數的外賣商家普遍采用的是迅速占領市場的路線，對于商家品牌的建設并沒有做大多的投入和精力。因為小商家的資金不夠雄厚，實力有限，那么節(jié)約成本，提高出餐效率則是他們主要關注的地方。網絡外賣平臺就符合了他們的根本目的，線上訂餐具有互動性，直觀性的特點，而且成本低廉，方便快捷。網上餐廳可以為我們呈現食物的色澤和樣貌，也可以和顧客進行交流，實時的根據顧客們提出的意見對餐廳的服務和菜系做修改。根據人們的消費觀念和生活習慣，建立起迎合大學生的銷售模式，對平臺的菜品進行促銷活動，增大競爭力，促進消費。

        1.3 系統(tǒng)開發(fā)意義

        針對目前餐飲業(yè)上存在的問題和發(fā)展方向的背景下，我們可以根據地方的文化，風俗，飲食文化角度入手在這一大環(huán)境中找到一個創(chuàng)造利益的地方?！靶∠銖N”外賣平臺適合所有的有外賣需求的消費者，為他們提供最好的服務，以他們的消費要求作為平臺研發(fā)和發(fā)展的目標。利用網上訂餐平臺為商家創(chuàng)造經濟利益，促進地方的消費水平。網上訂餐逐漸被人們所喜愛，在為商家和企業(yè)帶來利潤的同時，拉動了消費，方便了人們的生活。“小香廚”外賣APP的目的是為了打造直觀，可靠，健康，快捷，方便的網絡訂餐系統(tǒng)，方便消費者的飲食生活，為大家的生活帶來便利。平臺應抓住地方上的中小型店鋪，建立區(qū)域化的飲食服務圈，為廣大消費者提供最切合他們要求的服務，搭建一個具有特色的外賣平臺。

        2 系統(tǒng)開發(fā)環(huán)境和開發(fā)工具

        “小香廚”外賣平臺采用的是B/S（瀏覽器和服務器）架構，整個平臺使用H5，JS，Mysql數據庫與插件等結合實現，使用WEX5作為開發(fā)工具。

        2.1 WEX5簡介

        WEX5作為一款高性能的開源，免費和輕架構的快捷H5 App開發(fā)工具，極大的提高了App的開發(fā)效率。其在ECLIPSE的基礎上進行了封裝，增加了它的基礎功能，同時還融合了許多的組件，簡單快捷，成為了一款集成的前端開發(fā)工具。Wex5采用了主流的MVC（Model—View—Controlle即模型—試圖—控制器）設計模式，提供了對HTML，CSS和JavaScript的全局控制，同時遵循Apache（Apache HTTP Server）開源協(xié)議，主張采用視圖（View）與數據（Data）分離，代碼的邏輯和頁面的描述分離，支持原生調試，真機調試，瀏覽器調試等多種調試模式，開發(fā)工程師可掌握每一段代碼。

        Wex5采用了H5，CSS3和JS的標準前端開發(fā)技術，使用了AMD（Asynchronous Module Definition）規(guī)范，即使用了異步加載機制的NodeJs，Bootstrap，RequireJS，JQuery等主流的前端技術；同時Wex5使用的混合應用（Hybirid App）開發(fā)模式是基于PhoneGap （Cordova）的，可以非常容易的調用移動設備的功能以及它的硬件能力，如手機的許多功能，比如說圖片庫，相機，語音通話，計算器，文件，視頻，電池，指南針，通訊錄，瀏覽器等眾多手機應用，達到了一次開發(fā)，多次利用部署的效果，確保了開發(fā)人員的開發(fā)成果始終得到最大利用；而且Wex5開發(fā)出的作品支持包括C，C  ，C#，PHP，Java，NodeJS，.NET在內的多種類型的后端技術，而且對云API的兼容性也非常友好。讓開發(fā)工程師可以輕松的面對各種復雜的數據，精簡代碼。雖然過程變得簡單了但研發(fā)出的手機應用使用和運行體驗能夠媲美原生開發(fā)。

        Wex5作為一種可視化開發(fā)工具，簡單的開發(fā)界面，為工程師營造良好的開發(fā)環(huán)境，拖拽式頁面設計極大的提高了開發(fā)效率。

        雖然Wex5的功能很多，很強大，但開發(fā)者設計的非常人性化是一種便攜式的軟件，

        不需要進行安裝，解壓壓縮包后打開就能使用，很方便，避免的安裝的繁瑣操作。

        3 系統(tǒng)功能

        該系統(tǒng)主要能實現以下幾種功能：

        （1）顧客登錄“小香廚”外賣平臺進行菜品預覽

        （2）購物車

        （3）點菜完畢生成訂單

        （4）網上支付

        （5）用戶信息

        （6）定位

        4 系統(tǒng)設計

        4.1 外賣系統(tǒng)功能介紹

        表1系統(tǒng)功能表

        外賣分類從數據庫查詢獲得相關菜品信息顯示菜品信息從數據庫中獲取菜品信息加入購物車頁面數據計算

        下單并支付將訂單保存到數據庫

        配置默認配送信息

        Ⅰ. 通過定位獲得地址信息

        Ⅱ. 將配送信息保存到數據庫

        4.2 架構原理

        4.2 數據交互過程

        圖2 系統(tǒng)數據交互過程

        4.3 系統(tǒng)數據庫設計

        經過仔細研讀“小香廚”外賣系統(tǒng)的需求分析，列出以下系統(tǒng)所需的數據項和數據表:

        表2 菜品表

        字段名稱數據類型說明

        To_id VARCHAR(20) NOT NULL 菜品ID

        To_name VARCHAR(50) 菜品名稱

        To_price VARCHAR(20) 單價

        To_description VARCHAR(200) 描述

        To_image VARCHAR(50) 圖片

        To_sort VARCHAR(20) 菜品類別

        表3 訂單表

        字段名稱數據類型說明

        To_id VARCHAR(20) NOT NULL 用戶ID

        To_name VARCHAR(50) 姓名

        To_phone VARCHAR(50) 手機號

        To_address VARCHAR(200) 配送地址

        表4 用戶表

        字段名稱數據類型說明

        To_id VARCHAR(20) NOT NULL 訂單ID

        To_createTime VARCHAR(50) 訂餐時間

        To_content VARCHAR(20) 訂餐內容

        To_money VARCHAR(20) 訂餐金額

        To_user_id VARCHAR(50) 用戶ID

        To_user_name VARCHAR(50) 用戶姓名

        To_user_phone VARCHAR(50) 用戶手機號

        To_address VARCHAR(200) 配送地址

        To_paystate INT 支付狀態(tài)

        4.4 開發(fā)過程

        HTML5提供了豐富的頁面組件，并且可以通過數據的綁定實現數據的感知，JS模塊化（AMD）加載，不用寫Script標簽，CSS3提供了很多樣式，例如Bootstrap樣式和擴展樣式（X—開頭），Native（Cordova）可以調用原生插件如支付寶支付，微信支付，定位等。將下載好的Wex5壓縮包解壓到電腦的硬盤上，打開解壓后的文件夾里面有幾個bat文件，點擊啟動“Wex5開發(fā)工具.bat”文件就可以打開我們的開發(fā)工具。

        4.4.1 前端頁面開發(fā)過程

        1）搭建頁面框架

        Ⅰ. 新建應用

        Ⅱ. 新建頁面文件

        ●新建w文件

        Ⅲ. 制作上下兩端固定的頁面

        ●放panel組件

        Ⅳ. 在頁面頂部放標題欄

        ●在panel的top中放titlebar組件

        Ⅴ. 在頁面底部放導航欄

        ●在panel的bottom放buttonGroup組件

        Ⅵ. 在頁面中部放多個內容塊

        ●在panel的content放contents組件

        2）開發(fā)首頁菜品展示界面

        Ⅰ. 準備首頁數據

        ●在module組件中放data組件

        ●添加數據表中的列

        Ⅱ. 訪問數據表獲得菜品數據

        ●調用baas提供的queryFood動作

        Ⅲ. 制作向上滑動加載數據的列表

        ●在foodContent中放scrollview組件

        ●在scrollview的第二個div中放list組件

        Ⅳ. 使用媒體對象

        ●Bootstrap組件

        Ⅴ. 顯示菜品圖片

        ●使用image組件

        Ⅵ. 顯示菜品名稱，描述，價格

        ●使用output組件

        3）購物車界面

        Ⅰ. 準備購物車數據

        ●在module組件中放data組件

        ●添加數據表中的列

        Ⅱ. 制作有標題的內容區(qū)域

        ●在cartContent中放panel（bootstrap）組件

        ●設置標題

        Ⅲ. 顯示菜品名稱，菜品單價，訂購數量

        ●在panel的body中放list組件

        ●在list組件的li中放row組件

        ●在rowt組件的col中放output組件

        Ⅳ. 加入購物車

        Ⅴ. 加減訂餐數量

        ●在row組件的col中放button組件

        Ⅵ. 計算合計金額

        4）訂單界面

        Ⅰ. 準備訂單頁數據

        ●在module組件中放data組件

        ●添加數據表中的列

        Ⅱ. 訪問數據表獲得我的訂單數據

        ●調用baas提供的queryOrder動作

        Ⅲ. 制作向上滑動加載數據的列表

        ●在orderContent中放scrollview組件

        ●在scrollview的第二個div中放list組件

        Ⅳ. 顯示訂餐時間，訂餐內容，配送地址，合計金額

        ●在li中放labelOutput組件

        Ⅴ. 實現下單功能

        ●存儲訂單數據和用戶信息

        ●清空購物車

        ●跳轉到訂單頁

        5）個人中心界面

        Ⅰ. 準備個人中心也的數據

        ●在module組件中放data組件

        ●添加數據表中的列

        ●訪問數據表獲得個人信息

        調用baas提供的queryUser動作

        Ⅱ. 制作有標題的內容區(qū)域

        ●在cartContent中放panel（bootstrap）組件

        ●設置標題

        Ⅲ. 顯示個人信息

        ●在panel的body中放labelInput組件，顯示姓名，手機號和地址

        Ⅳ. 獲取個人信息

        ●使用手機設備的ID作為用戶ID

        ●使用用戶ID過濾用戶的信息

        Ⅴ. 保存?zhèn)€人信息

        5）頁面細節(jié)處理

        Ⅰ. 分頁加載數據

        Ⅱ. 保存后更新數據狀態(tài)

        Ⅲ. 購物車按鈕上顯示數量總計

        Ⅳ. 購物車內沒有菜品時顯示為空

        Ⅴ. 圖片進行圓角處理

        Ⅵ. 頁面的樣式調整

        4.4.2 后端服務開發(fā)過程

        1）開發(fā)服務及調用服務

        Ⅰ. 新建servlet作為服務

        Ⅱ. 使用ajax調用servlet

        $.ajax(

        "type":"post";

        "async":options.async?options.async:false;

        "dataType":"json";

        "url":this.BASE_URL options.url;

        "data":

        "action":options.action;

        "params":JSON.stringify(optings.params)

        "complete":function(xhr)

        );

        ●傳參

        ●接收返回的后臺數據

        Ⅲ. BaaS服務

        ●獲得數據庫連接

        ①Util.getConnection

        ②通過jndi名稱獲得數據庫連接

        ●查詢數據

        ①Util.queryData

        ②支持表單查詢，支持sql查詢，支持分頁

        ●將查詢到的數據表寫入response

        ①Util.queryData

        ②支持表單查詢，支持sql查詢，支持分頁

        ●JSON轉Table

        ①Transform.jsonToTable

        ②傳入json，反序列化為Table

        ●保存數據

        ①Util.saveData

        Ⅳ. BaaS JS庫

        ●調用服務

        ①sendRequest

        ②使用ajax發(fā)送post 請求

        ③返回json數據

        ④支持成功的回調和失敗的回調

        ●獲取列定義

        ①getDataColumns

        ②獲取列名稱，列類型

        Ⅴ. 圖片進行圓角處理

        Ⅵ. 頁面的樣式調整

        2）開發(fā)自己的服務

        Ⅰ. 開發(fā)查詢數據的服務

        ●獲取數據庫連接

        ●查詢數據表，獲得Table

        ●將Table寫入response

        Ⅱ. 開發(fā)保存數據的的服務

        ●獲得用戶新增，修改，刪除的數據

        ●獲得數據庫連接

        ●將新增，修改，刪除的數據寫入數據庫

        4.4.3 調用原生插件

        1）App支付插件

        Ⅰ. 支付寶支付

        ●插件 com.justep.cordova.plugin.alipay

        ●方法navigator.alipay.pay

        ●參數

        Ⅱ. 微信支付

        ●插件 com.justep.cordova.plugin.weixin.v3

        ●方法navigator.weixin.sendPayReq

        ●參數

        ●特別注意：證書，包名，發(fā)布模式

        2）獲取地理位置插件

        Ⅰ. 獲取地理位置信息

        ●插件 com.justep.cordova.plugin.baidulocation

        ●方法navigator.geolocation.getCurrentPostion

        Ⅱ. 在百度地圖上顯示

        ●使用HTML文件顯示百度地圖

        ●坐標系轉換

        4.4.4 打包及部署

        Ⅰ. 使用模式2打包及部署

        ●打包——使用模式2

        ●部署——到任意web應用服務器

        ●資源更新——編譯UI資源，部署資源

        5 結論

        “小香廚”外賣平臺只做了用戶界面，沒有涉及管理平臺。在開發(fā)過程中，詳細的定義了每個模塊的基本功能，運用了前端工程師的思維與設計思路，在數據庫設計中采用了關系模式的設計方法，采用模塊化開發(fā)完成系統(tǒng)每個功能模塊。“小香廚”外賣平臺主要包括了四個大的模塊；分別是個人中心模塊，訂單管理模塊，購物車，首頁外賣展示模塊。開發(fā)過程包括前端頁面開發(fā)，Web應用服務器，后端服務開發(fā)，APP開發(fā)。