spring boot+thymeleaf+layui编写后台管理系统

一、界面效果：

参考官方文档添加组件即可：

https://www.layui.com/demo/admin.html

另外参考layuiadmin的demo：https://www.layui.com/admin/

 

二、功能一：点击左侧菜单，右侧tab栏添加对应的标签和内容，并可以嵌入iframe

利用lay-filter属性，将左侧菜单组件和tab组件关联。

（1）左侧菜单栏代码：

<ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">菜单按钮管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="11">列表一</a></dd>
                        <dd><a href="javascript:;" id="12">列表二</a></dd>
                    </dl>
                </li>
</ul>

（2）tab标签代码

<div class="layui-body">
        <div class="layui-tab" lay-allowClose="true" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="111">文章列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
            </div>
        </div>
    </div>

（3）script中的js代码

<script th:inline="javascript">
    //JavaScript代码区域
    var a=[[@{/index.html}]];//获取相对路径
    console.log(/*[[@{/index.html}]]*/);
    console.log(a);
    layui.use('element', function(){
        var element = layui.element;
        element.on('nav(test)', function(data){
            console.log(data);
            element.tabAdd('demo', {
                title: data[0].text
                ,content: '<iframe class="layadmin-iframe" src="'+a+'"></iframe>' //支持传入html
                ,id: data[0].id
            });
            element.tabChange('demo', data[0].id);
        });
    });
</script>

（这里首先获取标签页的相对地址，再动态添加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的[[...]]内联方法

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

）

 

三、优化标签页

（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: '<iframe class="layadmin-iframe" src="http://www.baidu.com"></iframe>' //支持传入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

左侧菜单栏代码：

<ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">菜单按钮管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="11" lay-herf="test1">列表一</a></dd>
                        <dd><a href="javascript:;" id="12" lay-herf="test2">列表二</a></dd>
                    </dl>
                </li>
</ul>

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: '<iframe class="layadmin-iframe" src="views/'+$(this).attr("lay-herf")+'"></iframe>' //支持传入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）可以直接在标签内容写入：

    <div class="layui-tab-item layui-show">
        <iframe class="layadmin-iframe" th:src="@{/views/test1}"></iframe>
    </div>

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）注意，<script>里使用layui的table组件，出现诸如cols: [[...]]，会出现解析失败。

（报错：org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "                 {type: 'checkbox', fixed: 'left'}。。。。）

原因：[[ ]]属于thymeleaf的内联语句，与此处用法冲突。

解决方法：

在<script type="text/javascript" >  加上 th:inline="none"

<script type="text/javascript"  th:inline="none">

（3）layui table中的templet使用

参考：

示例：https://www.layui.com/demo/table.html

文档：https://www.layui.com/doc/modules/table.html#templet

注意！！！参数名称是“templet”！！！不是“template”！！！！虽然是一个意思但是拼错了就完全没用了！！！

 

未完待续