[Abp vNext微服务实践] - vue-element-admin管理Identity
一、简介
abp vNext微服务框架中已经提供通用权限和用户角色管理模块，管理UI使用的是MVC模式，不适用于国内主打的MVVM开发模式。在前端框架选型后笔者决定改造abp vNext微服务框架中原有的管理UI，使用vue流行的后台管理框架Vue Element Admin进行替换。本篇将介绍abp vNext微服务的前后端分离和Vue Element Admin后台管理的页面开发。
二、开始前
abp vNext微服务框架十分复杂，所以开始前你可能需要以下准备工作。
准备二：abp vNext前后端分类指南
三、Vue Element Admin管理页面开发
step1：角色管理页面
在views目录下添加role文件夹
设计list显示页面
代码：
<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>
设计新增修改页面
代码：
<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文件夹
设计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()
});
移动端适应
四、总结
由于用户、角色权限管理业务十分复杂，因此以上代码无法完整展示所有功能，后续整理后我会单独开源出来方便参考。对于Vue Element Admin管理abp vNext微服务用户、角色、权限的方法已经介绍完了，喜欢折腾的小伙伴根据以上参考尽情研究吧。
文章目录：https://www.cnblogs.com/william-xu/p/12047529.html
[Abp vNext微服务实践] - vue-element-admin管理Identity的更多相关文章
- [Abp vNext微服务实践] - 文章目录
简介 ABP vNext是volosoft的新一代框架,ABP(vNext)完全使用.NET CORE和DDD(领域驱动)打造,目前GitHub已有6K+次提交,发布版本超过40次,Nuget包下载量 ...
- [Abp vNext微服务实践] - 前后端分类
一.前景 abp vNext是ABP 开源 Web应用程序框架,是abp的新一代开源web框架.框架完美的集成.net core.identity server4等开源框架,适用于构建web应用程序和 ...
- [Abp vNext微服务实践] - 业务开发
前几篇分别介绍了abp vNext微服务框架.开发环境搭建和vue element admin前端框架接入,在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了,本 ...
- [Abp vNext微服务实践] - 框架分析
一.简介 abp vNext新框架的热度一直都很高,于是最近上手将vNext的微服务Demo做了一番研究.我的体验是,vNext的微服务架构确实比较成熟,但是十分难以上手,对于没有微服务开发经验的.n ...
- [Abp vNext微服务实践] - 租户登录
简介 Abp vNext微服务授权验证基于ids4,实现租户登录需要在授权服务中获取token,和之前的介绍的登录方式一样,只是多了tenant参数.本篇将介绍在Abp vNext授权服务中启用多租户 ...
- [Abp vNext微服务实践] - 服务通讯
简介 服务通讯是微服务架构中必不可少的功能,服务通讯的效率决定了微服务架构的优略.常用的微服务通讯策略有两种,分别是rpc.http,其中rpc以gRpc框架为代表使用者最多.abp vNext微服务 ...
- [Abp vNext微服务实践] - 添加中文语言
简介 abp vNext中提供了多语言功能,默认语言是英文,没有提供中文语言包.在业务开发中,定义权限后需要用中文的备注提供角色选择,本篇将介绍如何在abp vNext中加入中文语言. step1:添 ...
- [Abp vNext微服务实践] - 启动流程
前几篇分别介绍了abp vNext微服务框架和微服务CI/CD环境搭建,本篇开始介绍vNext微服务框架的开发环境搭建. 环境准备 官方介绍的系统架构图如下: 上图中身份服务和网关服务已经集成在系统中 ...
- [Abp vNext微服务实践] - vue-element-admin登录二
简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...
随机推荐
- Flutter Widget框架概述
Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI. Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么.当w ...
- PJzhang:目录扫描复合工具dirmap
猫宁!!! 参考:https://www.freebuf.com/sectool/200890.html github地址: https://github.com/H4ckForJob/dirmap ...
- UPDATE SELECT OUTPUT
-- 定义临时表变量,用于 output into 使用 DECLARE @VarOrderStatus table ( OrderNo nvarchar(50) NULL) -- update 表U ...
- 忘记Linux的root登录密码？不用害怕，破解掉它就可以了！！！
在开启centos 7主机后会出现下面这个界面,此时要把光标放到界面内,然后按“e”进入下一个界面. 按完“e”会出现一个新的界面,然后按“↓”找到“Linux16”这行,在最后面的UTF-8后面输入 ...
- ”Unstanding the Bias-Variance Tradeoff“主题内容翻译
对预测模型讨论,预测误差(error)分两类:偏差(bias)造成的误差与方差(variance)造成的误差.最小化偏差与方差的一个权衡.理解这两类误差有利于诊断模型结果和避免过拟合和欠拟合. 偏差与 ...
- Python Elasticsearch
以下所用版本为Elasticsearch 7.2.0 1.安装 pip3 install elasticsearch -i https://pypi.tuna.tsinghua.edu.cn/simp ...
- 【VS开发】千兆以太网的传输速度
千兆以太网主流标准 千兆以太网络技术早在上世纪90年代末就已成熟,其中,1995年国际标准化组织TIA/EIA颁布了1000Base-TX标准,该标准的目的是把双绞线用于千兆以太网中,其目的是在6类非 ...
- NDK学习笔记-增量更新
虽然现在有插件化开发和热修复,但为何还需要增量更新?插件化开发和热修复依赖于宿主程序,增量更新适合更新宿主程序. 差分包生成的前提 差分包的生成依赖于BsDiff开源项目,而BsDiff又依赖于Bzi ...
- ORACLE initialization or shutdown in progress 错误解决办法
第一步,运行cmd 第一步.sqlplus /NOLOG第二步.SQL>connect sys/change_on_install as sysdba'/提示:已成功第三步.SQL>shu ...
- python+socket实现网络信息交互及文件传输
Socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket又称"套接字",应用程序通常通过"套接字" ...