该文档适用于 layuiAdmin 专业版(单页面),阅读之前请务必确认是否与你使用的版本对应。
熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, layui 的文档 也是必不可少的存在。
快速上手
部署解压文件后,将 layuiAdmin 完整放置在任意目录
通过本地 web 服务器去访问 ./start/index.html 即可运行 Demo由于 layuiAdmin 可采用前后端分离开发模式,因此你无需将其放置在你的服务端 MVC 框架中,你只需要给 layuiAdmin 主入口页面(我们也称之为:宿主页面)进行访问解析,它即可全权完成自身路由的跳转和视图的呈现,而数据层则完全通过服务端提供的异步接口来完成。
目录说明src/layuiAdmin 源代码,通常用于开发环境(如本地),推荐你在本地开发时,将 ./start/index.html 中的 layui.css 和 layui.js 的引入路径由 dist 改为 src 目录。src/controller/:存放 JS 业务模块,即对视图进行事件等交互性处理
src/lib/:layuiAdmin 的核心模块,一般不推荐修改
src/style/:存放样式,其中 admin.css是核心样式
src/views/:存放视图文件。其中 layout.html 是整个框架结构的承载,一般不推荐做大量改动。
src/config.js:layuiAdmin 的全局配置文件,可随意修改。
src/index.js:layuiAdmin 的入口模块,一般不推荐修改
dist/通过 gulp 将 layuiAdmin src 目录的源代码进行构建后生成的目录(即:将 JS 和 CSS 文件进行了压缩等处理),通常用于线上环境。关于 gulp 的使用,下文也有介绍。
start/存放 layuiAdmin 的入口页面、模拟接口数据、layui
宿主页面
你所看到的 start/index.html 是我们提供好的宿主页面,它是整个单页面的承载,所有的界面都是在这一个页面中完成跳转和渲染的。事实上,宿主页面可以放在任何地方,但是要注意修改里面的
全局配置
当你已经顺利在本地预览了 layuiAdmin 后,你一定迫不及待关注更深层的结构。打开 src 目录,你将看到 config.js,里面存储着所有的默认配置。你可以按照实际需求选择性修改,下面是 layuiAdmin 默认提供的配置:layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
exports('setter', {
container: 'LAY_app' //容器ID
,base: layui.cache.base //记录layuiAdmin文件夹所在路径
,views: layui.cache.base + 'views/' //视图所在目录
,entry: 'index' //默认视图文件名
,engine: '.html' //视图文件后缀名
,pageTabs: false //是否开启页面选项卡功能。单页版不推荐开启
,name: 'layuiAdmin Pro'
,tableName: 'layuiAdmin' //本地存储表名
,MOD_NAME: 'admin' //模块事件名
,debug: true //是否开启调试模式。如开启,接口异常时会抛出异常 URL 等信息
,interceptor: false //是否开启未登入拦截
//自定义请求字段
,request: {
tokenName: 'access_token' //自动携带 token 的字段名。可设置 false 不携带。
}
//自定义响应字段
,response: {
statusName: 'code' //数据状态的字段名称
,statusCode: {
ok: 0 //数据状态一切正常的状态码
,logout: 1001 //登录状态失效的状态码
}
,msgName: 'msg' //状态信息的字段名称
,dataName: 'data' //数据详情的字段名称
}
//独立页面路由,可随意添加(无需写参数)
,indPage: [
'/user/login' //登入页
,'/user/reg' //注册页
,'/user/forget' //找回密码
,'/template/tips/test' //独立页的一个测试 demo
]
//扩展的第三方模块
,extend: [
'echarts', //echarts 核心包
'echartsTheme' //echarts 主题
]
//主题配置
,theme: {
//配色方案,如果用户未设置主题,第一个将作为默认
color: [{
main: '#20222A' //主题色
,selected: '#009688' //选中色
,logo: '' //logo区域背景色
,header: '' //头部区域背景色
,alias: 'default' //默认别名
}] //为了减少篇幅,更多主题此处不做列举,可直接参考 config.js
//初始的颜色索引,对应上面的配色方案数组索引
//如果本地已经有主题色记录,则以本地记录为优先,除非清除 localStorage(步骤:F12呼出调试工具→Aplication→Local Storage→选中页面地址→layuiAdmin→再点上面的X)
// 1.0 正式版开始新增
,initColorIndex: 0
}
});
});
侧边菜单在 start/json/menu.js 文件中,我们放置了默认的侧边菜单数据,你可以去随意改动它。
如果你需要动态加载菜单