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(); }
//分页查询 findPage() { //分页参数 var param = { currentPage:this.pagination.currentPage,//页码 pageSize:this.pagination.pageSize,//每页需要显示的记录数 queryString:this.pagination.queryString//查询条件 }; //请求后台 axios.post("/checkItem/findPage.do",param).then( res=>{ //为模型数据赋值,基于VUE的双向绑定展示到页面上 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);
4.2.3 服务实现类
在CheckItemServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页
//分页查询 @Override public PageResult pageQuery(QueryPageBean queryPageBean) { Integer currentPage = queryPageBean.getCurrentPage();//当前页 Integer pageSize = queryPageBean.getPageSize();//每页显示的条数 String queryString = queryPageBean.getQueryString();//查询条件 //解决一个小bug:当在当前页搜索非当前页的内容时,出现查找不到的情况.. //解决办法:如果搜索的由内容时,则从第一个开始进行搜索.. if(queryString!=null&&queryString.trim().length()!=0){// currentPage = 1; } // if(queryString!=null&&queryString.trim()!=""){//这样不可以,为什么呢?? // currentPage = 1; // } //完成分页查询,基于Mybatis框架提供的分页助手插件完成 PageHelper.startPage(currentPage,pageSize); //底层基于ThreadLocal,最后会形成limt语句,追加到sql后面 Page <CheckItem> page = checkItemMapper.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.itheima.pojo.CheckItem"> select * from t_checkitem <if test="value != null and value.length > 0"> where code = #{value} or name = #{value} </if> </select>
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.2 弹出确认操作提示
用户点击删除按钮会执行handleDelete方法，此处需要完善handleDelete方法，弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果
// 删除 handleDelete(row) { //alert(row.id); this.$confirm("确认删除当前选中记录吗？","提示", {type:'warning'} ).then(()=>{ //点击确定按钮时只需此处代码 alert('用户点击的是确定按钮'); }).catch(()=>{ alert('用户点击的是取消按钮'); }) }
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进行处理 //alert("用户点击了确认..") 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.deleteById(id); }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 服务实现类
注意：不能直接删除，需要判断当前检查项是否和检查组关联，如果已经和检查组进行了关联则不允许删除
//删除检查项 @Override public void deleteById(Integer id) { //查询当前检查项是否和检查组关联 Integer count = checkItemMapper.findCountByCheckItemId(id); if (count>0){ //当前项被引用,不能删除 throw new RuntimeException("当前项被引用,不能删除");//抛出异常,controller返回操作失败.. } checkItemMapper.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语句
<!--删除--> <delete id="deleteById" parameterType="int"> delete from t_checkitem where id = #{id} </delete> <!--根据检查项id查询中间关系表--> <select id="findCountByCheckItemId" resultType="long" parameterType="int"> select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id} </select>
