枫桥夜泊

每走一步,都是进步

0%

Layui快速入门

发表于 更新于 分类于
本文字数： 6.9k 阅读时长 ≈ 6 分钟 
1
2
3
4
5
6
作者: 夜泊1990
企鹅: 1611756908
鹅群: 948233848
邮箱: hd1611756908@163.com
博客: https://hd1611756908.github.io/
B 站: https://space.bilibili.com/514155929/

第一章 Layui是什么

1
2
3
Layui 是一套免费的开源 Web UI 组件库,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用

学习框架的意义: 写更少的代码,实现相同的功能.

第二章 Layui环境搭建

第1节 官网地址

1
2
3
https://layui.dev/

当前版本 2.9.x 版本,相比于2.8.x和2.7.x新增了很多实用功能,下面会介绍.

第2节 环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
方式一 : 在线第三方 CDN 引入,UNPKG 和 CDNJS 均为第三方免费 CDN (详细请看官网)

    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>

方式二 : 离线引入

	离线引入方式需要去官网下载layui安装包,将css文件和js文件复制粘贴到项目中,然后在引入
	下载地址: https://foruda.gitee.com/attach_file/1709083131303683727/layui-v2.9.7.zip?token=4d86625f99f8aa72a6131358c786aeb4&ts=1709353417&attname=layui-v2.9.7.zip

方式三 : npm 引入(略)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>layui</title>
  <!-- 引入 layui.css -->
  <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>
<body>
 
<!-- 你的 HTML 代码 -->

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
</body>
</html>

第三章 Layui知识点大纲

大纲中只列举了常用的Layui前端知识点,其它的请查看官网.

第四章 Layui页面元素

第1节 布局元素

1.1 栅格布局

1
https://layui.dev/docs/2/layout/grid.html
  • 案例展示
  • 传统布局(略)
1
使用传统布局实现案例样式代码量会比较多
  • Layui布局
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui布局</title>
		<!-- 引入 layui.css -->
		<link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
	</head>
	<body>
		<!-- 布局容器,水平居中  -->
		<div class="layui-container">
		  <div class="layui-row">
			  <div class="layui-col-md3" style="height: 350px;border: 1px solid #ccc;"></div>
			  <div class="layui-col-md9" style="height: 350px;border: 1px solid royalblue;">
				  <div class="layui-row" style="height: 45px;border: 1px solid red;"></div>
				  <div class="layui-row">
				  	<div class="layui-col-md9" style="height: 303px;border: 1px solid fuchsia;"></div>
					<div class="layui-col-md3"></div>
				  </div>
			  </div>
		  </div>
		</div>
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.9.7/dist/layui.js
	</body>
</html>

1.2 布局容器

1
https://layui.dev/docs/2/layout/grid.html#container
1
2
3
4
/* 宽度固定水平居中 */
<div class="layui-container"></div>
/* 宽度100% */
<div class="layui-fluid"></div>

第2节 表格

1
https://layui.dev/docs/2/table/

第3节 按钮/图标

1
2
https://layui.dev/docs/2/button/
https://layui.dev/docs/2/icon/

第4节 表单

1
https://layui.dev/docs/2/form/

第5节 其它

1
动画、导航、菜单等...

第五章 Layui内置模块

第1节 分页模块

1
https://layui.dev/docs/2/laypage/

第2节 数据表格

1
https://layui.dev/docs/2/table/

第3节 弹出层

1
https://layui.dev/docs/2/layer/

第4节 表单模块

1
https://layui.dev/docs/2/form/

第5节 时间模块

1
https://layui.dev/docs/2/laydate/

第6节 文件上传模块

1
https://layui.dev/docs/2/upload/

第7节 树状表格模块

1
2
方式 1 : layui2.7版本不带树状表格,需要借助第三方   https://dev.layuion.com/extend/
方式 2 : layui2.8/9版本新增树状表格,使用起来更方便   https://layui.dev/docs/2/treeTable/

第8节 其它模块

1
以上介绍的模块是开发中常见的模块,如果想使用其它模块,请查看官网

第六章 Layui框架案例练习

第1节 SQL语句

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

-- 创建数据库
CREATE DATABASE book DEFAULT CHARACTER SET UTF8;

