scope参数错误或没有scope权限_SSM 单体框架 - 前端开发：用户和权限模块

用户管理

分页 & 条件查询用户数据

查询条件

1. 用户手机号
2. 注册时间,包含开始日期和结束日期

日期选择器组件

在查询条件中使用了 Element UI 中的日期选择器：https://element.eleme.cn/#/zh-CN/component/date-picker#mo-ren-xian-shi-ri-qi

在测试项目中创建一个 TestDate.vue 组件，复制代码到页面

<template><div><div class="block"><span class="demonstration">带快捷选项</span><el-date-pickerv-model="dateTime"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker><el-button type="primary" @click="getDate">查询</el-button></div></div>
</template>

<script>
export default {data() {return {pickerOptions: {shortcuts: [{text: "最近一周",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", [start, end]);}},{text: "最近一个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);}},{text: "最近三个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit("pick", [start, end]);}}]},dateTime: ""};},methods: {getDate() {const params = {};params.startCreateTime = this.dateTime[0];params.startCreateTime.setHours(0);params.startCreateTime.setMinutes(0);params.startCreateTime.setSeconds(0);params.endCreateTime = this.dateTime[1];params.endCreateTime.setHours(23);params.endCreateTime.setMinutes(59);params.endCreateTime.setSeconds(59);console.log(params);}}
};
</script>

功能实现

Users.vue

数据部分

// 数据部分
return {pickerOptions, // 日期选择器选项设置total: 0, // 总条数size: 10, // 每页显示条数page: 1, // 当前页filter,users: [],loading: false,allocAdminId: "",allocDialogVisible: false,allocRoleIds: [],allRoleList: []
};

JS 部分

created() {// 初始化用户数据this.loadUsers();
}
// 方法 1: 加载用户数据
loadUsers() {this.loading = true;// 设置参数const params = { currentPage: this.page, pageSize: this.size };// 过滤条件if (this.filter.username) params.username = this.filter.username;// 设置日期参数if (this.filter.resTime) {params.startCreateTime = this.filter.resTime[0];params.startCreateTime.setHours(0);params.startCreateTime.setMinutes(0);params.startCreateTime.setSeconds(0);
params.endCreateTime = this.filter.resTime[1];params.endCreateTime.setHours(23);params.endCreateTime.setMinutes(59);params.endCreateTime.setSeconds(59);}// 请求后台接口return axios.post("/user/findAllUserByPage", params).then((res) => {// 用户数据this.users = res.data.content.list;this.total = res.data.content.total;this.loading = false;}).catch((err) => {this.$message("获取数据失败! ! !");});
},

用户状态设置

状态按钮

<el-button size="mini" type="text" @click="handleToggleStatus(scope.row)">{{ scope.row.status == "ENABLE" ? "禁用" : "启用" }}</el-button>

JS 部分

// 修改用户状态
handleToggleStatus(item) {return axios.get("/user/updateUserStatus", {params: {id: item.id,status: item.status}}).then(res => {// debugger;console.log(res.data.content);item.status = res.data.content;}).catch(err => {this.$message.error("状态修改失败! ! !");});
},

权限管理

角色管理

展示 & 查询角色列表

角色组件是 Roles.vue，在该组件中对角色信息进行管理

功能实现

1) 数据部分

data() {return {listQuery: { name: "" },list: null,listLoading: false,dialogVisible: false,role: Object.assign({}, defaultRole),isEdit: false};
},

2) 钩子函数，调用 loadRoles，获取角色数据

created() {// 获取角色列表this.loadRoles();
},
// 获取角色数据
loadRoles() {return axios.post("/role/findAllRole", this.listQuery).then(res => {this.list = res.data.content;this.listLoading = false;}).catch(err => {});
},

3) 请求携带的参数是：listQuery

<el-input v-model="listQuery.name" class="input-width" placeholder="角色名称" clearable></el-input>
// 条件查询
handleSearchList() {this.loadRoles();
},

添加 & 修改角色

1) 页面部分

<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加角色</el-button>

2) 打开添加角色窗口的方法

