模塊八 用戶端-體檢預(yù)約

模塊八用戶端-體檢預(yù)約《JavaEE企業(yè)級(jí)應(yīng)用開(kāi)發(fā)項(xiàng)目教程（SSM）》知識(shí)目標(biāo)/Target了解FreeMarker，能夠簡(jiǎn)述FreeMarker的作用和生成文件的原理熟悉FreeMarker的常用指令，能夠在FTL標(biāo)簽中正確使用assign指令、include指令、if指令和list指令技能目標(biāo)/Target掌握顯示套餐詳情功能的實(shí)現(xiàn)掌握體檢預(yù)約功能的實(shí)現(xiàn)掌握靜態(tài)頁(yè)面的實(shí)現(xiàn)方式，能夠使用FreeMarker技術(shù)實(shí)現(xiàn)套餐列表與套餐詳情頁(yè)面的靜態(tài)化掌握顯示套餐列表功能的實(shí)現(xiàn)章節(jié)概述/

Summary體檢是了解自身健康狀況、及時(shí)發(fā)現(xiàn)身體異常，以及預(yù)防疾病的重要手段之一。為了給廣大體檢用戶提供便利，傳智健康用戶端設(shè)立了線上體檢預(yù)約服務(wù)，用戶可以隨時(shí)隨地進(jìn)行體檢預(yù)約。傳智健康的用戶端可以展示套餐列表、套餐詳情和進(jìn)行體檢預(yù)約。接下來(lái)，本模塊將對(duì)用戶端的體檢預(yù)約進(jìn)行詳細(xì)講解。目錄/Contents01020304套餐列表套餐詳情體檢預(yù)約頁(yè)面靜態(tài)化套餐列表8-1任務(wù)描述在瀏覽器中訪問(wèn)用戶端首頁(yè)index.html。體檢套餐是傳智健康面向體檢用戶銷(xiāo)售的產(chǎn)品，為了讓用戶全方位地了解體檢套餐的種類(lèi)，傳智健康用戶端提供套餐列表頁(yè)面供用戶瀏覽。任務(wù)描述在用戶端首頁(yè)單擊“體檢預(yù)約”超鏈接后會(huì)跳轉(zhuǎn)到套餐列表頁(yè)面setmeal.html，該頁(yè)面以列表的形式展示所有的體檢套餐。任務(wù)分析訪問(wèn)套餐列表頁(yè)面setmeal.html時(shí)，提交查詢所有套餐的請(qǐng)求。（3）查詢套餐SetmealServiceImpl類(lèi)中重寫(xiě)SetmealService接口的findAll()方法查詢所有的套餐。（2）接收和處理查詢所有套餐的請(qǐng)求控制器類(lèi)SetmealController的getSetmeal()方法接收頁(yè)面提交的請(qǐng)求。（4）查詢結(jié)果展示setmeal.html頁(yè)面根據(jù)返回結(jié)果展示查詢到的所有的套餐。（1）提交查詢所有套餐的請(qǐng)求任務(wù)分析套餐列表的實(shí)現(xiàn)過(guò)程任務(wù)實(shí)現(xiàn)要實(shí)現(xiàn)在訪問(wèn)setmeal.html頁(yè)面時(shí)展示所有的套餐，可以將查詢的操作定義在鉤子函數(shù)created()中，在created()函數(shù)中使用Axios發(fā)送異步請(qǐng)求的方式獲取所有的套餐數(shù)據(jù)。<scriptsrc="../plugins/vue/axios-0.18.0.js"></script><script>varvue=newVue({

created(){

axios.post("/setmeal/getSetmeal.do").then((response)=>{if(response.data.flag){this.setmealList=response.data.data;}});}});</script>引入js文件數(shù)據(jù)雙向綁定（1）提交查詢所有套餐的請(qǐng)求任務(wù)實(shí)現(xiàn)在health_mobile模塊的com.itheima.controller包下創(chuàng)建控制器類(lèi)SetmealController，在類(lèi)中定義getSetmeal()方法，用于接收和處理查詢所有套餐的請(qǐng)求。@RestController@RequestMapping("/setmeal")publicclassSetmealController{@ReferenceprivateSetmealServicesetmealService;@RequestMapping("/getSetmeal")publicResultgetSetmeal(){try{List<Setmeal>list=setmealService.findAll();returnnewResult(true,MessageConstant.QUERY_SETMEAL_SUCCESS,list);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.QUERY_SETMEAL_FAIL);}}}（2）實(shí)現(xiàn)查詢套餐控制器任務(wù)實(shí)現(xiàn)在health_interface子模塊的SetmealService接口中定義findAll()方法，用于查詢套餐列表。//查詢套餐列表publicList<Setmeal>findAll();（3）創(chuàng)建查詢套餐服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的SetmealServiceImpl類(lèi)中重寫(xiě)接口的findAll()方法，用于查詢套餐列表。@OverridepublicList<Setmeal>findAll(){

