一、基本使用

概念：

• layui（谐音：类UI)是一个前端UI框架，遵循原生 HTML/CSS/JS 的书写与组织形式，使用门槛低，拿来即用。
• 同类产品：Bootstrap、EasyUI。
• 旧官网代码已迁移到公共代码平台。GitLab地址，Gitee地址。
• 新官网，参考文档

1.下载压缩包。

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库
1
2
3
4
5
6
7

2.将layui目录放到django项目的static静态目录下。

3.html导入layui.css和layui.js

1
2

4.使用layui。

##################################################
1.创建应用qingjun。
python manage.py startapp qingjun
##################################################
2.编写根url规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index)
]
##################################################
3.视图函数。
from django.shortcuts import render
def index(request):
    return render(request,'index.html')
##################################################
4.html模板。



    
    
    
    


首页




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

5.查看效果。

二、管理后台布局

2.1 导航栏

• 顶部导航：一般用于官网。
• 侧栏导航：一般用于管理后台。
  

1.使用官网文档里的代码作为母版，复制过来进行修改，其他作为子页面，做好预留区域。

2.修改涉及文字，注释不要的头部菜单和用户信息。
3.新增几个菜单和页面，配置导航栏展开和选中效果，主要涉及两个类使用。

菜单展开类样式：layui-nav-itemed
子菜单选中类样式：layui-this
1
2

2.2 主题颜色

1.顶部背景。

1

2.侧栏背景。

DevOps管理平台


1
2
3

2.3 字体图标

1.给导航栏前面添加字体图标，美化效果。

      仪表盘
1

三、栅格系统

基本概念：

• 栅格也叫网格系统，是一种平面设计的方法和风格。以规则的网格阵列来指导和规范网页中的版面布局。
• 将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
  

栅格布局规则：

1. 采用 layui-row 来定义行，比如：
2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量代表的是该列所占用的12等分数（如6/12），可选值为 1-12。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

1.使用栅格嵌套效果。在列元素（layui-col-md）中插入一个行元素（layui-row）即可。

    

        

            
内容1
            
内容2
        
        

            
内容3
        
    

1
2
3
4
5
6
7
8
9
10
11

2.查看效果。

四、卡片面板

• 卡片式面板面板通常用于非白色背景色的主体内，从而衬托出边框投影的效果。
• 主要用于美化显示。

1.添加代码。

  
卡片面板
  

		内容区
  

1
2
3
4
5
6

2.查看效果。

五、面包屑

• 页面导航效果。

1.首页添加效果。

  首页
  仪表盘


1
2
3
4
5

2.子页面添加效果。

  首页
  Kubernetes
  Node

1
2
3
4
5

六、按钮

• 配合js绑定事件使用。

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

2.查看效果。

七、表单

• form.on语法：form.on(‘event(过滤器值)’, callback);
• form模块在 layui 事件机制中注册了专属事件，类似于js onclick：

1.表单基本区块结构。

    

      标签区域
      

             表单元素区域
      
    

1
2
3
4
5
6
7
8

2.通过ajax将数据提交到服务端。

相关参数释义：

• lay-filter=“formDemo”： 类似于ID，选择一个事件标识。
• data.field：表单数据及csrf_token都保存到里面。
• lay-submit：表单的提交事件是需要通过带有lay-submit属性的按钮来触发的

#################################################################################
1.根url路由规则。
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index),
    re_path('user/',views.user,name='user')
]
#################################################################################
2.app(qingjun)视图函数。
def user(request):
    if request.method == "GET":   #from自带提交事件。
        print("from提交")
        print(request.GET.get("username"))
    elif request.method == "POST":     #ajax绑定事件提交。
        print("ajax提交")
        print(request.POST)
        code = 0
        msg = "创建用户成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)

#################################################################################
3.子板部分内容。
 //采用post请求，执行下方的js脚本，通过ajax将表单数据提交给服务端接口。
    {% csrf_token %}   //解决csrf安全机制问题。
  

    用户名
    

      
    
  
  

    密码
    

      
    
    
密码必须满足字母、数字和特殊字符
  
  

    户籍
    

      
        
        北京
        上海
        广州
        深圳
        杭州
      
    
  
  

    兴趣爱好
    

      
      
      
    
  
  

    账号是否启用
    

      
    
  
  

    性别
    

      
      
    
  
  

    备注
    

      
    
  
  

    

      创建
      重置
    
  



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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

3.查看效果。

八、上传文件

• 通过上传模块upload.render实现。

1.接上述示例，添加一个上传文件按钮（表单项）。

    上传头像
    

        上传文件
    

1
2
3
4
5
6

2.通过ajax将图片上传到服务端。

###############################################################
1.接上述示例，将子板js内容修改如下。

