vue-element-admin管理abp vNext微服務用戶、角色、權限模塊

時間 2019-12-01

標籤 vue element admin 管理 abp vnext 微服用戶角色權限模塊简体版

原文原文鏈接

1、簡介

abp vNext微服務框架中已經提供通用權限和用戶角色管理模塊，管理UI使用的是MVC模式，不適用於國內主打的MVVM開發模式。在前端框架選型後筆者決定改造abp vNext微服務框架中原有的管理UI，使用vue流行的後臺管理框架Vue Element Admin進行替換。本篇將介紹abp vNext微服務的先後端分離和Vue Element Admin後臺管理的頁面開發。html

2、開始前

abp vNext微服務框架十分複雜，因此開始前你可能須要如下準備工做。前端

準備一：abp vNext微服務開發環境搭建vue

準備二：abp vNext先後端分類指南node

3、Vue Element Admin管理頁面開發

step1：角色管理頁面

在views目錄下添加role文件夾ios

設計list顯示頁面axios

代碼：後端

  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="搜索..."
        style="width: 400px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <router-link :to="'/system/roleCreate'">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          v-permission="['AbpIdentity.Roles.Create']"
        >添加</el-button>
      </router-link>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="角色名" prop="name" align="center" width="400">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操做" align="center" width="600" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)" v-permission="['AbpIdentity.Roles.Update']">編輯</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)" :disabled="row.name==='admin'" v-permission="['AbpIdentity.Roles.Delete']">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalCount>0"
      :total="totalCount"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>

設計新增修改頁面api

代碼：前端框架

  <div class="createPost-container">
    <el-form
      ref="postForm"
      label-position="left"
      label-width="70px"
      :model="postForm"
      :rules="rules"
      class="form-container"
    >
      <sticky :z-index="10" :class-name="'sub-navbar ' + stickyStatus">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="success"
          @click="submitForm"
        >保存</el-button>
        <el-button v-loading="loading" @click="jump" type="warning">返回</el-button>
      </sticky>
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名" style="margin-bottom: 40px;" prop="name">
              <el-input v-model="postForm.name" :disabled="roleDisable" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="選擇權限">
          <el-tree
            ref="tree"
            default-expand-all
            :default-checked-keys="checkedPermission"
            :check-strictly="true"
            :data="permissionsData"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            @check="checkNode"
            class="permission-tree"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>

step2：用戶管理頁面

在views目錄下添加user文件夾app

設計list顯示頁面

