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

r囧r小猫 2024-04-18 18:13 91阅读 0赞

#### 一、实现效果 ####

![layui实现左侧菜单栏效果][layui]

#### 二、代码实现 ####

**1. main.ftl**

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

<#assign base=springMacroRequestContext.contextPath />
    ...
    
    <div class="layui-layout layui-layout-admin">
    
        <#include "aside.ftl">
    
        
        <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中，可以借助该参数完成指定元素的局部更新。

**2. aside.ftl**

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            
            <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:;" data-id="1" data-title="普通账号" data-url="${base}/toftl/customer" class="site-demo-active" data-type="tabAdd">普通账号</a></dd>
                        <dd><a href="javascript:;" data-id="2" data-title="管理员账号" data-url="${base}/toftl/manager" class="site-demo-active" data-type="tabAdd">管理员账号</a></dd>
                        <dd><a href="javascript:;" data-id="3" data-title="专案设置" data-url="" class="site-demo-active" data-type="tabAdd">专案设置</a></dd>
                    </dl>
                </li>
    
                <li class="layui-nav-item">
                    <a href="javascript:;">订餐管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="4" data-title="菜单管理" data-url="${base}/toftl/menu" class="site-demo-active" data-type="tabAdd">菜单管理</a></dd>
                        <dd><a href="javascript:;" data-id="5" data-title="每日供应" data-url="${base}/daySupply/dailySupply" class="site-demo-active" data-type="tabAdd">每日供应</a></dd>
                        <dd><a href="javascript:;" data-id="6" data-title="订单管理" data-url="${base}/order/getOrders" class="site-demo-active" data-type="tabAdd">订单管理</a></dd>
                        <dd><a href="javascript:;" data-id="7" data-title="评论管理" data-url="" class="site-demo-active" data-type="tabAdd">评论管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

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

**3. main.js**

layui.use(['element', 'layer', 'jquery'], function () { 
        var element = layui.element;
        var $ = layui.$;
        // 配置tab实践在下面无法获取到菜单元素
        $('.site-demo-active').on('click', function () { 
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) { 
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else { 
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () { 
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) { 
                        isData = true;
                    }
                })
                if (isData == false) { 
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });
    
        var active = { 
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) { 
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', { 
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + 
                    					url + '" style="width:100%;height:99%;"></iframe>',
                    id: id //规定好的id
                })
                FrameWH();  //计算ifram层的大小
            },
            tabChange: function (id) { 
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) { 
                element.tabDelete("demo", id);//删除
            }
        };
    
        function FrameWH() { 
            var h = $(window).height();
            $("iframe").css("height", h + "px");
        }
    });

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

element.tabAdd('demo', { 
      title: '选项卡的标题',
      content: '选项卡的内容', //支持传入html
      id: '选项卡标题的lay-id属性值'
    });

**4. 后台Controller层代码**  
![layui路径跳转][layui 1]

参考：

*  [layui实现左侧菜单点击右侧内容区显示][layui 2]

#### 三、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`

@Override
    protected void configure(HttpSecurity http) throws Exception{ 
    	// 防止iframe
    	http.headers().frameOptions().disable();
    }

参考：

*  [SpringBoot异常：Refused to display in a frame because it set ‘X-Frame-Options’ to ‘DENY’][SpringBoot_Refused to display in a frame because it set _X-Frame-Options_ to _DENY]

[layui]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9xaW5pdS53Znh1bmkuY29tL2xheXVpL2xheXVpJUU1JUFFJTlFJUU3JThFJUIwJUU1JUI3JUE2JUU0JUJFJUE3JUU4JThGJTlDJUU1JThEJTk1JUU2JUEwJThGJUU2JTk1JTg4JUU2JTlFJTlDLnBuZw?x-oss-process=image/format,png
[layui 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9xaW5pdS53Znh1bmkuY29tL2xheXVpL2xheXVpJUU4JUI3JUFGJUU1JUJFJTg0JUU4JUI3JUIzJUU4JUJEJUFDLnBuZw?x-oss-process=image/format,png
[layui 2]: https://segmentfault.com/a/1190000014617129
[SpringBoot_Refused to display in a frame because it set _X-Frame-Options_ to _DENY]: https://www.jianshu.com/p/9ccf7e7bbe00