加载中...

(6)定义导航菜单


完成了增删改查以及页面展示,这一节我们来为任务清单添加【导航菜单】。
在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这也是一种方式,但是如果要针对不同用户不同权限决定是否显示某个菜单,那么直接在layout页面中去控制就不方便了。
不过,ABP已经为大家考虑了这一点,集成了通用的创建和显示菜单的方式。其主要代码集成在Abp.Application.Navigation命名空间下,相应源码在此
下面我们就来梳理下导航菜单是如何实现和使用。

一、如何使用Abp集成的导航菜单

针对我们的『任务清单』Deom,我们需要在导航栏上添加一个【Task List】的菜单入口。

1.打开web展现层,定位到App_Start/xxxNavigationProvider.cs。

  1. public class LearningMpaAbpNavigationProvider : NavigationProvider
  2. {
  3. public override void SetNavigation(INavigationProviderContext context)
  4. {
  5. context.Manager.MainMenu
  6. .AddItem(
  7. new MenuItemDefinition(
  8. "Home",
  9. L("HomePage"),
  10. url: "",
  11. icon: "fa fa-home",
  12. requiresAuthentication: true
  13. )
  14. ).AddItem(
  15. new MenuItemDefinition(
  16. "Tenants",
  17. L("Tenants"),
  18. url: "Tenants",
  19. icon: "fa fa-globe",
  20. requiredPermissionName: PermissionNames.Pages_Tenants
  21. )
  22. ).AddItem(
  23. new MenuItemDefinition(
  24. "Users",
  25. L("Users"),
  26. url: "Users",
  27. icon: "fa fa-users",
  28. requiredPermissionName: PermissionNames.Pages_Users
  29. )
  30. ).AddItem(
  31. new MenuItemDefinition(
  32. "About",
  33. L("About"),
  34. url: "About",
  35. icon: "fa fa-info"
  36. )
  37. );
  38. }
  39. }

该文件中默认定义了Home、Tenants、Users、About四个菜单。注意观察的话,想必会注意到Home菜单设置了requiresAuthentication: true,即只有登陆后才会显示该菜单。Tenants和Users菜单设置了requiredPermissionName属性,即用户具有指定的权限时才显示菜单。About菜单没有限制,默认显示。
每一个菜单项都是一个MenuItemDefinition,其中主要包括Name(唯一名称),DisplayName(本地化显示名称),Url(菜单跳转),Icon(指定菜单图标)。
解释到这里,大家自己都可以依葫芦画瓢,新增菜单了。

2.添加[Task List]菜单项

  1. AddItem(
  2. new MenuItemDefinition(
  3. "TaskList",
  4. L("Task List"),
  5. url: "Tasks/Index",
  6. icon: "fa fa-tasks",
  7. requiresAuthentication: true
  8. )

保存,刷新页面即可看到新增的[Task List]菜单了。


PS:之所以页面上会显示为[Task List],是因为我们并没有维护本地化资源文件。在对应的本地化配置文件中新增名为"Task List"的即可。比如在中文的本地化文件中添加
<text name="Task List" value="任务清单" />,重新启站点,将语言切换为中文。



二、Abp集成的导航菜单的代码结构

1.先来看看相关代码的类型依赖关系图


类型依赖关系图


分析发现,abp集成的导航菜单实际上是应用了组合设计模式。
其中MenuDefinition为根节点,MenuItemDefinition为树枝节点,其中MenuItemDefinition中也维护了一个List<MenuItemDefinition>的集合,当集合为空时,MenuItemDefinition即为树叶节点。

2.从图中可以看出,主要是由以下几部分组成:

  • MenuDefinition/MenuItemDefinition:菜单/菜单项定义。其中菜单项包括Name(唯一名称),DisplayName(本地化显示名称),Url(菜单跳转),Icon(指定菜单图标)。此外,可以通过指定RequiresAuthentication=true来限制菜单项只有对登录用户可见,同时也可以指定RequiredPermissionName来限定当用户有某个权限时菜单才可见。
  • UserMenu/UserMenuItem:封装了用于显示给用户的菜单/子菜单集合。
  • INavigationConfiguration/NavigationConfiguration:导航配置,维护了NavigationProvider的列表。
  • NavigationProvider:Provider模式(将api的定义和实现分离)。抽象类,定义了SetNavigation方法,在需要设置导航的项目中实现该类,并在对应的模块中PreInitialize方法中注册***NavigationProvider的实现。
  • INavigationManager/NavigationManager:其中接口中定义了一个Dictionary,用来存储应用程序中定义的所有菜单项,和一个MainMenu。注入了对INavigationConfiguration的引用,以便在NavigationManager中的Initialize方法遍历INavigationConfiguration配置的NavigationProvider列表进行菜单的初始化。
    IUserNavigationManager/UserNavigationManager:是对NavigationManager的一次封装。其中接口中定义了GetMenuAsync的重载方法,用来获取指定用户的菜单。
  • INavigationProviderContext/NavigationProviderContext:封装了INavigationManager的上下文类,用于传参。

三、Abp集成的导航菜单的具体实现

核心逻辑:NavigationManager遍历NavigationConfiguration中维护的NavigationProvider列表,并调用NavigationProvider实现的SetNavigation方法来完成导航菜单的初始化。

NavigationManager负责初始化菜单


NavigationManager.cs

NavigationConfiguration负责维护NavigationProvider的实现列表。


NavigationConfiguration.cs

具体的NavigationProvider的实现


xxxxNavigationProvider.cs

在对应的模块中注册具体的NavigtionProvider到INavigationConfiguration维护的列表中。


xxxxAbpWebModule.cs

UserNavigationManager对NavigationManager进行了进一步的封装,根据用户和权限去创建和获取菜单。


IUserNavigationManager.cs

在LayoutController中,通过注入对IUserNavigationManager的引用,来获取菜单,并由_TopMenu分部页进行最终呈现。

  1. public class LayoutController : LearningMpaAbpControllerBase
  2. {
  3. private readonly IUserNavigationManager _userNavigationManager;
  4. private readonly ISessionAppService _sessionAppService;
  5. private readonly IMultiTenancyConfig _multiTenancyConfig;
  6. private readonly ILanguageManager _languageManager;
  7. public LayoutController(
  8. IUserNavigationManager userNavigationManager,
  9. ISessionAppService sessionAppService,
  10. IMultiTenancyConfig multiTenancyConfig,
  11. ILanguageManager languageManager)
  12. {
  13. _userNavigationManager = userNavigationManager;
  14. _sessionAppService = sessionAppService;
  15. _multiTenancyConfig = multiTenancyConfig;
  16. _languageManager = languageManager;
  17. }
  18. [ChildActionOnly]
  19. public PartialViewResult TopMenu(string activeMenu = "")
  20. {
  21. var model = new TopMenuViewModel
  22. {
  23. MainMenu = AsyncHelper.RunSync(() => _userNavigationManager.GetMenuAsync("MainMenu", AbpSession.ToUserIdentifier())),
  24. ActiveMenuItemName = activeMenu
  25. };
  26. return PartialView("_TopMenu", model);
  27. }
  28. }

至此,我们完成了对导航菜单的梳理和总结。


还没有评论.