scope参数错误或没有scope权限_SSM 单体框架 - 前端开发：用户和权限模块
生活随笔
收集整理的這篇文章主要介紹了
scope参数错误或没有scope权限_SSM 单体框架 - 前端开发：用户和权限模块
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
用戶管理
分頁 & 條件查詢用戶數(shù)據(jù)
查詢條件
1. 用戶手機(jī)號(hào) 2. 注冊(cè)時(shí)間,包含開始日期和結(jié)束日期日期選擇器組件
在查詢條件中使用了 Element UI 中的日期選擇器：https://element.eleme.cn/#/zh-CN/component/date-picker#mo-ren-xian-shi-ri-qi
在測(cè)試項(xiàng)目中創(chuàng)建一個(gè) TestDate.vue 組件，復(fù)制代碼到頁面
<template><div><div class="block"><span class="demonstration">帶快捷選項(xiàng)</span><el-date-pickerv-model="dateTime"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="開始日期"end-placeholder="結(jié)束日期":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: "最近一個(gè)月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);}},{text: "最近三個(gè)月",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>功能實(shí)現(xiàn)
Users.vue
數(shù)據(jù)部分
// 數(shù)據(jù)部分 return {pickerOptions, // 日期選擇器選項(xiàng)設(shè)置total: 0, // 總條數(shù)size: 10, // 每頁顯示條數(shù)page: 1, // 當(dāng)前頁filter,users: [],loading: false,allocAdminId: "",allocDialogVisible: false,allocRoleIds: [],allRoleList: [] };JS 部分
created() {// 初始化用戶數(shù)據(jù)this.loadUsers(); } // 方法 1: 加載用戶數(shù)據(jù) loadUsers() {this.loading = true;// 設(shè)置參數(shù)const params = { currentPage: this.page, pageSize: this.size };// 過濾條件if (this.filter.username) params.username = this.filter.username;// 設(shè)置日期參數(shù)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);}// 請(qǐng)求后臺(tái)接口return axios.post("/user/findAllUserByPage", params).then((res) => {// 用戶數(shù)據(jù)this.users = res.data.content.list;this.total = res.data.content.total;this.loading = false;}).catch((err) => {this.$message("獲取數(shù)據(jù)失敗! ! !");}); },用戶狀態(tài)設(shè)置
狀態(tài)按鈕
<el-button size="mini" type="text" @click="handleToggleStatus(scope.row)">{{ scope.row.status == "ENABLE" ? "禁用" : "啟用" }}</el-button>JS 部分
// 修改用戶狀態(tài) 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("狀態(tài)修改失敗! ! !");}); },權(quán)限管理
角色管理
展示 & 查詢角色列表
角色組件是 Roles.vue，在該組件中對(duì)角色信息進(jìn)行管理
功能實(shí)現(xiàn)
1) 數(shù)據(jù)部分
data() {return {listQuery: { name: "" },list: null,listLoading: false,dialogVisible: false,role: Object.assign({}, defaultRole),isEdit: false}; },2) 鉤子函數(shù)，調(diào)用 loadRoles，獲取角色數(shù)據(jù)
created() {// 獲取角色列表this.loadRoles(); }, // 獲取角色數(shù)據(jù) loadRoles() {return axios.post("/role/findAllRole", this.listQuery).then(res => {this.list = res.data.content;this.listLoading = false;}).catch(err => {}); },3) 請(qǐng)求攜帶的參數(shù)是：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() {// 打開對(duì)話框this.dialogVisible = true;// false 修改操作this.isEdit = false;this.role = Object.assign({}, defaultRole); },3) 添加角色對(duì)話框，使用 v-model 進(jìn)行雙向數(shù)據(jù)綁定
<!-- 添加&修改 角色對(duì)話框 --> <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) 修改角色的方法
修改按鈕，點(diǎn)擊傳遞當(dāng)前行數(shù)據(jù)對(duì)象
<el-button size="mini" type="text" @click="handleUpdate(scope.row)">編輯</el-button>顯示對(duì)話框，回顯數(shù)據(jù)
// 修改角色彈窗 handleUpdate(row) {this.dialogVisible = true;this.isEdit = true;// 回顯數(shù)據(jù)this.role = Object.assign({}, row); },修改角色，還是調(diào)用的 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("是否要?jiǎng)h除該角色?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"}).then(() => {axios("/role/deleteRole?id=" + row.id).then(res => {this.loadRoles();}).catch(err => {this.$message.error("操作失敗! ! !");});}); },為角色分配菜單
需求分析
為角色分配菜單，一個(gè)角色可以擁有多個(gè)菜單權(quán)限
一個(gè)菜單權(quán)限也可以被多個(gè)角色擁有
角色與菜單之間的關(guān)系是多對(duì)多
點(diǎn)擊分配菜單，頁面展示效果
前端要實(shí)現(xiàn)的效果：
- 第一步：獲取到所有的菜單數(shù)據(jù)，在樹形控件中進(jìn)行展示
- 第二步：將當(dāng)前角色擁有的菜單權(quán)限，勾選上
菜單展示功能實(shí)現(xiàn)
1) 分配菜單按鈕，點(diǎn)擊傳遞當(dāng)前行數(shù)據(jù)
<el-button size="mini" type="text" @click="handleSelectMenu(scope.row)">分配菜單</el-button>2) 路由導(dǎo)航到 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) 數(shù)據(jù)部分
data() {return {// 菜單數(shù)據(jù)menuTreeList: [],// 被選中的菜單checkedMenuId: [],// 樹形結(jié)構(gòu)子節(jié)點(diǎn)設(shè)置defaultProps: {children: "subMenuList",label: "name"},roleId: null}; },6) 鉤子函數(shù)
// 鉤子函數(shù) 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);// 獲取樹形控件所需數(shù)據(jù)this.menuTreeList = res.data.content.parentMenuList;}); },// 方法 2：獲取當(dāng)前角色所擁有菜單列表 id getRoleMenu(roleId) {axios.get("/role/findMenuByRoleId?roleId=" + roleId).then(res => {console.log(res.data.content);// 將已有菜單權(quán)限設(shè)置為選中this.$refs.tree.setCheckedKeys(res.data.content);}); },分配菜單功能實(shí)現(xiàn)
分配菜單按鈕
<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;// 獲取所有被選中的節(jié)點(diǎn)const checkedNodes = this.$refs.tree.getCheckedNodes();// 定義常量保存被選中的菜單 idconst checkedMenuIds = [];if (checkedNodes != null && checkedNodes.length > 0) {// 遍歷獲取節(jié)點(diǎn)對(duì)象for (let i = 0; i < checkedNodes.length; i++) {const checkedNode = checkedNodes[i];// 保存菜單列表 idcheckedMenuIds.push(checkedNode.id);// 判斷：當(dāng)前節(jié)點(diǎn)為子節(jié)點(diǎn) && 其父 ID 在數(shù)組沒有出現(xiàn)過，就保存這個(gè)父 Idif (checkedNode.parentId !== -1 &&checkedMenuIds.filter(item => checkedNode.parentId).length === 0) {checkedMenuIds.push(checkedNode.parentId);}}}this.$confirm("是否分配菜單？", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"}).then(() => {// 準(zhǔn)備參數(shù)const params = {// 角色 IDroleId: this.roleId,// 當(dāng)前角色擁有的菜單權(quán)限 IDmenuIdList: checkedMenuIds};// 請(qǐng)求后臺(tái)axios.post("/role/RoleContextMenu", params).then(res => {this.$router.back();}).catch(err => {this.$message.error("權(quán)限分配失敗! ! !");});}); },菜單管理
菜單組件是 Menus.vue，在該組件中對(duì)菜單信息進(jìn)行管理
展示菜單列表
需求分析：菜單列表的展示是帶有分頁的
功能實(shí)現(xiàn)
1) 數(shù)據(jù)部分
data() {return {// 總條數(shù)total: 0,// 每頁顯示條數(shù)size: 10,// 當(dāng)前頁page: 1,// 廣告數(shù)據(jù)list: [],listLoading: true,// 菜單父 idparentId: 0}; },2) 鉤子函數(shù)
created() {// 獲取菜單列表this.loadMenuList(); }, // 方法 1：加載菜單列表數(shù)據(jù) 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("數(shù)據(jù)獲取失敗! ! !");}); },新增 & 修改菜單
路由跳轉(zhuǎn)流程
1) 新增按鈕，點(diǎn)擊跳轉(zhuǎn)
<el-button class="btn-add" @click="handleAddMenu()" size="mini">添加菜單</el-button> // 新增菜單跳轉(zhuǎn) 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 中完成菜單的新增與修改操作
需求分析
在打開新增菜單頁面后，需要展示一個(gè)下拉框，下拉框中的數(shù)據(jù)是所有的頂級(jí)父菜單
功能實(shí)現(xiàn)
1) 數(shù)據(jù)部分
data() {return {// 菜單對(duì)象menu,// 下拉列表數(shù)據(jù)selectMenuList: [],rules}; },2) 鉤子函數(shù)
在鉤子函數(shù)中會(huì)進(jìn)行判斷，如果是修改操作，就根據(jù) ID 查詢當(dāng)前菜單信息，以及父菜單信息
如果是新增操作，則只查詢父類菜單信息即可
created() {if (this.isEdit) {// 修改,回顯菜單信息const id = this.$route.query.id;// 獲取當(dāng)前菜單和父菜單信息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 顯示無上級(jí)菜單 (unshift 向數(shù)組的開頭添加一個(gè)元素)this.selectMenuList.unshift({ id: -1, title: "無上級(jí)菜單" });}).catch(err => {this.$message.error("數(shù)據(jù)獲取失敗! ! !");}); },3) 點(diǎn)擊保存
<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，在該組件中對(duì)資源信息進(jìn)行管理
展示 & 查詢資源列表
1) 展示資源數(shù)據(jù)帶有分頁
2) 查詢資源數(shù)據(jù)，查詢條件有三個(gè)
- 資源名稱
- 資源路徑
- 資源分類信息 - 下拉列表
3) 數(shù)據(jù)部分
// 查詢條件 const listQuery = {currentPage: 1,pageSize: 5,name: null,url: null,categoryId: null }; // 資源對(duì)象 const defaultResource = {id: null,name: null,url: null,categoryId: null,description: "" }; data() {return {// 查詢條件listQuery,total: 0,// 資源數(shù)據(jù)list: [],// 資源分類數(shù)據(jù)cateList: [],listLoading: false,dialogVisible: false,resource: Object.assign({}, defaultResource),isEdit: false,categoryOptions: [],defaultCategoryId: null}; },4) 鉤子函數(shù)
在鉤子函數(shù)中需要獲取資源，以及資源分類的數(shù)據(jù)
// 鉤子函數(shù) created() {// 獲取資源數(shù)據(jù)this.getResourceList();// 獲取資源分類數(shù)據(jù)this.getResourceCateList(); },getResourceList() 方法獲取的是資源信息
// 方法 1: 獲取資源數(shù)據(jù) 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("數(shù)據(jù)獲取失敗! ! !");}); },getResourceCateList() 方法獲取的是資源分類信息，在下拉框中展示
// 方法 2: 獲取資源分類數(shù)據(jù) 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("數(shù)據(jù)獲取失敗! ! !");}); },查詢
<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查詢搜索</el-button> // 查詢條件對(duì)象 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) 顯示添加資源表單的對(duì)話框
// 添加資源回顯 handleAdd() {// 顯示表單this.dialogVisible = true;// 新增為 falsethis.isEdit = false;// 資源對(duì)象this.resource = Object.assign({}, defaultResource);// 保存默認(rèn)分類 idthis.resource.categoryId = this.defaultCategoryId; },3) 資源分類信息使用下拉菜單進(jìn)行展示
v-model 的值為當(dāng)前被選中的 el-option 的 value 屬性值
- value 選項(xiàng)的值
- label 選項(xiàng)的標(biāo)簽名
- key 作為 value 唯一標(biāo)識(shí)的鍵名
4) 點(diǎn)擊保存
<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) 修改操作，參數(shù)是當(dāng)前行數(shù)據(jù)
<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); }, 想了解更多，歡迎關(guān)注我的微信公眾號(hào)：Renda_Zhang 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的scope参数错误或没有scope权限_SSM 单体框架 - 前端开发：用户和权限模块的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++ so 反射_c++如何实现反射功
- 下一篇： 联想计算机不能进入系统桌面,联想电脑装系