总结
今天具体做了三个功能新建、查询、编辑
1 编辑功能
- 当点击确定按钮向后台发送ajax请求传递检查组和检查组对应的检查项id
- 后台接受数据之后最数据库进行添加操作即可
<!--添加检查组数据-->
<insert id="add" parameterType="com.itheima.pojo.CheckGroup">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
select LAST_INSERT_ID()
</selectKey>
insert into t_checkgroup(code, name, helpCode, sex, remark, attention)
VALUES (#{code}, #{name}, #{helpCode}, #{sex}, #{remark}, #{attention})
</insert>
- 注意在添加组的时候需要获取到每次添加检查组对应的检查项的id
2 编辑功能
- 点击需要弹框,然后就是回显数据
- 所以在点击的时候就需要发送一个异步请求
- 获取当前编辑项的id对应的检查项后台查询之后给出一个成功的回调函数封装到vue所绑定的数据模型里面,然后将数据选然到页面上
- 然后将编辑的数据点击确定发送异步请求传递给后台修改数据
- 因为这次编辑是检查组,所以需要携带每个检查组所带的检查项的id就需要传递两个参数
checkitemIds: [],//新增和编辑表单中检查项对应的复选框,基于双向绑定可以进行回显和数据提交 formData: {},//表单数据
- 给后台操作修改的sql语句 但是在这里需要注意的是每添加一行检查组另一个检查项的id需要自动增长,所以需要获取检查项的id
<!--添加检查组数据-->
<insert id="add" parameterType="com.itheima.pojo.CheckGroup">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
select LAST_INSERT_ID()
</selectKey>
insert into t_checkgroup(code, name, helpCode, sex, remark, attention)
VALUES (#{code}, #{name}, #{helpCode}, #{sex}, #{remark}, #{attention})
</insert>
- 然后在业务层里面删除检查组和检查项对应的中间表的关系,在重新建立关系所以这里有两个修改的语句
@Override
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
//修改检查组的基本信息,操作检查组t_checkgroup表
checkgroupDao.edit(checkGroup);
//清理当前检查组关联的检查项,操作中间表t_checkgroup_checkitem表
checkgroupDao.deleteAssociation(checkGroup.getId());
//重新建立当前检查组和检查项的关联关系
Integer checkGroupId = checkGroup.getId();
this.setCheckGroupAndCheItem(checkGroupId, checkitemIds);
}
- 注意编辑功能在发送异步请求的时候需要三次发送异步请求
- 当点击编辑按钮的时候根据当前id查询到需要编辑的检查项进行回显
- 回显之后再次发送ajax请求查询所有的检查组所对应的检查项
- 查询检查项之后在异步请求查询该检查组所对应检查项的id进行勾选
3 查询功能
- 将需要查询的数据存放到queryString中
- 点击查询之后发送ajax异步请求传递三个参数
- 当前页、每页显示的行数、和查询得条件
- 传递到后台之后对数据库进行动态查询
- 如果是查询的操作就按条件查询,如果不是查询的操作就分页查询
为什么不做删除操作呢?
如果需要删除检查组的话就需要删除检查组对应的检查项这里需要级联删除