【项目六】用户 角色 权限 数据交互

最新推荐文章于 2024-07-04 17:40:38 发布
最新推荐文章于 2024-07-04 17:40:38 发布
阅读量305 收藏 1
点赞数
文章标签： 交互 javascript 前端
zhang_chao96@163.com
本文链接：https://blog.csdn.net/qq_45815947/article/details/128644691
版权

文章目录

用户管理

用户列表

在这里插入图片描述
1 表格内数据的显示
接口 http://kg.zhaodashen.cn/mt/admin/users/index.jsp
参数 pagenum pagesize uname start_time end_time
a 定义接口
在这里插入图片描述
b 将接口参数写成对象方便后期搜索 以及分页调用

   params: {
        pagenum: 1,
        pagesize: 5,
        uname: "",
        start_time: "",
        end_time: "",
      },

c 调用接口 请求数据

 created() {
    this.init();
  },
 init() {
    getUsersApi(this.params).then((res) => {
    // 表格数据
      this.tableData = res.data.list;
      // 分页的最大页数
      this.tableDataTotal = parseFloat(res.data.total);
    });
  },

后台返回数据
在这里插入图片描述
2 分页

分页组件自带的函数
点击第几页进行跳转
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.init();
      console.log(`当前页: ${val}`);
    },

3关键字查询

直接给input绑定数据
点击调用接口
<el-input v-model="params.uname">
  <el-button slot="append" icon="el-icon-search" @click="init()">
  </el-button>
</el-input>

4 日期搜索
在绑定数据
监听time

  watch: {
    time(newTime, oldTime) {
      //   console.log(newTime);
      if (newTime != null && newTime.length == 2) {
        this.params.start_time = newTime[0];
        this.params.end_time = newTime[1];
        this.init();
      } else {
        this.params.start_time = "";
        this.params.end_time = "";
        this.init();
      }
    },
  },