// 添加角色弹窗
handleAdd() {// 打开对话框this.dialogVisible = true;// false 修改操作this.isEdit = false;this.role = Object.assign({}, defaultRole);
},

3) 添加角色对话框，使用 v-model 进行双向数据绑定

<!-- 添加&修改 角色对话框 -->
<el-dialog :title="isEdit?'编辑角色':'添加角色'" :visible.sync="dialogVisible" width="40%"><el-form :model="role" label-width="150px" size="small"><el-form-item label="角色名称："><el-input v-model="role.name" style="width: 250px"></el-input></el-form-item><el-form-item label="角色编码："><el-input v-model="role.code" style="width: 250px"></el-input></el-form-item><el-form-item label="描述："><el-input v-model="role.description" type="textarea" :rows="5" style="width: 250px"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false" size="small">取 消</el-button><el-button type="primary" @click="handleSave()" size="small">确 定</el-button></span>
</el-dialog>

4) 添加角色方法

// 添加 & 修改角色
handleSave() {axios.post("/role/saveOrUpdateRole", this.role).then(res => {this.dialogVisible = false;this.loadRoles();}).catch(error => {this.$message.error("保存课程信息失败! ! !");});
},

5) 修改角色的方法

修改按钮，点击传递当前行数据对象

<el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>

显示对话框，回显数据

// 修改角色弹窗
handleUpdate(row) {this.dialogVisible = true;this.isEdit = true;// 回显数据this.role = Object.assign({}, row);
},

修改角色，还是调用的 handleSave 方法

删除角色

<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>

使用到了 Element UI 中的 MessageBox 弹框：https://element.eleme.cn/#/zh-CN/component/message-box#options

handleDelete(row) {this.$confirm("是否要删除该角色?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {axios("/role/deleteRole?id=" + row.id).then(res => {this.loadRoles();}).catch(err => {this.$message.error("操作失败! ! !");});});
},

为角色分配菜单

需求分析

为角色分配菜单，一个角色可以拥有多个菜单权限

一个菜单权限也可以被多个角色拥有

角色与菜单之间的关系是多对多

点击分配菜单，页面展示效果

前端要实现的效果：

第一步：获取到所有的菜单数据，在树形控件中进行展示
第二步：将当前角色拥有的菜单权限，勾选上

菜单展示功能实现

1) 分配菜单按钮，点击传递当前行数据

<el-button size="mini" type="text" @click="handleSelectMenu(scope.row)">分配菜单</el-button>

2) 路由导航到 allocMenu

// 为角色分配菜单
handleSelectMenu(row) {this.$router.push({ path: "/allocMenu", query: { roleId: row.id } });
},

3) routes.js

{path: "allocMenu",name: "AllocMenu",component: () => import(/* webpackChunkName: 'allocMenu' */"../views/PermissionManage/AllocMenu"),meta: { requireAuth: true, title: "角色菜单管理" }
},

4) 在 AllocMenu.vue 组件中完成为角色分配菜单操作

5) 数据部分

data() {return {// 菜单数据menuTreeList: [],// 被选中的菜单checkedMenuId: [],// 树形结构子节点设置defaultProps: {children: "subMenuList",label: "name"},roleId: null};
},

6) 钩子函数

