WeX5開(kāi)發(fā)外賣(mài)

1、使用WeX5開(kāi)發(fā)外賣(mài)案例完整過(guò)程外賣(mài)案例功能介紹顯示菜品信息從數(shù)據(jù)庫(kù)中獲取菜品信息加入購(gòu)物車(chē)頁(yè)面數(shù)據(jù)計(jì)算下單并支付將訂單保存到數(shù)據(jù)庫(kù)配置默認(rèn)配送信息可通過(guò)定位獲得地址信息將配送信息保存到數(shù)據(jù)庫(kù)運(yùn)行方式手機(jī)AppWeb App微信公眾號(hào)課程概覽課程介紹講解使用WeX5開(kāi)發(fā)外賣(mài)案例的完整過(guò)程，前端頁(yè)面開(kāi)發(fā) （六講）原生插件調(diào)用 （二講）微信公眾號(hào)開(kāi)發(fā)（一講）課程目標(biāo)學(xué)會(huì)開(kāi)發(fā)App前端頁(yè)面、調(diào)用后端服務(wù)、以及訪問(wèn)數(shù)據(jù)庫(kù)學(xué)會(huì)開(kāi)發(fā)手機(jī)定位、手機(jī)支付、以及打包部署學(xué)會(huì)微信公眾號(hào)開(kāi)發(fā)適合人群App開(kāi)發(fā)人員后端服務(wù)開(kāi)發(fā) （三講）打包及部署 （一講）架構(gòu)原理前端頁(yè)面 Html5 JS CSS3 Native (

2、Cordova)Web應(yīng)用服務(wù)器 Tomcat Weblogic IIS Apache 后端服務(wù) java .net Php 數(shù)據(jù)庫(kù) Mysql Mssql Oracle Sybase DB2數(shù)據(jù)交互過(guò)程數(shù)據(jù)組件展現(xiàn)組件前端服 務(wù)后端數(shù)據(jù)表數(shù)據(jù)庫(kù)返回Table或JSON查詢(xún)/保存數(shù)據(jù)返回?cái)?shù)據(jù)查詢(xún)/保存數(shù)據(jù)PanelContentsListInputImageButtonData查詢(xún)菜品查詢(xún)菜品queryFood查詢(xún)訂單查詢(xún)訂單queryOrder查詢(xún)用戶(hù)查詢(xún)用戶(hù)queryUser保存save菜品表菜品表Takeout_food訂單表訂單表Takeout_order用戶(hù)表用戶(hù)表Takeout_u

3、serServletBaasSqlSpringHibernateMyBatisAJAX外賣(mài)案例使用的數(shù)據(jù)表菜品菜品表字段表字段字段名稱(chēng)字段名稱(chēng)字段類(lèi)型字段類(lèi)型fID菜品IDVARCHAR(50) NOT NULLfName 菜品名稱(chēng)VARCHAR(50)fPrice 單價(jià)DECIMAL(10,2)fDescription 描述VARCHAR(100)fImage 圖片VARCHAR(100)用戶(hù)信息表用戶(hù)信息表 字段名稱(chēng)字段名稱(chēng)字段類(lèi)型字段類(lèi)型fID 用戶(hù)IDVARCHAR(50) NOT NULLfName 姓名VARCHAR(50)fPhoneNumber 手機(jī)號(hào)VARCHAR(20)fA

4、ddress 配送地址VARCHAR(200)外賣(mài)案例使用的數(shù)據(jù)表訂單表字段訂單表字段字段名稱(chēng)字段名稱(chēng)字段類(lèi)型字段類(lèi)型fID 訂單IDVARCHAR(50) NOT NULLfCreateTime 訂餐時(shí)間DATETIMEfContent 訂餐內(nèi)容VARCHAR(200)fSum 訂餐金額DECIMAL(10,2)fUserID 用戶(hù)IDVARCHAR(50)fUserName 用戶(hù)姓名VARCHAR(50)fPhoneNumber 用戶(hù)手機(jī)號(hào)VARCHAR(20)fAddress 配送地址VARCHAR(200)fPayState 支付狀態(tài)INT外賣(mài)案例的提供的服務(wù)查詢(xún)數(shù)據(jù)查詢(xún)菜品lhttp

