spring boot+thymeleaf+layui编写后台管理系统
一、界面效果：
参考官方文档添加组件即可：
https://www.layui.com/demo/admin.html
另外参考layuiadmin的demo：https://www.layui.com/admin/
二、功能一：点击左侧菜单，右侧tab栏添加对应的标签和内容，并可以嵌入iframe
利用lay-filter属性，将左侧菜单组件和tab组件关联。
（1）左侧菜单栏代码：
（2）tab标签代码
- 文章列表
1
（3）script中的js代码
（这里首先获取标签页的相对地址，再动态添加iframe元素，其src属性填入相对地址）
tab组件使用参考：https://www.layui.com/doc/element/tab.html
https://www.layui.com/doc/modules/element.html
js中获取相对路径值：https://www.jianshu.com/p/e8c821b134a1
（即通过thymeleaf的[[...]]内联方法
）
三、优化标签页
（1）设置标签页存在的时候不再新打开标签页，修改上述js代码：
element.on('nav(test)', function(data){
console.log(data);
var exist=$(".layui-tab-title li[lay-id='"+data[0].id+"']").length //判断是否存在tab
if(exist==0){
element.tabAdd('demo', {
title: data[0].text
,content: '' //支持传入html
,id: data[0].id
});
}
element.tabChange('demo', data[0].id);
});参考：https://blog.csdn.net/sqlquan/article/details/81516344
（2）左侧导航栏一级仅在二级菜单触发或指定级别菜单触发
思路：对二级菜单或指定级别的菜单项添加特定属性（如lay-herf），点击菜单栏时，有该属性的可以触发element.on中的element.tabAdd
左侧菜单栏代码：
js代码
element.on('nav(test)', function(data){
console.log(data);
var exist=$(".layui-tab-title li[lay-id='"+data[0].id+"']").length //判断是否存在tab
if($(this).attr("lay-herf") && exist==0){
element.tabAdd('demo', {
title: data[0].text
,content: '' //支持传入html
,id: data[0].id
});
}
element.tabChange('demo', data[0].id);
});
四、添加spring boot路由，控制标签页页面跳转
（1）在java/controller下新建一个类CimViewController.java
@Controller
@RequestMapping("/views")
public class CimViewController {
@GetMapping("/test1")
public String test1() {
return "views/test1";
}
@GetMapping("/test2")
public String test2() {
return "views/test2";
}
}
路由注解参考：https://www.iteye.com/news/32657/
（2）模板引擎页面layout.html代码
1）可以直接在标签内容写入：
2）在标签页监听事件中添加
即，上述第二节（3）script中，修改
var a=[[@{/index.html}]];//静态资源
为
var a=[[@{/views/test1}]];//路由路径
五、左侧菜单栏nav添加三级菜单
参考：https://blog.csdn.net/zy1281539626/article/details/79968687
其他、一些thymeleaf用法
（1）拼接url（如href属性）
https://blog.csdn.net/LeonShenZhi/article/details/81231604
（2）注意，