3075 字

15 分钟

【简单小项目】使用LayUI实现JSON读入的控制面板

2023-08-02

2023-08-04

学习笔记/项目

JavaScript

/

JSON

/

LayUI

/

项目

前言#

这是一个在实习中的小项目，其中需要使用LayUI进行构造前端，JSON控制菜单的控制面板。

简介#

LayUI#

LayUI是一种基于JavaScript的前端框架，让Web开发变得更加容易。而JSON（JavaScript Object Notation）则是一种用于数据交换的轻量级格式，被广泛用于Web应用程序中。

LayUI的特点：

简单易用：LayUI的API设计非常简单，易于学习和使用。
功能丰富：LayUI提供了丰富的UI组件，包括按钮、表单、弹窗、表格等。
灵活性高：LayUI提供了丰富的配置项，可以灵活地满足不同的需求。
高性能：LayUI的渲染速度非常快，可以提高用户的使用体验。

LayUI的使用非常广泛，特别是在后台管理系统、企业管理系统、电商平台等领域。如果想要快速构建一个Web应用程序，LayUI是一个不错的选择。

这里就拿LayUI当做练手。LayUI文档：http://layui.org.cn

JSON#

JSON（JavaScript Object Notation）是一种用于数据交换的轻量级格式，它易于阅读和编写，同时也易于解析和生成。JSON格式由键值对组成，键和值之间使用冒号分隔，键值对之间使用逗号分隔，最外层使用花括号或方括号括起来。

实践#

先放一个实践图：

在head部分，需要添加LayUI的CSS：

1
<link rel="stylesheet" href="layui/css/layui.css">

我的布局包含了：头部、菜单列表和选项卡容器。头部包含了一个网站的标志和用户信息，菜单列表包含了网站的主要导航菜单，选项卡容器包含了用户在网站中打开的各个选项卡。

Layout#

布局代码如下：

1
<!-- LayUI layout -->
2
  <div class="layui-layout layui-layout-admin">
3
    <!-- Header section -->
4
    <div class="layui-header">
5
      <div class="layui-logo">Hoyue Panel</div>
6
      <ul class="layui-nav layui-layout-right">
7
        <li class="layui-nav-item">
8
          Welcome, Hoyue
9
        </li>
10
        <li class="layui-nav-item"><a href="#" onclick="out_msg()">Log Out</a></li>
11
      </ul>
12
    </div>
13
    <!-- Menu list -->
14
    <div class="layui-side layui-bg-black">
15
      <div class="layui-side-scroll">
16
        <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="meun">
17
        </ul>
18
      </div>
19
    </div>
20
    <!-- Tab container -->
21
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
22
      <ul class="layui-tab-title"></ul>
23
      <div class="layui-tab-content"></div>
24
    </div>
25
  </div>

其中，菜单栏的id为menu，便于我之后通过JSON导入。

Logic#

首先就是在尾部载入LayUI的JS：

1
<script src="layui/layui.js"></script>

在加载菜单之前，我们先来看看JSON文件的格式。以被要求的格式为例：

1
[
2
    {
3
        "menuid":"00",
4
        "menu":"Home",
5
        "parentid": "",
6
        "operationid": "",
7
        "levelno": "1",
8
        "notes": "",
9
        "url": "home.html",
10
        "active": "1"
11
    },
12
    {
13
        "menuid":"01",
14
        "menu":"Website",
15
        "parentid": "",
16
        "operationid": "",
17
        "levelno": "1",
18
        "notes": "",
19
        "url": "",
20
        "active": "1"
21
    },
22
    {
23
        "menuid":"0101",
24
        "menu":"Files",
25
        "parentid": "01",
26
        "operationid": "",
27
        "levelno": "2",
28
        "notes": "",
29
        "url": "file.html",
30
        "active": "1"
31
    },
32
    {
33
        "menuid":"0102",
34
        "menu":"Logs",
35
        "parentid": "01",
36
        "operationid": "",
37
        "levelno": "2",
38
        "notes": "",
39
        "url": "",
40
        "active": "1"
41
    },
42
    {
43
        "menuid":"010201",
44
        "menu":"Logs 1",
45
        "parentid": "0102",
46
        "operationid": "",
47
        "levelno": "3",
48
        "notes": "",
49
        "url": "log1.html",
50
        "active": "1"
51
    },
52
    {
53
        "menuid":"010202",
54
        "menu":"Logs 2",
55
        "parentid": "0102",
56
        "operationid": "",
57
        "levelno": "3",
58
        "notes": "",
59
        "url": "log2.html",
60
        "active": "1"
61
    },
62
    {
63
        "menuid":"02",
64
        "menu":"Database",
65
        "parentid": "",
66
        "operationid": "",
67
        "levelno": "1",
68
        "notes": "",
69
        "url": "",
70
        "active": "1"
71
    },
72
    {
73
        "menuid":"0201",
74
        "menu":"Database Lists",
75
        "parentid": "02",
76
        "operationid": "",
77
        "levelno": "2",
78
        "notes": "",
79
        "url": "db.html",
80
        "active": "1"
81
    },
82
    {
83
        "menuid":"0202",
84
        "menu":"Admin",
85
        "parentid": "02",
86
        "operationid": "",
87
        "levelno": "2",
88
        "notes": "",
89
        "url": "",
90
        "active": "0"
91
    },
92
    {
93
        "menuid":"03",
94
        "menu":"Panel Setting",
95
        "parentid": "",
96
        "operationid": "",
97
        "levelno": "1",
98
        "notes": "",
99
        "url": "setting.html",
100
        "active": "1"
101
    },
102
    {
103
        "menuid":"04",
104
        "menu":"Log Out",
105
        "parentid": "",
106
        "operationid": "",
107
        "levelno": "1",
108
        "notes": "",
109
        "url": "",
110
        "active": "1"
111
    }
112
]

