1、角色管理界面
2、数据加载
如下图,当点击左侧菜单-角色管理的按钮,前端调用api接口
http://localhost:1024/dev-api/system/role/list?pageNum=1&pageSize=10
接口返回json数据,数据格式如下:
3、前端界面展示对应的代码
1、顶部搜索栏,使用el-form表单使用 elementui的表单标签,下面是搜索的按钮,搜索按钮绑定点击事件,事件处理的函数是handleQuery
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},2、table列表
列表展示使用el-table标签进行数据加载
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="角色编号" prop="roleId" width="120" /> </el-table>
其中table加载的数据是:data="roleList" roleList 的赋值操作是,在页面创建的时候调用,如下图代码
created() { this.getList();
},getList() { this.loading = true;
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.roleList = response.rows; this.total = response.total; this.loading = false;
}
);
},// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
method: 'get',
params: query
})
}上述完整后台请求url是
GET http://localhost:1024/dev-api/system/role/list?pageNum=1&pageSize=10
其中query的参数是pageNum=1&pageSize=10
4、后端java代码
api类路径如下:
@PreAuthorize("@ss.hasPermi('system:role:list')")@GetMapping("/list")public TableDataInfo list(SysRole role)
{
startPage();
List<SysRole> list = roleService.selectRoleList(role); return getDataTable(list);
}roleService是一个服务类封装,调用mybatis的roleMapper接口
/**
* 根据条件分页查询角色数据
*
* @param role 角色信息
* @return 角色数据集合信息
*/@Override@DataScope(deptAlias = "d")
public List<SysRole> selectRoleList(SysRole role)
{ return roleMapper.selectRoleList(role);
}roleMapper是跟SysRoleMapper.xml的id=selectRoleList绑定
所以上述的调用roleMapper.selectRoleList(role);函数,实际则执行上述的sql,查询角色的列表信息。
5、状态停用启动拆解
1、界面实现的控件
<el-table-column label="状态" align="center" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" ></el-switch> </template> </el-table-column>
如上述代码,状态使用el-switch开关插件,开值对应代码是active-value="0",关闭对应代码是inactive-value="1"
点击修改状态,事件绑定函数是@change="handleStatusChange(scope.row)",参数传值是被选中的记录。
// 角色状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function() {
return changeRoleStatus(row.roleId, row.status);
}).then(() => { this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === "0" ? "1" : "0";
});
},this.$modal.confirm弹出提示窗界面,确认就调用changeRoleStatus函数,实现修改角色状态
// 角色状态修改
export function changeRoleStatus(roleId, status) { const data = {
roleId,
status
} return request({ url: '/system/role/changeStatus', method: 'put', data: data
})
}如上述是修改状态的api接口请求封装
5、状态停用启动后台代码
/**
* 状态修改
*/@PreAuthorize("@ss.hasPermi('system:role:edit')")@Log(title = "角色管理", businessType = BusinessType.UPDATE)@PutMapping("/changeStatus")
public AjaxResult changeStatus(@RequestBody SysRole role)
{ roleService.checkRoleAllowed(role); roleService.checkRoleDataScope(role.getRoleId()); role.setUpdateBy(getUsername()); return toAjax(roleService.updateRoleStatus(role));
}如上述是状态修改的接口,其中从RequestBody获取SysRole的参数。
<update id="updateRole" parameterType="SysRole">
update sys_role
<set>
<if test="roleName != null and roleName != ''">role_name = #{roleName},</if>
<if test="roleKey != null and roleKey != ''">role_key = #{roleKey},</if>
<if test="roleSort != null">role_sort = #{roleSort},</if>
<if test="dataScope != null and dataScope != ''">data_scope = #{dataScope},</if>
<if test="menuCheckStrictly != null">menu_check_strictly = #{menuCheckStrictly},</if>
<if test="deptCheckStrictly != null">dept_check_strictly = #{deptCheckStrictly},</if>
<if test="status != null and status != ''">status = #{status},</if>
<if test="remark != null">remark = #{remark},</if>
<if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
update_time = sysdate()
</set> where role_id = #{roleId}
</update>如上述是更新角色状态的sql,其中通过<if test="roleName != null and roleName != ''">条件判断,如果roleName不为null或者不为空,则执行更新,否则忽略。
6、未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表