layuiAdmin单页版根据后台

使用模板方式加载菜单

lay-url=“菜单接口”

lay-headers=“将token带入请求头”，如果没有，去掉就行

在模板中使用console.log 示例： {{# console.log(1) }}

layui.data(‘layuiAdmin’).token 调用本地存储的token,token名需要和本地存储对应

json字段名不需要和这里的一样，json字段名改变，模板里面也要相应的修改

{{#

var path = layui.router().path

,dataName = layui.setter.response.dataName;

layui.each(d[dataName], function(index, item){

var hasChildren = typeof item.list === 'object' && item.list.length > 0

,classSelected = function(){

if(index == 0){

return hasChildren ? 'layui-nav-itemed' : 'layui-this';

}

return '';

}

,url = typeof item.href === 'string' ? item.href : item.name;

}}

{{ item.title }}

{{# if(hasChildren){ }}

{{# layui.each(item.list, function(index2, item2){

var hasChildren2 = typeof item2.list == 'object' && item2.list.length > 0

,classSelected2 = function(){

if(index==0){

return hasChildren2 ? 'layui-nav-itemed' : 'layui-this';

}

return '';

}

,url2 = typeof item2.href === 'string'

? item2.href

: [item.name, item2.name, ''].join('/');

}}

{{ item2.title }}

{{# if(hasChildren2){ }}

{{# layui.each(item2.list, function(index3, item3){

var match = path[0] == item.name && path[1] == item2.name && path[2] == item3.name

,url3 = typeof item3.href === 'string'

? item3.href

: [item.name, item2.name, item3.name].join('/')

}}

{{ item3.title }}

{{# }); }}

{{# } }}

{{# }); }}

{{# } }}

{{# }); }}

后台返回的json格式(示例)

{

"code": 0

,"msg": ""

,"data": [{

"title": "主页"

,"icon": "layui-icon-home"

,"list": [{

"title": "控制台"

,"jump": "/"

}, {

"name": "homepage1"

,"title": "主页一"

,"jump": "home/homepage1"

}, {

"name": "homepage2"

,"title": "主页二"

,"jump": "home/homepage2"

}]

}, {

"name": "component"

,"title": "组件"

,"icon": "layui-icon-component"

,"list": [{

"name": "grid"

,"title": "栅格"

,"list": [{

"name": "list"

,"title": "等比例列表排列"

},{

"name": "mobile"

,"title": "按移动端排列"

},{

"name": "mobile-pc"

,"title": "移动桌面端组合"

},{

"name": "all"

,"title": "全端复杂组合"

},{

"name": "stack"

,"title": "低于桌面堆叠排列"

},{

"name": "speed-dial"

,"title": "九宫格"

}]

}, {

"name": "button"

,"title": "按钮"

}, {

"name": "form"

,"title": "表单"

,"list": [{

"name": "element"

,"title": "表单元素"

},{

"name": "group"

,"title": "表单组合"

}]

}, {

"name": "nav"

,"title": "导航"

}, {

"name": "tabs"

,"title": "选项卡"

}, {

"name": "progress"

,"title": "进度条"

}, {

"name": "panel"

,"title": "面板"

}, {

"name": "badge"

,"title": "徽章"

}, {

"name": "timeline"

,"title": "时间线"

}, {

"name": "anim"

,"title": "动画"

}, {

"name": "auxiliar"

,"title": "辅助"

}, {

"name": "layer"

,"title": "通用弹层"

,"list": [{

"name": "list"

,"title": "功能演示"

},{

"name": "special-demo"

,"title": "特殊示例"

},{

"name": "theme"

,"title": "风格定制"

}]

}, {

"name": "laydate"

,"title": "日期时间"

,"list": [{

"name": "demo1"

,"title": "功能演示一"

},{

"name": "demo2"

,"title": "功能演示二"

},{

"name": "theme"

,"title": "设定主题"

},{

"name": "special-demo"

,"title": "特殊示例"

}]

}, {

"name": "table"

,"title": "表格"

,"list": [{

"name": "simple"

,"title": "简单数据表格"

},{

"name": "auto"

,"title": "列宽自动分配"

},{

"name": "data"

,"title": "赋值已知数据"

},{

"name": "tostatic"

,"title": "转化静态表格"

},{

"name": "page"

,"title": "开启分页"

},{

"name": "resetPage"

,"title": "自定义分页"

},{

"name": "toolbar"

,"title": "开启头部工具栏"

},{

"name": "totalRow"

,"title": "开启合计行"

},{

"name": "height"

,"title": "高度最大适应"

},{

"name": "checkbox"

,"title": "开启复选框"

},{

"name": "radio"

,"title": "开启单选框"

},{

"name": "cellEdit"

,"title": "开启单元格编辑"

},{

"name": "form"

,"title": "加入表单元素"

},{

"name": "style"

,"title": "设置单元格样式"

},{

"name": "fixed"

,"title": "固定列"

},{

"name": "operate"

,"title": "数据操作"

},{

"name": "parseData"

,"title": "解析任意数据格式"

},{

"name": "onrow"

,"title": "监听行事件"

},{

"name": "reload"

,"title": "数据表格的重载"

},{

"name": "initSort"

,"title": "设置初始排序"

},{

"name": "cellEvent"

,"title": "监听单元格事件"

},{

"name": "thead"

,"title": "复杂表头"

}]

}, {

"name": "laypage"

,"title": "分页"

,"list": [{

"name": "demo1"

,"title": "功能演示一"

},{

"name": "demo2"

,"title": "功能演示二"

}]

}, {

"name": "upload"

,"title": "上传"

,"list": [{

"name": "demo1"

,"title": "功能演示一"

},{

"name": "demo2"

,"title": "功能演示二"

}]

}, {

"name": "colorpicker"

,"title": "颜色选择器"

}, {

"name": "slider"

,"title": "滑块组件"

}, {

"name": "rate"

,"title": "评分"

}, {

"name": "carousel"

,"title": "轮播"

}, {

"name": "flow"

,"title": "流加载"

}, {

"name": "util"

,"title": "工具"

}, {

"name": "code"

,"title": "代码修饰"

}, {

"name": "layim"

,"title": "即时聊天"

,"jump": "senior/im/"

}]

}, {

"name": "template"

,"title": "页面"

,"icon": "layui-icon-template"

,"list": [{

"name": "personalpage"

,"title": "个人主页"

,"jump": "template/personalpage"

},{

"name": "addresslist"

,"title": "通讯录"

,"jump": "template/addresslist"

},{

"name": "caller"

,"title": "客户列表"

,"jump": "template/caller"

},{

"name": "goodslist"

,"title": "商品列表"

,"jump": "template/goodslist"

},{

"name": "msgboard"

,"title": "留言板"

,"jump": "template/msgboard"

},{

"name": "search"

,"title": "搜索结果"

,"jump": "template/search"

},{

"name": "reg"

,"title": "注册"

,"jump": "user/reg"

},{

"name": "login"

,"title": "登入"

,"jump": "user/login"

},{

"name": "forget"

,"title": "忘记密码"

,"jump": "user/forget"

},{

"name": "404"

,"title": "404"

,"jump": "template/tips/404"

},{

"name": "error"

,"title": "错误提示"

,"jump": "template/tips/error"

}, {

"name": ""

,"title": "内嵌页面"

,"spread": true

,"list": [{

"name": ""

,"title": "百度一下"

,"jump": "/iframe/link/baidu"

}, {

"name": ""

,"title": "layui官网"

,"jump": "/iframe/link/layui"

}, {

"name": ""

,"title": "layuiAdmin官网"

,"jump": "/iframe/link/layuiAdmin"

}]

}]

}, {

"name": "app"

,"title": "应用"

,"icon": "layui-icon-app"

,"list": [{

"name": "content"

,"title": "内容系统"

,"list": [{

"name": "list"

,"title": "文章列表"

},{

"name": "tags"

,"title": "分类管理"

},{

"name": "comment"

,"title": "评论管理"

}]

},{

"name": "forum"

,"title": "社区系统"

,"list": [{

"name": "list"

,"title": "帖子列表"

},{

"name": "replys"

,"title": "回帖列表"

}]

},{

"name": "message"

,"title": "消息中心"

},{

"name": "workorder"

,"title": "工单系统"

,"jump": "app/workorder/list"

}]

}, {

"name": "senior"

,"title": "高级"

,"icon": "layui-icon-senior"

,"list": [{

"name": "im"

,"title": "通讯系统"

},{

"name": "echarts"

,"title": "Echarts集成"

,"list": [{

"name": "line"

,"title": "折线图"

},{

"name": "bar"

,"title": "柱状图"

},{

"name": "map"

,"title": "地图"

}]

}]

}, {

"name": "user"

,"title": "用户"

,"icon": "layui-icon-user"

,"list": [{

"name": "user"

,"title": "网站用户"

,"jump": "user/user/list"

}, {

"name": "administrators-list"

,"title": "后台管理员"

,"jump": "user/administrators/list"

}, {

"name": "administrators-rule"

,"title": "角色管理"

,"jump": "user/administrators/role"

}]

}, {

"name": "set"

,"title": "设置"

,"icon": "layui-icon-set"

,"list": [{

"name": "system"

,"title": "系统设置"

,"spread": true

,"list": [{

"name": "website"

,"title": "网站设置"

},{

"name": "email"

,"title": "邮件服务"

}]

},{

"name": "user"

,"title": "我的设置"

,"spread": true

,"list": [{

"name": "info"

,"title": "基本资料"

},{

"name": "password"

,"title": "修改密码"

}]

}]

}, {

"name": "get"

,"title": "授权"

,"icon": "layui-icon-auz"

,"jump": "system/get"

}]

}

效果图：

推荐教程：《layui框架教程》

本文由 @风夏小菊[Vip] 发布于 职涯宝 ，未经作者许可，禁止转载，欢迎您分享文章