4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}
如下图：
4.1 完善页面
4.1.1 定义分页相关模型数据
pagination: {//分页相关模型数据 currentPage: 1,//当前页码 pageSize:10,//每页显示的记录数 total:0,//总记录数 queryString:null//查询条件 }, dataList: [],//当前页要展示的分页列表数据
4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法
//钩子函数，VUE对象初始化完成后自动执行 created() { this.findPage();//VUE对象初始化完成后调用分页查询方法，完成分页查询 },
//分页查询 findPage() { //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件） var param = { currentPage: this.pagination.currentPage, pageSize: this.pagination.pageSize, queryString: this.pagination.queryString }; axios.post("/checkitem/findPage.do",param).then((res)=>{ //解析Controller响应回的数据，为模型数据赋值 this.pagination.total=res.data.total; this.dataList=res.data.rows; }) },
4.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。 为查询按钮绑定单击事件，调用findPage方法
<el-button @click="findPage()" class="dalfBut">查询</el-button>
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
<el-pagination class="pagiantion" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total"> </el-pagination>
定义handleCurrentChange方法
//切换页码 handleCurrentChange(currentPage) { //currentPage为切换后的页码 this.pagination.currentPage=currentPage; this.findPage(); },
4.2 后台代码
4.2.1 Controller
在CheckItemController中增加分页查询方法
//分页查询 @RequestMapping("/findPage") public PageResult findPage(@RequestBody QueryPageBean queryPageBean){ PageResult pageResult = checkItemService.pageQuery(queryPageBean); return pageResult; }
4.2.2 服务接口
在CheckItemService服务接口中扩展分页查询方法
//检查项分页查询 public PageResult pageQuery(QueryPageBean queryPageBean) { Integer currentPage = queryPageBean.getCurrentPage(); Integer pageSize = queryPageBean.getPageSize(); String queryString = queryPageBean.getQueryString();//查询条件 //完成分页查询，基于mybatis框架提供的分页助手插件完成 PageHelper.startPage(currentPage,pageSize); //select * from t_checkitem limit 0,10 Page<CheckItem> page = checkItemDao.selectByCondition(queryString); long total = page.getTotal(); List<CheckItem> rows = page.getResult(); return new PageResult(total,rows); }
4.2.4 Dao接口
在CheckItemDao接口中扩展分页查询方法
public Page<CheckItem> selectByCondition(String queryString);
4.2.5 Mapper映射文件
在CheckItemDao.xml文件中增加SQL定义
<select id="selectByCondition" parameterType="String" resultType="com.itterence.pojo.CheckItem"> select * from t_checkitem <if test="value != null and value.length > 0"> where code = #{value} or name = #{value} </if> </select>
4.3分页查询bug修复
问题描述：在检查项和检查组页面进行分页查询时，如果不是在第一页，此时在查询输入框中输入过滤条件并点击查询按钮，无法查询到对应数据。
原因：因为页面不在第一页，所以导致点击查询按钮时根据条件进行分页查询，此时发送的ajax请求中currentPage不是1，导致查询不到对应记录。
解决思路：当点击查询按钮时需要将currentPage设置为1，再发送ajax请求根据条件进行分页查询。由于在页面中有多个地方都会调用到findPage方法，为了不对其他地方造成影响，需要为查询按钮单独扩展一个方法_findPage，在此方法中进行相应处理。
//点击查询按钮对应的查询 _findPage() { this.pagination.currentPage=1; this.findPage(); },
<el-button @click="_findPage()" class="dalfBut">查询</el-button>
5. 删除检查项
5.1 完善页面
为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户 点击确定按钮再提交删除请求。
5.1.1 绑定单击事件
需要为删除按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
// 删除 handleDelete(row) { alert(row.id); }
5.1.3 发送请求
如果用户点击确定按钮就需要发送ajax请求，并且将当前检查项的id作为参数提交到后台进行删除操作
// 删除 handleDelete(row) {//row其实是一个json对象，json对象的结构为{"age":"0-100","attention":"无","code":"0011","id":38,"name":"白细胞计数","price":10.0,"remark":"白细胞计数","sex":"0","type":"2"} //alert(row.id); this.$confirm("你确定要删除当前数据吗？","提示",{//确认框 type:'warning' }).then(()=>{ //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理 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.message); } }); }).catch(()=>{ this.$message({ type:'info', message:'操作已取消' }); }); }
5.2 后台代码
5.2.1 Controller
在CheckItemController中增加删除方法
//删除 @RequestMapping("/delete") public Result delete(Integer id){ try { checkItemService.delete(id); }catch (RuntimeException e){ return new Result(false,e.getMessage()); }catch (Exception e){ return new Result(false, MessageConstant.DELETE_CHECKITEM_FAIL); } return new Result(true,MessageConstant.DELETE_CHECKITEM_SUCCESS); }
5.2.2 服务接口
在CheckItemService服务接口中扩展删除方法
public void delete(Integer id);
5.2.3 服务实现类
注意：不能直接删除，需要判断当前检查项是否和检查组关联，如果已经和检查组进行了关联则不允许删除
//删除 public void delete(Integer id) throws RuntimeException{ //查询当前检查项是否和检查组关联 long count = checkItemDao.findCountByCheckItemId(id); if(count > 0){ //当前检查项被引用，不能删除 throw new RuntimeException("当前检查项被引用，不能删除"); } checkItemDao.deleteById(id); }
5.2.4 Dao接口
在CheckItemDao接口中扩展方法findCountByCheckItemId和deleteById
public void deleteById(Integer id); public long findCountByCheckItemId(Integer checkItemId);
5.2.5 Mapper映射文件
在CheckItemDao.xml中扩展SQL语句
</select> <!--根据检查项ID统计数据量--> <select id="findCountByCheckItemId" parameterType="int" resultType="long"> select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id} </select> <!--删除--> <delete id="deleteById" parameterType="int"> delete from t_checkitem where id = #{id} </delete>
6. 编辑检查项
6.1 完善页面
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按 钮将修改后的数据提交到后台进行数据库操作。
6.1.1 绑定单击事件
需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
// 弹出编辑窗口 handleUpdate(row) { alert(row); },
6.1.2 弹出编辑窗口回显数据
当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送ajax请求查询当前检查项数据用于回显
// 弹出编辑窗口 handleUpdate(row) { //回显数据，发送ajax请求根据ID查询当前检查项数据 axios.get("/checkitem/findById.do?id=" + row.id).then((res) => { if(res.data.flag){ //进行回显，基于VUE的数据绑定实现 this.formData = res.data.data; //弹出编辑窗口 this.dialogFormVisible4Edit = true; }else{ //查询失败，弹出提示 this.$message.error(res.data.message); } }); },
6.1.3 发送请求
在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit
<el-button type="primary" @click="handleEdit()">确定</el-button>
//编辑 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 }); }else{ //执行失败 this.$message.error(res.data.message); } }).finally(() => { //不管成功还是失败，都调用分页查询方法 this.findPage(); //隐藏编辑窗口 this.dialogFormVisible4Edit = false; }); }else{ //表单校验不通过 this.$message.error("表单数据校验失败!"); return false; } }); },
6.2 后台代码
6.2.1 Controller
在CheckItemController中增加编辑方法
//编辑检查项 @RequestMapping("/edit") public Result edit(@RequestBody CheckItem checkItem){ try{ checkItemService.edit(checkItem); }catch (Exception e){ e.printStackTrace(); //服务调用失败 return new Result(false, MessageConstant.EDIT_CHECKITEM_FAIL); } return new Result(true, MessageConstant.EDIT_CHECKITEM_SUCCESS); } @RequestMapping("/findById") public Result findById(Integer id){ try{ CheckItem checkItem = checkItemService.findById(id); return new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem); }catch (Exception e){ e.printStackTrace(); //服务调用失败 return new Result(false, MessageConstant.QUERY_CHECKITEM_FAIL); } }
6.2.2 服务接口
在CheckItemService服务接口中扩展编辑方法
public void edit(CheckItem checkItem); public CheckItem findById(Integer id);
6.2.3 服务实现类
在CheckItemServiceImpl实现类中实现编辑方法
//编辑 public void edit(CheckItem checkItem) { checkItemDao.edit(checkItem); } public CheckItem findById(Integer id) { return checkItemDao.findById(id); }
6.2.4 Dao接口
在CheckItemDao接口中扩展edit方法
public void edit(CheckItem checkItem); public CheckItem findById(Integer id);
6.2.5 Mapper映射文件
在CheckItemDao.xml中扩展SQL语句
<update id="edit" parameterType="com.itterence.pojo.CheckItem"> update t_checkitem <set> <if test="name != null"> name = #{name}, </if> <if test="sex != null"> sex = #{sex}, </if> <if test="code != null"> code = #{code}, </if> <if test="age != null"> age = #{age}, </if> <if test="price != null"> price = #{price}, </if> <if test="type != null"> type = #{type}, </if> <if test="attention != null"> attention = #{attention}, </if> <if test="remark != null"> remark = #{remark}, </if> </set> where id = #{id} </update> <select id="findById" parameterType="int" resultType="com.itterence.pojo.CheckItem"> select * from t_checkitem where id = #{id} </select>