###############################################################
2.接上述示例，将视图函数修改如下。
def user(request):
    if request.method == "GET":   #from自带提交事件。
        print("from提交")
        print(request.GET.get("username"))
    elif request.method == "POST":     #ajax绑定事件提交。
        print("ajax提交")
        print(request.POST)
        file_obj = request.FILES.get('file')
        try:
            import os
            file_path = os.path.join('upload', file_obj.name)
            with open(file_path, mode='wb') as f:
                for i in file_obj.chunks():
                    f.write(i)
            code = 0
            msg = "上传成功."
        except Exception as e:
            code = 1
            msg = "上传失败！"
        code = 0
        msg = "创建用户成功！"
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

3.查看效果。

九、数据表格

• 通过table模块对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。

9.1 table模块常用参数

• cols 表头参数

9.2 创建表格

1.接上述示例，新建一个子模版，在卡片面板区域新增一个表格。

1

2.子模版js代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.新增url接口和视图函数。

#################################################
from django.urls import path,re_path
from qingjun import views
urlpatterns = [
    re_path('^$',views.index),
    re_path('user_data/',views.user_data,name='user_data'),
]
#################################################
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        msg = "获取用户数据成功！"
        data = {'code': 0, 'data': user, 'msg': msg}
        return JsonResponse(data)   #如果传递不是一个字典，需要设置safe=False
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.查看数据接口返回的JSON数据格式。

{
    "code": 0,
    "data": [{}, {}],
    "msg": "",
    "count": 1000  
}
1
2
3
4
5
6

5.查看卡片面板页面显示效果。

|

9.3 表格分页

• 分页效果：比如一页显示10条记录，共十页。用户可以自行翻阅，记录少，清晰显示。
• js中的table.render 默认会自动传递两个参数：?page=1&limit=30，该参数可通过 request 自定义。
  • page：代表当前第几页。
  • limit：代表每页数据条数。

1.服务端数据接口根据这两个传递参数，返回指定数量数据。

page = int(request.GET.get('page'))
limit = int(request.GET.get('limit'))
# data = data[0:10]
start = (page - 1) * limit  # 切片的起始值
end = page * limit  # 切片的末值
data = data[start:end] # 返回指定数据范围
1
2
3
4
5
6

2.接上述示例，修改视图函数如下。

def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.查看卡片面板效果。

9.4 表格工具栏

实现思路：

1. 第一步，先基于上面的“表格分页”案例的代码上，把表格框架弄出来。（头工具栏事件）
2. 第二步，再针对实现每个按钮功能。（监听行工具事件）
3. 第三步，实现删除操作。监听行工具事件函数第一个参数obj是当前行所有数据，可以console.log(obj)在控制台查看。所以实现删除操作，只需要把这行ID或者其他列值传递给服务端即可，即前端ajax DELETE提交当前行ID到服务端接口。
4. 第四步，实现编辑操作。以修改邮箱为例，前端ajax PUT 提交当前行ID和弹出框输入的信息到服务端接口。
   其中的回调函数可以根据不同状态，使用layer提示框。服务端一个函数视图实现增删改查，即GET/POST/PUT/DELETE

1.新增表格头部编辑栏和行工具栏。

#########################################################################################
##js代码部分，接上述案例的url规则和视图函数。

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

2.实现右侧的“编辑”和“删除”操作。

##################################################################
#接上述案例，修改视图函数如下。
from django.http import QueryDict 
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            user.append(row)
        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass
##################################################################
{% csrf_token %}   //添加此行。


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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

9.5 表格查询

9.5.1 搜索关键字查询

实现思路：

1. 在已有的左侧位置创建input搜索框和button按钮。
2. 使用jquery绑定按钮事件并获取input输入框值。
3. 使用table.reload重载表格。
4. 服务端接受url传参，根据搜索关键字返回数据

1.增加搜索框。

1
2
3
4
5
6

2.给表格设置ID。

3.监听搜索按钮事件与表格重载。表格重载其实就是重新从后端获取数据，刷新表格。

