layui搭建后台管理框架

简介：layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

官网下载js文档格式如下：

下面是我搭建的后台管理：粘贴即用，用起来非常方便；特别说明：本文采用的是模块化，用到哪个模块需要加载哪个模块。

<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title></title><!--每打开一个页面重新渲染，不缓存--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"><link rel="stylesheet" type="text/css" href="/layui2.45/css/layui.css"/><script type="text/javascript" src="/layui2.45/layui.js"></script><style>.my_left_tree .magin_left20px {margin-left: 20px;}.my_left_tree .magin_left35px {margin-left: 35px;}.layui-layout-left .layui-nav-item:hover {background: #009F95;cursor: pointer;}</style>
</head><body class="layui-layout-body" style="height: 100%; width: 100%;">
<div class="layui-layout layui-layout-admin my_layout"><!--作者：offline时间：2019-11-08描述：修改头部的背景色：  修改layui-header的div--><div class="layui-header"><div class="layui-logo">xxxxx 管理平台</div><div class="layui-nav layui-layout-left"><div id="changBig" class="layui-nav-item" style="width: 50px; text-align: center;"><i class="layui-icon layui-icon-menu-fill" style="font-size: 20px;color: orange;"></i></div><div onclick="fullScreen()" class="layui-nav-item" style="width: 50px; text-align: center;"><i class="layui-icon layui-icon-website" style="font-size: 20px;color: orangered;"></i></div><!--<button onclick="exitScreen()">现代浏览器退出</button>--><div class="layui-nav-item" onclick="homeRefresh()" id="myRefresh" style="width: 50px; text-align: center;"><i class="layui-icon layui-icon-refresh-3" style="font-size: 20px;color: orangered;"></i></div></div><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><!--<img th:attr="src=${session.user.image}" style="height: 50px; width:50px;" />--><img src="/images/1.jpg" style="height: 50px; width:50px;"></li><li class="layui-nav-item"><a href="javascript:void(0)">欢迎管理员: <span th:text="${session.user.username}"></span></a><dl class="layui-nav-child"><dd id="001" class="layui-this"><a href="javascript:;" data-id="001" data-title="基本资料"data-url="/backstage/adminUser/adminUserMessage.html" class="site-demo-active"data-type="tabAdd"><span class="">基本资料</span></a></dd></dl></li><li class="layui-nav-item"><a href="/admin/adminUser/loginOut">安全退出</a></li></ul></div><div class="myBoot"><div class="my_left_tree layui-side layui-bg-black myTreeLeft"><div class="layui-side-scroll"><!-- 左侧垂直导航区域--><!--作者：offline时间：2019-11-08描述：修改ul的css背景色样式即可--><ul id="leftNavTree" class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="layui-icon layui-icon-home"></i><span class="magin_left20px">主页</span></a><dl class="layui-nav-child"><dd id="0" class="layui-this"><a href="javascript:;" data-id="0" data-title="city数据" id="homePage"data-url="/backstage/city/city.html" class="site-demo-active" data-type="tabAdd"><span class="magin_left35px">主页</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-auz"></i><span class="magin_left20px">权限</span></a><dl class="layui-nav-child"><dd id="1"><a href="javascript:;" data-id="1" data-title="管理权限"data-url="/backstage/adminUser/adminUserList.html" class="site-demo-active"data-type="tabAdd"><span class="magin_left35px">管理权限</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-user"></i><span class="magin_left20px">用户</span></a><dl class="layui-nav-child"><dd id="111"><a href="javascript:;" data-id="111" data-title="用户列表"data-url="/admin/clientUser/userList.html" class="site-demo-active"data-type="tabAdd"><span class="magin_left35px">用户列表</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-component"></i><span class="magin_left20px">试卷</span></a><dl class="layui-nav-child"><dd id="3"><a href="javascript:;" data-id="3" data-title="试卷列表"data-url="/backstage/paper/paperList.html" class="site-demo-active"data-type="tabAdd"><span class="magin_left35px">试卷列表</span></a></dd><dd id="4"><a href="javascript:;" data-id="4" data-title="添加试卷"data-url="/backstage/paper/addOrUpdatePaper.html" class="site-demo-active"data-type="tabAdd"><span class="magin_left35px">添加试卷</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-survey"></i><span class="magin_left20px">测试</span></a><dl class="layui-nav-child"><dd id="5"><a href="javascript:;" data-id="5" data-url="/backstage/fu.html"class="site-demo-active" data-title="富文本" data-type="tabAdd"><span class="magin_left35px">富文本</span></a></dd><dd id="6"><a href="javascript:;" data-id="6" class="site-demo-active"data-url="/admin/active/active_preavis.html" data-title="活动预告" data-type="tabAdd"><span class="magin_left35px">活动预告</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-carousel"></i><span class="magin_left20px">轮播</span></a><dl class="layui-nav-child"><dd id="8"><a href="javascript:;" data-id="8" class="site-demo-active"data-url="/admin/rolling/getAll" data-title="轮播图" data-type="tabAdd"><span class="magin_left35px">轮播管理</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-rmb"></i><span class="magin_left20px">商城</span></a><dl class="layui-nav-child"><dd id="9"><a href="javascript:;" data-id="9" class="site-demo-active"data-url="/admin/integralMall/productList.html" data-title="积分商品" data-type="tabAdd"><span class="magin_left35px">积分商品</span></a></dd></dl><dl class="layui-nav-child"><dd id="91"><a href="javascript:;" data-id="91" class="site-demo-active"data-url="/admin/luckDrawProduct/luckDrawProduct.html" data-title="抽奖商品"data-type="tabAdd"><span class="magin_left35px">抽奖商品</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-notice"></i><span class="magin_left20px">留言</span></a><dl class="layui-nav-child"><dd id="11"><a href="javascript:;" data-id="11" class="site-demo-active"data-url="/admin/message/messageList.html" data-title="留言列表" data-type="tabAdd"><span class="magin_left35px">用户留言</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-set"></i><span class="magin_left20px">设置</span></a><dl class="layui-nav-child"><dd id="12"><a href="javascript:;" data-id="12" data-url="/admin/aboutUs/aboutUs.html"class="site-demo-active" data-title="关于我们" data-type="tabAdd"><span class="magin_left35px">关于我们</span></a></dd></dl><dl class="layui-nav-child"><dd id="13"><a href="javascript:;" data-url="/admin/patientExample/patientExampleList.html"data-id="13" class="site-demo-active" data-title="病例展示" data-type="tabAdd"><span class="magin_left35px">病例展示</span></a></dd></dl><dl class="layui-nav-child"><dd id="14"><a href="javascript:;"data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="14"class="site-demo-active" data-title="既定规则" data-type="tabAdd"><span class="magin_left35px">既定规则</span></a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-set"></i><span class="magin_left20px">一级菜单</span></a><dl class="layui-nav-child"><a href="javascript:;"><i class="layui-icon layui-icon-set"></i><span class="magin_left20px">二级菜单</span></a><dl class="layui-nav-child"><dd id="15"><a href="javascript:;"data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="15"class="site-demo-active" data-title="菜单子项" data-type="tabAdd"><span class="magin_left35px">菜单子项3223242343242334234</span></a></dd></dl></dl></li></ul></div></div><!--tab标签--><div class="layui-tab myTableRight" id="layui_tab_content" lay-filter="demo" lay-allowclose="true"style="margin-left: 200px;"><ul class="layui-tab-title" style="width: 100%;"><li class="layui-this" lay-id="0"><i class="layui-icon layui-icon-home"></i></li></ul><div class="layui-tab-content" style="width: 100%;"><div class="layui-tab-item layui-show"><iframe name="ifrmname" class="layadmin-iframe" scrolling="auto" frameborder="0"src="/backstage/city/city.html"style="width: 98%; height: 100%; min-height: 764px;overflow: auto;"></iframe></div></div></div></div></div>
<script>/*** 刷新* */function homeRefresh(url) {window.location.href = "http://localhost:8081/backstage/home.html";};//全屏function fullScreen() {var el = document.documentElement;var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;if (typeof rfs != "undefined" && rfs) {rfs.call(el);};return;}//退出全屏function exitScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}if (typeof cfs != "undefined" && cfs) {cfs.call(el);}}/*** layui的使用*/layui.use(['element', 'layer', 'jquery'], function () {var element = layui.element;var $ = layui.$;$("#changBig").click(function () {var ifShowTree = $('.my_left_tree').css('display');if (ifShowTree == 'none') {$(".my_left_tree").css("display", "block");$(".myTableRight").css("margin-left", "200px");} else {$(".my_left_tree").css("display", "none");$(".myTableRight").css("margin-left", "0px");}});/**刷新子页面* */$("#myRefresh").click(function () {var hash = location.hash;var url = hash.substring(1, hash.length);$("body .layui-show iframe").attr("src", url);})/*** 点击左边的菜单列表，对应的添加选项卡*/// 配置tab实践在下面无法获取到菜单元素$('.site-demo-active').on('click', function () {var dataid = $(this);var url = dataid.attr("data-url");var id = dataid.attr("data-id");var title = dataid.attr("data-title");//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目addTableAndChangTable(url, id, title);});/*** 添加并且跳转到该选项卡**/window.addTableAndChangTable = function (url, id, title) {if ($(".layui-tab-title li[lay-id]").length <= 0) {//如果比零小，则直接打开新的tab项active.tabAdd(url, id, 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") == id) {isData = true;}})if (isData == false) {//标志为false 新增一个tab项active.tabAdd(url, id, title);}}//最后不管是否新增tab，最后都转到要打开的选项页面上active.tabChange(id);};/*** 写的是一个javascript对象，对应选项卡的增改删*/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:98%;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); //删除},};/*** 计算iframe高度*/function FrameWH() {var h = $(window).height();$("iframe").css("height", h + "px");};/*** 监听事件当你点击选项卡，对应左边的树添加类*/element.on('tab(demo)', function (data) {var lay_id = $(this).attr("lay-id");$(".layui-nav-child").find("dd").removeClass("layui-this");$("#" + lay_id).addClass("layui-this");});});
</script>
</body></html>

有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；