其中：

menuid：菜单项的ID，用于唯一标识该菜单项。
menu：菜单项的标题，用于在菜单列表中显示。
parentid：该菜单项的父菜单项ID，用于构建菜单项的层级结构。
operationid：该菜单项对应的操作ID，用于记录用户操作日志等。这个在这个例子中没有读取。
levelno：该菜单项在菜单项层级结构中的层级编号，从1开始递增。
notes：该菜单项的备注信息。
url：该菜单项对应的页面URL，用于在选项卡组件中打开对应的页面。
active：该菜单项是否处于激活状态，1表示激活，0表示不激活。

加载菜单#

首先是加载菜单数据,它是从一个JSON文件中动态获取的：

1
//Load menu from JSON
2
    function loadMenu() {
3
        fetch('ComMenu.json')    //JSON文件URL
4
            .then(response => response.json())
5
            .then(data => {
6
                const menuElement = document.getElementById('menu');
7
                for (let i = 0; i < data.length; i++) {
8
                    const item = data[i];
9
                    if(item.active == 0)
10
                        continue;
11
                    else {
12
                        const menuItem = createMenuItem(item);
13
                        menuElement.appendChild(menuItem);
14
                    }
15
                }
16
            });
17
    }

这部分代码使用Fetch API发起请求,获取菜单的JSON数据。然后使用Promise处理响应,将JSON解析为JavaScript对象。最后遍历对象中的菜单数据,动态插入到页面中。

这样实现的好处是前后端分离,菜单数据可配置化,只需要修改JSON文件就可以改变菜单内容,无需修改代码。并且利用Promise可以非常优雅地处理异步请求。

在读取数组数据的时候，判断active位，如果为0就跳过。菜单在createMenuItem()方法中创建，使用appendChild()方法累加。

处理主菜单#

该函数接收一个菜单项的JSON数据，并根据数据创建对应的菜单项DOM节点。

1
//Create Main menu
2
    function createMenuItem(item) {
3
        // Handle submenu
4
        if(item.parentid){
5
            return subChild(item);
6
        }
7

8
        // create li and a
9
        const li = document.createElement('li');
10
        li.classList.add('layui-nav-item');
11
        const a = document.createElement('a');
12
        a.href = 'javascript:;';
13
        a.textContent = item.menu;
14

15
        // Construct li
16
        li.appendChild(a);
17

18
        // Set ID and data attributes
19
        a.setAttribute("id",item.menuid);
20
        a.setAttribute('data-id', item.menuid);
21
        a.setAttribute('data-title', item.menu);
22
        a.setAttribute('data-url', item.url);
23
        a.setAttribute('data-type', 'tabAdd');
24

25
        // Add styles
26
        a.classList.add('site-demo-active');
27

28
        // Special handle for logout link
29
        if(a.textContent == "Log Out")
30
        {
31
            a.setAttribute("onclick","out_msg()");
32
            a.setAttribute("href","#");
33
            a.classList.remove('site-demo-active');
34
        }
35

36
        return li;
37
    }

对于创建菜单，我分为创建一级菜单和多级子菜单，因为它们在静态上不同。首先判断菜单项的parentid字段是否存在，如果存在则调用subChild()函数创建子菜单项。如果不存在，则创建一个简单的菜单项。

