1. 提交选中的权限
1.1 前端提交数据的方法中,this.$myPut方法的第一个参数是服务器访问的路径,第二个参数是一个payload,这里是通过这一路径向服务器发送的一个数组,数组内是选中的权限编号。
//设置权限
setModule(){
this.$confirm('您确实要更新用户权限吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{ //正向操作后的逻辑
//this.$myPut方法的第二个参数表示向服务器传送的数据,是以payload方式发送的
this.$myPut('security/module/setModule/' + this.moduleUser.u_id, this.menuIdList);
this.dialogFormVisible = false;
}).catch(()=>{ //负向操作后的逻辑
this.$message('操作已取消');
})
}
1.2 后端Controller中,@RequestBody说明的参数用于接受payload方式提交的JSON数据
@PutMapping("/setModule/{u_id}")
public Result setModule(@PathVariable String u_id, @RequestBody Integer[] moduleIds) {
securityModuleService.setModule(u_id, moduleIds);
return Result.success("用户" + u_id + "的权限已被更新成功!");
}
1.3 对于payload传来数组的情况,MyBatis提供了动态SQL的机制,在mapper文件中可以使用foreach循环生成SQL语句。
其中,collection属性是数组的名称,item是自定义的单个参数名称,提供给下面#{}使用,separator为SQL语句的分隔符,一般是逗号。
<insert id="insertUserModules">
insert into t_um(u_id, m_id) values
<foreach collection="moduleIds" item="moduleId" separator="," open="" close="">
(#{u_id}, #{moduleId})
</foreach>
</insert>
2. 显示员工信息
2.1 表单中可以添加一个Element UI提供的自定义验证规则,这里验证月薪是否为数字。
在data中定义:
const CHECKNUM = (rule, value, callback) => {
if (!value) {
return callback(new Error('不能为空'));
} else if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
callback();
}
};
返回值:
queryRules: {
e_sal_start: [{ validator: CHECKNUM, trigger: 'blur' }],
e_sal_end: [{ validator: CHECKNUM, trigger: 'blur' }]
}
代表失去焦点时验证,如果失败则阻止提交表单。
2.2 可以使用v-for动态生成下拉框的选项。
<el-option v-for="dep in depList" :key="dep.d_id" :label="dep.d_name" :value="dep.d_id"></el-option>
2.3 对按钮使用@click.prevent属性,阻止它的默认操作(向其他页面提交表单),改为自己想要的操作,这里是显示第1页的数据。
<el-button type="primary" icon="el-icon-search" @click.prevent="getPage(1)">查询</el-button>
2.4 表单获取服务器传来的数据时,除了Vue提供的$refs用于获取表单,Element UI提供了validate方法用于自动验证。
getPage(pageNum){
this.$refs['queryForm'].validate((ok)=>{
if(ok) {
this.$myGet("info/emp")
.then((data)=>{
this.list = data;
})
} else{
this.$message.error('查询条件不正确');
}
})
}
Java Spring Boot + Vue 实习项目10:查询界面选项布局
最新推荐文章于 2024-04-12 17:13:54 发布
本文介绍了前端如何使用Vue.js组件和自定义验证规则提交用户权限,并利用MyBatis的动态SQL更新数据。后端通过接收JSON数据并调用服务更新权限。同时,展示了如何动态生成下拉框选项,使用ElementUI的表单验证及事件处理,实现查询功能。
摘要由CSDN通过智能技术生成