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

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 仓储接口及实现

0.0 仓储接口

修改Fonour.Domain项目中IRepository接口，增加分页查询及根据条件删除的操作接口。

/// <summary>
/// 根据条件删除实体
/// </summary>
/// <param name="where">lambda表达式</param>
/// <param name="autoSave">是否自动保存</param>
void Delete(Expression<Func<TEntity, bool>> where, bool autoSave = true);

/// <summary>
/// 分页获取数据
/// </summary>
/// <param name="startPage">起始页</param>
/// <param name="pageSize">页面条目</param>
/// <param name="rowCount">数据总数</param>
/// <param name="where">查询条件</param>
/// <param name="order">排序</param>
/// <returns></returns>
IQueryable<TEntity> LoadPageList(int startPage, int pageSize, out int rowCount, Expression<Func<TEntity, bool>> where, Expression<Func<TEntity, object>> order);

增加功能菜单管理的仓储操作接口IMenuRepository

public interface IMenuRepository : IRepository<Menu>
{
}

0.1 仓储实现

在Fonour.EntityFrameworkCore项目的Repositories\FonourRepositoryBase.cs中实现上述接口。

/// <summary>
/// 根据条件删除实体
/// </summary>
/// <param name="where">lambda表达式</param>
/// <param name="autoSave">是否自动保存</param>
public void Delete(Expression<Func<TEntity, bool>> where, bool autoSave = true)
{
_dbContext.Set<TEntity>().Where(where).ToList().ForEach(it => _dbContext.Set<TEntity>().Remove(it));
if (autoSave)
Save();
}
/// <summary>
/// 分页查询
/// </summary>
/// <param name="startPage">页码</param>
/// <param name="pageSize">单页数据数</param>
/// <param name="rowCount">行数</param>
/// <param name="where">条件</param>
/// <param name="order">排序</param>
/// <returns></returns>
public IQueryable<TEntity> LoadPageList(int startPage, int pageSize, out int rowCount, Expression<Func<TEntity, bool>> where = null, Expression<Func<TEntity, object>> order = null)
{
var result = from p in _dbContext.Set<TEntity>()
select p;
if (where != null)
result = result.Where(where);
if (order != null)
result = result.OrderBy(order);
else
result = result.OrderBy(m => m.Id);
rowCount = result.Count();
return result.Skip((startPage - 1) * pageSize).Take(pageSize);
}

1 应用服务接口及实现

在Fonour.Application项目中添加MenuApp文件夹，新增IMenuAppService接口及实现MenuAppService，以及数据传输对象MenuDto。





接口主要包含一下定义，具体实现代码参见GitHub源码。

/// <summary>
/// 获取功能列表
/// </summary>
/// <returns></returns>
List<MenuDto> GetAllList();

/// <summary>
/// 根据父级Id获取功能列表
/// </summary>
/// <param name="parentId">父级Id</param>
/// <param name="startPage">起始页</param>
/// <param name="pageSize">页面大小</param>
/// <param name="rowCount">数据总数</param>
/// <returns></returns>
List<MenuDto> GetMneusByParent(Guid parentId, int startPage, int pageSize, out int rowCount);

/// <summary>
/// 新增或修改功能
/// </summary>
/// <param name="dto">实体</param>
/// <returns></returns>
bool InsertOrUpdate(MenuDto dto);

/// <summary>
/// 根据Id集合批量删除
/// </summary>
/// <param name="ids">功能Id集合</param>
void DeleteBatch(List<Guid> ids);

/// <summary>
/// 删除
/// </summary>
/// <param name="id">功能Id</param>
void Delete(Guid id);

/// <summary>
/// 根据Id获取实体
/// </summary>
/// <param name="id">功能Id</param>
/// <returns></returns>
MenuDto Get(Guid id);

1.0 AutoMapper的使用

AutoMapper是一个轻量级的类库，主要功能是把一个对象转换成另外一个对象，而避免我们每次重复的手工去逐个属性赋值转换。在将领域模型（Menu）与数据传输对象（MenuDto）互相转化的过程中提供便利。

0 添加AutoMapper应用

通过NuGet程序包管理器安装、通过NuGet程序包控制台安装、或通过直接修改project.json都可用很方便的快速添加对AutoMapper类库的引用。

1 FonourMapper类

AutoMapper最基本的使用是首先通过CreateMap<T1,T2>()方法创建两个实体的映射关系，然后通过Mapper.Map<T1>(T2)实现实体T2到T1的转换。这里所有领域模型与Dto之间的映射关系创建都在应用服务层完成，应用服务层将接收到的Dto对象转换为领域模型后传入仓储调用，同时将仓储返回的领域模型转换为Dto，返回给界面变现层使用。

在Fonour.Application项目中新增一个名称为FonourMapper的类，里面实现一个名称为Initialize的静态方法，以后所有的领域模型与Dto的映射关系都在这个FonourMapper类里完成。