创建菜单项所需的DOM节点包括一个<li>标签和一个<a>标签，其中<li>标签用于表示菜单项，<a>标签用于显示菜单项的标题和处理点击事件。

在创建<a>标签时，需要设置其href属性为javascript:;，以便在点击时不会跳转到其他页面。同时，还需要设置一些自定义的属性，包括菜单项的ID、标题、URL和类型等，以便在用户点击菜单项时打开对应的选项卡。

在设置完这些属性之后，还需要为菜单项添加一些样式，以便在菜单列表中显示为激活状态。特别地，对于”Log Out”菜单项需要进行特殊处理，即添加onclick事件处理函数和删除一些样式。

最后，函数返回创建好的菜单项DOM节点。使用这个函数可以方便地创建菜单项，并在用户点击菜单项时处理对应的事件。

处理子菜单#

与主菜单类似的，但子菜单需要多做一些特判。

1
// Handle submenu
2
    function subChild(item){
3
        // Get parent a and remove parent's click style
4
        const parentA = document.getElementById(item.parentid);
5
        parentA.classList.remove('site-demo-active');
6

7
        /* Level 2 submenu, get parent li
8
           Level 3 submenu, get parent dl */
9
        if(item.levelno == 2)
10
            var parentLi = parentA.parentElement;
11
        else
12
            var parentLi = parentA.closest('dd');
13

14
        // Query and Add drop down icon
15
        var iElement = parentA.querySelector('i.layui-icon.layui-icon-down.layui-nav-more');
16
        if (!iElement)
17
        {
18
            parentA.insertAdjacentHTML('beforeend', '<i class="layui-icon layui-icon-down layui-nav-more"></i>');
19
            // Click handler to expand/collapse
20
            parentA.addEventListener('click', (e) => {
21
            if (parentLi.classList.contains('layui-nav-itemed'))
22
            {
23
                parentLi.classList.remove('layui-nav-itemed');
24
            } else {
25
                parentLi.classList.add('layui-nav-itemed');
26
            }
27
            })
28
        };
29

30
        // Create dl and dd
31
        const dl = document.createElement('dl');
32
        dl.classList.add('layui-nav-child');
33
        parentLi.appendChild(dl);
34

35
        const dd = document.createElement('dd');
36
        dl.appendChild(dd);
37

38
        // Create submenu a
39
        const sub_a = document.createElement('a');
40
        sub_a.href = 'javascript:;';
41
        sub_a.textContent = item.menu;
42
        dd.appendChild(sub_a);
43

44
        // Set attributes
45
        sub_a.setAttribute('id', item.menuid);
46
        sub_a.setAttribute('data-id', item.menuid);
47
        sub_a.setAttribute('data-title', item.menu);
48
        sub_a.setAttribute('data-url', item.url);
49
        sub_a.setAttribute('data-type', 'tabAdd');
50
        sub_a.classList.add('site-demo-active');
51

52
        // Retrun li
53
        if(item.levelno == "3")  // level 3 may a dl
54
            return parentLi.closest('li');
55
        return parentLi;
56
    }

在函数中，首先获取该子菜单项的父菜单项<a>标签，并移除其激活样式。然后根据子菜单项的层级编号判断其父菜单项的类型，如果是二级菜单，则获取父菜单项的<li>标签，否则获取父菜单项的最近的<dd>标签。

接下来，需要为父菜单项添加一个下拉箭头图标，以便在用户点击时展开或收起子菜单项。如果已经存在下拉箭头图标，则不需要再次添加。同时，还需要为父菜单项的<a>标签添加一个点击事件处理函数，用于展开或收起子菜单项。

在添加完下拉箭头图标和点击事件处理函数之后，需要创建子菜单项的DOM节点。该节点包括一个<dl>标签和一个<dd>标签，用于表示子菜单项的层级结构。然后再创建一个<a>标签，用于显示子菜单项的标题和处理点击事件。

在创建<a>标签时，需要设置其href属性为javascript:;，以便在点击时不会跳转到其他页面。同时，还需要设置一些自定义的属性，包括菜单项的ID、标题、URL和类型等，以便在用户点击菜单项时打开对应的选项卡。

最后，函数返回创建好的子菜单项DOM节点。如果子菜单项是三级菜单，则需要返回其父菜单项的<li>标签。使用这个函数可以方便地创建子菜单项，并在用户点击菜单项时处理对应的事件。

Tab处理#

点击菜单后,会打开一个新的Tab标签页。首先需要检查该Tab是否已存在:

