后台管理系统模板，简易模板

后台模板

搭建的简易后台管理系统模板 基于 layui
先看效果图很适合初学者对于刚使用 layui的来说可以很好的借鉴一下

图片:
第一页可加群号下载比较完整的代码 805371278
可加群号下载完整代码
第二页普通的数据展示
在这里插入图片描述
第三页带文件预览下载的数据展示没有加pdf

第四页搜索栏展开默认关闭也可设置展开

第五页新增表单

文档格式

好了开始上代码
先下载好 layui 官网地址 layui

1 html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>后台表单</title><link rel="stylesheet" href="./layui/css/layui.css"><style>.layadmin-iframe {position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;right: 0px;bottom: 0px;background-color: #f2f2f2;}.layui-fluid {padding: 10px;background-color: white;margin: 10px;}</style></head><body class="layui-layout-body"><div class="layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="./images/img.jpg" class="layui-nav-img">admin</a><dl class="layui-nav-child"><dd><a href="">资料</a></dd><dd><a href="">设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退出</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="test"><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">主页</a><dl class="layui-nav-child"><dd class="layui-this"><a data_herf="./page/home.html" href="javascript:;">home</a></dd></dl></li><li class="layui-nav-item"><a data_herf="./page/page1.html" href="javascript:;">表单1</a></li><li class="layui-nav-item"><a data_herf="./page/page2.html" href="javascript:;">表单2(带文档预览)</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><iframe class="layadmin-iframe" id="Z_iframe" src="./page/home.html" frameborder="0"></iframe></div><div class="layui-footer"><!-- 底部固定区域 -->© xxxx.com - 底部固定区域</div></div><script src="./layui/layui.js"></script><script>//JavaScript代码区域layui.use('element', function () {var element = layui.element;var Z_iframe = document.getElementById("Z_iframe")element.on('nav(test)', function (data) {// console.log(data)let href = data[0].attributes[0].nodeValueZ_iframe.src = href});});</script></body></html>

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起