"站在巨人的肩膀上", 这样一来, 不要万事亲恭, 在值得的方向上节约时间, 毕竟人生就这么一次. 在接触 ABP 以来, 一直想花点时间整合 LayUI 前端框架到 ABP 中, 进而能够逐渐打磨出一套适合自己的框架, 开发习惯, 项目架构, 界面风格等等. 在年前花了点时间了解了 LayUI 现有的后台模板, 虽然 LayUI 自家的 LayUIAdmin 很不错, 但奈何于贫穷, 因此绕道看看是否有前端同胞已经弄出来一份免费版的, 比较了几份后台模板后, 找到了合适的 X-Admin.
演示地址: http://123.207.15.233:9527/
码云地址: https://gitee.com/530521314/PithyDesign.git
一, X-Admin 前端框架和 ABP 框架
X-Admin 是基于 LayUI 打造的一套前端框架, 比起 Bootstrap 那种粗犷的风格, LayUI 更加符合国人的审美观, 同时 LayUI 也对后端开发人员友好, 在不完全掌握前端知识的前提下也能够进行项目开发, 官网地址: http://x.xuebingsi.com/ .
ABP 框架是一个用最佳实践和流行技术开发现代 web 应用程序的新起点, 旨在快速搭建一个通用的 Web 应用框架和项目模板, 集成着一些优秀的工具和思想, 官网地址: https://aspnetboilerplate.com/ .
如果觉得自己组合一套框架觉得繁琐, 可以试试使用 52ABP 框架, 该套优秀的前后端框架由梁桐铭在 ABP 框架的基础上进行整合, 对于前后端相关功能进行改造, 使满足国人的开发习惯, 官网地址: https://www.52abp.com/ .
二, 开始整合两个框架
1, 先从 ABP 官网下载项目模板. 经过文件结构调整后, 项目文件路径如下, 之所以项目文件路径和官网下载下来的不完全一致, 是经过了一些调整, 适用自己的开发习惯, 毕竟适合的才是最好的, 在之前的生成流水线搭建中 https://www.cnblogs.com/CKExp/p/9860427.html 也提到过项目结构, 目的是使之标准化, 而不需要每次都要重新设置一下项目文件结构.(注意, 此处我下载的是. Net Core+MPA 版 + 去掉登录, 注册, 用户, 角色和多租户功能)
2, 下载 X-Admin 源码包, 解压后, 开始着手 Ctrl+C,V 操作, 将需要的一些 JS,CSS 等文件移入到 ABP 中.
3, 去除在本次整合后部分在 ABP 中的不再需要的功能, 如 Boostrap 及其相关的插件, 并不是 Boostrap 不优秀而是 LayUI 是我的目的, 功能相似下, 没必要在冗余存在.
并在 bower 包管理中删除对 Boostrap 的依赖, 尽可能的使用大部分 LayUI 及 LayUI 社区提供的插件和功能, 以减少后端开发人员的学习和使用成本.
4, 将 X-Admin 文件夹中的 JS 文件及 CSS 文件移入到 ABP 中, 部分 ABP 分装了一层的 JS,CSS 保持不变, 仍然先存放着, 如果后期确定不再使用, 再进行移除 ABP 下载后自带了一个 main.CSS 文件, 可以使用这个文件或直接使用 X-Admin 中的 CSS 文件.
5, 以现有的 Layout 母版页复制一个 (此处我命名为_LayoutBase), 从 X-Admin 文件夹中查看 index.HTML 并复制 Body 标签内的代码到_Layout 母版页的 Body 中 (我对底部的 footer 删除了, 位置不太合适), 整理引用的 JS,CSS 文件, 具体可见我的 Git 仓库中, 使用控制器 Home, 方法 Index 的视图作为使用_LayoutBase 母版页的视图, 其余页面都将在 Index 界面中以 iframe 的形式出现, 到现在, 直接启动项目后, 初步的界面可以展现出来了.
三, 优化展示效果
1,X-Admin 中, 对于侧边栏收缩采用的是直接全部隐藏, 在该功能的基础上改造一些功能, 使得收缩后可以留下一列图标, 实现方式可以有很多种, 此处采取使用 JS 脚本去控制左侧菜单宽度实现, 在 xadmin.JS 脚本中, 找到 $('.container .left_open').click() 方法, 然后在此基础上进行改造, 如以下改造, 注意, 部分 CSS 也需要改造, 具体见仓库源代码中.
- $('.container .left_open').click(function (event) {
- if (!$('.left-nav #nav .layui-nav-item').hasClass('nav-mini')) {
- // 左侧菜单
- $('.left-nav #nav .layui-nav-item').addClass('nav-mini');
- $('.left-nav').animate({ left: '0px', width: '60px' }, 100);
- $('.sub-menu li').each(function () {
- $(this).hide();
- });
- // 右侧内容
- $('.page-content').animate({ left: '60px' }, 100);
- $('.page-content-bg').hide();
- } else {
- // 左侧菜单
- $('.left-nav .layui-nav-item').removeClass('nav-mini');
- $('.left-nav').animate({ left: '0px', width: '220px' }, 100, function () {
- $('.sub-menu li').each(function () {
- $(this).show();
- });
- });
- // 右侧内容
- $('.page-content').animate({ left: '220px' }, 100);
- if ($(Windows).width() < 768) {
- $('.page-content-bg').show();
- }
- }
- });
2, 加入语言为简体中文, 在领域层中的本地资源配置中加入中文及中文语言包, 此处我将中文设置为默认语言, 更改原有默认的英文包的 PithyDesign 为 PithyDesign-en, 并增加一个 PithyDesign.JSON 内容与英文包一样, 将英文译成中文即可.
增加中文并设置为默认选项, 如有更多语言, 可以在此基础上进行扩展.
3, 对 X-Admin 代码包中存在的一些其它界面加入到 ABP 中如用户, 管理员的增删改查界面, 地址三级联动, 百度的 ECharts 图表展示界面等, 在增加前需要注意母版页的设置, 在按 Url:Home/Index 进入后台界面后, Index 视图直接套用_LayoutBase 母版页, 然后其它功能页以 iframe 的形式嵌入, 其余功能页使用_Layout 母版页.
至此, 整合工作算是完成了, 后期考虑提高一些操作上的体验感, 同时逐步完善如用户登录, 注册, 组织机构, 角色等基础功能.
2019-02-21, 望技术有成后能回来看见自己的脚步
来源: http://www.bubuko.com/infodetail-2963489.html