layui开发管理后台比较快捷和简单，但真正做的很好也并不是很容易，这里总结一下，后台所必备的几个大的元素：
1、header 页头
2、side 边框
3、body 页体
4、footer 页脚
5、navbar 边框二级菜单
前面4个是layui的基本样式，用layui很容易实现，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>祝好</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/index.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">
通用管理系统
</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">系统管理</li>
<li class="layui-nav-item">用户</li>
<li class="layui-nav-item">退出</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"></div>
</div>
<div class="layui-body">
主内容
</div>
<div class="layui-footer">
页脚 @
</div>
</div>
</body>
</html>
<script>
</script>
比较难的是上面第5条的navbar怎样实现呢？
可以直接用layui-nav layui-nav-tree layui-nav-item layui-nav-child 进行实现，
但不是太好，因为动态获取麻烦些，而且代码不好控。
于是，这里采用包装好的navbar.js，进行实现。
核心代码如下：
//设置navbar
navbar.set({
spreadOne: true,
elem: '#admin-navbar-side',
cached: true,
data: navs,
});
//渲染navbar
navbar.render();
其中render()中生成html文件。