模塊二 管理端-檢查項管理

模塊二管理端-檢查項管理《JavaEE企業(yè)級應(yīng)用開發(fā)項目教程（SSM）》知識目標/Target熟悉Zookeeper的基本操作，能夠獨立完成Zookeeper的下載、安裝、啟動熟悉Axios技術(shù)的使用，能夠靈活使用Axios技術(shù)發(fā)送頁面請求熟悉MyBatis分頁插件PageHelper，能夠使用PageHelper實現(xiàn)分頁技能目標/Target掌握查詢檢查項功能的實現(xiàn)方法掌握編輯檢查項功能的實現(xiàn)方法掌握刪除檢查項功能的實現(xiàn)方法掌握新增檢查項功能的實現(xiàn)方法章節(jié)概述/

Summary人體是一個具有多層次結(jié)構(gòu)的復(fù)雜體系，如果有器官或者組織存在問題，則會打破器官系統(tǒng)之間的協(xié)調(diào)和平衡。如果想要知道身體是否健康，可以對人體內(nèi)部器官或組織進行檢查。為了給體檢用戶提供豐富、完善的體檢服務(wù)，健康管理機構(gòu)會根據(jù)不同的體檢需求，推出對應(yīng)的檢查項以提高體檢用戶的滿意度，提升自身競爭力。為了滿足體檢用戶的各項檢查需求，傳智健康管理端提供檢查項管理功能，包括檢查項的新增、查詢、編輯和刪除。接下來，本模塊將針對管理端的檢查項管理進行詳細講解。目錄/Contents01020304新增檢查項查詢檢查項編輯檢查項刪除檢查項新增檢查項2-1任務(wù)描述任務(wù)描述檢查項指的是用戶體檢時要檢查的項目，本任務(wù)要實現(xiàn)的是新增檢查項功能。訪問health_backend子模塊中的檢查項管理頁面checkitem.html。任務(wù)描述單擊檢查項管理頁面中的“新增”按鈕，彈出新增檢查項對話框。輸入檢查項的信息后，單擊“確定”按鈕完成新增檢查項。任務(wù)分析彈出新增檢查項對話框在checkitem.html頁面中，為“新增”按鈕綁定單擊事件，單擊事件觸發(fā)后彈出新增檢查項對話框。為對話框中的“確定”按鈕綁定單擊事件，在單擊事件觸發(fā)后，將新增檢查項對話框中的數(shù)據(jù)提交到后臺。由控制器類CheckItemController中的add()方法接收和處理新增檢查項的請求。由CheckItemController類中的add()方法將新增檢查項的結(jié)果響應(yīng)回checkitem.html頁面。CheckItemServiceImpl類中調(diào)用CheckItemDao接口中的add()方法新增檢查項。提交新增檢查項數(shù)據(jù)接收和處理新增檢查項的請求提示新增檢查項的結(jié)果保存新增檢查項數(shù)據(jù)任務(wù)分析新增檢查項的實現(xiàn)過程知識進階傳智健康服務(wù)消費方和服務(wù)提供方所在的子模塊是不同的，不同子模塊之間的遠程調(diào)用，可以通過Dubbo實現(xiàn)，Dubbo在使用時需要引入注冊中心，并將服務(wù)發(fā)布到注冊中心中。目前Dubbo支持的注冊中心有5個，分別是是Nacos、Multicast、ZooKeeper、Redis和Simple，其中，

