基于Layui实现的后台管理页面（仅前端）
注：这是博主在帮朋友实现的一个简单的系统前端框架（无后端），跟大家分享出来，可以直接将对应菜单跟html文件链接起来，页面使用标签页方式存在，使用简单，整体布局轻便简介，可根据自己需求进行拓展，代码包在文章开头的资源中，免费下载
Layui介绍
地址：https://layui.dev/docs/2.8/
图示例：
home.html:
<head><meta charset="utf-8"><title>管理界面首页</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery.min.js"></script><!-- 引入 layui.css --><link href="layui/css/layui.css" rel="stylesheet"><!-- 引入 layui.js --><script src="layui/layui.js"></script><script src="js/home.js"></script><style>.layui-tab-title .layui-this{color: #ffffff;font-weight: bolder;background-color: #009688;}</style>
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">功能导航</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left" id="leftEnumIcon"></i></li><li class="layui-nav-item" style="margin-left: 30px"><a>站外链接</a><dl class="layui-nav-child"><dd><a onclick="openOther('https://m.baidu.com/')">百度</a></dd></dl></li></ul><ul class="layui-nav layui-layout-center"><li class="llayui-show-xs-inline-block"></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-show-sm-inline-block" style="margin-right: 400px;"><span style="font-size: 25px">xxxxxxxxx系统</span></li><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">用户1</a><dl class="layui-nav-child"><dd><a ><span style="font-size: 15px;margin-right: 10px">注销</span><i class="layui-icon layui-icon-logout" style="font-size: 15px; color: red;"></i></a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a ><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="menu"><li class="layui-nav-item layui-nav-itemed"><a data-url="zhuye" data-lx="1">主页</a></li><li class="layui-nav-item layui-nav-itemed"><a >隧道管理</a><dl class="layui-nav-child"><dd><a data-url = "page/sdxq.html">隧道信息查询</a></dd></dl></li><li class="layui-nav-item layui-nav-itemed"><a >功能菜单</a><dl class="layui-nav-child"><dd><a >菜单1</a></dd><dd><a >菜单2</a></dd></dl></li><li class="layui-nav-item"><a >系统管理</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 0 15px 15px 15px;width: 95%;height: 95%"><div class="layui-tab" lay-filter="test-handle" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="id-zhuye">主页</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-row"><div class="layui-col-xs6"><div class="layui-carousel" id="ID-carousel-demo-image"><div carousel-item ><div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div><div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div><div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div><div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div><div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div></div></div></div><div class="layui-col-xs6"><div class="layui-timeline"><div class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月18日</h3><p>多年前，Layui 2.0 的发布前夜，记录着这样的一段心理活动。<br>这是一个怎样的版本？它将受众如何？<br>又是谁在指引着我去创作，是基于成就感的驱动，还是试图建立我与客观世界的某种沟通 <i class="layui-icon"></i></p></div></div><div class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月16日</h3><p>Layui 使用率最高的组件有</p><ul><li>layer</li><li>table</li><li>form</li></ul></div></div><div class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月15日</h3><p>这片广袤的土地孕育了璀璨的华夏文化，和我们这个饱受沧桑的民族。<br>勤劳、淳朴、善良而又充满智慧的国人，一代又一代人的艰苦奋斗，古老的文明重新焕发出光彩。</p></div></div><div class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></div></div></div></div><div style="padding: 15px"><blockquote class="layui-elem-quote layui-text"><span style="font-size: 20px">最新资讯</span></blockquote><blockquote class="layui-text">对重要的公路、铁路实现全线着盖是运营商提高网络质量的一个重要环节，是提高综合竞争力的一个有力手段。从交通角度来看，目前大多数隧道的目的是覆盖盲区，因此需要结合交通线路的覆盖设计来制订专门的隧道覆盖解决方案。遂道着盖主要分为铁路隧道，公路隧道，地铁隧道等，每种隧道具有不同的特点，一般来说公路隧道比较宽敞，对隧道里面的覆盖状况，有车通过与无车通过时差别不大。车辆通过时，隧道内剩余空间较大，可根据实际情况选择尺寸大一些的天线，以获取较高的增益，使覆盖范围更大。而铁路隧道一般来说要狭窄一些特别是当火车经过时，被火车填充后所剩余的空间很小，火车对隧道的填充会对信号的传播产生较大的影响，且天线系统的安装空间有限，使天线的尺寸和增益受到很大的限制。另外，不管是哪种隧道，都存在长短不一的状况，短的隧道只有几百米，而长的隧道有十几公里，在解决短隧道覆盖时，可采用灵活经济的手段，如在隧道口附近用普通的天线向隧道里进行覆盖。但是，这些手段可能在解决长隧道覆盖时不起作用。对于长隧道的着盖必须采取其它一些手段，因此，对于每没隧道的解决方案可能都会有所区知，必须根据实际情况来选定覆盖解决方案。</blockquote></div></div></div></div></div></div><div class="layui-footer" style="padding-left: 50px"><!-- 底部固定区域 -->欢迎使用xxxxxxxxx系统！©版权归属，盗版必究</div>
</div>
</body>
</html>
home.js
//JS
var tabs = ['zhuye'];layui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;var $ = layui.$;var carousel = layui.carousel;// 渲染 - 图片轮播carousel.render({elem: '#ID-carousel-demo-image',width: '720px',height: '360px',interval: 2000});//头部事件util.event('lay-header-event', {menuLeft: function(){ // 左侧菜单事件var btn = $("#leftEnumIcon");if (btn.hasClass('layui-icon-spread-left')) {menuHide(btn);btn.addClass('btn-index');} else if (btn.has('layui-icon-shrink-right')) {btn.removeClass('btn-index');menuShow(btn);}function menuShow(btn) {btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');$(".layui-side").animate({width: 'toggle'});$(".zq-logo").animate({width: 'toggle'});$(".layui-body").animate({left: '200px'});$(".layui-footer").animate({left: '200px'});}function menuHide(btn) {btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');$(".layui-side").animate({width: 'toggle'}); //toggle如果原来div是隐藏的就会把元素显示，如果原来是显示则隐藏$(".zq-logo").animate({width: 'toggle'});$(".layui-body").animate({left: '0px'});$(".layui-footer").animate({left: '0px'});}},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});element.on('nav(menu)', function(elem) {var label = elem.text();var url = $(this).attr("data-url")var lx = $(this).attr("data-lx")if (url){//判断是否已经存在if (lx){//存在element.tabChange('test-handle', 'id-'+url); // 切换到：标签3} else {element.tabAdd('test-handle', {title: label,content: "<iframe style='border: 0;height: 100%;width: 100%;' src='"+url+"'></iframe>",id: "id-"+url, // 实际使用一般是规定好的id，这里以毫秒数模拟change: true // 是否添加完毕后即自动切换})//表示已经存在$(this).attr("data-lx","1")tabs.push(url);}}})element.on('tabDelete(test-handle)', function(data){var dataUrl = tabs[data.index]$("a[data-url='"+dataUrl+"']").attr("data-lx","")tabs.splice(data.index,1)});$('.layui-tab-title').find('.layui-tab-close').first().hide();
});function openOther(url){window.open(url)
}
使用示例：
<dd><a data-url = "page/sdxq.html">隧道信息查询</a></dd>
对应a标签加上属性 data-url ，设置为对应页面的相对路径，即可实现自动跳转。（主页已经固定为home.html，不需要额外的页面）
