Java学习Day48:苦战小黄龙(基础增删改查新建)
1.新建体检:
设置点击按钮呼出提交表单以及表单数据校验规则
// 重置表单
resetForm() {
this.formData = {};
},
// 弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible = true;
}
dialogFormVisible: false,//增加表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
rules: {//校验规则
code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}
数据发送:
handleAdd () {
//对数据检查项编码和名字,再次校验
//dataAddForm 新增检查项目中打开对话框中的 ref的属性值
/**
* validate函数是Vue框架自己的表单验证方法
* validate(val) val校验的结果,传递匿名函数
* val值是true,验证成功
*/
this.$refs["dataAddForm"].validate(val=>{
if (!val){
//提示用户验证失败
this.$message({
type:"error",
message:"请填写数据"
});
return;
}
//向服务器发请求,提交新增检查项目的表单数据
axios.post("/CheckItem/addCheckItem.do",this.formData).then(response=>{
//判断请求状态 {"flag":true,"message":"新增检查项成功","data":null}
console.log(response.data);
if (response.data.flag){
this.$message({
type: "success",
message:response.data.message,
});
//关闭对话框,清空原有历史数据
this.dialogFormVisible = false;
this.formData = {};
}
}).catch(response=>{
console.log("##########")
});
});
},
1. this.$refs['dataAddForm']
$refs
: Vue.js 中的$refs
是一个对象,包含所有注册的 DOM 元素或子组件的引用。当在 Vue 的模板中使用ref
属性时,可以通过$refs
访问这些元素或组件。dataAddForm
: 这里dataAddForm
是一个在 Vue 模板中使用ref
属性定义的表单组件(例如,<el-form ref="dataAddForm">
)。通过$refs['dataAddForm']
可以访问这个表单组件。
2. validate((valid) => { ... })
validate
方法: 这是 Element UI 中表单组件(<el-form>
)提供的一个方法。它用于对表单字段进行验证。调用这个方法时,组件会自动检查所有的表单字段是否满足定义的验证规则。- 回调函数
(valid) => { ... }
:validate
方法接受一个回调函数作为参数,valid
是一个布尔值,表示表单的验证结果:true
: 表示表单数据验证通过。false
: 表示表单数据验证失败。
3. 验证流程
在这个代码片段中,验证的整体流程如下:
-
调用验证: 当执行
this.$refs['dataAddForm'].validate((valid) => { ... })
时,validate
方法开始检查表单字段的有效性。 -
验证结果:
-
如果表单数据验证通过(即
valid
为true
):- 发送 AJAX 请求,使用
axios.post
将this.formData
提交到后台接口/checkitem/add.do
。 - 根据响应结果,隐藏对话框(
this.dialogFormVisible = false
)并显示成功或错误的消息。 - 无论请求成功还是失败,最终都会调用
this.findPage()
方法,通常用于刷新或重新加载数据。
- 发送 AJAX 请求,使用
-
如果表单数据验证失败(即
valid
为false
):- 显示一个错误消息,提示用户表单数据未通过验证。
- 通过
return false
终止后续操作。
-
@Autowired
private checkServices checkServices;
@PostMapping("addCheckItem")
public Result addCheckItem(@RequestBody Checkitem checkItem) {
System.out.println(checkItem.toString());
int a = checkServices.addCheckitem(checkItem);
//响应页面端
return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS,a);
}
2.检查组分页
1.定义分页相关模型数据
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
2 定义分页方法
在页面中提供了findPage方法用于分页查询,为了能够在checkgroup.html页面加载后直接可以展示分页数据,可以在VUE提供的钩子函数created中调用findPage方法
分页需要信息:每页几条数据、查询第几页
findPage() {
//分页参数
var param = {
currentPage:this.pagination.currentPage,//页码
pageSize:this.pagination.pageSize,//每页显示的记录数
queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/checkgroup/findPage.do",param).then((response)=> {
//为模型数据赋值,基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
});
}
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<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>
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<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>
3 服务实现类
在CheckGroupServiceImpl服务实现类中实现分页查询方法,基于Mybatis分页助手插件实现分页
public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
PageHelper.startPage(currentPage,pageSize);
Page<CheckItem> page = checkGroupMapper.selectByCondition(queryString);
return new PageResult(page.getTotal(),page.getResult());
}
分页后端结构如下:
分页代码
Page<JavaBean> 获取page对象
从page对象中回传前端需要的totle和result
3. 编辑检查组
思路:编辑检查组除了编辑检查组本身的数据,还要顾及检查组对应的检查项,一旦检查组改变,检查组和检查项对应的中间表的数据也要被改变
1.更新CheckGroup本身数据;
2.获取更改的CheckGroup的id,传输回去中间表,删除所有与CheckGroupid对应的双线绑定数据
3.将前端选择的CheckGroup中包含的CheckItem的id列表回传,使用循环插入,每次传入CheckGroup的id以及遍历链表中的CheckItem的id,循环补全中间表;
1.弹出编辑窗口回显数据
当前页面的编辑窗口已经提供好了,默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来,并且需要发送多个ajax请求分别查询当前检查组数据、所有检查项数据、当前检查组包含的检查项id用于基本数据回显
handleUpdate(row) {
//发送ajax请求根据id查询检查组信息,用于基本信息回显
axios.get("/checkgroup/findById.do?id=" + row.id).then((res)=>{
if(res.data.flag){
//弹出编辑窗口
this.dialogFormVisible4Edit = true;
//默认选中第一个标签页
this.activeName='first';
//为模型数据赋值,通过VUE数据双向绑定进行信息的回显
this.formData = res.data.data;
//发送ajax请求查询所有的检查项信息,用于检查项表格展示
axios.get("/checkitem/findAll.do").then((res)=> {
if(res.data.flag){
//为模型数据赋值,通过VUE数据双向绑定进行信息的回显
this.tableData = res.data.data;
//查询当前检查组包含的所有检查项id,用于页面回显
axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?id=" + row.id).then((res)=> {
//为模型数据赋值,通过VUE数据双向绑定进行信息的回显
if(res.data.flag){
this.checkitemIds = res.data.data;
}else{
this.$message.error(res.data.message);
}
});
}else{
this.$message.error(res.data.message);
}
});
}else{
this.$message.error("获取数据失败,请刷新当前页面");
}
});
}
2.在CheckGroupServiceImpl实现类中实现编辑方法
public CheckGroup findById(Integer id) {
return checkGroupMapper.findById(id);
}
public List<Integer> findCheckItemIdsByCheckGroupId(Integer id) {
return checkGroupMapper.findCheckItemIdsByCheckGroupId(id);
}
//编辑检查组,同时需要更新和检查项的关联关系
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
//根据检查组id删除中间表数据(清理原有关联关系)
checkGroupMapper.deleteAssociation(checkGroup.getId());
//向中间表(t_checkgroup_checkitem)插入数据(建立检查组和检查项关联关系)
setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);
//更新检查组基本信息
checkGroupMapper.edit(checkGroup);
}
//向中间表(t_checkgroup_checkitem)插入数据(建立检查组和检查项关联关系)
public void setCheckGroupAndCheckItem(Integer checkGroupId,Integer[] checkitemIds){
if(checkitemIds != null && checkitemIds.length > 0){
for (Integer checkitemId : checkitemIds) {
Map<String,Integer> map = new HashMap<>();
map.put("checkgroup_id",checkGroupId);
map.put("checkitem_id",checkitemId);
checkGroupMapper.setCheckGroupAndCheckItem(map);
}
}
}
3.在CheckGroupMapper.xml中扩展SQL语句
<select id="findById" parameterType="int" resultType="com.easthome.pojo.CheckGroup">
select * from t_checkgroup where id = #{id}
</select>
<select id="findCheckItemIdsByCheckGroupId" parameterType="int" resultType="int">
select checkitem_id from t_checkgroup_checkitem where checkgroup_id = #{id}
</select>
<!--向中间表插入数据(建立检查组和检查项关联关系)-->
<insert id="setCheckGroupAndCheckItem" parameterType="hashmap">
insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
values
(#{checkgroup_id},#{checkitem_id})
</insert>
<!--根据检查组id删除中间表数据(清理原有关联关系)-->
<delete id="deleteAssociation" parameterType="int">
delete from t_checkgroup_checkitem where checkgroup_id = #{id}
</delete>
<!--编辑-->
<update id="edit" parameterType="com.easthome.pojo.CheckGroup">
update t_checkgroup
<set>
<if test="name != null">
name = #{name},
</if>
<if test="sex != null">
sex = #{sex},
</if>
<if test="code != null">
code = #{code},
</if>
<if test="helpCode != null">
helpCode = #{helpCode},
</if>
<if test="attention != null">
attention = #{attention},
</if>
<if test="remark != null">
remark = #{remark},
</if>
</set>
where id = #{id}
</update>