Zookeeper是官方推薦的注冊中心，而且Zookeeper數(shù)據(jù)模型簡單、支持網(wǎng)絡(luò)集群、事件監(jiān)聽、高可用、高性能，所以傳智健康選擇Zookeeper作為Dubbo的注冊中心。Zookeeper知識進階Zookeeper屬于ApacheHadoop的一個子項目，是一個開放源代碼的分布式應(yīng)用程序協(xié)調(diào)服務(wù)，分布式應(yīng)用程序可以基于它實現(xiàn)同步服務(wù)、配置維護和命名服務(wù)等功能。Zookeeper知識進階訪問ApacheZookeeper的官方網(wǎng)站首頁，在頁面中單擊“Download”超鏈接，會跳轉(zhuǎn)Zookeeper的版本列表頁面。Zookeeper下載Zookeeper知識進階ApacheZooKeeper3.6.3是當前最新的穩(wěn)定版,，在此選擇下載ApacheZooKeeper3.6.3。單擊頁面中的“ApacheZooKeeper3.6.3(asc,sha512)”超鏈接會進入ApacheZooKeeper3.6.3下載頁面。Zookeeper下載Zookeeper知識進階單擊“https://dlcdn./zookeeper/zookeeper-3.6.3/apache-zookeeper-3.6.3-bin.tar.gz”超鏈接會下載一個名稱為apache-zookeeper-3.6.3-bin.tar.gz的Zookeeper安裝包。Zookeeper下載Zookeeper知識進階bin目錄：存放Zookeeper的命令。conf目錄：存放配置文件。lib目錄：存放Java客戶端開發(fā)時需要依賴的JAR包。Zookeeper安裝Zookeeper將apache-zookeeper-3.6.3-bin.tar.gz解壓后文件夾下的目錄結(jié)構(gòu)如下圖。知識進階打開conf文件夾，復(fù)制zoo_sample.cfg文件并將其重命名為zoo.cfg。使用文本編輯工具打開zoo.cfg文件，配置存儲數(shù)據(jù)、日志的目錄地址。#thedirectorywherethesnapshotisstored.dataDir=D:\\zookeeper\\apache-zookeeper-3.6.3-bin\\datasdataLogDir=D:\\zookeeper\\apache-zookeeper-3.6.3-bin\\logs#theportatwhichtheclientswillconnectclientPort=2181Zookeeper啟動Zookeeper服務(wù)指定存儲數(shù)據(jù)的目錄地址指定存儲日志的目錄地址知識進階zkServer.cmd用于啟動Zookeeper服務(wù)。zkCli.cmd用于連接Zookeeper。Zookeeper啟動Zookeeper服務(wù)知識進階Zookeeper啟動Zookeeper服務(wù)雙擊“zkServer.cmd”，啟動ZooKeeper服務(wù)。知識進階Zookeeper啟動Zookeeper服務(wù)雙擊“zkCli.cmd”查看ZooKeeper服務(wù)的啟動情況知識進階小提示：啟動Zookeeper服務(wù)時閃退的處理方式雙擊zkServer.cmd或者zkCli.cmd時可能會出現(xiàn)閃退，如果發(fā)生此種情況，可以通過修改該腳本文件中命令行的內(nèi)容進行解決。以zkServer.cmd腳本文件為例，通過文本編輯器打開zkServer.cmd。查找命令行語句call%JAVA%"-Dzookeeper.log.dir=%ZOO_LOG_DIR%"，將語句中%JAVA%段落兩邊的%去掉，保存文本后再次啟動服務(wù)。知識進階Axios是一個基于對象來傳遞異步操作信息的HTTP庫，可以用在瀏覽器中。Axios通過對Ajax的封裝實現(xiàn)頁面和服務(wù)端的交互。Axios技術(shù)知識進階post和get表示請求方式，URL表示請求地址，data表示請求參數(shù)。then()函數(shù)用于處理請求結(jié)果，參數(shù)response是控制器響應(yīng)的結(jié)果。catch()函數(shù)用于用于捕獲執(zhí)行then()函數(shù)時發(fā)生的異常。finally()函數(shù)用于執(zhí)行一段無論是請求成功還是失敗都會被執(zhí)行的代碼。axios.post/get(URL,data)

.then((response)=>{

}).catch(()=>{

}).finally(()=>{});Axios技術(shù)任務(wù)實現(xiàn)<el-buttontype="primary"class="butT">新增</el-button><!--新增標簽彈層--><divclass="add-form"><el-dialogtitle="新增檢查項":visible.sync="dialogFormVisible">

</el-dialog></div><script>varvue=newVue({el:'#app',data:{formData:{},//表單數(shù)據(jù)dialogFormVisible:false,//新增表單彈層是否可見

},

})</script>（1）彈出新增檢查項對話框通過設(shè)置dialogFormVisible的值，進而改變:visible的屬性值，進而控制對話框在頁面中顯示或隱藏。查看checkitem.html頁面中與“新增”按鈕和新增檢查項對話框相關(guān)的源代碼。任務(wù)實現(xiàn)由于新增檢查項對話框在頁面初始化時已經(jīng)存在，只是處于隱藏狀態(tài)，故需要將屬性dialogFormVisible的值修改為true；為了保證每次彈出的對話框內(nèi)均沒有數(shù)據(jù)，在每次顯示對話框之前調(diào)用resetForm()方法將對話框中的數(shù)據(jù)清空。//清空對話框resetForm(){

this.formData={};},//彈出新增檢查項對話框handleCreate(){

this.resetForm();//調(diào)用重置表單的方法

this.dialogFormVisible=true;//修改顯示彈窗的屬性為true}（1）彈出新增檢查項對話框任務(wù)實現(xiàn)為checkitem.html頁面的“新增”按鈕綁定單擊事件，并在單擊時調(diào)用定義好的handleCreate()方法，彈出新增檢查項對話框。<el-buttontype="primary"class="butT"