/// <summary>
/// Enity与Dto映射
/// </summary>
public class FonourMapper
{
public static void Initialize()
{
Mapper.Initialize(cfg =>
{
cfg.CreateMap<Menu, MenuDto>();
cfg.CreateMap<MenuDto, Menu>();
});
}
}

2 Startup启动时调用

在应用程序启动入口处初始化所有领域模型与Dto对象的映射关系，修改Startup.cs类的Startup方法，增加FonourMapper类Initialize静态方法的调用。

//初始化映射关系
FonourMapper.Initialize();

3 AutoMapper进行实体转换

使用AutoMapper进行实体转换操作主要应用在应用服务接口的实现类中，如MenuAppService的GetAllList方法实现。

public List<MenuDto> GetAllList()
{
var menus = _menuRepository.GetAllList().OrderBy(it=>it.SerialNumber);
//使用AutoMapper进行实体转换
return Mapper.Map<List<MenuDto>>(menus);
}

2 表现层实现

在功能及实体设计中我们将功能管理部分设计为左右结构，左边为树形结构，右边为列表结构，当单击左边树节点时，加载选中树节点的下级数据至右侧列表中。基于此设计，必不可少的必然包含一个树形插件和一个带有分页功能的表格插件。

2.0 JsTree使用

树形插件这里选择使用JsTree，jsTree是一个 基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删 除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件，用以实现我们实际应用中的种种树形操作需求。

0 JsTree前端包的安装

通过Bower管理器，搜索JsTree，找到后直接安装即可。或直接修改Fonour.MVC项目中的Bower.json文件：

{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"font-awesome": "4.6.1",
"iCheck": "1.0.2",
"layer": "*",
"jquery.cookie": "1.4.1",
"jstree": "3.3.0"
}
}

1 JsTree的基本使用

在布局页Shared/_Layout.cshtml中统一添加JsTree的css及js引用。

<link rel="stylesheet" href="~/lib/jstree/dist/themes/default/style.min.css">

<script src="~/lib/jstree/dist/jstree.js"></script>

在视图文件中定义要渲染JsTree的Div对象

<div id="treeDiv" class="portlet-body">
</div>

JsTree的创建主要是通过调用$('#treeDiv').jstree()方法实现，下面是一个基本的使用ajax获取json数据并绑定树结构的过程，有关JsTree的更详细的使用说明，请参看官方网站相关介绍。

//加载功能树
function initTree() {
$.jstree.destroy();
$.ajax({
type: "Get",
url: "/Menu/GetMenuTreeData",    //获取数据的ajax请求地址
success: function (data) {
$('#treeDiv').jstree({       //创建JsTtree
'core': {
'data': data,        //绑定JsTree数据
"multiple": false    //是否多选
},
"plugins": ["state", "types", "wholerow"]  //配置信息
})
$("#treeDiv").on("ready.jstree", function (e, data) {   //树创建完成事件
data.instance.open_all();    //展开所有节点
});
$("#treeDiv").on('changed.jstree', function (e, data) {   //选中节点改变事件
var node = data.instance.get_node(data.selected[0]);  //获取选中的节点
if (node) {
selectedMenuId = node.id;
loadTables(1, 10);
};
});
}
});

}

2.1 bootstrap-paginator分页插件使用

表格的显示我们采用Bootstrap中的Table组件，并配合bootstrap-paginator提供的分页功能实现列表数据的分页展示。Bootstrap-paginator是一款基于Bootstrap的js分页插件，功能很丰富，它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。由于它暂不支持Bower，所以我们只能下载这个js文件，添加到我们项目的wwwroot\js\文件夹下。同时在布局页中添加此js的引用。

<script src="~/js/bootstrap-paginator.js"></script>

一般的使用是首先在视图页中定义分页插件的容器。

<div class="paging-toolbar">
<ul id="grid_paging_part"></ul>
</div>

然后在列表数据的加载同时创建分页插件，其中page，data.rowsCount，data.pageCount等定义需要在请求的控制器方法中通过json格式返回。

var elment = $("#grid_paging_part"); //分页插件的容器id
if (data.rowCount > 0) {
var options = { //分页插件配置项
bootstrapMajorVersion: 3,
currentPage: page, //当前页
numberOfPages: data.rowsCount, //总数
totalPages: data.pageCount, //总页数
onPageChanged: function (event, oldPage, newPage) { //页面切换事件
loadTables(newPage);
}
}
elment.bootstrapPaginator(options); //分页插件初始化
}

2.2 功能实现

0 控制器

新建名称为MenuController的控制器，控制器的构造函数中通过依赖注入获取IMenuAppService的实现实例。

private readonly IMenuAppService _menuAppService;
public MenuController(IMenuAppService menuAppService)
{
_menuAppService = menuAppService;
}

控制器中主要包括以下方法。

Index 返回功能管理界面

GetMenuTreeData 返回左侧功能管理树的Json数据

GetMneusByParent 返回左侧功能树选中节点下级功能分页列表所需Json数据

Edit 功能管理的编辑