5 删除
接口 http://kg.zhaodashen.cn/mt/admin/users/delete.jsp
参数 user_id


 给删除按钮绑定点击事件
  click: (row) => {
         this.delFn(row.user_id);
     },

    delFn(row) {
      this.confirmFn(async () => {
        let res = await deleteUsersApi({ user_id: row });
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.init();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

6 修改用户信息
1 表单数据的回显
在这里插入图片描述
点击修改用户后出现表单 内容根据当前行数据显示
点击获取当前行数据
将数据传入子 弹框
讲数据继续传给封装的form 组件
**注意当前行数据的字段要和我们封装的字段一样 不然数据无法显示

点击修改用户获取当前行数据
 click: (row) => {
     this.dialogState = true;
      // this.passwd_answer = row.passwd_answer;
      // this.passwd_question = row.passwd_question;
      this.row = row;
      console.log(row);
   },
传给子
 <UsersEdit :state="dialogState" @close="dialogState = false" :row="row" />

传给我们封装的form
  <zc-form
      v-if="state"
      :width="80"
      :formItem="formItem"
      :formBtns="formBtns"
      :row="row"
    ></zc-form>

2 修改用户
接口 http://kg.zhaodashen.cn/mt/admin/users/update.jsp
参数 user_id username password question answer mobile sex
点击创建请求接口 函数处理

      click: async (formData) => {
	       let res = await putUsersApi(formData);
	        if (res.meta.state == 200) {
	          this.$message.success(res.meta.msg);
	          this.$parent.$parent.$parent.init();
	          this.$parent.$parent.$parent.state = false;
	        } else {
	          this.$message.error(res.meta.msg);
	        }
	        console.log(res);
      },

7 分配角色
1 弹框数据回显
和上面的数据回显一样，就是父传子数据
2 角色下拉框接口请求
在这里插入图片描述
接口 http://kg.zhaodashen.cn/mt/admin/roles/index.jsp
参数 无

  async created() {
    let res = await getRolesApi();
    if (res.meta.state == 200) {
      this.formItem[2].payload = res.data.map((item) => {
        return {
          label: item.role_name,
          value: item.role_id,
        };
      });
    }
  },

3 分配角色接口
接口 http://kg.zhaodashen.cn/mt/admin/users/assign.jsp
参数 user_id role_id

   click: async (formData) => {
     let res = await postCreateUsersApi(formData);
     if (res.meta.state == 200) {
	       this.$message.success(res.meta.msg);
	       this.$parent.$parent.$parent.init();
	       this.$parent.$parent.$parent.state = false;
     } else {
       	   this.$message.error(res.meta.msg);
     }
   },

给用户分配角色 给角色分配权限

用户创建

在这里插入图片描述

获取数据 请求接口
接口 http://kg.zhaodashen.cn/mt/admin/users/create.jsp
参数 username password mobile question answer

   click: async (formData) => {
        let res = await postCreateUsersApi(formData);
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.$parent.$parent.$parent.init();
          this.$parent.$parent.$parent.state = false;
        } else {
          this.$message.error(res.meta.msg);
        }
      },

角色管理

角色列表

接口 http://kg.zhaodashen.cn/mt/admin/roles/index.jsp
参数 无
在这里插入图片描述
1 角色列表数据
a 定义接口

export const getRolesApi = (params) => {
  return request({
    url: "/roles/index.jsp",
    method: "get",
    params,
  });
};

b 请求接口

  created() {
    this.init();
  },

  methods: {
    async init() {
      let res = await getRolesApi();
      //   console.log(res);
      this.tableData = res.data;
    },
 }

c 使用接口数据渲染到页面
在这里插入图片描述
2 删除角色
接口 http://kg.zhaodashen.cn/mt/admin/roles/delete.jsp
参数 role_id
a 定义接口

export const deleteRolesApi = (params) => {
  return request({
    url: "/roles/delete.jsp",
    method: "delete",
    params,
  });
};

b 使用接口
给删除按钮绑定点击事件

 click: (row) => {
    this.delFn(row.role_id);
   },

函数内调用接口

    delFn(role_id) {
      this.confirmFn(async () => {
        // this.$message.success("等待请求接口");
        let res = await deleteRolesApi({ role_id });
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.init();
        } else {
        }
      });
    },

3 编辑角色
3.1 编辑数据回显
在这里插入图片描述
思路 点击编辑 将当前行数据传递给子 对话框 在子中 在将数据传递给封装的form组件 注意字段的对应
在这里插入图片描述

 click: (row) => {
     this.RoleEditState = true;
      this.row = row;
      console.log(row);
    },

将数据层层传递
RoleEdit在Role组件内 zc-form在RoleEdit组件内

   <!-- 角色编辑 -->
    <RoleEdit
      :state="RoleEditState"
      @close="RoleEditState = false"
      :row="row"
      :init="init"
    />
    <!-- 角色编辑 -->

    <zc-form
      :width="80"
      :formItem="formItem"
      :formBtns="formBtns"
      :row="row"
    ></zc-form>

3.2 角色编辑
接口 http://kg.zhaodashen.cn/mt/admin/roles/update.jsp
参数 role_id role_name role_describe
1定义接口

export const updateRolesApi = (params) => {
  return request({
    url: "/roles/update.jsp",
    method: "put",
    data: qs.stringify(params),
  });
};

2 请求接口
给创建绑定点击事件 传递接口需要的参数

  click: async (formData) => {
        let res = await updateRolesApi(formData);
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.init();
          this.close();
        } else {
          this.$message.error(res.meta.msg);
        }
      },

4 分配权限
4.1 分配权限-权限列表显示
接口 http://kg.zhaodashen.cn/mt/admin/auth/index.jsp
参数 无
a 定义接口

export const getAuthApi = () => {
  return request({
    url: "/auth/index.jsp",
    method: "get",
  });
};

b 请求接口 渲染数据

  async created() {
    let res = await getAuthApi();
    if (res.meta.state == 200) {
      this.treeData = res.data;
    } else {
      this.$message.error(res.meta.msg);
    }
  },

接口数据
在这里插入图片描述

4.2 权限的状态回显
在这里插入图片描述

