BookStore示例项目---菜单栏UI分析

#### 部署 参照 [ABP示例项目BookStore搭建部署](https://www.cnblogs.com/zhiyong-ITNote/p/11874718.html) ### 项目解构 #### 1)、动态脚本代理 启动项目时，默认会调用两个接口 ``` /Abp/ApplicationConfigurationScript /Abp/ServiceProxyScript ``` ServiceProxyScript会解析项目路由，动态生成api路径。此两个接口封装在了`Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic`程序集中。一旦引用该程序集便会自动调用接口。 #### 1.1)、虚拟文件系统 说到虚拟文件系统，先要了解 [嵌入资源文件](https://www.cnblogs.com/ecin/archive/2012/02/26/2369139.html)。简而言之，就是以程序调用的形式访问文件。对于虚拟文件系统的了解，可以参考： [基于ASP.NET Core的模块化设计: 虚拟文件系统](https://blog.csdn.net/sD7O95O/articlehttps://img.qb5200.com/download-x/details/88967761) [ABP虚拟文件系统(VirtualFileSystem)实例------定制菜单栏显示用户姓名](https://www.cnblogs.com/waku/p/11438478.html) #### 1.2)、小结 上面说到的动态脚本代理是如何调用的？在模块 `Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared` 中有一类cshtml，它是嵌入式资源文件，以Page\Account文件夹下_ViewStart.cshtml为例： ``` @using Volo.Abp.AspNetCore.Mvc.UI.Theming @inject IThemeManager ThemeManager @{ Layout = ThemeManager.CurrentTheme.GetApplicationLayout(); } ``` 在这里调用`Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic`中的GetApplicationLayout方法： ``` public virtual string GetLayout(string name, bool fallbackToDefault = true) { switch (name) { case StandardLayouts.Application: return "~/Themes/Basic/Layouts/Application.cshtml"; case StandardLayouts.Account: return "~/Themes/Basic/Layouts/Account.cshtml"; case StandardLayouts.Empty: return "~/Themes/Basic/Layouts/Empty.cshtml"; default: return fallbackToDefault ? "~/Themes/Basic/Layouts/Application.cshtml" : null; } } ``` 而这三个cshtml视图文件都包含了这么一段脚本： ``` ``` 如此便调用了后端方法生成动态脚本，同时我们可以改造这里的视图，用来定制网站的菜单栏等UI界面。 #### 2)、UI界面菜单栏分析 #### 2.1)、ABP UI界面单测项目分析 ABP简单菜单栏分析，项目源码：https://github.com/abpframework/abp/treehttps://img.qb5200.com/download-x/dev/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo 如图：  由上面得知，开始调用layout下的视图文件，用以加载动态js代理，但是同时还会去渲染菜单导航栏。 ``` @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Application) @(await Component.InvokeAsync