returnsetmealDao.findAll();//調(diào)用持久層接口查詢套餐}（4）實(shí)現(xiàn)查詢套餐服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的SetmealDao接口中定義findAll()方法，用于查詢所有套餐。//查詢所有套餐publicList<Setmeal>findAll();（5）實(shí)現(xiàn)持久層查詢套餐在health_service_provider子模塊的SetmealDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，查詢所有的套餐數(shù)據(jù)。<!--獲取所有套餐信息--><selectid="findAll"resultType="com.itheima.pojo.Setmeal">SELECT*FROMt_setmeal</select>任務(wù)實(shí)現(xiàn)啟動(dòng)Zookeeper服務(wù)，在IDEA依次啟動(dòng)health_service_provider和health_mobile，在瀏覽器中訪http://localhost/pages/setmeal.html。（6）測(cè)試套餐列表功能套餐詳情8-2任務(wù)描述用戶想要了解套餐的所有檢查組和檢查項(xiàng)，可以訪問(wèn)套餐詳情頁(yè)面setmeal_detail.html，在頁(yè)面上查看套餐的詳細(xì)信息。任務(wù)分析訪問(wèn)setmeal_detail.html頁(yè)面，提交查詢套餐詳細(xì)信息的請(qǐng)求。（3）查詢套餐詳細(xì)信息SetmealServiceImpl類(lèi)中重寫(xiě)SetmealService接口的findSetmealById()方法查詢套餐詳細(xì)信息。（2）接收和處理查詢套餐詳細(xì)信息的請(qǐng)求SetmealController類(lèi)的findById()方法接收頁(yè)面提交的請(qǐng)求。（4）查詢結(jié)果展示setmeal_detail.html頁(yè)面根據(jù)返回結(jié)果展示查詢的套餐詳細(xì)信息。（1）提交查詢套餐詳細(xì)信息的請(qǐng)求任務(wù)分析套餐詳情的實(shí)現(xiàn)過(guò)程任務(wù)實(shí)現(xiàn)將查詢的操作定義在鉤子函數(shù)created()中，在created()函數(shù)中通過(guò)使用Axios發(fā)送異步請(qǐng)求的方式查詢套餐詳細(xì)信息。<scriptsrc="../plugins/vue/axios-0.18.0.js"></script><script>varvue=newVue({

created(){

axios.post("/setmeal/findById.do?id="+id).then((response)=>{if(response.data.flag){this.setmeal=response.data.data;this.imgUrl='/'+this.setmeal.img;}});}});</script>數(shù)據(jù)雙向綁定（1）提交查詢套餐詳細(xì)信息的請(qǐng)求任務(wù)實(shí)現(xiàn)在health_mobile模塊的SetmealController類(lèi)中定義findById()方法，用于接收和處理查詢套餐詳細(xì)信息的請(qǐng)求。//根據(jù)套餐id查詢套餐詳情，包含（套餐基本信息、套餐關(guān)聯(lián)的檢查組、檢查組關(guān)聯(lián)的檢查項(xiàng)）@RequestMapping("/findById")publicResultfindById(Integerid){try{

Setmealsetmeal=setmealService.findById(id);returnnewResult(true,MessageConstant.QUERY_SETMEAL_SUCCESS,setmeal);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.QUERY_SETMEAL_FAIL);}}（2）實(shí)現(xiàn)查詢套餐詳細(xì)信息控制器任務(wù)實(shí)現(xiàn)在health_interface子模塊的SetmealService接口中定義findSetmealById()方法，用于根據(jù)套餐id查詢套餐詳細(xì)信息。//查詢套餐詳情publicSetmealfindSetmealById(Integerid);（3）創(chuàng)建查詢套餐詳細(xì)信息服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的SetmealServiceImpl類(lèi)中重寫(xiě)SetmealService接口的findSetmealById()方法，用于根據(jù)套餐id查詢套餐詳細(xì)信息。@OverridepublicSetmealfindSetmealById(Integerid){

returnsetmealDao.findById4Detail();//調(diào)用持久層查詢套餐詳情}（4）實(shí)現(xiàn)查詢套餐詳細(xì)信息服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的SetmealDao接口中定義findById4Detail()方法，用于根據(jù)套餐id查詢套餐詳細(xì)信息。//查詢套餐列表publicSetmealfindById4Detail(Integerid);（5）實(shí)現(xiàn)持久層查詢套餐詳細(xì)信息任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的SetmealDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，根據(jù)套餐id查詢套餐詳細(xì)信息。<resultMapid="baseResultMap"type="com.itheima.pojo.Setmeal"><idcolumn="id"property="id"/><resultcolumn="name"property="name"/>

</resultMap><!--配置多對(duì)多映射關(guān)系--><resultMapid="findByIdResultMap"extends="baseResultMap"type="com.itheima.pojo.Setmeal"><!--column用于指定將哪個(gè)字段的值傳遞給第二條sql--><collectionproperty="checkGroups"ofType="com.itheima.pojo.CheckGroup"column="id"select="com.itheima.dao.CheckGroupDao.selectCheckGroupsBySetmealId"></collection></resultMap><!--根據(jù)套餐id查詢套餐詳情（包含基本信息、關(guān)聯(lián)的檢查組、檢查項(xiàng)信息）--><selectid="findById4Detail"parameterType="int"resultMap="findByIdResultMap">SELECT*FROMt_setmealWHEREid=#{id}</select>（5）實(shí)現(xiàn)持久層查詢套餐詳細(xì)信息任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的CheckGroupDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，根據(jù)套餐id查詢套餐對(duì)檢查組的引用。<resultMapid="baseResultMap"type="com.itheima.pojo.CheckGroup"><idcolumn="id"property="id"/><resultcolumn="name"property="name"/>

</resultMap><!--配置多對(duì)多映射關(guān)系--><resultMapid="findByIdResultMap"extends="baseResultMap"type="com.itheima.pojo.CheckGroup"><collectionproperty="checkItems"ofType="com.itheima.pojo.CheckItem"column="id"select="com.itheima.dao.CheckItemDao.findCheckItemsByCheckGroupId"></collection></resultMap><!--根據(jù)套餐id查詢關(guān)聯(lián)的檢查組集合--><selectid="selectCheckGroupsBySetmealId"parameterType="int"resultMap="findByIdResultMap">SELECT*FROMt_checkgroupWHEREidIN