代碼：

  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.filter"
        placeholder="搜索..."
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <router-link :to="'/system/userCreate'">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          v-permission="['AbpIdentity.Users.Create']"
        >添加</el-button>
      </router-link>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="用戶名" prop="userName" sortable="custom" align="center" width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{row.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="郵箱" prop="email" sortable="custom" align="center" width="200px">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column label="電話" prop="phoneNumber" sortable="custom" align="center" width="200px">
        <template slot-scope="scope">
          <span>{{scope.row.phoneNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操做" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)" v-permission="['AbpIdentity.Users.Update']">編輯</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(row)"
            :disabled="row.userName==='admin'"
            v-permission="['AbpIdentity.Users.Delete']"
          >刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalCount>0"
      :total="totalCount"
      :page.sync="page"
      :limit.sync="listQuery.MaxResultCount"
      @pagination="getList"
    />
  </div>

設計新增修改頁面

代碼：

  <div class="createPost-container">
    <el-form
      ref="postForm"
      label-position="left"
      label-width="70px"
      :model="postForm"
      :rules="rules"
      class="form-container"
    >
      <sticky :z-index="10" :class-name="'sub-navbar ' + stickyStatus">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="success"
          @click="submitForm"
        >保存</el-button>
        <el-button v-loading="loading" @click="jump" type="warning">返回</el-button>
      </sticky>
      <div class="createPost-main-container">
        <el-form-item label="用戶名" prop="userName">
          <el-input id="userName" v-model="postForm.userName" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="郵箱" prop="email">
          <el-input v-model="postForm.email" ref="mailInput" />
        </el-form-item>
        <el-form-item label="密碼" prop="password">
          <el-input type="password" v-model="postForm.password" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="名稱" prop="name">
          <el-input v-model="postForm.name" />
        </el-form-item>
        <el-form-item label="姓氏" prop="surname">
          <el-input v-model="postForm.surname" />
        </el-form-item>
        <el-form-item label="電話" prop="phoneNumber">
          <el-input type="number" v-model="postForm.phoneNumber" />
        </el-form-item>
        <el-form-item label="角色" prop="roles" outline>
          <el-select v-model="checkedRoles" multiple placeholder="請選擇" style="display:block">
            <el-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>

step3：添加用戶、角色動態路由

在router中添加代碼：

    path: '/system',
    component: Layout,
    redirect: '/system/role',
    alwaysShow : true,
    name: 'SystemManagement',
    meta: {
      title: 'SystemManagement',
      icon: 'lock'
    },
    children: [{
        path: 'role',
        component: () => import('@/views/role/index'),
        name: 'RoleManagement',
        meta: {
          title: 'roleManagement',
          roles: ['AbpIdentity.Roles']
        }
      },
      {
        path: 'user',
        component: () => import('@/views/user/index'),
        name: 'UserManagement',
        meta: {
          title: 'userManagement',
          roles: ['AbpIdentity.Users']
        }
      }]

查看頁面菜單

調用的接口：

//用戶列表接口      
this.$axios.gets("/api/identity/users", this.listQuery).then(response => {
        this.list = response.items;
        this.totalCount = response.totalCount;
        this.listLoading = false;
      });

//刪除用戶接口
          this.$axios.deletes("/api/identity/user/" + row.id).then(response => {
            const index = this.list.indexOf(row);
            this.list.splice(index, 1);
            this.$notify({
              title: "成功",
              message: "刪除成功",
              type: "success",
              duration: 2000
            });
          });

//查找用戶、用戶角色接口
      this.$axios.gets("/api/identity/users/" + id).then(response => {
        this.postForm = response;
        this.postForm.password = "K2IN-a*kz.a2e4o";
        this.setTagsViewTitle();
        this.setPageTitle();
        this.checkedRoles = [];
        this.getAllRoles();
        this.$axios.gets("/api/identity/users/" + id + "/roles").then(data => {
          data.items.forEach(element => {
            this.checkedRoles.push(element.name);
          });
        });
      });

//獲取角色接口
      this.$axios.gets("/api/identity/roles").then(response => {
        response.items.forEach(element => {
          let options = {};
          options.value = element.name;
          options.label = element.name;
          this.roleList.push(options);
        });
      });

//修改用戶接口
            this.$axios
              .puts("/api/identity/users/" + this.postForm.id, this.postForm)
              .then(response => {
                this.loading = false;
                this.$notify({
                  title: "成功",
                  message: "更新成功",
                  type: "success",
                  duration: 2000
                });
                this.jump();
              });

//新增用戶接口
            this.$axios
              .posts("/api/identity/users", this.postForm)
              .then(response => {
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success",
                  duration: 2000
                });
                this.jump();
              });

//角色列表接口
      this.$axios.gets('/api/identity/roles', params).then(response => {
        this.list = response.items
        //this.totalCount = response.totalCount
        this.listLoading = false
      })

//刪除角色接口
          this.$axios.deletes('/api/identity/roles/'+row.id).then(response=>{
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.$notify({
              title: '成功',
              message: '刪除成功',
              type: 'success',
              duration: 2000
            })
          })

//獲取角色、角色權限接口
      this.$axios.gets("/api/identity/roles/" + id).then(response => {
        this.postForm = response;

        this.setTagsViewTitle();
        this.setPageTitle();

        this.params.providerKey = this.postForm.name;
        this.$axios
          .getPermissions("/api/abp/permissions", this.params)
          .then(response => {
            this.permissionsData = [];
            this.checkedPermission = [];
            this.setTree(response.groups);
          });
      });

//修改角色、新增角色接口
            this.$axios
              .puts("/api/identity/roles/" + this.postForm.id, this.postForm)
              .then(response => {
                this.updatePermission(this.postForm.name);
                this.loading = false;
              });
            this.$axios
              .posts("/api/identity/roles", this.postForm)
              .then(response => {
                this.updatePermission(this.postForm.name);
                this.loading = false;
              });

//修改權限接口
      this.$axios
        .puts(
          "/api/abp/permissions?providerName=Role&providerKey=" + roleName,
          params
        )
        .then(response => {
          this.$notify({
            title: "成功",
            message: "更新成功",
            type: "success",
            duration: 2000
          });
          this.jump()
        });