关键就是传递的row 里面有el-tree 需要的值

  node-key="auth_id"
    :default-checked-keys="
      row.auth_ids_son ? row.auth_ids_son.split(',') : []
    "

4.3 分配权限
定义接口 http://kg.zhaodashen.cn/mt/admin/roles/assign.jsp
请求接口 这里关键是对 参数的处理 role_id auth_ids auth_ids_son

export const putAssignRolesApi = (params) => {
  return request({
    url: "/roles/assign.jsp",
    method: "put",
    data: qs.stringify(params),
  });
};

先选好分配的权限
获取选中的节点
对参数进行处理

    async submitFn() {
      let chooseData = this.$refs.tree.getCheckedNodes();
      console.log(chooseData, 11111111111);
      let allFatherSonIds = [];
      let allSonIds = [];
      chooseData.forEach((item) => {
        // 找到子元素
        if (item.auth_pid != 0) {
          allFatherSonIds.push(item.auth_id);
          allFatherSonIds.push(item.auth_pid);

          allSonIds.push(item.auth_id);
        }
      });
      //去重
      allFatherSonIds = [...new Set(allFatherSonIds)];
      let res = await putAssignRolesApi({
        role_id: this.row.role_id,
        auth_ids: allFatherSonIds.join(","),
        auth_ids_son: allSonIds.join(","),
      });
      this.init();
      this.close();
    },

角色创建

在这里插入图片描述
接口 http://kg.zhaodashen.cn/mt/admin/roles/create.jsp
参数 role_name role_describe
定义接口

export const postRolesApi = (params) => {
  return request({
    url: "/roles/create.jsp",
    method: "post",
    data: qs.stringify(params),
  });
};

请求接口
点击创建 收集参数 请求接口

    click: async (formData) => {
        let res = await postRolesApi(formData);
        console.log(res);
        if (res.meta.state == 201) {
          this.$message.success(res.meta.msg);
          this.$router.push("/roles");
        } else {
          this.$message.error(res.meta.msg);
        }
      },

权限管理

权限列表

在这里插入图片描述
1 获取权限列表 上面已描述
2 删除
接口 http://kg.zhaodashen.cn/mt/admin/auth/delete.jsp
参数 auth_id
定义接口

export const deleteAuthApi = (params) => {
  return request({
    url: "/auth/delete.jsp",
    method: "delete",
    params,
  });
};

请求接口
给删除按钮绑定点击事件 请求接口

    async delFn(node, data) {
      console.log(node, data);
      //   this.$message.warning("等待接口");
      let res = await deleteAuthApi({ auth_id: data.auth_id });
      if (res.meta.state == 200) {
        this.$message.success(res.meta.msg);
        this.init();
      }
    },

3 编辑状态数据回显
在这里插入图片描述
给编辑按钮绑定点击事件 传递当前行数据
auths 父 editAuth子组件 zc-form 子组件

    edit(node, data) {
      this.authRow = data;
      this.authRow.keep_alive =
        this.authRow.keep_alive == 0 ? "不缓存" : "缓存";
      if (data.auth_pid != 0) {
        this.authRow.father = data.auth_pname + "_" + data.auth_pid;
      }
      this.authState = true;
    },

  <editAuth
      :state="authState"
      @close="authState = false"
      :authRow="authRow"
    />

   <zc-form
      v-if="state"
      :width="140"
      :formItem="formItem"
      :formBtns="formBtns"
      :row="authRow"
    ></zc-form>

所属权限下拉数据

    getAuthApi().then((res) => {
      this.formItem[2].payload = res.data.map((item, index) => {
        return {
        //value这样写 因为后续我们需要参数
          value: item.auth_pname + "_" + item.auth_pid,
          label: item.auth_name,
        };
      });
    });

在这里插入图片描述

5 对权限的编辑
接口 http://kg.zhaodashen.cn/mt/admin/auth/update.jsp
参数 auth_id / auth_name / auth_pid / auth_pname / url / keep_alive / component
定义接口

