SSM+VUE项目（传智健康）|03-预约管理-检查项管理的增删改查页面完善 spring|java

1.分页查询页面 1.1 前端页面修改
文章图片

前端分页数据绑定pagination，我们初始化pagination。

el: '#app', data:{ pagination: {//分页相关模型数据 currentPage: 1,//当前页码 pageSize:10,//每页显示的记录数 total:0,//总记录数 queryString:null//查询条件 }, dataList: [],//当前页要展示的分页列表数据

分页方法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((response)=> { //为模型数据赋值，基于VUE的双向绑定展示到页面 this.dataList = response.data.rows; this.pagination.total = response.data.total; }); },

这块除了页面初始化，点击查询和分页切换的时候也会触发

文章图片

//切换页码 handleCurrentChange(currentPage) { //currentPage为切换后的页码 this.pagination.currentPage = currentPage; this.findPage(); }

1.2 后台代码 1.2.1Controller
【SSM+VUE项目（传智健康）|03-预约管理-检查项管理的增删改查页面完善】在CheckItemController中增加分页查询方法

package com.liu.controller; /** * @author liu * @create 2022-07-11 19:15 */import com.alibaba.dubbo.config.annotation.Reference; import com.liu.entity.PageResult; import com.liu.entity.QueryPageBean; import com.liu.pojo.CheckItem; import com.liu.constant.MessageConstant; import com.liu.entity.Result; import com.liu.service.CheckItemService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * 体检检查项管理 */ @RestController @RequestMapping("/checkitem") public class CheckItemController {@Reference private CheckItemService checkItemService; //新增 @RequestMapping("/addCheckitem") public Result add(@RequestBody CheckItem checkItem){ try { checkItemService.add(checkItem); }catch (Exception e){ return new Result(false,MessageConstant.ADD_CHECKITEM_FAIL); } return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS); }//分页查询 @RequestMapping("/findPage") public PageResult findPage(@RequestBody QueryPageBean queryPageBean){ PageResult pageResult = checkItemService.pageQuery( queryPageBean.getCurrentPage(), queryPageBean.getPageSize(), queryPageBean.getQueryString()); return pageResult; } }

1.2.2 服务接口和实现类
在CheckItemService服务接口中扩展分页查询方法

PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString);

在CheckItemServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页
PageHelper的使用方法

@Override public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) { PageHelper.startPage(currentPage,pageSize); Page page = checkItemDao.selectByCondition(queryString); return new PageResult(page.getTotal(),page.getResult()); }

1.2.3 Dao接口
在CheckItemDao接口中扩展分页查询方法

Page selectByCondition(String value);

在CheckItemDao.xml文件中增加SQL定义

id="selectByCondition" parameterType="string" resultType="com.liu.pojo.CheckItem"> select * from t_checkitem code = #{value} or name like concat('%',#{value},'%')

1.2.4 测试
在这里插入图片描述
2.删除检查项 2.1 前端页面修改

文章图片

// 删除 handleDelete(row) { alert(JSON.stringify(row)); }

文章图片

我们点击删除，能拿到这一行的数据，我们根据主键删除
完整代码

handleDelete(row) { // alert(JSON.stringify(row)); this.$confirm("确认删除当前选中记录吗？","提示",{type:'warning'}).then(()=>{ //点击确定按钮时只需此处代码 axios.get("/checkitem/delete.do?id=" + row.id).then((res)=> { if(!res.data.flag){ //删除失败 this.$message.error(res.data.message); }else{ //删除成功 this.$message({ message: res.data.message, type: 'success' }); //调用分页，获取最新分页数据 this.findPage(); } }); }); }

2.2 后台代码 2.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); }

2.2.2 服务接口和实现类
接口

void delete(Integer id);

实现类

@Override public void delete(Integer id) { //查询当前检查项是否和检查组关联 long count = checkItemDao.findCountByCheckItemId(id); if(count > 0){ //当前检查项被引用，不能删除 throw new RuntimeException("当前检查项被引用，不能删除"); } checkItemDao.deleteById(id); }

2.2.3 Dao接口
在CheckItemDao接口中扩展方法findCountByCheckItemId和deleteById

public long findCountByCheckItemId(Integer id); public void deleteById(Integer id);

Mapper映射文件

delete from t_checkitem where id = #{id} id="findCountByCheckItemId" resultType="long" parameterType="int"> select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id}

2.2.4 测试

文章图片

3.编辑检查项 3.1 前端页面修改点击编辑，触发handleUpdate方法。
防止页面未刷新，点击编辑首先查询，看当前数据数据库是否存在。存在则回写到编辑页面。

handleUpdate(row) { //发送请求获取检查项信息 axios.get("/checkitem/findById.do?id=" + row.id).then((res)=>{ if(res.data.flag){ //设置编辑窗口属性，dialogFormVisible4Edit为true表示显示 this.dialogFormVisible4Edit = true; //为模型数据设置值，基于VUE双向数据绑定回显到页面 this.formData = https://www.it610.com/article/res.data.data; }else{ this.$message.error("获取数据失败，请刷新当前页面"); } }); }

点击编辑页面确定，触发 handleEdit方法

//编辑 handleEdit() { //表单校验 this.$refs['dataEditForm'].validate((valid)=>{ if(valid){ //表单校验通过，发送请求 axios.post("/checkitem/edit.do",this.formData).then((response)=> { //隐藏编辑窗口 this.dialogFormVisible4Edit = false; if(response.data.flag){ //编辑成功，弹出成功提示信息 this.$message({ message: response.data.message, type: 'success' }); }else{ //编辑失败，弹出错误提示信息 this.$message.error(response.data.message); } }).finally(()=> { //重新发送请求查询分页数据 this.findPage(); }); }else{ //表单校验失败 this.$message.error("表单数据校验失败"); return false; } }); }

3.2 后台代码 3.2.1 Controller
在CheckItemController中增加findById和编辑方法

//编辑 @RequestMapping("/edit") public Result edit(@RequestBody CheckItem checkItem){ try { checkItemService.edit(checkItem); }catch (Exception e){ 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); returnnew Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem); }catch (Exception e){ e.printStackTrace(); //服务调用失败 return new Result(false, MessageConstant.QUERY_CHECKITEM_FAIL); } }

3.2.2 服务接口和实现类
在CheckItemService服务接口中扩展编辑方法

public void edit(CheckItem checkItem); public CheckItem findById(Integer id);

在CheckItemServiceImpl实现类中实现编辑方法

@Override public void edit(CheckItem checkItem) { checkItemDao.edit(checkItem); }@Override public CheckItem findById(Integer id) { return checkItemDao.findById(id); }

3.2.3 Dao接口

public void edit(CheckItem checkItem); public CheckItem findById(Integer id);

在CheckItemDao.xml中扩展SQL语句

update t_checkitem name = #{name}, sex = #{sex}, code = #{code}, age = #{age}, price = #{price}, type = #{type}, attention = #{attention}, remark = #{remark}, where id = #{id}