Asp.Net Core 项目实战之权限管理系统(7) 组织机构、角色、用户权限

0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有

1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

2 Asp.Net Core 项目实战之权限管理系统(2) 功能及实体设计

3 Asp.Net Core 项目实战之权限管理系统(3) 通过EntityFramework Core使用PostgreSQL

4 Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现

5 Asp.Net Core 项目实战之权限管理系统(5) 用户登录

6 Asp.Net Core 项目实战之权限管理系统(6) 功能管理

7 Asp.Net Core 项目实战之权限管理系统(7) 组织机构、角色、用户权限

8 Asp.Net Core 项目实战之权限管理系统(8) 功能菜单的动态加载

github源码地址

前面已经完成项目基本框架搭建及功能菜单管理的具体功能实现,接下来要实现的组织机构管理、用户管理、角色权限管理基本实现方法类似,基本实现步骤如下:

0 仓储接口定义

在Fonour.Domain项目的IRepositories文件夹下创建继承自泛型接口IRepository<T>的仓储接口,根据实际情况进行接口扩展。

1 仓储操作实现

在Fonour.EntityFrameworkCore项目的Repositories文件夹下对上面定义的接口进行实现

2 定义Dto及创建与实体的映射关系

在Fonour.Application项目中按照功能管理的实现方式,创建对应的Dto类,同时在FonourMapper.cs中增加创建的Dto与具体的实体之间映射关系。

3 定义服务接口及实现

在Fonour.Application中按照实际需要定义应用服务接口及对应实现。

4 创建Controller,实现Action

在Fonour.MVC项目中增加对应业务功能的控制器,以及对应操作的Action。

5 前端操作实现

使用AdminLTE,结合ajax操作实现前端相关。

上述操作,可结合代码生成器进行自动生成,会大大增加开发效率。

0 组织机构管理

组织机构管理与功能管理非常类似,都是简单的单表增删改查操作,在界面布局上也一样,左侧为组织机构树,右侧为选中节点对应的子级组织机构列表。同样包含新增顶级、新增、删除、编辑等操作。只需要按照上面介绍的实现步骤,逐步去实现即可,最终效果如下:

1

1 角色管理

页面布局设计为,左侧为角色列表,右侧为功能树,单击左侧角色列表时,对已经关联的功能进行勾选显示;同时可在右侧直接修改选中项,对当前角色进行功能权限的调整。

1

1.0 列表选中事件添加

没有使用table插件,简单的对选中的tr增加click事件处理,单击的tr进行颜色改变,同时清除非选中tr的背景色,事件中捕获到当前选中行的id,进行根据角色id显示对应功能权限的处理。

$("table > tbody > tr").click(function () {
    $("table > tbody > tr").removeAttr("style")
    $(this).attr("style", "background-color:#beebff");
    selectedRole = $(this).find("input").val();
    loadPermissionByRole(selectedRole);
});
//根据选中角色加载功能权限
function loadPermissionByRole(selectedRole) {
    $.ajax({
        type: "Get",
        url: "/Role/GetMenusByRole?roleId=" + selectedRole + "&_t=" + new Date().getTime(),
        success: function (data) {
            $("#treeDiv").find("li").each(function () {
                $("#treeDiv").jstree("uncheck_node", $(this));
                if (data.indexOf($(this).attr("id")) != -1) {
                    $("#treeDiv").jstree("check_node", $(this));
                }
            })
        }
    });
};

2 用户管理

用户管理中,需要对用户进行角色分配,一个用户可以拥有多个角色。角色多选这里使用了select2插件,可以直接通过Bower管理器添加select2的依赖引用,添加后发现样式与现有框架中的样式不太协调,没有再进行调整,直接使用了我以前修改过的select2。

2.0 使用select2

将selcet2文件夹放至Fonour.MVC项目的/wwwroot/lib/文件夹下,修改布局页_Layout.cshtml的内容,增加对select2.css、select2.js、以及中文配置的引用。

<link rel="stylesheet" href="~/lib/select2/select2.css">
<script src="~/lib/select2/select2.js"></script>
<script src="~/lib/select2/select2_locale_zh-CN.js"></script>

select2加载数据

界面元素增加multiple="multiple"属性,让select2支持多选操作。

<div class="form-group">
    <label class="col-sm-2 control-label" for="">所属角色</label>
    <div class="col-sm-10">
        <select id="Role" class="form-control" style="padding:0px" multiple="multiple">
        </select>
    </div>
</div>

调用select2()方法,创建select2界面元素;通过ajax请求返回角色列表json对象,将角色信息通过option标签绑定到select2控件。

function loadRoles(data) {
    $("#Role").select2();
    var option = "";
    $.each(data.roles, function (i, item) {
        option += "<option value='" + item.id + "'>" + item.name + "</option>"
    })
    $("#Role").html(option);
}

select2支持多选,以及模糊筛选。界面效果如下:

0

1

3 总结

在基本框架的基础上,功能实现并不复杂,到现在为止,四个主要的基本功能基本都已经实现了,里面会涉及一些细节性的问题,比如唯一性验证、密码加密等功能,没有做过多处理。接下来就是要实现根据登录用户动态加载对应的功能菜单,以及功能操作权限的判断。

posted @ 2016-12-26 18:54 Fonour 阅读(...) 评论(...) 编辑 收藏