1
// 点击菜单处理
2
$('#menu').on('click','a', function(){
3

4
  // 判断Tab是否存在
5
  if($(".layui-tab-title li[lay-id]").length == 0) {
6
    // 不存在则新增
7
  } else {
8
    var isData = false;
9

10
    // 循环检查已有的Tab
11
    $.each($(".layui-tab-title li[lay-id]"), function(){
12
      if($(this).attr("lay-id") == dataid.attr("data-id")){
13
        isData = true; // 存在
14
      }
15
    });
16

17
    if(isData == false) {
18
      // 不存在则新增
19
    }
20
  }
21

22
  // 切换 Tab
23
  active.tabChange(id);
24

25
});

遍历已打开的Tab,检查其id是否与当前点击菜单对应的id相同。如果没有匹配的则表示该Tab未打开,需要新增。

新增和切换Tab的方法封装成了active对象:

1
// Tab handling object
2
        var active = {
3

4
            tabAdd: function (url, id, name) {
5
                element.tabAdd('demo', {
6
                    title: name,
7
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
8
                    id: id
9
                })
10
                FrameWH();
11
            },
12
            tabChange: function (id) {
13

14
                element.tabChange('demo', id);
15
            },
16
            tabDelete: function (id) {
17
                element.tabDelete("demo", id);
18
            }
19
        };
20

21
        // Set iframe height
22
        function FrameWH() {
23
            var h = $(window).height();
24
            $("iframe").css("height",h+"px");
25
        }
26
    });

这样可以方便统一调用,添加新功能也比较容易通过新增方法实现。

后记#

至此，整个小项目的重要逻辑已经写完了，附上一个整篇代码：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6
    <title>Hoyue Panel</title>
7
    <link rel="stylesheet" href="layui/css/layui.css">
8
</head>
9
<body>
10
    <!-- LayUI layout -->
11
    <div class="layui-layout layui-layout-admin">
12
        <!-- Header section -->
13
        <div class="layui-header">
14
            <div class="layui-logo">Hoyue Panel</div>
15
            <ul class="layui-nav layui-layout-right">
16
                <li class="layui-nav-item">
17
                    Welcome, Hoyue
18
                </li>
19
                <li class="layui-nav-item"><a href="#" onclick="out_msg()">Log Out</a></li>
20
            </ul>
21
        </div>
22

23
        <!-- Menu list -->
24
        <div class="layui-side layui-bg-black">
25
            <div class="layui-side-scroll">
26

27
                <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="meun">
28
                </ul>
29
            </div>
30
        </div>
31

32
        <!-- Tab container -->
33
        <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
34
            <ul class="layui-tab-title"></ul>
35
            <div class="layui-tab-content"></div>
36

37
        </div>
38

39
    </div>
40

41
<script src="layui/layui.js"></script>
42
<script>
43
//Load menu from JSON
44
    function loadMenu() {
45
        fetch('ComMenu.json')
46
            .then(response => response.json())
47
            .then(data => {
48
                const menuElement = document.getElementById('menu');
49
                for (let i = 0; i < data.length; i++) {
50
                    const item = data[i];
51
                    if(item.active == 0)
52
                        continue;
53
                    else {
54
                        const menuItem = createMenuItem(item);
55
                        menuElement.appendChild(menuItem);
56
                    }
57
                }
58
            });
59
    }
60

61
    //Create Main menu
62
    function createMenuItem(item) {
63
        // Handle submenu
64
        if(item.parentid){
65
            return subChild(item);
66
        }
67

68
        // create li and a
69
        const li = document.createElement('li');
70
        li.classList.add('layui-nav-item');
71
        const a = document.createElement('a');
72
        a.href = 'javascript:;';
73
        a.textContent = item.menu;
74

75
        // Construct li
76
        li.appendChild(a);
77

78
        // Set ID and data attributes
79
        a.setAttribute("id",item.menuid);
80
        a.setAttribute('data-id', item.menuid);
81
        a.setAttribute('data-title', item.menu);
82
        a.setAttribute('data-url', item.url);
83
        a.setAttribute('data-type', 'tabAdd');
84

85
        // Add styles
86
        a.classList.add('site-demo-active');
87

88
        // Special handle for logout link
89
        if(a.textContent == "Log Out")
90
        {
91
            a.setAttribute("onclick","out_msg()");
92
            a.setAttribute("href","#");
93
            a.classList.remove('site-demo-active');
94
        }
95

96
        return li;
97
    }
98

99

100
    // Handle submenu
