一步一步搭建，功能最全的权限管理系统之动态路由菜单

一、前言

　　这是一篇搭建权限管理系统的系列文章。

　　随着网络的发展，信息安全对应任何企业来说都越发的重要，而本系列文章将和大家一起一步一步搭建一个全新的权限管理系统。

　　说明：由于搭建一个全新的项目过于繁琐，所有作者将挑选核心代码和核心思路进行分享。

二、技术选择

三、开始设计

　　

1、自主搭建vue前端和.net core webapi后端，网上有很多搭建教程。

　　这是我搭建的

　后端：　

  前端：

　　搭建好之后，vue需要把基础配置做好，比如路由、响应请求等，网上都有教程。

 　　vue配置较为简单，webapi的框架我使用DDD领域启动设计方式，各个层的介绍如下下。

• ProjectManageWebApi webapi接口层，属于启动项

• Model 业务模型，代表着系统中的具体业务对象。

• Infrastructure 仓储层，是数据存储层，提供持久化对象的方法。

• Domain  领域层，是整个系统运行时核心业务对象的载体，是业务逻辑处理的领域。

• Subdomain 子域，子域是领域层更加细微的划分，处理整个系统最核心业务逻辑。

• Utility  工具层，存放系统的辅助工具类。

　　

2、搭建数据库

　　菜单对于一个系统来说，是必不可少的，我们搭建权限管理系统就从这里开始

　　任务：建立菜单表，并通过程序把菜单动态加载到页面，实现树形菜单。

　　这是我的菜单表结构

　　

　　我采用的是一张表存储系统菜单，用id和pid存储上下级关系。当然这不是唯一的，根据情况可以把它拆分层多张表。

　　

3、创建基础仓储和菜单仓储

　　在webapi中Infrastructure 仓储层创建基础仓储，以便提供持久化支持。

　　我orm框架使用的是dapper来提共数据库和编程语言间的映射关系。

　　首先需要建立一个增删改查的仓储接口，大致如下：

View Code

　　然后实现这个仓储接口

View Code

以上两段代码就实现了对数据库的增删改查。当然在上述仓储接口中有一个分页查询接口，它对于的模型如下

/// <summary>
/// 分页模型
/// </summary>
public class PageResultModel
{
    /// <summary>
    /// 当前页
    /// </summary>
    public int pageIndex { get; set; }

    /// <summary>
    /// 每页显示条数
    /// </summary>
    public int pageSize { get; set; }

    /// <summary>
    /// 查询表字段
    /// </summary>
    public string tableField { get; set; }

    /// <summary>
    /// 查询表
    /// </summary>
    public string tableName { get; set; }

    /// <summary>
    /// 查询条件
    /// </summary>
    public string selectWhere { get; set; }

    /// <summary>
    /// 查询条件json
    /// </summary>
    public string filterJson { get; set; }

    /// <summary>
    /// 当前菜单id
    /// </summary>
    public string menuId { get; set; }

    /// <summary>
    /// 排序字段（不能为空）
    /// </summary>
    public string orderByField { get; set; }

    /// <summary>
    /// 排序类型
    /// </summary>
    public string sortType { get; set; }

    /// <summary>
    /// 总数
    /// </summary>
    public int total { get; set; }
}

/// <summary>
/// 查询数据
/// </summary>
/// <typeparam name="T"></typeparam>
public class PageResultModel<T> : PageResultModel 
{
    /// <summary>
    /// 数据
    /// </summary>
    public List<T> data { get; set; }
}

上述代码解释：上述仓储接口中定义了所有基础接口，因为它们都是数据库操作最基本的存在，为了统一管理，降低耦合把它们定义到仓储中，以备后用。

　　建立好基础仓储后，我们需要建立菜单表的仓储

　　菜单仓储接口

 /// <summary>
 /// 菜单仓储
 /// </summary>
 public interface ISysMenuRepository : IRepository<Menu>
 {}

菜单仓储接口实现

/// <summary>
/// 菜单仓储
/// </summary>
public class SysMenuRepository : Repository<Menu>, ISysMenuRepository
{}

　　上述代码解释：可以看见上述代码继承了IRepository和Repository，这说明菜单拥有了增删改查等功能。

 　　

4、创建领域服务，递归组织树形菜单结构

