前端Vue.js+后端Go语言Iris高性能实战：完善用户管理（4）

正文

上一回回顾

在上回的博文中，我们完成了用户管理页面的构建。我们可以通过前端的Vue.js框架动态地获取表单数据，同时异步请求后端Iris接口进行入库操作。为了实现代码的可重用性，我们使用了函数封装的方法。

本回目标

本回我们将继续完善用户管理功能，具体包括：

• 为用户添加角色和权限
• 创建和管理用户组
• 实现用户组与角色的关联

实现步骤

1. 为用户添加角色和权限

首先，我们需要创建一个新的数据库表来存储角色和权限的信息。表结构如下：

CREATE TABLE roles (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  description VARCHAR(255),
  PRIMARY KEY (id)
);

CREATE TABLE permissions (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  description VARCHAR(255),
  PRIMARY KEY (id)
);

CREATE TABLE role_permissions (
  role_id INT NOT NULL,
  permission_id INT NOT NULL,
  PRIMARY KEY (role_id, permission_id),
  FOREIGN KEY (role_id) REFERENCES roles(id),
  FOREIGN KEY (permission_id) REFERENCES permissions(id)
);

CREATE TABLE user_roles (
  user_id INT NOT NULL,
  role_id INT NOT NULL,
  PRIMARY KEY (user_id, role_id),
  FOREIGN KEY (user_id) REFERENCES users(id),
  FOREIGN KEY (role_id) REFERENCES roles(id)
);

然后，我们需要在我们的Go语言代码中定义相应的模型和控制器。

type Role struct {
  ID          int64         `json:"id"`
  Name        string        `json:"name"`
  Description string        `json:"description"`
  Permissions []Permission `json:"permissions"`
}

type Permission struct {
  ID          int64  `json:"id"`
  Name        string `json:"name"`
  Description string `json:"description"`
}

type RoleController struct {
  iris.Controller
}

@iris.Post("/roles")
func (c *RoleController) CreateRole(ctx iris.Context) {
  var role Role
  if err := ctx.ReadJSON(&role); err != nil {
    ctx.StatusCode(iris.StatusBadRequest)
    return
  }

  if err := role.Create(); err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.StatusCode(iris.StatusCreated)
}

@iris.Put("/roles/:id")
func (c *RoleController) UpdateRole(ctx iris.Context) {
  var role Role
  if err := ctx.ReadJSON(&role); err != nil {
    ctx.StatusCode(iris.StatusBadRequest)
    return
  }

  role.ID, _ = strconv.ParseInt(ctx.Params().Get("id"), 10, 64)
  if err := role.Update(); err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.StatusCode(iris.StatusOK)
}

@iris.Delete("/roles/:id")
func (c *RoleController) DeleteRole(ctx iris.Context) {
  id, _ := strconv.ParseInt(ctx.Params().Get("id"), 10, 64)
  if err := DeleteRole(id); err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.StatusCode(iris.StatusOK)
}

@iris.Get("/roles")
func (c *RoleController) GetRoles(ctx iris.Context) {
  roles, err := GetRoles()
  if err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.JSON(roles)
}

@iris.Get("/roles/:id")
func (c *RoleController) GetRole(ctx iris.Context) {
  id, _ := strconv.ParseInt(ctx.Params().Get("id"), 10, 64)
  role, err := GetRole(id)
  if err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.JSON(role)
}

在我们的前端代码中，我们需要创建一个新的组件来管理角色和权限。

<template>
  <div>
    <h1>角色管理</h1>
    <button @click="createRole">添加角色</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th></th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="role in roles" :key="role.id">
          <td>{{ role.id }}</td>
          <td>{{ role.name }}</td>
          <td>{{ role.description }}</td>
          <td>
            <button @click="editRole(role)">编辑</button>
            <button @click="deleteRole(role.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roles: []
    };
  },
  mounted() {
    this.getRoles();
  },
  methods: {
    getRoles() {
      this.$axios.get('/roles')
        .then(res => {
          this.roles = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    createRole() {
      this.$axios.post('/roles', {
        name: '新角色',
        description: '这是一个新角色'
      })
        .then(res => {
          this.roles.push(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    editRole(role) {
      this.$router.push({
        name: 'edit-role',
        params: { id: role.id }
      });
    },
    deleteRole(id) {
      this.$axios.delete(`/roles/${id}`)
        .then(res => {
          this.roles = this.roles.filter(role => role.id !== id);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

2. 创建和管理用户组

接下来，我们需要创建一个新的数据库表来存储用户组的信息。表结构如下：

CREATE TABLE groups (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  description VARCHAR(255),
  PRIMARY KEY (id)
);

然后，我们需要在我们的Go语言代码中定义相应的模型和控制器。

type Group struct {
  ID          int64    `json:"id"`
  Name        string   `json:"name"`
  Description string   `json:"description"`
  Users       []User   `json:"users"`
  Roles       []Role   `json:"roles"`
}

type GroupController struct {
  iris.Controller
}

@iris.Post("/groups")
func (c *GroupController) CreateGroup(ctx iris.Context) {
  var group Group
  if err := ctx.ReadJSON(&group); err != nil {
    ctx.StatusCode(iris.StatusBadRequest)
    return
  }

  if err := group.Create(); err != nil {
    ctx.StatusCode(iris.StatusInternalServerError)
    return
  }

  ctx.StatusCode(iris.StatusCreated)
}

@iris.Put("/groups/:id")
func (c *GroupController) UpdateGroup(ctx iris.Context) {
  var group Group
  if err := ctx.ReadJSON(&group); err != nil {
    ctx.StatusCode(iris.StatusBadRequest)
    return
  }

  group.ID, _ = strconv.ParseInt(ctx.Params().Get("id"), 10, 64)
  if err := group.Update(); err != nil