101
    function subChild(item){
102
        // Get parent a and remove parent's click style
103
        const parentA = document.getElementById(item.parentid);
104
        parentA.classList.remove('site-demo-active');
105

106
        /* Level 2 submenu, get parent li
107
           Level 3 submenu, get parent dl */
108
        if(item.levelno == 2)
109
            var parentLi = parentA.parentElement;
110
        else
111
            var parentLi = parentA.closest('dl');
112

113
        // Query and Add drop down icon
114
        var iElement = parentA.querySelector('i.layui-icon.layui-icon-down.layui-nav-more');
115
        if (!iElement)
116
        {
117
            parentA.insertAdjacentHTML('beforeend', '<i class="layui-icon layui-icon-down layui-nav-more"></i>');
118
            // Click handler to expand/collapse
119
            parentA.addEventListener('click', (e) => {
120
            if (parentLi.classList.contains('layui-nav-itemed'))
121
            {
122
                parentLi.classList.remove('layui-nav-itemed');
123
            } else {
124
                parentLi.classList.add('layui-nav-itemed');
125
            }
126
            })
127
        };
128

129
        // Create dl and dd
130
        const dl = document.createElement('dl');
131
        dl.classList.add('layui-nav-child');
132
        parentLi.appendChild(dl);
133

134
        const dd = document.createElement('dd');
135
        dl.appendChild(dd);
136

137
        // Create submenu a
138
        const sub_a = document.createElement('a');
139
        sub_a.href = 'javascript:;';
140
        sub_a.textContent = item.menu;
141
        dd.appendChild(sub_a);
142

143
        // Set attributes
144
        sub_a.setAttribute('id', item.menuid);
145
        sub_a.setAttribute('data-id', item.menuid);
146
        sub_a.setAttribute('data-title', item.menu);
147
        sub_a.setAttribute('data-url', item.url);
148
        sub_a.setAttribute('data-type', 'tabAdd');
149
        sub_a.classList.add('site-demo-active');
150

151
        // Retrun li
152
        if(item.levelno == "3")  // level 3 may a dl
153
            return parentLi.closest('li');
154
        return parentLi;
155
    }
156
    </script>
157
<script>
158
    loadMenu();
159

160
    // Initialize LayUI tab
161
    layui.use(['element'], function(){
162
        var element = layui.element;
163
        element.tabAdd('demo', {
164
        title: 'home',
165
        content: '<iframe data-frameid="0" scrolling="auto" frameborder="0" src="home.html" style="width:100%;height:99%;"></iframe>',
166
        id: 0
167
        });
168
        element.tabChange('demo', 0);
169
    });
170

171
    // Tab handling logic
172
    layui.use(['element', 'layer', 'jquery'], function () {
173
        var element = layui.element;
174
        var $ = layui.$;
175

176
        // Use event delegation for menu click handlers
177
        $('#menu').on('click', '.site-demo-active', function () {
178
            var dataid = $(this);
179

180
            // Check if tab already exists
181
            if ($(".layui-tab-title li[lay-id]").length < 0) {
182
                // If not, add new tab
183
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
184
            } else {
185
                var isData = false;
186

187
                // Loop through existing tabs
188
                $.each($(".layui-tab-title li[lay-id]"), function () {
189

190
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
191
                        isData = true;
192
                    }
193
                })
194

195
                // If tab doesn't exist, add it
196
                if (isData == false) {
197

198
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
199
                }
200
            }
201

202
            // Switch to new tab
203
            active.tabChange(dataid.attr("data-id"));
204

205
            // Remove current selected menu style
206
            $('#menu .layui-this').removeClass('layui-this');
207

208
            // Add selected style to clicked menu item
209
            $(this).addClass('layui-this');
210
        });
211

212
        // Tab handling object
213
        var active = {
214

215
            tabAdd: function (url, id, name) {
216
                element.tabAdd('demo', {
217
                    title: name,
218
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
219
                    id: id
220
                })
221
                FrameWH();
222
            },
223
            tabChange: function (id) {
224

225
                element.tabChange('demo', id);
226
            },
227
            tabDelete: function (id) {
228
                element.tabDelete("demo", id);
229
            }
230
        };
231

232
        // Set iframe height
233
        function FrameWH() {
234
            var h = $(window).height();
235
            $("iframe").css("height",h+"px");
236
        }
237
    });
238

239
    // Logout message
240
    function out_msg()
241
    {
242
        layer.msg('You have been logged out.', {icon: 6});
243
    }
244

245
</script>
246
</body>
247
</html>