-- 创建数据库表
CREATE TABLE category(
    category_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '分类ID',
    category_name VARCHAR(255) NOT NULL COMMENT '分类名称'
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '图书分类表';

-- 插入数据
INSERT INTO category(category_name) VALUES('科技'),('文学'),('历史'),('财经');

-- 创建图书表
CREATE TABLE book(
    book_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '图书ID',
    book_name VARCHAR(255) NOT NULL COMMENT '图书名称',
    author_name VARCHAR(255) NOT NULL COMMENT '图书作者',
    price DOUBLE(12,2) DEFAULT 0.00 COMMENT '图书价格',
    category_id INT NOT NULL COMMENT '分类ID,关联分类表主键',
    create_time DATETIME DEFAULT NULL COMMENT '创建时间',
    status INT DEFAULT 1 COMMENT '是否上架 1:上架 0:下架',
    book_url VARCHAR(255) DEFAULT NULL COMMENT '图书主图地址',
    book_address VARCHAR(255) DEFAULT NULL COMMENT '真实地址'
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '图书表';

-- 关联
ALTER TABLE book ADD FOREIGN KEY (category_id) REFERENCES category(category_id);

第2节 页面展示

第七章 Layui框架模板使用(Pear Admin Layui)

第1节 官网地址

1
http://www.pearadmin.com/

第2节 在线演示地址

1
http://layui.pearadmin.com/

第2节 CRUD练习

2.1 数据库表创建

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
-- 创建测试库
CREATE DATABASE auth DEFAULT CHARACTER SET UTF8;

-- 常见角色表
CREATE TABLE role(
    role_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '角色ID',
    role_name VARCHAR(255) NOT NULL COMMENT '角色名称',
    status TINYINT(1) NOT NULL DEFAULT 1 COMMENT '状态(定义逻辑删除) 1:有效 0:无效'
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '角色表';

-- 创建用户表
CREATE TABLE user(
    user_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '用户ID',
    user_name VARCHAR(255) NOT NULL COMMENT '用户名称',
    email VARCHAR(255) NOT NULL COMMENT '邮箱',
    password VARCHAR(255) NOT NULL COMMENT '密码',
    status TINYINT(1) NOT NULL DEFAULT 1 COMMENT '状态(定义逻辑删除) 1:有效 0:无效'
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '用户表';

-- 创建用户角色关联表
CREATE TABLE user_role(
    role_id INT NOT NULL  COMMENT '角色ID',
    user_id INT NOT NULL COMMENT '用户ID',
    status TINYINT(1) NOT NULL DEFAULT 1 COMMENT '状态(定义逻辑删除) 1:有效 0:无效',
    PRIMARY KEY(role_id,user_id)
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '用户角色关联表';

-- 外键关联
ALTER TABLE user_role ADD FOREIGN KEY (role_id) REFERENCES role(role_id);
ALTER TABLE user_role ADD FOREIGN KEY (user_id) REFERENCES user(user_id);

-- 菜单表
CREATE TABLE menu(
    id INT PRIMARY KEY AUTO_INCREMENT COMMENT '菜单ID',
    title VARCHAR(255) NOT NULL COMMENT '菜单标题',
    icon  VARCHAR(255) COMMENT '菜单图标',
    type INT DEFAULT 0 COMMENT '菜单类型',
    open_type VARCHAR(255) DEFAULT "" COMMENT "菜单类型名称",
    href VARCHAR(255) COMMENT "菜单指向地址",
    parent_id INT DEFAULT 0 COMMENT "菜单父ID,关联主键",
    level INT DEFAULT 1 COMMENT "菜单级别",
    status TINYINT DEFAULT 1 COMMENT "菜单状态 1:有效 0:禁用",
    update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '设置当前时间，并且自动更更新时间'
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '用户角色关联表';

-- 菜单角色关联表
CREATE TABLE menu_role(
    role_id INT NOT NULL  COMMENT '角色ID',
    id INT NOT NULL COMMENT '菜单ID',
    status TINYINT(1) NOT NULL DEFAULT 1 COMMENT '状态(定义逻辑删除) 1:有效 0:无效',
    PRIMARY KEY(role_id,id)
) DEFAULT CHARSET='UTF8' AUTO_INCREMENT=10000 COMMENT '菜单角色关联表';

-- 外键关联
ALTER TABLE menu_role ADD FOREIGN KEY (role_id) REFERENCES role(role_id);
ALTER TABLE menu_role ADD FOREIGN KEY (id) REFERENCES menu(id);

2.2 页面展示

----------------本文结束感谢您的阅读---------------