(SELECTcheckgroup_idFROMt_setmeal_checkgroupWHEREsetmeal_id=#{setmealId})</select>（5）實(shí)現(xiàn)持久層查詢套餐詳細(xì)信息任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的CheckItemDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，根據(jù)檢查組id查詢檢查組對(duì)檢查項(xiàng)的引用。<!--根據(jù)檢查組id查詢關(guān)聯(lián)的檢查項(xiàng)--><selectid="findCheckItemsByCheckGroupId"parameterType="int"

resultType="com.itheima.pojo.CheckItem">SELECT*FROMt_checkitemWHEREidIN

(SELECTcheckitem_idFROMt_checkgroup_checkitem

WHEREcheckgroup_id=#{checkgroup_id})</select>（5）實(shí)現(xiàn)持久層查詢套餐詳細(xì)信息任務(wù)實(shí)現(xiàn)啟動(dòng)Zookeeper服務(wù)，在IDEA依次啟動(dòng)health_service_provider和health_mobile。在瀏覽器中訪問(wèn)http://localhost/pages/setmeal.html。單擊名稱為肝腎檢查的套餐，跳轉(zhuǎn)到套餐詳情頁(yè)面。（6）測(cè)試套餐詳情功能體檢預(yù)約8-3任務(wù)描述用戶選擇好體檢套餐后，單擊套餐詳情頁(yè)面的“立即預(yù)約”進(jìn)入對(duì)應(yīng)的體檢預(yù)約頁(yè)面orderInfo.html。任務(wù)描述在體檢預(yù)約頁(yè)面中，輸入體檢人信息后，單擊“提交預(yù)約”按鈕，如果預(yù)約失敗，在orderInfo.html頁(yè)面會(huì)提示失敗原因；如果預(yù)約成功，跳轉(zhuǎn)到預(yù)約成功頁(yè)面orderSuccess.html。體檢預(yù)約可以分解成4個(gè)功能，分別是跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐、發(fā)送短信驗(yàn)證碼、預(yù)約體檢、跳轉(zhuǎn)到預(yù)約成功頁(yè)面。任務(wù)分析任務(wù)分析（1）跳轉(zhuǎn)到體檢預(yù)約頁(yè)面為setmeal_detail.html頁(yè)面的“立即預(yù)約”綁定單擊事件，在單擊事件觸發(fā)后提交跳轉(zhuǎn)到體檢預(yù)約頁(yè)面的請(qǐng)求。（2）提交查詢套餐的請(qǐng)求跳轉(zhuǎn)到orderInfo.html頁(yè)面的同時(shí)，提交查詢套餐的請(qǐng)求。（3）接收和處理查詢套餐的請(qǐng)求SetmealController類(lèi)的findById()方法接收頁(yè)面提交的請(qǐng)求。（5）查詢結(jié)果展示orderInfo.html頁(yè)面根據(jù)返回結(jié)果展示查詢的套餐信息。（4）查詢套餐信息SetmealServiceImpl類(lèi)中重寫(xiě)SetmealService接口的findSetmealById()方法。1.跳轉(zhuǎn)體檢預(yù)約頁(yè)面后顯示套餐任務(wù)分析跳轉(zhuǎn)體檢預(yù)約頁(yè)面后顯示套餐的實(shí)現(xiàn)過(guò)程任務(wù)分析2.發(fā)送短信驗(yàn)證碼為orderInfo.html頁(yè)面的“發(fā)送驗(yàn)證碼”綁定單擊事件，在單擊事件觸發(fā)后提交填寫(xiě)的手機(jī)號(hào)。由ValidateCodeController類(lèi)的send4Order()方法接收頁(yè)面提交的手機(jī)號(hào)，并調(diào)用短信服務(wù)SMSUtils發(fā)送短信驗(yàn)證碼。發(fā)送短信驗(yàn)證碼的實(shí)現(xiàn)過(guò)程任務(wù)分析為orderInfo.html頁(yè)面的“提交預(yù)約”按鈕綁定單擊事件，在單擊事件觸發(fā)后提交預(yù)約體檢的請(qǐng)求。（3）保存新增預(yù)約數(shù)據(jù)首先判斷當(dāng)前預(yù)約日期是否允許預(yù)約，如果允許，判斷用戶是不是會(huì)員，如果是會(huì)員，判斷是否重復(fù)預(yù)約；如果不是會(huì)員，則將該用戶自動(dòng)注冊(cè)為會(huì)員，然后提交預(yù)約并更新已預(yù)約人數(shù)。（2）接收和處理預(yù)約體檢的請(qǐng)求由控制器類(lèi)OrderController中的submitOrder()方法接收頁(yè)面提交的請(qǐng)求。（4）展示預(yù)約體檢結(jié)果orderInfo.html頁(yè)面根據(jù)返回結(jié)果展示預(yù)約體檢結(jié)果。（1）提交預(yù)約體檢的請(qǐng)求3.預(yù)約體檢任務(wù)分析預(yù)約體檢的實(shí)現(xiàn)過(guò)程任務(wù)分析訪問(wèn)orderSuccess.html頁(yè)面時(shí)，提交查詢預(yù)約信息的請(qǐng)求。（3）查詢預(yù)約信息在OrderServiceImpl類(lèi)中重寫(xiě)OrderService接口的findById()方法。（2）接收和處理查詢預(yù)約信息的請(qǐng)求由控制器類(lèi)OrderController的findById()方法接收頁(yè)面提交的請(qǐng)求。（4）展示查詢結(jié)果orderSuccess.html頁(yè)面根據(jù)返回結(jié)果展示查詢到的預(yù)約信息。（1）提交查詢預(yù)約信息的請(qǐng)求4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)分析跳轉(zhuǎn)預(yù)約成功頁(yè)面的實(shí)現(xiàn)過(guò)程任務(wù)實(shí)現(xiàn)為“立即預(yù)約”綁定單擊事件，并設(shè)置單擊時(shí)要調(diào)用的方法，在方法中提交跳轉(zhuǎn)頁(yè)面的請(qǐng)求。<divclass="box-button"><aclass="order-btn"@click="toOrderInfo()">立即預(yù)約</a></div>1.跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐（1）提交跳轉(zhuǎn)到體檢預(yù)約頁(yè)面的請(qǐng)求任務(wù)實(shí)現(xiàn)在setmeal_detail.html頁(yè)面中定義toOrderInfo()方法，用于提交跳轉(zhuǎn)頁(yè)面的請(qǐng)求。<script>varvue=newVue({

methods:{toOrderInfo(){window.location.href="orderInfo.html?id="+id;}}});</script>1.跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐（1）提交跳轉(zhuǎn)到體檢預(yù)約頁(yè)面的請(qǐng)求任務(wù)實(shí)現(xiàn)要實(shí)現(xiàn)訪問(wèn)orderInfo.html頁(yè)面時(shí)展示套餐信息，可以將查詢套餐的操作定義在鉤子函數(shù)created()中。<scriptsrc="../plugins/vue/axios-0.18.0.js"></script><script>created(){//發(fā)送axios請(qǐng)求，根據(jù)套餐id查詢套餐信息，用于頁(yè)面展示

axios.post("/setmeal/findById.do?id="+id).then((response)=>{if(response.data.flag){

this.setmeal=response.data.data;}});},</script>1.跳轉(zhuǎn)體檢預(yù)約頁(yè)面后顯示套餐（2）提交查詢套餐的請(qǐng)求1.跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐任務(wù)實(shí)現(xiàn)接下來(lái)應(yīng)該實(shí)現(xiàn)查詢套餐信息的后臺(tái)邏輯代碼，但由于查詢套餐信息的findById()方法在套餐詳情中已經(jīng)實(shí)現(xiàn)，所以這里不再重復(fù)展示，稍后直接進(jìn)行功能測(cè)試即可。1.跳轉(zhuǎn)體檢預(yù)約頁(yè)面后顯示套餐（3）實(shí)現(xiàn)查詢套餐信息1.跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐任務(wù)實(shí)現(xiàn)啟動(dòng)ZooKeeper服務(wù)、Redis服務(wù)，在IDEA中依次啟動(dòng)health_service_provider和health_mobile。在瀏覽器中訪問(wèn)http://localhost/pages/setmeal_detail.html?id=6進(jìn)入肝腎檢查的套餐詳情頁(yè)面，單擊“立即預(yù)約”跳轉(zhuǎn)到對(duì)應(yīng)的體檢預(yù)約頁(yè)面。1.跳轉(zhuǎn)體檢預(yù)約頁(yè)面后顯示套餐（4）測(cè)試跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐1.跳轉(zhuǎn)到體檢預(yù)約頁(yè)面后顯示套餐任務(wù)實(shí)現(xiàn)要實(shí)現(xiàn)單擊“發(fā)送驗(yàn)證碼”按鈕后接收短信驗(yàn)證碼，可以為“發(fā)送驗(yàn)證碼”按鈕綁定單擊事件，并設(shè)置單擊時(shí)要調(diào)用的方法，在該方法中提交發(fā)送驗(yàn)證碼的請(qǐng)求。<inputstyle="font-size:x-small;"id="validateCodeButton"