　　在Domain领域层创建领域服务接口和实现接口

　　领域服务接口

/// <summary>
 /// 菜单服务接口
 /// </summary>
 public interface ISysMenuService
 {
      /// <summary>
     /// 获取所有菜单--上下级关系
     /// </summary>
     /// <returns></returns>
     List<MenuDao> GetAllChildren();
}

　　领域接口实现

/// <summary>
/// 菜单服务实现
/// </summary>
public class SysMenuService : ISysMenuService
{

    //仓储接口
    private readonly ISysMenuRepository _menuRepository;

    /// <summary>
    /// 构造函数 实现依赖注入
    /// </summary>
    /// <param name="userRepository">仓储对象</param>
    public SysMenuService(ISysMenuRepository menuRepository)
    {
        _menuRepository = menuRepository;
    }

    /// <summary>
    /// 获取菜单--上下级关系
    /// </summary>
    /// <returns></returns>
    public List<MenuDao> GetAllChildren()
    {
        var list = _menuRepository.GetMenusList();
        var menuDaoList = MenuCore.GetMenuDao(list);
        return menuDaoList;
    }
}

5、在Subdomain子域中创建菜单核心代码

　　为什么在子域中创建菜单核心，应该菜单是整个系统的核心之一，考虑到之后系统会频繁使用，所以创建在子域中，以便提供给其他业务领域使用

　　下面是递归菜单实现树形结构的核心

public static class MenuCore
 {
     #region 用于菜单导航的树形结构

     /// <summary>
     /// 递归获取菜单结构--呈现上下级关系
     /// 用于菜单的树形结构
     /// </summary>
     /// <returns></returns>
     public static List<MenuDao> GetMenuDao(List<Menu> menuList)
     {
         List<MenuDao> list = new();
         List<MenuDao> menuListDto = new();
         foreach (var item in menuList)
         {
             MenuDao model = new()
             {
                 Title = item.MenuTitle,
                 Icon = item.MenuIcon,
                 Id = item.MenuUrl + "?MneuId=" + item.Id,
                 MenuKey = item.Id,
                 PMenuKey = item.Pid,
                 Component = item.Component,
                 Path = item.Path,
                 RequireAuth = item.RequireAuth,
                 Name = item.Name,
                 Redirect = item.Redirect,
                 IsOpen = item.IsOpen
             };
             list.Add(model);
         }
         foreach (var data in list.Where(f => f.PMenuKey == 0 && f.IsOpen))
         {
             var childrenList = GetChildrenMenu(list, data.MenuKey);
             data.children = childrenList.Count == 0 ? null : childrenList;
             menuListDto.Add(data);
         }
         return menuListDto;
     }

     /// <summary>
     /// 实现递归
     /// </summary>
     /// <param name="moduleOutput"></param>
     /// <param name="id"></param>
     /// <returns></returns>
     private static List<MenuDao> GetChildrenMenu(List<MenuDao> moduleOutput, int id)
     {
         List<MenuDao> sysShowTempMenus = new();
         //得到子菜单
         var info = moduleOutput.Where(w => w.PMenuKey == id && w.IsOpen).ToList();
         //循环
         foreach (var sysMenuInfo in info)
         {
             var childrenList = GetChildrenMenu(moduleOutput, sysMenuInfo.MenuKey);
             //把子菜单放到Children集合里
             sysMenuInfo.children = childrenList.Count == 0 ? null : childrenList;
             //添加父级菜单
             sysShowTempMenus.Add(sysMenuInfo);
         }
         return sysShowTempMenus;
     }
}

以上便是后端实现动态菜单的核心代码，到这一节点，后端的工作基本完成。

　　在Controller创建好接口后，运行后端代码，出现如图所示，便说明成功。

　　

 　　6、vue 动态路由搭建

　　配置vue动态路由前，需要看你选择的前端框架是什么，不同的框架，解析的字段不一样，我选择的是layui vue，动态配置如下：

 View Code

　　通过以上代码，获取动态路由，然后把它加入到你的路由菜单中，这样便实现了页面菜单动态加载。

四、项目效果

五、说明

　 以上便是实现vue+webapi实现动态路由的全部核心代码

文章转载自：陈逸子风

原文链接：https://www.cnblogs.com/cyzf/p/18096545

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构