layui 如何动态加载局部页面_最符合国情的开源Layui后端管理应用模板——KitAdmin...

介绍

layui是国内开发者开发的一个面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案，可以说它极度符合国人的风格，深受广大前后端开发者和爱好者的喜爱，也诞生了不少基于layui的框架模板，特别适合国内前中后端工程师使用，KITADMIN就是其中一个基于layui的后端管理应用模板，当前版本是基于layui 2.x重构的版本，与之后1.x版本有本质有区别。该版本的核心是[路由]，不再支持[iframe]方式的加载，可以说更加的优雅了！

---

---

开源地址

码云：

https://gitee.com/kitteam/kit_admin/

---

演示地址：

http://kit.zhengjinfan.cn/#/

版本特性

以下是来自demo页面作者的介绍，感兴趣的可以直接去看看

• 1、用法一如既往的简单，快捷。(只需要简单的配置就实现一些功能).
• 2、提供本地开发环境。(依赖nodejs运行环境和gulp)
• 3、提供代码功能。(依赖nodejs运行环境和gulp)
• 4、模块化加载。(依赖layui模块化，用法与layui保持一致)
• 5、提供路由功能。(路由是本版本的核心功能了，需与模板绑定，详情请参考相关文档)
• 6、完全的前后端分离开发。(集成mockjs用于拦截请求并返回模拟数据，详情请参考相关文档)
• 7、左侧菜单重写，支持到4级菜单。(集成mockjs用于拦截请求并返回模拟数据，详情请参考相关文档)

---

文档就在demo页面的下面.

---

---

脚手架

KITADMIN的作者非常给力，提供了开箱即用的脚手架，我们可以基于此脚手架直接用于正式开发

https://gitee.com/kitteam/kit_admin_scaffold/

---

1. 提供本地开发环境；
2. 提供代码打包功能 ；
3. 模块化；
4. 提供路由功能；
5. 能快速开发单页面应用程序。

---

---

打开后效果：

---

---

页面都是以模板形式的，如下

---

---

开发构建：

---

# 安装node依赖包npm install# 启动开发环境 http://localhost:8010npm start# 构建生产环境代码npm run build

---

PS：这个地方需要注意的是，你nodejs的版本不能过高，我在本地测试时发现最高版本12.x会报错，随后重新安装了nodejs10，问题随之解决！

效果预览

在正式选用框架之前，你应该大致的预览一下，以免开发的时候才发现可能无法满足你的需求：

• 登录页面

---

---

• 左侧菜单栏

菜单栏支持多级菜单，最多支持4级，支持收缩菜单栏

---

---

• 顶部(看不清可以直接打开Demo预览)

---

---

• 页面设置：

你可以切换页面模式，可以使选项卡式，也可以是单个页面模式(一次只打开一个页面)，更换主题功能

---

---

• 选项卡模式

---

---

• 切换主题

---

---

• 页签管理

---

---

• 左侧边栏打开

---

---

• 右侧边栏

---

---

兼容性

KIADMIN很遗憾不兼容IE，但是当前大多数新项目已经不再要求兼容IE了，一些特殊的项目除外，因此也并不是问题，支持其他主流的浏览器

关于layui

关于layui，笔者一直都在关注，因为当时的毕业设计就用了它，因此感触很多，在之前的一段时间里，layui停止更新了一段时间，但最近作者又在疯狂的更新了，虽然现在还是2.x版本，但是我相信在未来不久的日子里，3.0版本会上线的，大家可以去官网随时查看相关动态！

---

---

总结

KITADMIN是一个不错的后端应用的前端模板，虽然可能和官方的layuiAdmin相比还稍逊一筹，但是它是开源的，对于个人开发者尤为友好，如果你对它感兴趣，不妨可以试试，如果是企业用户，无论是使用KITADMIN还是使用官方的layuiAdmin都是可以的，如果你遇到了什么困难，这里我引用作者的一句话：

多思考，多动手，进步是可以看得见的！