spring boot+iview 前后端分离架构之角色管理增删改的实现（十七）

小鱼儿 2021-12-19 02:21 188阅读 0赞

### spring boot 与 iview 前后端分离架构之角色管理增删改的实现（十七） ###

*  公众号
 *  角色管理
 *   *  新增角色
     *  修改角色
     *  删除角色

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg17】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 角色管理 #

通过上一章我们已经完成了角色管理的列表的编写，接着上一章的代码，我们本章将实现角色的增删改的功能，同时在增删改的时候同步实现角色与菜单之间的关联关系。

## 新增角色 ##

首先打开我们的前端工程，接着在role目录底下创建一个addRole.vue文件，该文件实现新增角色的功能，该文件编写好以后的代码如下：

<template>
      <Modal v-model="show" title="新增角色" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="roleForm" :model="roleForm" :rules="roleFormRule">
          <Row>
            <Col span="11">
              <FormItem label="角色名称" prop="roleName">
                <Input type="text" :maxlength=50 v-model="roleForm.roleName" placeholder="请输入角色名称"/>
              </FormItem>
              <FormItem label="角色编码" prop="roleCode">
                <Input type="text" :maxlength=50 v-model="roleForm.roleCode" placeholder="请输入角色编码"/>
              </FormItem>
            </Col>
            <Col span="2">
            </Col>
            <Col span="11">
              <Tree :data="roleForm.roleTrees" show-checkbox ref="roleTree"></Tree>
            </Col>
          </Row>
    
        </Form>
      </Modal>
    </template>
    <script>
    
      import {addRole, checkRoleCodeAndName, loadTree} from '../../../api/sys/role/role.api'
    
      export default {
        name: "addRole",
        props: {
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            roleForm: {
              roleName: '',
              roleCode: '',
              roleTrees: []
            },
            roleFormRule: {
              roleName: [
                {required: true, message: '请输入角色名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '角色名称最大长度为50', trigger: 'blur'},
                {
                  validator: this.checkRoleName({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ],
              roleCode: [
                {required: true, message: '请输入角色编码', trigger: 'blur'},
                {type: 'string', max: 50, message: '角色编码最大长度为50', trigger: 'blur'},
                {
                  validator: this.checkRoleCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          checkRoleCode() {
            return function (rule, value, callback) {
              let roleCode = value;
              checkRoleCodeAndName({roleCode}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('角色编码重复'));
                }
              });
            }
          },
          checkRoleName() {
            let _this = this;
            return function (rule, value, callback) {
              let roleName = value;
              checkRoleCodeAndName({roleName}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('角色名称重复'));
                }
              });
            }
          },
          ok() {
            this.$refs['roleForm'].validate((valid) => {
              if (valid) {
                addRole({
                  roleName: this.roleForm.roleName,
                  roleCode: this.roleForm.roleCode,
                  roleTrees: JSON.stringify(this.roleForm.roleTrees)
                }).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('handleSearch');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证失败');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          closeModal(val) {
            this.$emit('input', val);
          },
          initTree() {
            const _this = this;
            loadTree({}).then(res => {
              _this.roleForm.roleTrees = res.obj;
            });
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['roleForm'].resetFields();
              this.initTree();
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        },
        mounted() {
          this.initTree()
        }
      }
    </script>

接着我们在roleList.vue中引入我们的新增角色的组件，新增的代码如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着我们将我们的项目运行起来，我们可以看到如下的页面，则说明我们的新增角色已经实现了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

## 修改角色 ##

在role目录底下创建一个editRole.vue文件，该文件实现修改角色的功能，该文件编写好以后的代码如下：

<template>
      <Modal v-model="show" title="修改角色" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="roleForm" :model="roleForm" :rules="roleFormRule">
          <Row>
            <Col span="11">
              <FormItem label="角色名称" prop="roleName">
                <Input type="text" :maxlength=50 v-model="roleForm.roleName" placeholder="请输入角色名称"/>
              </FormItem>
              <FormItem label="角色编码" prop="roleCode">
                <Input type="text" :maxlength=50 v-model="roleForm.roleCode" placeholder="请输入角色编码"/>
              </FormItem>
            </Col>
            <Col span="2">
            </Col>
            <Col span="11">
              <Tree :data="roleForm.roleTrees" show-checkbox ref="roleTree"></Tree>
            </Col>
          </Row>
    
        </Form>
      </Modal>
    </template>
    <script>
    
      import {updateRole, checkRoleCodeAndName, getRoleByRoleId} from '../../../api/sys/role/role.api'
    
      export default {
        name: "editRole",
        props: {
          roleId: {
            type: String
          },
          value: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            roleForm: {
              roleId: '',
              roleName: '',
              roleCode: '',
              roleTrees: []
            },
            roleFormRule: {
              roleName: [
                {required: true, message: '请输入角色名称', trigger: 'blur'},
                {type: 'string', max: 50, message: '角色名称最大长度为50', trigger: 'blur'},
                {
                  validator: this.checkRoleName({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ],
              roleCode: [
                {required: true, message: '请输入角色编码', trigger: 'blur'},
                {type: 'string', max: 50, message: '角色编码最大长度为50', trigger: 'blur'},
                {
                  validator: this.checkRoleCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          checkRoleCode() {
            let _this = this;
            return function (rule, value, callback) {
              let roleCode = value;
              let roleId = _this.roleForm.roleId
              checkRoleCodeAndName({roleCode, roleId}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('角色编码重复'));
                }
              });
            }
          },
          checkRoleName() {
            let _this = this;
            return function (rule, value, callback) {
              let roleName = value;
              let roleId = _this.roleForm.roleId
              checkRoleCodeAndName({roleName, roleId}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('角色名称重复'));
                }
              });
            }
          },
          ok() {
            this.$refs['roleForm'].validate((valid) => {
              if (valid) {
                updateRole({
                  roleId: this.roleForm.roleId,
                  roleName: this.roleForm.roleName,
                  roleCode: this.roleForm.roleCode,
                  roleTrees: JSON.stringify(this.roleForm.roleTrees)
                }).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('handleSearch');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证失败');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['roleForm'].resetFields();
              let roleId = this.roleId;
              getRoleByRoleId({roleId: roleId}).then(res => {
                if (res.code == 200) {
                  this.roleForm = res.obj;
                } else {
                  this.$Message.success(res.msg);
                  this.closeModal(false);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    </script>

接着我们在roleList.vue中引入我们的修改角色的组件，新增的代码如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
接着我们访问我们点击列表页的修改按钮，会看到如下的页面，则说明我们的修改角色已经完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]

## 删除角色 ##

删除角色实际在上一章的时候已经把代码集成进去了，此处直接告知大家删除的代码逻辑所在的位置：  
![在这里插入图片描述][20190702100557354.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]  
到此处我们就完成了本章的代码了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之角色管理布局和列表的实现（十六）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的布局的实现（十八）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211219/173f75f624d940bcb3bf39194448bf83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211219/1536888bf1dc40f79de6c296ada21c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/8854fcc3b4b84004bd6fafc4755f72a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211219/3af747eef8a34660aa42fae5703a2359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211219/3124859167bb44b3b04879555a5f7299.png
[20190702100557354.png]: /images/20211219/ac7d5c82780d4374995110c64a7a42a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20211219/6e4df39e08ee479894382df2b07ab54e.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94357386
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94432075