@click="handleCreate()">新增</el-button>（1）彈出新增檢查項對話框任務(wù)實現(xiàn)為新增檢查項對話框中的“取消”和“確定”按鈕綁定單擊事件，并設(shè)置單擊時要執(zhí)行的操作。<divslot="footer"class="dialog-footer"><el-button@click="dialogFormVisible=false">取消</el-button><el-buttontype="primary"@click="handleAdd()">確定</el-button></div>（2）提交新增檢查項請求任務(wù)實現(xiàn)在checkitem.html頁面中定義handleAdd()方法，用于提交新增檢查項數(shù)據(jù)的請求。handleAdd(){

this.$refs['dataAddForm'].validate((valid)=>{

if(valid){axios.post("/checkitem/add.do",this.formData).then((res)=>{

if(res.data.flag){//請求處理成功 this.$message({type:'success',message:res.data.message });

this.dialogFormVisible=false;

//隱藏對話框

}else{//請求處理失敗 this.$message.error(res.data.message);

}

});

}else{

this.$message.error("表單數(shù)據(jù)校驗失敗，請檢查輸入"+"是否正確！");

}

});}（2）提交新增檢查項數(shù)據(jù)任務(wù)實現(xiàn)在health_common模塊創(chuàng)建檢查項類CheckItem，在類中聲明檢查項的屬性，定義各個屬性的getter/setter方法。（3）創(chuàng)建檢查項類任務(wù)實現(xiàn)在health_backend子模塊創(chuàng)建控制器類CheckItemController，在類中定義add()方法，用于處理新增檢查項的請求。publicclassCheckItemController{@Reference//查找服務(wù)privateCheckItemServicecheckItemService;@RequestMapping("/add")publicResultadd(@RequestBodyCheckItemcheckItem){try{checkItemService.add(checkItem);//調(diào)用接口方法

returnnewResult(true,MessageConstant.ADD_CHECKITEM_SUCCESS);//成功}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.ADD_CHECKITEM_FAIL);//失敗}}}（4）實現(xiàn)新增檢查項控制器任務(wù)實現(xiàn)在health_interface子模塊創(chuàng)建接口CheckItemService，在接口中定義新增檢查項的add()方法。publicinterfaceCheckItemService{publicvoidadd(CheckItemcheckItem);//新增檢查項}（5）創(chuàng)建檢查項服務(wù)接口任務(wù)實現(xiàn)在health_service_provider子模塊創(chuàng)建CheckItemService接口實現(xiàn)類CheckItemServiceImpl，并重寫接口的add()方法，用于新增檢查項。@Service(interfaceClass=CheckItemService.class)@TransactionalpublicclassCheckItemServiceImplimplementsCheckItemService{@AutowiredprivateCheckItemDaocheckItemDao;//新增檢查項

@Overridepublicvoidadd(CheckItemcheckItem){checkItemDao.add(checkItem);//調(diào)用持久層接口add()}}（6）實現(xiàn)新增檢查項服務(wù)任務(wù)實現(xiàn)在health_service_provider子模塊創(chuàng)建持久層接口CheckItemDao。在類中定義add()方法，用于新增檢查項。publicinterfaceCheckItemDao{publicvoidadd(CheckItemcheckItem);//新增檢查項}（7）實現(xiàn)持久層新增檢查項任務(wù)實現(xiàn)在health_service_provider子模塊創(chuàng)建與CheckItemDao接口同名的映射文件CheckItemDao.xml，在文件中使用<insert>標簽映射新增語句，將新增的檢查項數(shù)據(jù)保存到數(shù)據(jù)庫中。<mappernamespace="com.itheima.dao.CheckItemDao"><!--新增檢查項--><insertid="add"parameterType="com.itheima.pojo.CheckItem">iINSERTINTOt_checkitem(code,name,sex,age,price,type,remark,attention)VALUES

(#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})</insert></mapper>（7）實現(xiàn)持久層新增檢查項任務(wù)實現(xiàn)啟動ZooKeeper服務(wù)，在IDEA中依次啟動health_service_provider和health_backend。使用瀏覽器訪問http://localhost:82/pages/checkitem.html。（8）測試新增檢查項任務(wù)實現(xiàn)在檢查項管理頁面單擊“新增”按鈕，彈出新增檢查項對話框。（8）測試新增檢查項任務(wù)實現(xiàn)在新增檢查項對話框按照要求填寫檢查項的各項信息。（8）測試新增檢查項任務(wù)實現(xiàn)新增成功后，頁面提示“新增檢查項成功”。由于查詢檢查項的功能暫未開發(fā)完成，數(shù)據(jù)庫中新增的檢查項不會展示在檢查項管理頁面中。（8）測試新增檢查項任務(wù)實現(xiàn)通過查詢數(shù)據(jù)表t_checkitem的方式驗證檢查項數(shù)據(jù)是否新增成功。（8）測試新增檢查項查詢檢查項2-2任務(wù)描述任務(wù)描述本任務(wù)需要實現(xiàn)既可以根據(jù)指定需求查詢檢查項，又可以查詢所有檢查項。考慮到頁面可視化效果，本任務(wù)通過分頁形式展示查詢出的檢查項。任務(wù)分析（1）提交分頁查詢檢查項的請求。（2）接收和處理分頁查詢檢查項的請求。（3）分頁查詢檢查項。（4）展示分頁查詢結(jié)果。分頁展示檢查項在checkitem.html頁面中，為分頁條綁定單擊事件，在單擊事件觸發(fā)后根據(jù)要跳轉(zhuǎn)的頁碼進行分頁查詢。頁碼切換在checkitem.html頁面中，為“查詢”按鈕綁定單擊事件，在單擊事件觸發(fā)后執(zhí)行按條件的分頁查詢。按條件查詢檢查項查詢檢查項任務(wù)分析分頁展示檢查項的實現(xiàn)過程知識進階PageHelper是MyBatis提供的第三方開源分頁插件，支持任何復(fù)雜的單表分頁、多表分頁以及12種常見數(shù)據(jù)庫的使用，例如Oracle、Mysql、MariaDB、SQLite、Hsqldb和PostgreSQL等。MyBatis分頁插件PageHelper知識進階在health_parent父工程的POM文件中添加PageHelper依賴。<properties>

<pagehelper.version>4.1.4</pagehelper.version></properties><dependencyManagement>

<dependencies>

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>${pagehelper.version}</version>

</dependency>

</dependencies></dependencyManagement>MyBatis分頁插件PageHelper（1）引入PageHelper依賴知識進階由于在<dependencyManagement>標簽只是定義依賴的聲明，并不實際引入JAR包，因此子模塊health_common繼承父工程health_parent時，需要在POM文件的<dependencies>標簽中顯式聲明PageHelper的依賴。

<dependencies>

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

</dependency>

</dependencies>MyBatis分頁插件PageHelper（1）引入PageHelper依賴知識進階在health_service_provider子模塊的resources目錄下的SqlMapConfig.xml文件中添加PageHelper的相關(guān)配置。<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-////DTDConfig3.0//EN""/dtd/mybatis-3-config.dtd"><configuration><plugins><plugininterceptor="com.github.pagehelper.PageHelper"><propertyname="dialect"value="mysql"/></plugin></plugins></configuration>MyBatis分頁插件PageHelper（2）配置PageHelper任務(wù)實現(xiàn)<el-tablesize="small"current-row-key="id":data="dataList"stripe>

</el-table><divclass="pagination-container"><el-paginationclass="pagiantion"></el-pagination></div><script>varvue=newVue({el:'#app',data:{pagination:{//分頁屬性 currentPage:1,//當前頁碼 pageSize:10,//每頁顯示的記錄數(shù) total:0,//總記錄數(shù) queryString:null//查詢條件},dataList:[],//當前頁要展示的分頁列表數(shù)據(jù)

},created(){},

})</script>STEP01（1）提交分頁查詢檢查項的請求:data="dataList"通過數(shù)據(jù)雙向綁定的方式展示數(shù)據(jù)。el-pagination分頁組件，用于實現(xiàn)數(shù)據(jù)分頁。分頁屬性pagination，包括當前頁碼、每頁顯示的記錄數(shù)、總記錄數(shù)和查詢條件。dataList表示當前頁要展示的數(shù)據(jù)。created()函數(shù)在Vue對象初始化完成后自動執(zhí)行。查看checkitem.html頁面中用于展示檢查項的源代碼。STEP011.分頁展示檢查項任務(wù)實現(xiàn)本任務(wù)的查詢操作分為按條件查詢和查詢所有。如果指定查詢條件，則按照條件查詢；如果沒有查詢條件，則查詢所有。在checkitem.html頁面中定義findPage()方法，用于實現(xiàn)分頁查詢檢查項。findPage(){varparam={currentPage:this.pagination.currentPage,//當前頁pageSize:this.pagination.pageSize,//每頁顯示記錄數(shù)queryString:this.pagination.queryString//查詢條件};axios.post("/checkitem/findPage.do",param).then((res)=>{this.pagination.total=res.data.total;//獲取總記錄數(shù)this.dataList=res.data.rows;//獲取數(shù)據(jù)列表});}STEP01（1）提交分頁查詢檢查項的請求STEP011.分頁展示檢查項任務(wù)實現(xiàn)在鉤子函數(shù)created()中調(diào)用findPage()方法，created()函數(shù)在Vue對象初始化完成后自動執(zhí)行，訪問checkitem.html頁面后即可實現(xiàn)查詢檢查項并分頁顯示。STEP01created(){

this.findPage();//調(diào)用分頁查詢方法完成分頁查詢}（1）提交分頁查詢檢查項的請求STEP011.分頁展示檢查項任務(wù)實現(xiàn)在health_backend子模塊的CheckItemController類中定義findPage()方法，用于處理分頁查詢檢查項的請求。@RequestMapping("/findPage")publicPageResultfindPage(@RequestBodyQueryPageBeanqueryPageBean){//調(diào)用服務(wù)接口findPage()，返回分頁結(jié)果封裝對象returncheckItemService.findPage(queryPageBean);}STEP01（2）實現(xiàn)查詢檢查項控制器STEP011.分頁展示檢查項任務(wù)實現(xiàn)在health_interface子模塊的CheckItemService接口中定義findPage()方法，用于分頁查詢檢查項。//分頁查詢檢查項接口publicPageResultfindPage(QueryPageBeanqueryPageBean);STEP01（3）創(chuàng)建查詢檢查項服務(wù)STEP011.分頁展示檢查項任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemServiceImpl類重寫接口的findPage()方法，用于分頁查詢檢查項。@OverridepublicPageResultfindPage(QueryPageBeanqueryPageBean){IntegercurrentPage=queryPageBean.getCurrentPage();//獲取當前頁面IntegerpageSize=queryPageBean.getPageSize();//獲取每頁顯示的記錄數(shù)StringqueryString=queryPageBean.getQueryString();//獲取查詢條件//分頁插件，會在執(zhí)行sql之前將分頁關(guān)鍵字追加到SQL后面

PageHelper.startPage(currentPage,pageSize);//調(diào)用持久層接口方法Page<CheckItem>page=checkItemDao.findByCondition(queryString);//返回分頁結(jié)果對象returnnewPageResult(page.getTotal(),page.getResult());}注意：為了避免在SQL語句中添加分頁關(guān)鍵字失敗，必須在執(zhí)行SQL語句前調(diào)用PageHelper的startPage()方法。STEP01(4)實現(xiàn)查詢檢查項服務(wù)STEP011.分頁展示檢查項任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemDao接口中定義findByCondition()方法，用于分頁查詢檢查項。//分頁查詢檢查項publicPage<CheckItem>findByCondition(StringqueryString);STEP01(5)實現(xiàn)持久層查詢檢查項STEP011.分頁展示檢查項任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemDao.xml映射文件中通過<select>標簽映射查詢語句，進行檢查項的條件查詢、分頁查詢。<!--根據(jù)條件查詢、分頁查詢檢查項--><selectid="findByCondition"parameterType="string" resultType="com.itheima.pojo.CheckItem">SELECT*FROMt_checkitem<iftest="value!=nullandvalue.length>0">WHERE

code=#{value}OR

name=#{value}</if></select>通過<if>標簽判斷是否進行條件查詢?nèi)绻麉?shù)value的值是null，表示沒有查詢條件，此時查詢的是數(shù)據(jù)表t_checkitem中的所有數(shù)據(jù)。STEP01(5)實現(xiàn)持久層查詢檢查項STEP011.分頁展示檢查項任務(wù)實現(xiàn)依次啟動ZooKeeper服務(wù)、health_service_provider和health_backend。使用瀏覽器訪問http://localhost:82/pages/checkitem.html。STEP01(6)測試分頁展示檢查項STEP011.分頁展示檢查項任務(wù)實現(xiàn)STEP011.分頁展示檢查項(7)完善checkitem.html頁面的handleAdd()方法優(yōu)化handleAdd()方法，在新增檢查項成功后調(diào)用findPage()方法。//添加檢查項handleAdd(){

axios.post("/checkitem/add.do",this.formData).then((res)=>{//處理成功if(res.data.flag){

this.findPage();//分頁查詢檢查項}

});

}任務(wù)實現(xiàn)在checkitem.html頁面中定義handleCurrentChange()方法，該方法用于實現(xiàn)頁碼切換。//切換頁碼handleCurrentChange(currentPage){this.pagination.currentPage=currentPage;//指定最新的頁碼this.findPage();//調(diào)用分頁方法}STEP012.頁碼切換(1)定義頁碼切換的方法任務(wù)實現(xiàn)checkitem.html頁面中提供了分頁組件el-pagination。接下來，為el-pagination組件設(shè)置與頁碼相關(guān)的屬性值。<el-pagination

class="pagiantion"

@current-change="handleCurrentChange"

:current="pagination.currentPage"

:size="pagination.pageSize"

:total="pagination.total"

layout="total,prev,pager,next,jumper"></el-pagination>表示在頁碼發(fā)生改變時觸發(fā)的方法表示當前頁表示每頁顯示條數(shù)表示總條數(shù)STEP01(2)設(shè)置分頁組件el-pagination2.頁碼切換任務(wù)實現(xiàn)導(dǎo)入測試數(shù)據(jù)。依次啟動Zookeeper服務(wù)、health_service_provider和health_backend。訪問檢查項管理頁面。在檢查項管理頁面單擊“>”按鈕跳轉(zhuǎn)到下一頁。STEP01(3)測試頁碼切換2.頁碼切換任務(wù)實現(xiàn)每次按條件查詢時，都需要根據(jù)輸入的關(guān)鍵字重新查詢檢查項信息。在此指定調(diào)用handleCurrentChange()方法的傳遞參數(shù)currentPage的值為1，這是為了每次按條件查詢時都指定當前頁的頁碼為1。<el-buttonclass="dalfBut"@click="handleCurrentChange(1)">查詢</el-button>STEP013.按條件查詢檢查項（1）定義按條件查詢方法任務(wù)實現(xiàn)STEP01（2）測試按條件查詢檢查項依次啟動Zookeeper服務(wù)、health_service_provider和health_backend。在瀏覽器中訪問http://localhost:82/pages/checkitem.html。在查詢條件輸入框中輸入查詢條件，單擊“查詢”按鈕進行條件查詢。3.按條件查詢檢查項編輯檢查項2-3任務(wù)描述每個檢查項右側(cè)都有一個“編輯”按鈕，單擊“編輯”按鈕彈出編輯檢查項對話框。在編輯檢查項對話框中修改檢查項的信息后，單擊“確定”按鈕即可完成檢查項的編輯操作。在檢查項管理過程中，如果檢查項的信息填寫錯誤或者不完善時，可以通過編輯檢查項的方式對檢查項的內(nèi)容進行變更或補充。編輯檢查項可以分解成2個功能，分別是彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框和完成檢查項的編輯。任務(wù)分析任務(wù)分析（1）彈出編輯檢查項對話框為checkitem.html頁面的“編輯”按鈕綁定單擊事件，在單擊事件觸發(fā)后彈出編輯檢查項對話框，然后提交查詢檢查項的請求。（2）接收和處理檢查項查詢請求客戶端發(fā)起查詢檢查項的請求后，由CheckItemController類的findById()方法接收頁面提交的請求，并調(diào)用CheckItemService接口的findById()方法查詢檢查項。（3）查詢檢查項數(shù)據(jù)在CheckItemServiceImpl類重寫CheckItemService接口的findById()方法，并在方法中調(diào)用CheckItemDao接口的findById()方法從數(shù)據(jù)庫中查詢檢查項數(shù)據(jù)。（4）展示查詢檢查項的結(jié)果由CheckItemController類中的findById()方法將查詢檢查項的結(jié)果響應(yīng)回checkitem.html頁面，checkitem.html頁面根據(jù)響應(yīng)結(jié)果在編輯檢查項對話框中展示檢查項信息。1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)分析彈出帶有檢查項數(shù)據(jù)的對話框的實現(xiàn)過程1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)分析（1）提交編輯檢查項請求為checkitem.html頁面編輯檢查項對話框的“確定”按鈕綁定單擊事件，在單擊事件觸發(fā)后提交對話框中的數(shù)據(jù)。（2）接收和處理檢查項編輯請求客戶端發(fā)起編輯檢查項的請求后，由CheckItemController類的edit()方法接收頁面提交的請求，并調(diào)用CheckItemService接口的edit()方法編輯檢查項。（3）編輯檢查項數(shù)據(jù)在CheckItemServiceImpl類中重寫CheckItemService接口的edit()方法，并在方法中調(diào)用CheckItemDao接口的edit()方法修改數(shù)據(jù)庫中的檢查項數(shù)據(jù)。（4）提示編輯檢查項的結(jié)果由CheckItemController類中的edit()方法將編輯檢查項的結(jié)果響應(yīng)回checkitem.html頁面，checkitem.html頁面根據(jù)響應(yīng)結(jié)果提示編輯成功或失敗的信息。2.完成檢查項的編輯任務(wù)分析2.完成檢查項的編輯完成檢查項編輯的實現(xiàn)過程任務(wù)實現(xiàn)<el-table-columnlabel="操作"align="center"><templateslot-scope="scope"><el-buttontype="primary"size="mini">編輯</el-button>

</template></el-table-column><!--編輯標簽彈層--><divclass="edit-form"><el-dialogtitle="編輯檢查項":visible.sync="dialogFormVisible4Edit">

</el-dialog></div><script>varvue=newVue({el:'#app',data:{

dialogFormVisible4Edit:false,//編輯表單是否可見},

})</script>STEP011.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框(1)彈出編輯檢查項對話框

設(shè)置dialogFormVisible4Edit的值，進而改變:visible的屬性值，進而控制對話框在頁面中顯示或隱藏查看checkitem.html頁面中與“編輯”按鈕和編輯檢查項對話框相關(guān)的源代碼。任務(wù)實現(xiàn)在checkitem.html頁面中定義handleUpdate()方法，用于彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框后回顯數(shù)據(jù)。handleUpdate(row){this.dialogFormVisible4Edit=true;//顯示編輯對話框//發(fā)送Ajax請求，根據(jù)id查詢數(shù)據(jù)并回顯數(shù)據(jù)axios.get("/checkitem/findById.do?id="+row.id).then((res)=>{if(res.data.flag){//為模型數(shù)據(jù)賦值，基于Vue數(shù)據(jù)綁定進行回顯

this.formData=res.data.data;}else{//回顯失敗，返回錯誤提示信息this.$message.error(res.data.message);}});}STEP011.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框(1)彈出編輯檢查項對話框任務(wù)實現(xiàn)為checkitem.html頁面的“編輯”按鈕綁定單擊事件，并在單擊時調(diào)用定義好的handleUpdate()方法，彈出編輯檢查項對話框。<el-buttontype="primary"class="mini"@click="handleUpdate(scope.row)">編輯</el-button>STEP011.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框(1)彈出編輯檢查項對話框任務(wù)實現(xiàn)在health_backend子模塊的CheckItemController類中定義findById()方法，用于處理根據(jù)檢查項id查詢檢查項的請求。@RequestMapping("/findById")publicResultfindById(Integerid){try{//調(diào)用服務(wù)接口findById()，返回檢查項實體對象CheckItemcheckItem=checkItemService.findById(id);//調(diào)用服務(wù)接口成功，返回成功結(jié)果信息returnnewResult(true,MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem);}catch(Exceptione){e.printStackTrace();//調(diào)用服務(wù)接口失敗，返回失敗結(jié)果信息returnnewResult(false,MessageConstant.QUERY_CHECKITEM_FAIL);}}STEP01(2)實現(xiàn)查詢檢查項控制器1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)在health_interface子模塊的CheckItemService接口中定義findById()方法，用于根據(jù)檢查項id查詢檢查項。//根據(jù)檢查項id查詢檢查項publicCheckItemfindById(Integerid);STEP01(3)創(chuàng)建查詢檢查項服務(wù)1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemServiceImpl類重寫CheckItemService接口的findById()方法，用于根據(jù)檢查項id查詢檢查項。//根據(jù)檢查項id查詢檢查項@OverridepublicCheckItemfindById(Integerid){returncheckItemDao.findById(id);//調(diào)用持久層接口findById()}STEP01(4)實現(xiàn)查詢檢查項服務(wù)1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemDao接口中定義findById()方法，用于根據(jù)檢查項id查詢檢查項。//根據(jù)檢查項id查詢檢查項publicCheckItemfindById(Integerid);STEP01(5)實現(xiàn)持久層查詢檢查項在health_service_provider子模塊的CheckItemDao.xml映射文件中通過<select>標簽映射查詢語句，根據(jù)檢查項id從數(shù)據(jù)庫中查詢檢查項。<!--根據(jù)檢查項id查詢檢查項--><selectid="findById"parameterType="int"resultType="com.itheima.pojo.CheckItem">SELECT*FROMt_checkitemWHERE

id=#{id}</select>1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)依次啟動ZooKeeper服務(wù)、health_service_provider和health_backend。在瀏覽器中訪問http://localhost:82/pages/checkitem.html。STEP01(6)測試彈出帶有檢查項數(shù)據(jù)的對話框1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)以項目編碼為0004的檢查項為例，測試編輯檢查項。單擊該檢查項右側(cè)的“編輯”按鈕，彈出編輯檢查項對話框。STEP01(6)測試彈出帶有檢查項數(shù)據(jù)的對話框1.彈出帶有檢查項數(shù)據(jù)的編輯檢查項對話框任務(wù)實現(xiàn)為編輯檢查項對話框中的“取消”和“確定”按鈕綁定單擊事件，并設(shè)置單擊時要執(zhí)行的操作。<divslot="footer"class="dialog-footer"><el-button@click="dialogFormVisible4Edit=false">取消</el-button><el-buttontype="primary"@click="handleEdit()">確定</el-button></div>STEP012.完成檢查項的編輯(1)提交編輯檢查項數(shù)據(jù)任務(wù)實現(xiàn)在頁面中定義handleEdit()方法，用于提交編輯檢查項數(shù)據(jù)。handleEdit(){this.$refs['dataEditForm'].validate((valid)=>{if(valid){axios.post("/checkitem/edit.do",this.formData).then((res)=>{if(res.data.flag){//處理成功this.$message({type:'success',message:res.data.message});this.dialogFormVisible4Edit=false;//關(guān)閉編輯對話框

this.findPage();//分頁查詢}else{this.$message.error(res.data.message);//處理失敗}});}else{this.$message.error("表單數(shù)據(jù)校驗失敗，請檢查輸入是否正確！");}});}STEP012.完成檢查項的編輯(1)提交編輯檢查項數(shù)據(jù)任務(wù)實現(xiàn)在health_backend子模塊的CheckItemController類中定義edit()方法，用于處理編輯檢查項的請求。@RequestMapping("/edit")publicResultedit(@RequestBodyCheckItemcheckItem){try{checkItemService.edit(checkItem);//調(diào)用服務(wù)接口edit()//調(diào)用服務(wù)接口成功，返回成功結(jié)果信息returnnewResult(true,MessageConstant.EDIT_CHECKITEM_SUCCESS);}catch(Exceptione){e.printStackTrace();//調(diào)用服務(wù)接口失敗，返回失敗結(jié)果信息returnnewResult(false,MessageConstant.EDIT_CHECKITEM_FAIL);}}STEP01(2)實現(xiàn)編輯檢查項控制器2.完成檢查項的編輯任務(wù)實現(xiàn)在health_interface子模塊的CheckItemService接口中定義edit()方法，用于編輯檢查項。//編輯檢查項publicvoidedit(CheckItemcheckItem);STEP01(3)創(chuàng)建編輯檢查項服務(wù)2.完成檢查項的編輯任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemServiceImpl類重寫CheckItemService接口的edit()方法，用于編輯檢查項。//編輯檢查項@Overridepublicvoidedit(CheckItemcheckItem){checkItemDao.edit(checkItem);//調(diào)用持久層接口edit()}(4)實現(xiàn)編輯檢查項服務(wù)2.完成檢查項的編輯任務(wù)實現(xiàn)在health_service_provider子模塊的CheckItemDao接口中定義edit()方法，用于編輯檢查項。//編輯檢查項publicvoidedit(CheckItemcheckItem);STEP01(5)實現(xiàn)持久層編輯檢查項在CheckItemDao.xml映射文件中通過<update>標簽映射更新語句以編輯檢查項。<updateid="edit"parameterType="com.itheima.pojo.CheckItem">UPDATE

t_checkitem

<set><iftest="name!=null">name=#{name},</if>

省略t_checkitem表中的其他字段

</set>WHERE

id=#{id}</update>只有當<if>中傳入的字段值不為空時，才會更新該字段，否則不更新。2.完成檢查項的編輯任務(wù)實現(xiàn)依次啟動Zookeeper服務(wù)、health_service_provider和health_backend。在瀏覽器中訪問http://localhost:82/pages/checkitem.html。將“項目說明”的值修改為“測試收縮壓”。STEP01(6)測試編輯檢查項2.完成檢查項的編輯任務(wù)實現(xiàn)提交編輯后的檢查項數(shù)據(jù)，頁面提示“編輯檢查項成功”，并且項目編碼為0004的數(shù)據(jù)中“項目說明”修改為了“測試收縮壓”，這說明說明編輯檢查項成功。STEP01(6)測試編輯檢查項2.完成檢查項的編輯刪除檢查項2-4任務(wù)描述每個檢查項右側(cè)都有一個“刪除”按鈕，單擊“刪除”按鈕彈出確認刪除提示對話框。單擊提示對話框中的“確定”按鈕即可提交刪除檢查項的請求。對于檢查項列表中重復(fù)出現(xiàn)的、描述有誤的檢查項或者是過時的檢查項，除了可以進行編輯外，還可以進行刪除。任務(wù)分析（1）彈出提示對話框為checkitem.html頁面的“刪除”按鈕綁定單擊事件，在單擊事件觸發(fā)后彈出提示對話框。（2）提交刪除檢查項請求為提示對話框中的“確定”按鈕綁定單擊事件，在單擊事件觸發(fā)后提交要刪除的檢查項數(shù)據(jù)。（3）接收和處理檢查項刪除請求客戶端發(fā)起刪除檢查項的請求后，由CheckItemController類的delete()方法接收頁面提交的請求，并調(diào)用CheckItemService接口的delete()方法刪除檢查項。任務(wù)分析（4）刪除檢查項數(shù)據(jù)在CheckItemServiceImpl類重寫CheckItemService接口的delete()方法，在方法中調(diào)用CheckItemDao接口的selectCountByCheckItemId()方法，用于從數(shù)據(jù)庫中查詢要刪除的檢查項是否被檢查組引用，如果沒有被引用，調(diào)用CheckItemDao接口的delete()方法用于從數(shù)據(jù)庫中刪除指定的檢查項。（5）提示刪除檢查項的結(jié)果checkitem.html頁面根據(jù)返回結(jié)果提示刪除成功或失敗的信息。任務(wù)分析刪除檢查項的實現(xiàn)過程任務(wù)實現(xiàn)在checkitem.html頁面中定義handleDelete()方法，用于彈出提示對話框，提交刪除檢查項的請求。handleDelete(row){

this.$confirm('你確定要刪除當前數(shù)據(jù)嗎？','提示',{confirmButtonText:'確定',cancelButtonText:'取消',type:'warning'}).then(()=>{axios.get("/checkitem/delete.do?id="+row.id).then((res)=>{if(res.data.flag){//處理成功this.$message({type:'success',message:res.data.message});

this.findPage();}else{this.$message.error(res.data.messa