5、:/IP:端口/baas/takeout?action=queryFood¶ms=查詢(xún)訂單lhttp:/IP:端口/baas/takeout?action=queryOrder¶ms=查詢(xún)用戶(hù)信息lhttp:/IP:端口/baas/takeout?action=queryUser¶ms=保存數(shù)據(jù)保存訂單、用戶(hù)信息lhttp:/IP:端口/baas/takeout?action=save¶ms=外賣(mài)案例的服務(wù)調(diào)用前端ajax請(qǐng)求后端服務(wù) $.ajax( type : post, async : options.async ? options.async : fal

6、se, dataType : json, url : this.BASE_URL + options.url, data : action : options.action, params : JSON.stringify(options.params) , “complete : function(xhr) );外賣(mài)案例的前端頁(yè)面Html5提供了豐富的頁(yè)面組件通過(guò)數(shù)據(jù)綁定實(shí)現(xiàn)數(shù)據(jù)感知JS模塊化（ AMD ）加載，不用寫(xiě)script標(biāo)簽CSS3提供很多樣式lBootstrap 樣式l擴(kuò)展樣式（x-開(kāi)頭）Native(Cordova)原生插件調(diào)用l支付寶支付、微信支付、定位前端頁(yè)面開(kāi)發(fā)過(guò)程第一講

7、 搭建頁(yè)面框架第二講 開(kāi)發(fā)菜品列表頁(yè)第三講 開(kāi)發(fā)購(gòu)物車(chē)頁(yè)第四講 開(kāi)發(fā)我的信息頁(yè)第五講 開(kāi)發(fā)訂單頁(yè)第六講 細(xì)節(jié)處理第一講 搭建頁(yè)面框架新建應(yīng)用新建頁(yè)面文件新建w文件制作上下兩端固定的頁(yè)面放panel組件在頁(yè)面上端放標(biāo)題欄在panel的top放titlebar組件在頁(yè)面下端放導(dǎo)航欄在panel的bottom放buttonGroup組件在頁(yè)面中部放多個(gè)內(nèi)容頁(yè)在panel的content放contents組件第二講 開(kāi)發(fā)菜品列表頁(yè)準(zhǔn)備數(shù)據(jù)在module組件中放data組件添加數(shù)據(jù)表中的列訪問(wèn)數(shù)據(jù)表獲得菜品數(shù)據(jù)l 調(diào)用baas提供的queryFood動(dòng)作第二講 開(kāi)發(fā)菜品列表頁(yè)制作向上滑動(dòng)加載數(shù)據(jù)的列表在

8、foodContent中放scrollview組件在scrollview的第2個(gè)div中放list組件使用媒體對(duì)象Boostrap組件顯示菜品圖片使用image組件顯示菜品名稱(chēng)、描述、價(jià)格使用output組件第三講 開(kāi)發(fā)購(gòu)物車(chē)頁(yè)準(zhǔn)備數(shù)據(jù)在module組件中放data組件添加數(shù)據(jù)表中的列第三講 開(kāi)發(fā)購(gòu)物車(chē)頁(yè)制作有標(biāo)題的內(nèi)容區(qū)域在cartContent中放panel(bootstrap)組件設(shè)置標(biāo)題顯示菜品名稱(chēng)、菜品單價(jià)、訂購(gòu)數(shù)量在panel的body中放list組件在list組件的li中放row組件在row組件的col中放output組件加入購(gòu)物車(chē)加減數(shù)量在row組件的col中放button組件

9、計(jì)算合計(jì)金額第四講 開(kāi)發(fā)我的信息頁(yè)準(zhǔn)備數(shù)據(jù)在module組件中放data組件添加數(shù)據(jù)表中的列訪問(wèn)數(shù)據(jù)表獲得我的信息l 調(diào)用baas提供的queryUser動(dòng)作第四講 開(kāi)發(fā)我的信息頁(yè)制作有標(biāo)題的內(nèi)容區(qū)域在ownContent中放panel(bootstrap)組件設(shè)置標(biāo)題顯示我的信息在panel的body中放labelInput組件，顯示我的姓名、手機(jī)、地址獲取我的信息使用手機(jī)設(shè)備ID作為用戶(hù)ID使用用戶(hù)ID過(guò)濾用戶(hù)信息保存我的信息第五講 開(kāi)發(fā)訂單頁(yè)準(zhǔn)備數(shù)據(jù)在module組件中放data組件添加數(shù)據(jù)表中的列訪問(wèn)數(shù)據(jù)表獲得我的訂單信息l 調(diào)用baas提供的queryOrder動(dòng)作第五講 開(kāi)發(fā)訂單頁(yè)