// 钩子函数
created() {// 获取路由携带的 idthis.roleId = this.$route.query.roleId;// 获取菜单列表this.treeList();// 获取角色所拥有的菜单信息this.getRoleMenu(this.roleId);
},
// 方法 1：获取菜单列表，使用树形控件展示
treeList() {axios.get("/role/findAllMenu").then(res => {console.log(res.data.content);// 获取树形控件所需数据this.menuTreeList = res.data.content.parentMenuList;});
},// 方法 2：获取当前角色所拥有菜单列表 id
getRoleMenu(roleId) {axios.get("/role/findMenuByRoleId?roleId=" + roleId).then(res => {console.log(res.data.content);// 将已有菜单权限设置为选中this.$refs.tree.setCheckedKeys(res.data.content);});
},

分配菜单功能实现

分配菜单按钮

<div style="margin-top: 20px" align="center"><el-button type="primary" @click="handleSave()">保存</el-button><el-button @click="handleClear()">清空</el-button>
</div>

方法

// 方法 3：修改角色所拥有的菜单列表
handleSave() {// debugger;// 获取所有被选中的节点const checkedNodes = this.$refs.tree.getCheckedNodes();// 定义常量保存被选中的菜单 idconst checkedMenuIds = [];if (checkedNodes != null && checkedNodes.length > 0) {// 遍历获取节点对象for (let i = 0; i < checkedNodes.length; i++) {const checkedNode = checkedNodes[i];// 保存菜单列表 idcheckedMenuIds.push(checkedNode.id);// 判断：当前节点为子节点 && 其父 ID 在数组没有出现过，就保存这个父 Idif (checkedNode.parentId !== -1 &&checkedMenuIds.filter(item => checkedNode.parentId).length === 0) {checkedMenuIds.push(checkedNode.parentId);}}}this.$confirm("是否分配菜单？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {// 准备参数const params = {// 角色 IDroleId: this.roleId,// 当前角色拥有的菜单权限 IDmenuIdList: checkedMenuIds};// 请求后台axios.post("/role/RoleContextMenu", params).then(res => {this.$router.back();}).catch(err => {this.$message.error("权限分配失败! ! !");});});
},

菜单管理

菜单组件是 Menus.vue，在该组件中对菜单信息进行管理

展示菜单列表

需求分析：菜单列表的展示是带有分页的

功能实现

1) 数据部分

data() {return {// 总条数total: 0,// 每页显示条数size: 10,// 当前页page: 1,// 广告数据list: [],listLoading: true,// 菜单父 idparentId: 0};
},

2) 钩子函数

created() {// 获取菜单列表this.loadMenuList();
},
// 方法 1：加载菜单列表数据
loadMenuList() {this.listLoading = true;return axios.get("/menu/findAllMenu", {params: {currentPage: this.page,pageSize: this.size}}).then(res => {this.list = res.data.content.list;this.total = res.data.content.total;this.listLoading = false;}).catch(error => {this.$message.error("数据获取失败! ! !");});
},

新增 & 修改菜单

路由跳转流程

1) 新增按钮，点击跳转

<el-button class="btn-add" @click="handleAddMenu()" size="mini">添加菜单</el-button>
// 新增菜单跳转
handleAddMenu() {this.$router.push("/addMenu");
},

2）AddMenu.vue 组件中引入了 MenuDetail

<template>
<menu-detail :is-edit='false'></menu-detail>
</template>
<script>import MenuDetail from './MenuDetail'export default {name: 'addMenu',title: '添加菜单',components: { MenuDetail }}
</script>

3) MenuDetail.vue 中完成菜单的新增与修改操作

需求分析

在打开新增菜单页面后，需要展示一个下拉框，下拉框中的数据是所有的顶级父菜单

功能实现

1) 数据部分

data() {return {// 菜单对象menu,// 下拉列表数据selectMenuList: [],rules};
},

2) 钩子函数

在钩子函数中会进行判断，如果是修改操作，就根据 ID 查询当前菜单信息，以及父菜单信息

如果是新增操作，则只查询父类菜单信息即可

created() {if (this.isEdit) {// 修改,回显菜单信息const id = this.$route.query.id;// 获取当前菜单和父菜单信息this.findMenuInfoById(id);} else {// 新增this.menu = {};// 获取父类菜单信息this.findMenuInfoById(-1);}
},
// 方法 1: 添加或修改的回显，下拉父菜单
findMenuInfoById(id) {axios.get("/menu/findMenuInfoById?id=" + id).then(res => {// debugger;console.log(res.data);// 判断不为 null，修改操作需要回显if (res.data.content.menuInfo != null) {this.menu = res.data.content.menuInfo;}// 获取到父菜单信息，保存到 selectMenuListthis.selectMenuList = res.data.content.parentMenuList.map(item => {return { id: item.id, title: item.name };});// -1 显示无上级菜单 (unshift 向数组的开头添加一个元素)this.selectMenuList.unshift({ id: -1, title: "无上级菜单" });}).catch(err => {this.$message.error("数据获取失败! ! !");});
},

3) 点击保存

<el-button type="primary" @click="handleSave()">提交</el-button>
// 保存菜单
handleSave() {this.$refs.form.validate(valid => {if (!valid) return false;axios.post("/menu/saveOrUpdateMenu", this.menu).then(res => {this.$router.back();}).catch(error => {this.$message.error("保存课程信息失败! ! !");});});
}

资源管理

资源组件是 Resources.vue，在该组件中对资源信息进行管理

展示 & 查询资源列表

1) 展示资源数据带有分页

2) 查询资源数据，查询条件有三个