export const putAuthApi = (params) => {
  return request({
    url: "/auth/update.jsp",
    method: "put",
    data: qs.stringify(params),
  });
};

主要就是对参数的处理
关键是 value的值 的拼接 然后再取出

      click: async (formData) => {
          let res = await putAuthApi(formData);
           formData.auth_pid = formData.father
             ? formData.father.split("_")[0]
             : "";
           formData.auth_pname = formData.father
             ? formData.father.split("_")[1]
             : "";
           if (res.meta.state == 200) {
             this.$message.success(res.meta.msg);
           } else {
             this.$message.error(res.meta.msg);
           }
         },
        },

权限创建

在这里插入图片描述
接口 http://kg.zhaodashen.cn/mt/admin/auth/create.jsp
参数 auth_name / auth_pid / auth_pname / url / keep_alive / component
定义接口

export const postAuthApi = (params) => {
  return request({
    url: "/auth/create.jsp",
    method: "post",
    data: qs.stringify(params),
  });
};

请求接口

 click: async (formData) => {
      formData.auth_pid = formData.father? formData.father.split("_")[0]: "";
      formData.auth_pname = formData.father ？ formData.father.split("_")[1]: "";
      let res = await postAuthApi(formData);
      console.log(res);
      if (res.meta.state == 201) {
        this.$message.success(res.meta.msg);
      } else {
        this.$message.error(res.meta.msg);
      }
    },
        },

将我们写的串起来

1 创建角色
在这里插入图片描述
在这里插入图片描述
2 用户创建
在这里插入图片描述在这里插入图片描述
3 给用户分配角色
在这里插入图片描述
在这里插入图片描述
4 修改用户
在这里插入图片描述
在这里插入图片描述
5 修改角色
在这里插入图片描述
在这里插入图片描述
6 给角色分配权限
在这里插入图片描述
在这里插入图片描述
权限这快主要和动态路由相关 我们后期再说