@click="sendValidateCode()"type="button"value="發(fā)送驗(yàn)證碼">2.發(fā)送短信驗(yàn)證碼（1）提交發(fā)送短信驗(yàn)證碼的請(qǐng)求任務(wù)實(shí)現(xiàn)orderInfo.html頁(yè)面中定義sendValidateCode()方法，用于發(fā)送短信驗(yàn)證碼sendValidateCode(){vartelephone=this.orderInfo.telephone;//獲取用戶輸入的手機(jī)號(hào)if(!checkTelephone(telephone)){this.$message.error("手機(jī)號(hào)輸入錯(cuò)誤，請(qǐng)檢查后重新輸入！");returnfalse;}validateCodeButton=$("#validateCodeButton")[0];//鎖定按鈕clock=window.setInterval(doLoop,1000);//使用定時(shí)器方法每隔1秒執(zhí)行一次

axios.post("/validatecode/send4Order.do?telephone="+telephone).then((res)=>{if(!res.data.flag){this.$message.error(res.data.message);}});}2.發(fā)送短信驗(yàn)證碼（1）提交發(fā)送短信驗(yàn)證碼的請(qǐng)求任務(wù)實(shí)現(xiàn)在health_mobile模塊的ValidateCodeController類(lèi)中定義send4Order()方法，用于接收和處理發(fā)送短信驗(yàn)證碼的請(qǐng)求。@RequestMapping("/send4Order")publicResultsend4Order(Stringtelephone){Stringcode=ValidateCodeUtils.generateValidateCode(4).toString();try{

SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,code);//將驗(yàn)證碼保存到redis，只保存5分鐘

jedisPool.getResource().setex(telephone+RedisMessageConstant.SENDTYPE_ORDER,300,code);returnnewResult(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.SEND_VALIDATECODE_FAIL);}}獲取4位數(shù)驗(yàn)證碼發(fā)送短信2.發(fā)送短信驗(yàn)證碼（2）實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼控制器任務(wù)實(shí)現(xiàn)依次啟動(dòng)ZooKeeper服務(wù)、Redis服務(wù)、health_service_provider和health_mobile。在瀏覽器中訪問(wèn)http://localhost/pages/orderInfo.html?id=8。填寫(xiě)手機(jī)號(hào)后，單擊“發(fā)送驗(yàn)證碼”，通過(guò)手機(jī)接收短信驗(yàn)證碼后將驗(yàn)證碼填寫(xiě)到輸入框中。2.發(fā)送短信驗(yàn)證碼（3）測(cè)試發(fā)送短信驗(yàn)證碼任務(wù)實(shí)現(xiàn)要實(shí)現(xiàn)單擊“提交預(yù)約”按鈕時(shí)提交預(yù)約請(qǐng)求，可以為該按鈕綁定單擊事件，并設(shè)置單擊時(shí)要調(diào)用的方法，在該方法中提交預(yù)約請(qǐng)求。<buttontype="button"class="btnorder-btn"

