一、实现效果

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项是放在&lt;div class=&quot;layui-tab&quot; lay-filter=&quot;demo&quot; lay-allowclose=&quot;true&quot; style=&quot;margin-left: 200px;&quot;>这个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'


星河滚烫,你是人间理想