YaYa-Layui-Admin-Plus最佳实践

发表于 更新于 分类于 阅读次数： 本文字数： 3.5k 阅读时长 ≈ 3 分钟 
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/

第一章 概述

第1节 介绍

YaYa模板(全称 yaya-layui-admin-plus )，是一款基于Layui 实现的中后台前端管理模板，不依赖脚手架，用户只需要掌握简单的 html/css/js 即可使用，简单方便，开箱即用。

第2节 开源地址

1
2
Github: https://github.com/hs-an-yue/yaya-layui-admin-plus
Gitee: https://gitee.com/ukoko/yaya-layui-admin-plus

第3节 本地运行

1
2
3
开发工具: vscode + Live Server 插件

将项目克隆到本地,使用vscode开发工具运行即可，这里不做演示。

第二章 核心文件介绍

第1节 项目目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
YaYa-LayUI-Admin-Plus
├─ assets			# README.md文件中显示的图片
├─ css				# 核心css文件
├─ data				# 模板用到的模拟数据
├─ font				# 字体图标库,目前引入的为bootstrap官方图标库
├─ image			# 模板中用到的图片(图标、LOGO等)
├─ js				# 核心JS文件(模板核心JS文件和第三方JS库)
├─ layui			# Layui框架核心库
├─ mock				# 模拟API功能(登录，注销等...)
├─ views			# 模板中提供的DEMO页面
├─ .gitignore			# Git忽略文件
├─ DISCLAIMER.md		# 免责声明文件
├─ favicon.ico			# ico图标
├─ index.html			# 模板首页
├─ LICENSE			# 开源协议
├─ login1.html			# 登录页1
├─ login2.html			# 登录页2
├─ login3.html			# 登录页3
├─ login4.html			# 登录页4
└─ README.md			# 模板的介绍文档

第2节 核心HTML文件介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
YaYa-LayUI-Admin-Plus
├─ views
│  ├─ dashboard.html		# 仪表盘页面
│  ├─ workbench.html		# 工作台页面
│  ├─ user-*.html		# 系统配置/用户管理相关页面		
│  ├─ dept-*.html		# 系统配置/部门管理相关页面
│  ├─ menu-*.html		# 系统配置/菜单管理相关页面
│  ├─ extend-layout-*.html 	# 布局模板/布局模板相关页面
│  ├─ tree-menu*.html 		# 多级菜单/多级菜单相关页面
│  ├─ extend-color.html 	# 组件管理/颜色组件页面
│  ├─ extend-search.html 	# 组件管理/搜索组件页面
│  ├─ extend-iconfont.html 	# 组件管理/图标组件页面
│  ├─ extend-button.html 	# 组件管理/按钮组件页面
│  ├─ extend-badge.html 	# 组件管理/标签组件页面
│  ├─ personal-center-*.html	# 个人中心相关页面
│  ├─ notice-*.html		# 公告管理相关页面
│  └─ extend-about.html		# 关于模板页面
├─ index.html			# 模板首页
├─ login1.html			# 登录页1
├─ login2.html			# 登录页2
├─ login3.html			# 登录页3
├─ login4.html			# 登录页4

第3节 核心CSS文件介绍

1
2
3
4
5
6
YaYa-LayUI-Admin-Plus
├─ css
│  ├─ index.css			# 模板首页(index.html)核心CSS文件
│  ├─ menu.css			# 模板首页(index.html)左侧导航栏核心CSS文件
│  ├─ yaya-common.css		# 页面的公共样式CSS文件
│  └─ yaya-style-extend.css 	# 组件管理页面的CSS文件

第4节 核心JS文件介绍

1
2
3
4
5
YaYa-LayUI-Admin-Plus
├─ js
│  ├─ yaya-admin-plus.js # 模板核心JS文件，模板的核心交互功能实现都在这里，包括左侧菜单生成，选项卡，面包屑导航等
│  ├─ xm-select.js 	 # 多功能下拉框(第三方)
│  ├─ echarts.min.js 	 # 图表生成(第三方)

第三章 最佳实践

第1节 前端最佳实践

1.1 布局最佳实践

1
2
3
4
5
模板提供了两种布局方式: 
1️⃣紧凑布局 
2️⃣舒缓布局 

用户根据实际进行自主选择

紧凑布局

1
2
3
4
5
6
7
8
9
10
11
<body>
    <!--
        需要引入 yaya-common.css 样式文件
        紧凑布局:
            yaya-box-fluid  : 紧凑布局对应的class类名,可以自行调整
            yaya-panel      : 紧凑布局内容部分对应的class类型,可以自行调整
    -->
    <div class="yaya-box-fluid">
        <div class="yaya-panel"><h1>布局模板-1-紧凑布局</h1></div>
    </div>
</body>

jincou

舒缓布局

1
2
3
4
5
6
7
8
9
10
11
<body>
    <!--
        需要引入 yaya-common.css 样式文件
        舒缓布局:
            yaya-box-container  : 舒缓布局对应的class类名,可以自行调整
            yaya-panel          : 舒缓布局内容部分对应的class类型,可以自行调整
    -->
    <div class="yaya-box-container">
        <div class="yaya-panel"><h1>布局模板-2-舒缓布局</h1></div>
    </div>
</body>

shuhuan

1.2 内容选择最佳实践

1
2
3
4
5
6
7
8
布局完成后，就是向布局好的容器中添加内容，对于管理系统，内容基本上就是两种:
1️⃣ 条件搜索框
2️⃣ 数据表格

条件搜索框去 组件管理/搜索组件页面中去复制粘贴
数据表格去 LayUI官网去复制粘贴即可

模板中也提供了两个针对紧凑布局和舒缓布局的案例页面，也可以直接使用，路径案例路径如下:

紧凑布局样例 views/extend-layout-1-demo.html

demo

舒缓布局样例 views/extend-layout-2-demo.html

demo

第2节 前后端最佳实践

因为目前只有前端模板，没有后端接口，所以基于JS实现几个函数用来模拟后端API

1
2
3
YaYa-LayUI-Admin-Plus
├─ mock
│  ├─ mockApi.js		# 模拟后端API的函数，封装在此文件中

2.1 Mock测试API

1
2
3
4
5
6
7
8
模拟API的文件在mock目录下的mockApi.js中，文件中有详细的源码和注释

调用方式也非常简单

第1️⃣步 在使用的html页面中引入 mockApi.js 文件
第2️⃣步 因为JS是纯面向对象的语言,所以直接对象.方法调用即可。

具体调用方式请参考以下案例。

2.2 登录

1
2
3
4
前端使用login3.html登录页面实现登录功能
后端使用mockApi.js中的login()函数模拟

具体实现直接去login3.html中查看源码

2.3 注销

1
2
3
4
前端注销功能在index.html页面
后端使用mockApi.js中的logout()函数模拟

具体实现直接去index.html中查看源码

2.4 左侧菜单

1
2
3
左侧菜单没有走mockApi.js进行模拟，而是直接采用AJAX的请求方式，请求data目录下的menus.json文件

具体的实现源码在js目录下的yaya-admin-plus.js文件中，里面有注释，可以自行查看源码

2.5 权限(未完成)

这里演示的权限主要是按钮权限，因为菜单和数据权限是由后端生成好后返回给前端，前端不需要做什么明显改动。而按钮权限不仅仅后端要给权限数据，前端也要配合实现逻辑，所以这里针对按钮权限做详细的介绍。权限实现会基于Layui的laytpl实现，这是 Layui 内置的 JavaScript 模板引擎，采用原生控制，简单方便。

--------------------------已经到底啦！--------------------------