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}
重新编译，重启测试即可
4.源代码 这是目前框架搭建和检查项管理的增删改查页面完善的完整代码
源代码
推荐阅读
- java|Vue 2.7 正式发布，代号为 Naruto
- java|java 异步缓存_为什么redis在java是同步缓存，而在nodejs是异步缓存（）
- #|使用 Spring Cloud Config 统一管理配置，别再到处放配置文件了！
- JavaSE|【Java小游戏】俄罗斯方块
- 数据结构|【数据结构】优先级队列 - 堆
- JavaSE|【JavaSE】数组
- 即时通讯源码对企业到底有多重要呢（）
- 牛客刷题集锦|『牛客|每日一题』模板栈
- 后端|分布式锁用 Redis 还是 Zookeeper（看完你就明白了）