Layui — 实现动态操作左侧菜单栏

一、实现效果

<br>

二、代码实现

1. main.ftl

项目主页面，注意引入layui的css样式和js文件，还要引入aside.ftl左侧菜单栏 和 main.js文件。

<#assign base=springMacroRequestContext.contextPath />
...

<div class="layui-layout layui-layout-admin">

    <#include "aside.ftl">

    <!--tab标签-->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
        <ul class="layui-tab-title"></ul>
        <div class="layui-tab-content"></div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>
...

tab项是放在<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">这个div中的，其中有一个重要的属性lay-filter，在js中调用的tabAdd，tabDelete等多种方法都携带了这个参数，将tab项放在lay-filter=‘demo’的div中，可以借助该参数完成指定元素的局部更新。

<br>

2. aside.ftl

data-url=“”后跟iframe跳转地址。

<br>

3. main.js

element中tabAdd方法，其中content可以是一个iframe页面，实现了不同页面间的切换：

<br>

参考：
- layui实现左侧菜单点击右侧内容区显示

<br>

三、set 'X-Frame-Options' to 'DENY'错误

1. 具体报错

iframe集成时出现，页面空白，浏览器控制台报错：Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'

2. 解决方法

我使用的框架是SpringBoot并整合了SpringSecurity，拓展WebSecurityConfigurerAdapter

参考：
- SpringBoot异常：Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'