@click="submitOrder()">提交預(yù)約</button>3.預(yù)約體檢（1）提交預(yù)約請(qǐng)求任務(wù)實(shí)現(xiàn)在orderInfo.html頁(yè)面定義submitOrder()方法，用于提交預(yù)約請(qǐng)求。submitOrder(){varidCard=this.orderInfo.idCard;//身份證進(jìn)行校驗(yàn)if(!checkIdCard(idCard)){this.$message.error("身份證號(hào)輸入錯(cuò)誤，請(qǐng)檢查后重新輸入！");returnfalse;}

axios.post("/order/submitOrder.do",this.orderInfo).then((res)=>{if(res.data.flag){window.location.href="orderSuccess.html?orderId="+res.data.data;}else{this.$message.error(res.data.message);//預(yù)約失敗，彈出提示}});}3.預(yù)約體檢（1）提交預(yù)約請(qǐng)求任務(wù)實(shí)現(xiàn)在health_common子模塊的com.itheima.pojo包下創(chuàng)建Order類(lèi)，在類(lèi)中聲明預(yù)約的屬性，定義各屬性的getter/setter方法，并定義構(gòu)造方法。3.預(yù)約體檢（2）創(chuàng)建預(yù)約類(lèi)3.預(yù)約體檢（3）導(dǎo)入公共資源在health_common子模塊的com.itheima.utils包中導(dǎo)入DateUtils類(lèi)，用于日期格式化操作。由于代碼過(guò)長(zhǎng)，此處不進(jìn)行展示，讀者可以從本書(shū)提供的資源中獲取。任務(wù)實(shí)現(xiàn)在health_mobile模塊的com.itheima.controller包下創(chuàng)建控制器類(lèi)OrderController，在類(lèi)中定義submitOrder()方法，用于接收和處理預(yù)約體檢的請(qǐng)求。（1）獲取用戶輸入的驗(yàn)證碼與存儲(chǔ)在Redis中的驗(yàn)證碼進(jìn)行比對(duì)，判斷是否正確；（2）驗(yàn)證碼比對(duì)通過(guò)后，調(diào)用OrderService接口的order()方法實(shí)現(xiàn)預(yù)約體檢。3.預(yù)約體檢（4）實(shí)現(xiàn)預(yù)約體檢控制器任務(wù)實(shí)現(xiàn)在health_interface子模塊的com.itheima.service包下創(chuàng)建接口OrderService，在接口中定義order()方法，用于預(yù)約體檢。publicinterfaceOrderService{publicResultorder(Mapmap)throwsException;//體檢預(yù)約}3.預(yù)約體檢（5）創(chuàng)建預(yù)約體檢服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的com.itheima.service.impl包下創(chuàng)建OrderService接口的實(shí)現(xiàn)類(lèi)OrderServiceImpl，在類(lèi)中重寫(xiě)order()方法，用于預(yù)約體檢。（1）查詢用戶是否在某日期進(jìn)行過(guò)體驗(yàn)預(yù)約并判斷該日期是否已經(jīng)約滿。（2）查詢當(dāng)前用戶是否為會(huì)員，如果是會(huì)員，查詢?cè)摃?huì)員是否重復(fù)預(yù)約，若是重復(fù)預(yù)約則無(wú)法繼續(xù)預(yù)約；如果不是會(huì)員，則將該用戶自動(dòng)注冊(cè)為會(huì)員。（3）新增預(yù)約，更新已預(yù)約人數(shù)。3.預(yù)約體檢（6）實(shí)現(xiàn)預(yù)約體檢服務(wù)任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的com.itheima.dao包下創(chuàng)建持久層接口OrderDao，用于處理與體檢預(yù)約相關(guān)的操作。publicinterfaceOrderDao{publicList<Order>findByCondition(Orderorder);//查詢預(yù)約信息publicvoidadd(Orderorder);//新增預(yù)約}3.預(yù)約體檢（7）實(shí)現(xiàn)持久層預(yù)約體檢任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的resources文件夾的com.itheima.dao目錄下創(chuàng)建與OrderDao接口同名的映射文件OrderDao.xml。在文件中使用<insert>元素映射新增語(yǔ)句，使用<select>元素映射查詢語(yǔ)句。<insertid="add"parameterType="com.itheima.pojo.Order"><selectKeyresultType="java.lang.Integer"order="AFTER"keyProperty="id">SELECTLAST_INSERT_ID()</selectKey>INSERTINTOt_order(member_id,orderDate,orderType,orderStatus,setmeal_id)

VALUES(#{memberId},#{orderDate},#{orderType},#{orderStatus},#{setmealId})</insert>新增預(yù)約信息3.預(yù)約體檢（7）實(shí)現(xiàn)持久層預(yù)約體檢任務(wù)實(shí)現(xiàn)<resultMapid="baseResultMap"type="com.itheima.pojo.Order"><idcolumn="id"property="id"/>

</resultMap><selectid="findByCondition"parameterType="com.itheima.pojo.Order"

resultMap="baseResultMap">select*fromt_order<where><iftest="id!=null">ANDid=#{id}</if>

</where></select>查詢預(yù)約信息3.預(yù)約體檢（7）實(shí)現(xiàn)持久層預(yù)約體檢任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的OrderSettingDao接口中定義findByOrderDate()方法和editReservationsByOrderDate()方法。//根據(jù)日期查詢預(yù)約設(shè)置信息publicOrderSettingfindByOrderDate(Datedate);//更新已預(yù)約人數(shù)publicvoideditReservationsByOrderDate(OrderSettingorderSetting);3.預(yù)約體檢（7）實(shí)現(xiàn)持久層預(yù)約體檢任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的OrderSettingDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，使用<update>元素映射更新語(yǔ)句。<!--根據(jù)日期查詢預(yù)約設(shè)置信息--><selectid="findByOrderDate"parameterType="date"resultType="com.itheima.pojo.OrderSetting">select*fromt_ordersettingwhereorderDate=#{orderDate}</select><!--更新已預(yù)約人數(shù)--><updateid="editReservationsByOrderDate"

parameterType="com.itheima.pojo.OrderSetting">UPDATEt_ordersettingSETreservations=#{reservations}WHEREorderDate=#{orderDate}</update>3.預(yù)約體檢（7）實(shí)現(xiàn)持久層預(yù)約體檢任務(wù)實(shí)現(xiàn)通過(guò)查詢體檢預(yù)約信息表t_order中的數(shù)據(jù)驗(yàn)證新增預(yù)約的結(jié)果。3.預(yù)約體檢（8）查詢體檢預(yù)約信息表t_order任務(wù)實(shí)現(xiàn)要實(shí)現(xiàn)跳轉(zhuǎn)到orderSuccess.html頁(yè)面之后展示預(yù)約信息，可以將查詢預(yù)約信息的操作定義在Vue提供的鉤子函數(shù)created()中，created()函數(shù)在Vue對(duì)象初始化完成后自動(dòng)執(zhí)行。<scriptsrc="../plugins/vue/axios-0.18.0.js"></script><script>varvue=newVue({

created(){

axios.post("/order/findById.do?id="+id).then((response)=>{this.orderInfo=response.data.data;});}});</script>4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面（1）提交跳轉(zhuǎn)到預(yù)約成功頁(yè)面的請(qǐng)求任務(wù)實(shí)現(xiàn)在health_mobile模塊的OrderController類(lèi)中定義findById()方法，用于接收和處理根據(jù)預(yù)約id查詢預(yù)約信息的請(qǐng)求。//根據(jù)預(yù)約id查詢預(yù)約信息@RequestMapping("/findById")publicResultfindById(Integerid){try{Mapmap=orderService.findById(id);returnnewResult(true,MessageConstant.QUERY_ORDER_SUCCESS,map);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.QUERY_ORDER_FAIL);}}（2）實(shí)現(xiàn)查詢預(yù)約控制器4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)實(shí)現(xiàn)在health_interface子模塊的OrderService接口中定義findById()方法，用于根據(jù)預(yù)約id查詢預(yù)約信息。//根據(jù)預(yù)約id查詢預(yù)約信息publicMapfindById(Integerid);（3）創(chuàng)建查詢預(yù)約服務(wù)4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的OrderServiceImpl類(lèi)中重寫(xiě)OrderService接口的findById()方法，用于根據(jù)預(yù)約id查詢預(yù)約信息。@OverridepublicMapfindById(Integerid){Mapmap=orderDao.findById4Detail(id);if(map!=null){//處理日期格式DateorderDate=(Date)map.get("orderDate");try{map.put("orderDate",DateUtils.parseDate2String(orderDate));}catch(Exceptione){e.printStackTrace();}}returnmap;}（4）實(shí)現(xiàn)查詢預(yù)約服務(wù)4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的OrderDao接口中定義findById4Detail()方法，用于根據(jù)預(yù)約id查詢預(yù)約信息。//根據(jù)預(yù)約id查詢預(yù)約信息publicMapfindById4Detail(Integerid);4.跳轉(zhuǎn)預(yù)約成功頁(yè)面（5）實(shí)現(xiàn)持久層查詢預(yù)約信息4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的OrderDao.xml映射文件中使用<select>元素映射查詢語(yǔ)句，查詢預(yù)約信息，包括體檢人信息和套餐信息。<!--根據(jù)預(yù)約id查詢預(yù)約信息，包括體檢人信息、套餐信息--><selectid="findById4Detail"parameterType="int"resultType="map">SELECTASmember,ASsetmeal,o.orderDateASorderDate,o.orderTypeASorderTypeFROMt_ordero,t_memberm,t_setmealsWHEREo.member_id=m.idANDo.setmeal_id=s.idANDo.id=#{id}</select>（5）實(shí)現(xiàn)持久層查詢預(yù)約信息4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面任務(wù)實(shí)現(xiàn)依次啟動(dòng)ZooKeeper服務(wù)、health_service_provider和health_mobile，在瀏覽器中訪問(wèn)http://localhost/pages/orderSuccess.html?orderId=22。（6）測(cè)試跳轉(zhuǎn)到預(yù)約成功頁(yè)面4.跳轉(zhuǎn)到預(yù)約成功頁(yè)面頁(yè)面靜態(tài)化8-4任務(wù)描述用戶登錄用戶端進(jìn)行體檢預(yù)約時(shí)，需要訪問(wèn)套餐列表頁(yè)面和套餐詳情頁(yè)面，此時(shí)訪問(wèn)這兩個(gè)頁(yè)面，頁(yè)面展示的所有信息都需要從數(shù)據(jù)庫(kù)中查詢，如果訪問(wèn)量大，會(huì)造成數(shù)據(jù)庫(kù)的訪問(wèn)壓力大、頁(yè)面刷新緩慢等問(wèn)題。從套餐包含的信息可以看出，套餐包含基本信息、對(duì)檢查組的引用信息。一般情況下套餐內(nèi)容變化頻率不高，所以我們可以將套餐列表頁(yè)面和套餐詳情頁(yè)面動(dòng)態(tài)查詢的結(jié)果分別轉(zhuǎn)化成固定的靜態(tài)頁(yè)面進(jìn)行展示，從而為數(shù)據(jù)庫(kù)減壓并提高系統(tǒng)運(yùn)行性能。頁(yè)面靜態(tài)化就是將原來(lái)的動(dòng)態(tài)網(wǎng)頁(yè)使用靜態(tài)化技術(shù)生成靜態(tài)網(wǎng)頁(yè)，這樣用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)，服務(wù)器直接響應(yīng)靜態(tài)頁(yè)面，不需要反復(fù)查詢數(shù)據(jù)庫(kù)，從而有效降低數(shù)據(jù)庫(kù)的訪問(wèn)壓力。與數(shù)據(jù)庫(kù)中數(shù)據(jù)保持一致的靜態(tài)頁(yè)面才是有效可用的。當(dāng)管理端執(zhí)行套餐新增、編輯或刪除的操作后，會(huì)改變套餐的信息，這時(shí)需要重新生成靜態(tài)頁(yè)面。任務(wù)分析任務(wù)分析（1）生成靜態(tài)頁(yè)面頁(yè)面靜態(tài)化generateMobileStaticHtml()方法生成最新的套餐列表、套餐詳情靜態(tài)頁(yè)面。套餐的add()方法、edit()方法和delete()方法改變套餐的內(nèi)容后調(diào)用generateMobileStaticHtml()方法。（2）展示靜態(tài)頁(yè)面生成套餐列表、套餐詳情靜態(tài)頁(yè)面后，訪問(wèn)用戶端的體檢預(yù)約模塊，通過(guò)靜態(tài)頁(yè)面展示套餐列表和套餐詳情。知識(shí)進(jìn)階FreeMarker是一款用Java語(yǔ)言編寫(xiě)的模板引擎，是一種基于模板和要改變的數(shù)據(jù)生成輸出文本的通用工具。例如，生成HTML頁(yè)面、配置文件、源代碼等。它不是面向最終用戶的，而是一個(gè)Java類(lèi)庫(kù)，是一款可以嵌入其他產(chǎn)品的組件。1.FreeMarker概述知識(shí)進(jìn)階Template指的是模板；Javaobjects指的是準(zhǔn)備數(shù)據(jù)；Output指的是最終的文件。通過(guò)FreeMarker將數(shù)據(jù)填充到模板中，然后通過(guò)Output進(jìn)行輸出，最終生成靜態(tài)文件。1.FreeMarker概述知識(shí)進(jìn)階FreeMarker模板的開(kāi)發(fā)語(yǔ)言是FreeMarkerTemplateLanguage（FreeMarker模板語(yǔ)言，下文簡(jiǎn)稱FTL），F(xiàn)TL的基本語(yǔ)法由文本、插值、FTL標(biāo)簽和注釋組成，具體如下。文本：文本會(huì)按原樣輸出。插值：這部分的輸出會(huì)被計(jì)算的值替換。插值由${and}（或者#{and}）分隔。FTL標(biāo)簽：FTL標(biāo)簽與HTML標(biāo)簽相似，用于給FreeMarker指示，不會(huì)在輸出內(nèi)容中顯示。注釋?zhuān)浩渥⑨屌cHTML的注釋也很相似，是由<#--和-->來(lái)分隔的。其注釋會(huì)被FreeMarker直接忽略，不會(huì)在輸出內(nèi)容中顯示。1.FreeMarker概述知識(shí)進(jìn)階FreeMarker指令通過(guò)FTL標(biāo)簽調(diào)用，F(xiàn)reeMarker標(biāo)簽的語(yǔ)法與HTML、XML標(biāo)簽的語(yǔ)法類(lèi)似，為了對(duì)FreeMarker標(biāo)簽和HTML、XML標(biāo)簽予以區(qū)分，F(xiàn)reeMarker標(biāo)簽以#開(kāi)頭。接下來(lái)講解FreeMarker中4種常用的指令。2.FreeMarker指令知識(shí)進(jìn)階assign指令用于在頁(yè)面上定義一個(gè)變量，可以定義簡(jiǎn)單類(lèi)型和對(duì)象類(lèi)型。定義簡(jiǎn)單類(lèi)型<#assignlinkman="周先生">聯(lián)系人：${linkman}上述代碼中，指令都是以“<#”開(kāi)始，以“>”結(jié)束的。其中，assign是指令名稱，linkman是定義的變量名，不是固定寫(xiě)法，可以任意指定。通過(guò)${變量名}的方式獲取變量值。定義對(duì)象類(lèi)型<#assigninfo={"mobile":,'address':'北京市昌平區(qū)'}>電話：${info.mobile}地址：${info.address}上述代碼中，定義對(duì)象info，對(duì)象中包含兩個(gè)變量mobile和address。2.FreeMarker指令（1）assign指令知識(shí)進(jìn)階include指令用于文件的嵌套。例如創(chuàng)建文件head.ftl，文件內(nèi)容如下所示。

<h1>黑馬程序員</h1>創(chuàng)建文件test.ftl，在test.ftl文件中使用include指令引入文件head.ftl。<html><#include"head.ftl"/><body>

<#assigninfo={"mobile":,'address':'北京市昌平區(qū)'}>

電話：${info.mobile}地址：${info.address}</body></html>上述代碼中，使用include指令引入文件head.ftl。head.ftl文件的內(nèi)容會(huì)在include指令出現(xiàn)的位置插入。2.FreeMarker指令（2）include指令知識(shí)進(jìn)階if指令用于判斷，與Java中的if用法類(lèi)似。<#ifx==1> xis1<#elseifx==2> xis2<#elseifx=3> xis4<#else> xisone

</#if>在FreeMarker的判斷中，可以使用“=”，也可以使用“==”，二者含義相同。2.FreeMarker指令（3）if指令知識(shí)進(jìn)階list指令用于遍歷。<#listgoodsListasgoods>商品名稱：${}價(jià)格：${goods.price}<br></#list>上述代碼中，goodsList表示想要被迭代的項(xiàng)，可以是集合或序列；goods表示循環(huán)變量的名稱，每次迭代時(shí)，循環(huán)變量會(huì)存儲(chǔ)當(dāng)前項(xiàng)的值。2.FreeMarker指令（4）list指令任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的WEB-INF目錄下創(chuàng)建ftl目錄，在ftl目錄中創(chuàng)建模板文件mobile_setmeal.ftl和mobile_setmeal_detail.ftl，使用FreeMarker技術(shù)生成套餐列表靜態(tài)頁(yè)面和套餐詳情靜態(tài)頁(yè)面。（1）提供靜態(tài)頁(yè)面模板任務(wù)實(shí)現(xiàn)要想在Java程序中使用FreeMarker服務(wù)，需要引入FreeMarker的依賴。在health_common子模塊的pom.xml文件中引入FreeMarker的依賴。<dependencies>

<!--靜態(tài)化頁(yè)面-->

<dependency>

<groupId>org.freemarker</groupId>

<artifactId>freemarker</artifactId>

<version>2.3.23</version>

</dependency></dependencies>（2）引入FreeMarker的依賴任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的src/main/resources目錄下創(chuàng)建屬性文件perties，指定了生成的靜態(tài)頁(yè)面的存放位置。out_put_path=D:/a-czjk/\ health_parent/health_mobile/src/main/webapp/pages在配置文件中如果文件內(nèi)容需要換行顯示，需要在換行的位置添加“\”，否則會(huì)報(bào)錯(cuò)；在指定靜態(tài)頁(yè)面存放的目錄位置時(shí)，目錄中不能有中文字符，否則會(huì)報(bào)錯(cuò)。（3）創(chuàng)建FreeMarker配置文件任務(wù)實(shí)現(xiàn)在health_service_provider子模塊的spring-service.xml配置文件中，添加FreeMarker相關(guān)配置對(duì)Spring與FreeMarker進(jìn)行整合。<beanid="freemarkerConfig"class=

"org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"><!--指定模板文件所在目錄--><propertyname="templateLoaderPath"value="/WEB-INF/ftl/"/><!--指定字符集--><propertyname="defaultEncoding"value="UTF-8"/></bean><!--加載屬性文件，后期在java代碼中會(huì)使用到屬性文件中定義的key和value--><context:property-placeholderlocation="classpath:perties"/>（4）Spring與FreeMarker整合任務(wù)實(shí)現(xiàn)由于套餐新增、編輯和刪除的執(zhí)行過(guò)程是在SetmealServiceImpl類(lèi)中完成的，為了方便代碼調(diào)用，我們可以在health_service_provider子模塊的SetmealServiceImpl類(lèi)中增加生成靜態(tài)頁(yè)面的代碼。@AutowiredprivateFreeMarkerConfigurerfreeMarkerConfigurer;@Value("${out_put_path}")privateStringoutPutPath;//從屬性文件中讀取要生成的html對(duì)應(yīng)的目錄//生成當(dāng)前方法所需的靜態(tài)頁(yè)面publicvoidgenerateMobileStaticHtml(){//在生成靜態(tài)頁(yè)面之前需要查詢數(shù)據(jù)List<Setmeal>list=setmealDao.findAll();//查詢套餐列表數(shù)據(jù)

generateMobileSetmealListHtml(list);//生成套餐列表靜態(tài)頁(yè)面

generateMobileSetmealDetailHtml(list);

//生成套餐詳情靜態(tài)頁(yè)面}（5）生成靜態(tài)頁(yè)面任務(wù)實(shí)現(xiàn)//生成套餐列表靜態(tài)頁(yè)面publicvoidgenerateMobileSetmealListHtml(List<Setmeal>list){Mapmap=newHashMap();map.put("setmealList",list);//為模板提供數(shù)據(jù)，用于生成靜態(tài)頁(yè)面

generteHtml("mobile_setmeal.ftl","m_setmeal.html",map);}套餐列表靜態(tài)頁(yè)面模板列表數(shù)據(jù)生成的套餐列表靜態(tài)頁(yè)面名稱調(diào)用生成靜態(tài)頁(yè)面的方法（5