10、制作向上滑動(dòng)加載數(shù)據(jù)的列表在orderContent中放scrollview組件在scrollview的第2個(gè)div中放list組件顯示訂餐時(shí)間、訂餐內(nèi)容、配送地址、合計(jì)金額在li中放labelOutput組件實(shí)現(xiàn)下單功能存儲(chǔ)訂單和用戶(hù)信息清空購(gòu)物車(chē)跳轉(zhuǎn)到訂單頁(yè)第六講 細(xì)節(jié)處理分頁(yè)加載數(shù)據(jù)保存后更新數(shù)據(jù)狀態(tài)購(gòu)物車(chē)按鈕上顯示數(shù)量合計(jì)購(gòu)物車(chē)內(nèi)沒(méi)有菜品時(shí)顯示空?qǐng)A角圖片樣式調(diào)整后端服務(wù)開(kāi)發(fā)過(guò)程第七講 開(kāi)發(fā)服務(wù)&調(diào)用服務(wù)第八講 了解BaaS第九講 開(kāi)發(fā)自己的服務(wù)第七講 開(kāi)發(fā)服務(wù)&調(diào)用服務(wù)新建servlet作為服務(wù)使用ajax調(diào)用servlet傳參接收參數(shù)第八講 了解BaaSBaaS 服務(wù)獲得數(shù)據(jù)庫(kù)連接l

11、Util.getConnectionl通過(guò)jndi名稱(chēng)獲得數(shù)據(jù)庫(kù)鏈接查詢(xún)數(shù)據(jù)lUtil.queryDatal支持單表查詢(xún)、支持sql查詢(xún)、支持分頁(yè)將Table寫(xiě)入responselUtil.writeTableToResponsel將Table序列化為json，將json寫(xiě)入response，支持跨域訪問(wèn)json轉(zhuǎn)TablelTransform.jsonToTablel傳入json，反序列化為T(mén)able保存數(shù)據(jù)lUtil.saveData第八講 了解BaaSBaaS js庫(kù)調(diào)用服務(wù)lsendRequestl使用ajax發(fā)送post請(qǐng)求l返回json格式數(shù)據(jù)l支持成功回調(diào)、失敗回調(diào)獲取列定義lg

12、etDataColumnsl獲得列名稱(chēng)、列類(lèi)型第九講 開(kāi)發(fā)自己的服務(wù)開(kāi)發(fā)查詢(xún)數(shù)據(jù)的服務(wù)獲得數(shù)據(jù)庫(kù)連接查詢(xún)數(shù)據(jù)表，得到Table將Table寫(xiě)入response開(kāi)發(fā)保存數(shù)據(jù)的服務(wù)獲得用戶(hù)新增、修改、刪除的數(shù)據(jù)獲得數(shù)據(jù)庫(kù)連接將新增、修改、刪除的數(shù)據(jù)分別寫(xiě)入數(shù)據(jù)表原生插件插件介紹用途：調(diào)用設(shè)置上的原生API優(yōu)點(diǎn)：開(kāi)發(fā)跨平臺(tái)App支持自定義插件位置/Native/plugins目錄下插件的使用引用 require(cordova!org.apache.cordova.device)調(diào)用 window.device.uuid;打包時(shí)配置參數(shù)原生插件調(diào)用第十講 在App中支付第十一講 在App中獲得地理信

13、息第十講 在App中支付支付寶支付插件 com.justep.cordova.plugin.alipay方法 navigator.alipay.pay參數(shù)微信支付插件 com.justep.cordova.plugin.weixin.v2 com.justep.cordova.plugin.weixin.v3方法 navigator.weixin.generatePrepayId navigator.weixin.sendPayReq參數(shù)特別注意：證書(shū)、包名、發(fā)布模式 第十一講 在App中獲得地理信息獲得地理信息插件l org.apache.cordova.geolocationl com.j

14、ustep.cordova.plugin.baidulocation方法 navigator.geolocation.getCurrentPosition在百度地圖上顯示使用html文件顯示百度地圖坐標(biāo)系轉(zhuǎn)換第十二講 打包及部署使用模式2的打包部署過(guò)程打包使用模式2部署到任意Web應(yīng)用服務(wù)器資源更新編譯UI資源、部署資源使用模式3的打包部署過(guò)程打包使用模式3部署使用UIServer，使用Java Web服務(wù)器資源更新修改版本號(hào)、模型編譯、部署資源必須使用使用了附件組件或j文件模式2的發(fā)布及更新發(fā)布設(shè)置App版本號(hào)打包發(fā)布到Web應(yīng)用服務(wù)器更新僅更新UI資源l編譯UI資源l發(fā)布到Web應(yīng)用服務(wù)器更新App及UI資