DeleteMuti 功能的批量删除

Delete 功能删除

Get 根据id获取功能实体

注：此处根据个人喜好，视图界面采用尽量纯净的html，操作全部采用ajax请求，控制器统一返回Json格式的数据。当然你也可以通过使用TagHelper+模型绑定+Razor机制实现（控制器获取实体或实体集合，返回View，View中得到实体，通过TagHelper实现模型绑定），可参考用户登陆实现部分。

1 视图

Views文件夹下新建Menu文件夹，在Menu文件夹下创建Index.cshtml视图，以及名称为_Edit.cshtml（新增/修改）的分部视图，同时添加Index.js文件。

在布局页_Layout.cshtml中增加RenderSection，用于渲染视图页中相关js方法。

@RenderSection("scripts", false)

Index.cshtml主要布局修改如下

<div class="row">
<div class="col-md-3">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">功能管理</h3>
</div>
<div class="box-body">
<div id="treeDiv" class="portlet-body">
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">功能列表</h3>
<div class="pull-right box-tools">
<button id="btnAddRoot" class="btn btn-primary" type="button" data-original-title="新增顶级功能" data-toggle="tooltip" data-widget="">
<i class="fa fa-plus-square"></i>  新增顶级
</button>
<button id="btnAdd" title="" class="btn btn-primary" type="button" data-original-title="新增功能" data-toggle="tooltip" data-widget="">
<i class="fa fa-plus-circle"></i>  新增
</button>
<button id="btnDelete" title="" class="btn btn-danger" type="button" data-original-title="删除功能" data-toggle="tooltip" data-widget="">
<i class="fa fa-times"></i>  删除
</button>
<button id="btnLoadRoot" title="" class="btn btn-success" type="button" data-original-title="加载顶级功能" data-toggle="tooltip" data-widget="">
<i class="fa fa-list"></i>  加载顶级
</button>
</div>
</div>
<div class="box-body">
<div class="table-scrollable">
<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info">
<thead>
<tr role="row">
<th class="table-checkbox" style="width:40px;text-align:center;"><input id="checkAll" class="group-checkable" type="checkbox"></th>
<th tabindex="0" aria-label="">
功能名称
</th>
<th tabindex="0" aria-label="">
功能编码
</th>
<th tabindex="0" aria-label="">
地址
</th>
<th tabindex="0" aria-label="">
类型
</th>
<th tabindex="0" aria-label="">
功能描述
</th>
<th tabindex="0" style="width: 230px;" aria-label="">
操作
</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
</div>
<div class="paging-toolbar">
<ul id="grid_paging_part"></ul>
</div>
</div>
</div>
</div>
@Html.Partial("_Edit")
@section scripts{
<script src="~/Views/Menu/Index.js"></script>
}

_Edit.cshtm采用Bootstrap的Modal弹出框组件，做为功能管理的新增和编辑界面

<div id="addRootModal" tabindex="-1" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="box box-info">
<div class="box-header with-border">
<h5 class="box-title" id="Title"></h5>
<button class="close" aria-label="Close" type="button" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal">
<input type="hidden" id="Id" />
<input type="hidden" id="ParentId" />
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="">功能名称</label>
<div class="col-sm-10">
<input class="form-control" id="Name" type="text" placeholder="功能名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">功能编码</label>
<div class="col-sm-10">
<input class="form-control" id="Code" type="text" placeholder="功能编码">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">功能类型</label>
<div class="col-sm-10">
<select class="form-control" id="Type">
<option value="0">功能菜单</option>
<option value="1">操作按钮</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="">链接地址</label>
<div class="col-sm-10">
<input class="form-control" id="Url" type="text" placeholder="链接地址">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="">功能图标</label>
<div class="col-sm-10">
<input class="form-control" id="Icon" type="text" placeholder="功能图标">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="">功能序号</label>
<div class="col-sm-10">
<input class="form-control" id="SerialNumber" type="text" placeholder="功能序号">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="">功能描述</label>
<div class="col-sm-10">
<textarea id="Remarks" class="form-control" rows="3"></textarea>
</div>
</div>
</div>
<div class="box-footer">
<div class="pull-right box-tools">
<button id="btnSave" class="btn btn-primary" type="button">保存</button>
<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>

Index.js文件主要定义视图文件与服务器的交互操作，主要包括以下定义。





前面我们已经介绍过静态文件的使用需要在Startup中的Configure方法中增加

//使用静态文件
app.UseStaticFiles();

这样就可以访问所有wwwroot目录下的静态文件，但是若想访问Views/Menu/Index.js文件，还需要在Configure方法中增加

app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory())
});

这样在客户端就可以成功访问Views/Menu/Index.js文件，调用相关方法了。

3 界面预览

完成的功能管理界面大体如下。

主界面





编辑界面





删除提示

4 总结

本次我们通过使用AutoMapper、JsTree、Bootstrap-paginator等技术实现了功能管理的开发，接下来要实现组织机构管理功能的开发。