爱玩亚索的程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于角色的菜单按钮权限的设计及实现
君一席
01-14 1269
1、菜单权限的设计 5个表的建立：用户表、角色表、菜单表、用户角色表、角色菜单表 后台动态加载json数据给前台。 这里的json数据，就是菜单栏的数据（就是通过后台数据查询找出当前用户拥有哪些菜单） 用户（操作员、管理员、超级管理员）只能看到自己对应的菜单数据 思路：sql语句加上对应的where条件 ，来对查询到的所有数据做进一步的筛选。 2、实现步骤： 设计表结构， 依次往菜单表、角色表、用户表中加入数据， 根据页面需要的数据，设计webapi接口方法， 通过网页操作将数据加入角色菜单 rel_r
一套高颜值的权限管理系统UI
欧菲丽的博客
01-17 732
本项目是一套权限管理系统的用户界面(UI)实现，采用 JavaFX 技术开发。该系统的用户界面参考了若依前端框架基于 RuoYi-Vue 的设计风格，旨在提供一套免费使用的权限管理系统。采用 mvvmFX 框架，该框架基于 MVVM (Model-View-ViewModel) 架构模式，用于实现数据绑定和视图模型的管理。使用 atlantafx 主题库，该主题库提供了一套现代化、响应式的用户界面风格，帮助美化系统的外观和用户体验。
RBAC用户角色权限设计方案
08-03
用户角色权限设计方案
用户、角色、权限、菜单--数据库设计
zgscwxd的博客
07-15 4956
role_id------------角色ID（自定义）可设置唯一索引UNIQUE。user_id--------------用户ID（可设置唯一索引UNIQUE）is_deleted---- -------状态（0：未删除 1：删除）style----------------样式（可设置css图标）id------------------------主键。id---------------------主键。remark-----------------说明。
【用户角色权限设计】
W664160450的博客
05-12 3448
用户角色权限设计结构： 用户表， 用户角色关联表， 角色表， 角色菜单关联表， 菜单表， 角色权限关联表， 权限表， 员工表， 员工角色关联表 这几张表涵盖了用户体系，角色体系，和权限体系以及菜单体系。 ...
数据权限方案设计(后端)
用键盘与世界交流
01-26 1631
数据权限设计方案
项目一5 对用户分配角色 用户登录 构造权限数据 日志
AdamCafe的博客
06-18 1429
# 回顾 角色管理 模块管理 分配权限( ztree, 构造ztree的json数据,分配权限 ) 1 分配角色 1.1 进入分配页面 实现步骤: 根据用户id查询用户数据 查询所有的角色数据 根据用户id查询此用户的所有角色数据 循环构造用户所有角色的id字符串 controller service dao 1.2 实现角色分配 当传递同名参数的时候,在controlle...
用户角色权限重新开放下载
05-29
开发者可以通过Layui的数据渲染和事件绑定，实现用户角色权限的动态展示和交互。 数据库资源和数据库设计文档在用户角色权限系统中起着核心作用。数据库通常包含用户表、角色表和权限表，三者之间通过外键关联。...
Java layui 用户角色权限源码
04-19
在用户角色权限系统中，Layui的表格、表单、按钮等元素可以用于展示和操作用户、角色和权限数据。同时，Layui的Ajax支持使得前后端交互更为便捷，可以实现动态加载和异步更新。 数据库资源是这类系统的基础，通常...
java用户角色权限
06-25
这个"java用户角色权限" demo旨在提供一个基础框架，来理解用户、角色和权限之间的交互关系。 首先，让我们详细探讨一下这三个核心概念： 1. **用户（User）**：在系统中，用户是实际的使用者，可能是管理员、普通...
权限 用户 角色 管理系统 源码 内附表结构
02-25
在这个"权限 用户 角色 管理系统 源码 内附表结构"的项目中，我们将深入探讨这一领域的关键概念。 首先，我们来看"权限"。权限是系统赋予用户的特定操作能力，比如读取、写入、删除等。权限管理是通过设置规则来...
java web实现用户权限管理
09-03
3. **数据交互**： - 当用户选择或取消选择资源时，ZTree的`check`事件会被触发，可以获取到选中的节点信息。 - `ajaxSubmit`函数用于将选定的资源ID集合发送到后台，更新角色资源关联表。 4. **后台处理**： - ...
flea-auth使用之角色权限设计初识
Huazie
11-18 383
角色权限设计
根据角色进行权限控制
xiaosongwahaha的博客
01-01 2479
Spring security实现登录验证+权限控制          上面这篇文章中是通过赋予admin账户URL来禁止其他用户访问，这样过于死板，现在用赋予每个角色可以访问的URL，然后将用户与URL绑定，来进行URL访问控制，前面的文章 根据角色加载菜单的思路（推荐使用） 是通过角色控制菜单是否显示，但是仅仅那样是不够的，还要通过控制URL的访问来进一步进行URL访问控制
基于角色的权限管理系统--前端登录数据js加密后端解密（DES）
热门推荐
程高伟
10-26 1万+
前端DES与MD5加密,采用CryptoJS v3.1.2，后端java解密
用户角色权限、按钮控制功表及返回数据格式
inexaustible的博客
09-05 1041
用户角色权限、按钮控制功能实现
用户-角色-权限设计【笔记】
packdge_black的博客
08-01 3512
简要介绍RBAC模型
Axure教程：App侧边抽屉菜单交互制作
最新发布
07-04 357
调整菜单1的尺寸，并输入文字“菜单1”。2、双击动态面板，设置动态面板名称：“菜单1”，添加2个动态面板状态，分别命名为：收起、展开。选择“切换面板状态”动作，设置“菜单1”切换到“展开”状态，选择“推动/拉动元件”属性。添加“菜单1-收起”的鼠标悬停、选中样式，分别设置字体颜色：蓝色，填充颜色：浅灰色。1、将“菜单1-展开”复制作为子菜单，修改名称部件文字，并命名为：子菜单1。2、设置子菜单1的鼠标单击事件，选择“设置选中”动作，配置选中当前元件。2、“展开”状态页中，将矩形的名称改为“菜单1-展开”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱玩亚索的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值