基于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)
}
使用示例：文章来源：https://www.toymoban.com/news/detail-510758.html
<dd><a data-url = "page/sdxq.html">隧道信息查询</a></dd>
对应a标签加上属性 data-url ，设置为对应页面的相对路径，即可实现自动跳转。（主页已经固定为home.html，不需要额外的页面）文章来源地址https://www.toymoban.com/news/detail-510758.html
到了这里，关于基于Layui实现管理页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
