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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

又见阿郎   2020-03-28 我要评论
#### 部署 参照 [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 如图: ![image](https://note.youdao.com/yws/api/personal/file/102338CC011A4682A201007F67BC9E47?method=getImage&version=7522&cstk=A8CTPvIC) 由上面得知,开始调用layout下的视图文件,用以加载动态js代理,但是同时还会去渲染菜单导航栏。 ``` @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Application) @(await Component.InvokeAsync

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们