layui搭建管理后台系统
先上最终效果图：
点击左侧的菜单树可以显示在导航栏中
下面是具体步骤：
①下载layui
https://www.layui.com/
新地址：开始使用 - Layui 文档
②项目结构介绍
html：存放静态界面
img：存放图片
json：模拟请求数据，展示用
layui：步骤一下载的文件
③源码
index.html
后台管理系统
adminuserList.html
用户列表
用户名：
手机号：
user.json
{
"code": 0,
"msg": "success",
"count": 14,
"data": [{
"id": 1,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 2,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 3,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 4,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 5,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 6,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 7,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 8,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 9,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 19,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 11,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 12,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
},{
"id": 13,
"username": "zs",
"phone":"182****3110",
"sex": "男",
"city": "台州"
},
{
"id": 14,
"username": "ls",
"phone":"182****3110",
"sex": "女",
"city": "台州"
}]
}
更多使用技巧（radio的选择、下拉框回写、自定义数据展示模板等）查看：
layui积累_� 大狗子的博客-CSDN博客
④图标获取
通过这个地址：iconfont-阿里巴巴矢量图标库
使用方法参考：前端引入icon的方法（iconfont,fontawesome） - 简书