1
2
3
4
5
6
| 作者: 夜泊1990
企鹅: 1611756908
Q 群: 948233848
邮箱: hd1611756908@163.com
博客: https://hs-an-yue.github.io/
B 站: https://space.bilibili.com/514155929/
|
第一章 Ya-Admin概述
第1节 Ya-Admin介绍
Ya-Admin 是一款基于LayUI2.13+创建的后台管理系统模板，他的创建之初是因为作者不经常写前端代码，偶尔在进行前端开发时Vue的那一套知识体系因为距离上次开发时间间隔太久，很多都忘记了，需要重新学。例如：Vue2和Vue3版本差异，造成的生态差异(路由，状态管理器，脚手架)以及选项式组合式语法差异，还有JS/TS脚本语言差异，ES版本差异，nodejs依赖库差异，以及各种插件问题等，让作者每次都非常痛苦。作者觉得开发一个PC端的后台管理系统，付出的时间成本实在是太高，有没有只需要了解简单的HTML/CSS/JS就可以开发出自己想要的后台管理系统呢？于是就发现了LayUI这个只需要会简单的HTML/CSS/JS就可以干活的前端UI框架。但是市面上针对LayUI的生成的模板实在是太少并且版本非常低，根本就跟不上LayUI官网更新速度，基于作者对LayUI的喜欢，Ya-Admin应运而生。最初的想法只是作者个人使用，没想过开源，后面觉得可能有一些和我一样的后端开发，遇到共同的难题，有共同的需求，遂决定开源，为我们这群小众群体，提供一些力所能及的帮助。
第2节 Ya-Admin特点
1
2
3
4
5
6
| 优点
-学习成本低: 会简单的HTML/CSS/JS就可以干活
-基于HTML页面开发: 简单粗暴
-LayUI框架是LTS版本,文档清晰明了，使用简单，组件丰富
缺点
-小众: 大部分人还是用Vue那一套,用LayUI的人比较少
|
第3节 Ya-Admin在线预览
1
2
3
| 预览地址: http://106.14.27.178
注意: 因为没有域名，有些系统浏览器不支持
|
第4节 Ya-Admin下载和运行
4.1 下载地址
1
2
3
4
5
6
7
8
9
10
11
12
13
| GITEE: git clone https://gitee.com/ukoko/ya-layui-admin.git
作者提供了两个版本
第一个版本(master分支): 纯白色背景版本(LayUI官网默认主题颜色) 纯白色+绿色
第二个版本(dark分支): 左侧深色主题+右侧白色主题+字体蓝色主题
GITHUB: git clone https://github.com/hs-an-yue/ya-layui-admin.git
作者提供了两个版本
第一个版本(main分支): 纯白色背景版本(LayUI官网默认主题颜色) 纯白色+绿色
第二个版本(dark分支): 左侧深色主题+右侧白色主题+字体蓝色主题
大家可以根据自己的喜好进行分支选择，或者根据自己的喜好进行DIY
|
4.2 开发工具
1
2
3
4
5
6
| 根据个人喜好而定
1. HBuilder X
2. Visual Studio Code
3. IntelliJ IDEA
4. WebStorm
...
|
4.3 运行
1
| 将下载的ya-layui-admin导入到开发工具中，运行index.html或者login.html，在浏览器中访问即可。
|
第二章 Ya-Admin 核心API概述
第1节 Ya-Admin核心功能
1.1 框架主体介绍
1
2
3
4
5
6
7
8
9
10
11
12
13
| 整体设计为左右两栏
1. 左侧为LOGO和菜单导航
1.1 顶部LOGO
1.2 导航菜单
2. 右侧为主体内容区域
2.1 主体内容区域包括
2.1.1 顶部工具条部分
2.1.2 顶部选项卡部分
2.1.3 底部内容展示部分
2.2 在顶部工具条上有一个菜单图标
2.2.1 隐藏和显示左侧菜单+LOGO区域
注意: 不支持响应式布局，个人认为对于后管来说，移动端意义不大，所以没做支持
|
1.2 左侧导航菜单介绍
左侧菜单实现: 基于 LayUI 官网 menu 组件实现 详细文档: https://layui.dev/docs/2/menu/
1.3 顶部切换标签介绍
顶部切换标签实现: 基于 LayUI 官网 tabs 组件实现 详细文档: https://layui.dev/docs/2/tabs/
1.4 左侧菜单和顶部标签联动介绍
1
2
3
4
| 左侧菜单和右侧顶部面包屑导航和右侧选项卡是同时联动的
1. 点击左侧菜单右侧面包屑导航和选项卡跟着一起联动
2. 点击右侧选项卡，顶部面包屑导航和左侧菜单联动
3. 面包屑导航只有显示功能，没有实现跳转能力
|
第2节 Ya-Admin设计思想
有时候设计思想不重要，坚持才重要。写这个模板时遇到了很多问题，CSS问题，交互问题等，真想把键盘砸了不写了。最后整天自己PUA自己才一点点完成了此模板。这里不说设计思想，说一下心路历程。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| 开始...
1. 豪言壮志:写一个基于LayUI的模板，以后再也不用受Vue2、Vue3、Vue生态、Nodejs版本和依赖的气
2. 毫无头绪: MD放弃
... 过几天，受了Vue生态的气 ...
3. 豪言壮志: 再也不受Vue的气，就不信我写不出来
... 毫无头绪，砸键盘 ...
4. 一个维护了好多年的Vue项目，装了好几个版本node，依赖总装不上 ... 已老实
5. 豪言壮志: 觉得自己又行了，一定要实现一个不这么傻13的模板，不需要学Vue，会点HTML/CSS/JS就能干活的
... 毫无头绪 ...
计划开始，先不设想那么远，先就实现一个左右的布局:
1. 第一步: 先实现整体布局
1.1 左右两栏布局实现
1.2 右侧上中下三行实现
1.3 添加左侧隐藏和显示菜单图标并实现左侧菜单的隐藏和显示
... 第一步完成后，高兴了好久，万事开头难，不要想太多，一步一步走，遇到问题在查资料处理问题 ...
2. 第二步: 左侧菜单实现
2.1 顶部LOGO和文字(非常简答转瞬完成)
2.2 导航菜单(想了好久该怎么实现，一遍遍看LayUI官网，在开发工具上测试menu组件)
2.3 将实现好的菜单，移植到模板工程中
... 第二步完成，又开心了好久 ...
3. 第三步: 右侧顶部工具条
3.1 面包屑导航(LayUI官网对应组件)
3.2 右侧用户信息(LayUI官网对应组件)
... 第三步完成，信心倍增 ...
4. 第四步: 右侧顶部选项卡
4.1 选项卡显示(LayUI官网对应组件)
4.2 选项卡切换(LayUI官网对应组件)
... 第四步完成，游刃有余 ...
5. 第五步: 左侧菜单+右侧面包屑导航+右侧选项卡联动
5.1 点击左侧菜单右侧选项卡如果不存在新增，如果存在定位
5.2 点击选项卡，定位到左侧菜单项
5.3 无论点击左侧还是点击右侧，顶部面包屑导航都要跟着变化
5.4 如果删除选项卡后，选项卡列表会定位一个新的，这时左侧菜单和顶部面包屑也要联动
... 第五步完成，心如止水，一切尽在掌握 ...
这是我在实现模板时的心路历程，最后不负众望，坚持了下来，这里感谢在各种BUG和不达预期时没有心态炸裂的自己。
|
第三章 Ya-Admin使用入门
第1节 Ya-Admin-登录页
1
2
| 登录页面是从LayUI官网复制得来，具体操作参考官网即可
https://layui.dev/docs/2/form/
|
第2节 Ya-Admin-首页
2.1 LOGO+标题修改
1
| LOGO+标题修改比较简单,在首页index.html页面修改即可
|
2.2 浏览器选项卡ICON
2.3 仪表盘-固定菜单|默认选项卡修改
2.3.1 固定菜单
1
| 固定菜单和动态菜单不同,动态菜单从服务器获取，固定菜单一般情况不放在服务器端,但是也有人将菜单全部交给服务器管理.
|
2.3.2 默认选项卡
1
| 默认选项卡设置和固定菜单搭配，和固定菜单保持一致，如果不保持一致也可以，就是比较丑。
|
2.4 动态菜单修改
1
2
3
4
| 动态菜单数据来源于服务器端,通过服务器端接口调用获取，需要严格保证前后端数据格式
数据参考: data/menu.json
如果前后端不能保持一致，可以在后端进行数据修改，或者在前端修改
修改参考: js/index.js中的create_menu函数，此函数用于生成菜单
|
2.5 用户设置修改
1
| 用户设置在点击时会在顶部选项卡中生成选项卡，所以id不能和选项卡中的id相同，否则会出现切换失败。
|
第3节 Ya-Admin-用户设置页
1
| 用户设置页面，是根据LayUI官网的组件生成，针对页面内容区域，大家可以根据自己的审美结合服务器端的需求进行DIY.
|
第4节 Ya-Admin-用户管理页
1
2
| 用户管理页面相比于其它页面比较复杂，LayUI官网没有提供恰好合适的组件实现此功能，
此页面根据LayUI官网提供的组件修改后得到，如果不满足用户需求，可以自定义修改。
|
第5节 Ya-Admin-组织架构页
1
| 组织架构就是部门，部门通常情况下都是多层的，所以采用LayUI官网的treeTable组件实现
|
第6节 Ya-Admin-Dark主题页面
1
| Dark主题:如果使用纯白主题切换master分支，使用Dark主题切换dark分支
|
第7节 Ya-Admin-dark登录页
第8节 Ya-Admin-其它页面
1
| 其它页面没有太大的实际意义，大家可以根据自己的用户需求进行创建和删除
|
第四章 Ya-Admin总结
这是一个基于LayUI 的前端模板框架，非常接近于原生，只要了解一些HTML/CSS/JS就可以进行开发，学习成本极低，希望给大家带来不一样的前端开发体验。