##接上述示例，在layui.use函数里追加如下内容
$(document).on('click','#searchBtn', function () {
//$('#searchBtn').click(function ()[
    {#var input_val = $('.layui-input').val();#}
    var input_val = $("input[name='username']").val();
    table.reload('TT', {
        where: {   //设定异步数据接口的额外参数，任意设置
            search_key: input_val
        },
        page: {
            curr: 1  //重新从第 1 页开始
        }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.服务端数据接口。

####接上述示例，修改视图函数。
def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            search_key = request.GET.get("search_key", None)
            if search_key:
                if search_key == name:   # == 换成 in 则为模糊查询
                    user.append(row)
            else:
                user.append(row)

        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass
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

5.验证效果，查询name，返回关键字给服务端。

9.5.2 选择框查询

• 与上面思路一样。增加选择框，根据已有的信息选择，这里是性别为例。

1.增加选择框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.表单（选择框）事件监听。

########################################################################
#增加form模块。
layui.use(['table','form'], function(){
    var form = layui.form;
########################################################################
##js脚本内容。
form.on('select(sex)', function (data) {
    var select_val = data.value;
    table.reload('TT', {
        where: {   //设定异步数据接口的额外参数，任意设置
            search_sex: select_val
        },
        page: {
            curr: 1  //重新从第 1 页开始
        }
    });
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.服务端数据接口。

def user_data(request):
    if request.method == "GET":
        user = []  #数据格式为[{},{},{}]
        # 正常通过ORM获取
        for id in range(1, 100):
            import random
            name = random.sample(['卿君', '柏木', '向南', '若兮', '天园', '北上'], 1)  #返回列表。
            name = '慕' + str(name[0])
            sex = random.sample(['男', '女'], 1)
            sex = sex[0]
            email = str(id) + '@qingjun.com'
            row = {'id': id, 'username': name, 'sex': sex, 'email': email}
            search_key = request.GET.get("search_key", None)
            select_sex = request.GET.get("select_sex", None)
            if search_key and select_sex:   # 如果两个条件都满足
                if search_key in name and select_sex == sex:
                    user.append(row)
            elif search_key:     # 满足一个条件
                if search_key in name:
                    user.append(row)
            elif select_sex:
                if select_sex == sex:
                    user.append(row)
            else:
                user.append(row)

        count = len(user)  # 要在切片之前获取总数
        page = int(request.GET.get('page', 1))  # 当前页，第几页
        limit = int(request.GET.get('limit'))  # 当前页数量，在table.render参数配置，默认10
        start = (page - 1) * limit  # 获取上一页的最后一个数
        end = page * limit  # 当前页最后一个数
        data = user[start:end]
        code = '0'
        msg = "获取数据成功."
        user = {'code': code, 'msg': msg, 'count': count, 'data': data}
        return JsonResponse(user)
    elif request.method == "DELETE":  #删除记录。
        DELETE = QueryDict(request.body)
        id = DELETE.get('id')
        print(id)
        code = 0
        msg = "删除成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "PUT":  #更新记录。
        PUT = QueryDict(request.body)    # 由于PUT和DELETE并没有像GET那种封装好的字典结果，需要我们手动处理request.body获取参数
        id = PUT.get('id')
        email = PUT.get('email')
        print(id,email)
        code = 0
        msg = "更新成功."
        result = {'code': code, 'msg': msg}
        return JsonResponse(result)
    elif request.method == "POST":  #新建记录。
        pass
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

9.6 数据表格内容美化

• 在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出，若要对某列的单元格添加链接等其它元素，可以借助该参数来轻松实现。

1.方式一，直接写标签进行美化。

##############################################
##代码格式。
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：'+ d.title +''
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});   
##############################################
##示例。
    ,{field: 'sex', title: '性别',templet: function (row){
        if (row.sex == "女") {
            return '' + row.sex + ''
        } else {
            return '' + row.sex +  ''
        }
    }}
    ,{field: 'email', title: '邮箱'}
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.定义函数使用。

// 数据表格指定函数
,{field: 'username', title: '用户名',templet: sexFormat}

// 定义处理表格内容函数
    function sexFormat(d) {
        if(d.username == "慕卿君") {
            return '' + d.username + ''
        } else {
            return '' + d.username + ''
        }
    }
1
2
3
4
5
6
7
8
9
10
11

十、弹出层

• 使用layer模块实现弹出效果。
• 常用类型：
  1. layer.msg：提示框。
  2. layer.open支持的几种常用类型：
     • 0：信息框，默认，输出一个文本。
     • 1：页面层，输出一段HTML内容。
     • 2：内嵌层，加载网址。

1.提示框。

layer.msg('提示框', {icon: 6});
1

2.信息框输出一个文本。

##js子板内添加。
layer.open({
  type: 0,
  content: '这是一个普通的文本' // 字符串或者HTML
});
1
2
3
4
5

3.页面层输出一段HTML内容。

#########################################################
##母板的body外定义按钮。








#########################################################
##子板的js内引用按钮id。
layer.open({
  type: 1,
  content: $('#qingjun')  ##根据按钮id引用。
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.内嵌层加载网址。

##子板js内添加。
layer.open({
  type: 2,
  content: "https://blog.csdn.net/yi_qingjun",  //弹出地址。
  title: ["百慕卿君博客网站",'font-size:18px;'],
  area: ["40%","60%"]   //也可以设置像素。
});
1
2
3
4
5
6
7