资源名称
资源路径
资源分类信息 - 下拉列表

3) 数据部分

// 查询条件
const listQuery = {currentPage: 1,pageSize: 5,name: null,url: null,categoryId: null
};
// 资源对象
const defaultResource = {id: null,name: null,url: null,categoryId: null,description: ""
};
data() {return {// 查询条件listQuery,total: 0,// 资源数据list: [],// 资源分类数据cateList: [],listLoading: false,dialogVisible: false,resource: Object.assign({}, defaultResource),isEdit: false,categoryOptions: [],defaultCategoryId: null};
},

4) 钩子函数

在钩子函数中需要获取资源，以及资源分类的数据

// 钩子函数
created() {// 获取资源数据this.getResourceList();// 获取资源分类数据this.getResourceCateList();
},

getResourceList() 方法获取的是资源信息

// 方法 1: 获取资源数据
getResourceList() {this.listLoading = true;axios.post("/resource/findAllResource", this.listQuery).then(res => {this.list = res.data.content.list;this.total = res.data.content.total;this.listLoading = false;}).catch(err => {this.$message.error("数据获取失败! ! !");});
},

getResourceCateList() 方法获取的是资源分类信息，在下拉框中展示

// 方法 2: 获取资源分类数据
getResourceCateList() {axios.get("/ResourceCategory/findAllResourceCategory").then(res => {this.cateList = res.data.content;// 遍历获取资源分类for (let i = 0; i < this.cateList.length; i++) {const cate = this.cateList[i];// 将资源分类名与 id 保存到 categoryOptions 中，供下拉列表展示this.categoryOptions.push({ label: cate.name, value: cate.id });}this.defaultCategoryId = this.cateList[0].id;}).catch(err => {this.$message.error("数据获取失败! ! !");});
},

查询

<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
// 查询条件对象
const listQuery = {currentPage: 1,pageSize: 5,name: null,url: null,categoryId: null
};
// 查询按钮
handleSearchList() {this.getResourceList();
},

新增 & 修改资源

1) 添加按钮

<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>

2) 显示添加资源表单的对话框

// 添加资源回显
handleAdd() {// 显示表单this.dialogVisible = true;// 新增为 falsethis.isEdit = false;// 资源对象this.resource = Object.assign({}, defaultResource);// 保存默认分类 idthis.resource.categoryId = this.defaultCategoryId;
},

3) 资源分类信息使用下拉菜单进行展示

v-model 的值为当前被选中的 el-option 的 value 属性值

value 选项的值
label 选项的标签名
key 作为 value 唯一标识的键名

<el-form-item label="资源分类："><el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px"><el-option v-for="item in categoryOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</el-form-item>

4) 点击保存

<el-button type="primary" @click="handleSave()" size="small">确 定</el-button>
// 添加 & 修改资源
handleSave() {axios.post("/resource/saveOrUpdateResource", this.resource).then(res => {this.dialogVisible = false;this.getResourceList();}).catch(error => {this.$message.error("操作失败! ! !");});
},

5) 修改操作，参数是当前行数据

<el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>

6) 回显操作

// 编辑资源 回显
handleUpdate(row) {// debugger;this.dialogVisible = true;this.isEdit = true;this.resource = Object.assign({}, row);
},

想了解更多，欢迎关注我的微信公众号：Renda_Zhang