1.1.导入项目
- 下载项目后进行解压
- 使用IDEA、WebStorm、HBuilder等前端开发工具打开
- 打开index.html点击右上角浏览器图标运行：
注意： 必须以http://的形式访问，而不是file://的形式访问。
1.2.项目结构
|-assets
| |-images # 图片
| |-js
| |-common.js # 公共js，主要配置layui扩展模块位置
| |-libs # 第三方库，echarts(图表)、layui
| |-module # layui扩展模块，版本更新只用替换此目录
| |-img # 框架用到的图片
| |-admin.css # 框架核心样式
| |-admin.js # admin模块
| |-index.js # index模块
| |-******** # 其他扩展模块，不一一列举
|-page # html页面
|-json # 模拟数据
|-index.html # 主页面
与后端整合从index.html页面入手，page、json可以删除，assets整个目录都是静态资源，遇到问题先看控制台， 保证index.html无404问题，控制台network里面layui.js、common.js、index.js、admin.js能成功加载就表示成功整合了。
1.3.index.html
<html>
<head>
<link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
<link rel="stylesheet" href="assets/module/admin.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!-- 头部 -->
<div class="layui-header">...</div>
<!-- 侧边栏 -->
<div class="layui-side">...</div>
<!-- 主体部分 -->
<div class="layui-body">...</div>
<!-- 底部 -->
<div class="layui-footer">...</div>
</div>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="assets/js/common.js"></script>
<script>
layui.use(['index'], function () {
var index = layui.index;
// 加载默认主页
index.loadHome({
menuPath: 'page/console/console.html',
menuName: '<i class="layui-icon layui-icon-home"></i>'
});
});
</script>
</body>
</html>
index.html就是这样固定的结构，一般不需要修改，只用写子页面配置在侧边栏中即可。
在整合到后端时，可以把头部、侧边栏抽离出来，再include进去，便于维护。
1.4.common.js
layui.config({
base: getProjectUrl() + 'assets/module/' // 配置layui扩展模块目录
}).extend({ // 配置每个模块分别所在的目录
notice: 'notice/notice',
step: 'step-lay/step'
}).use(['admin'], function () {
var admin = layui.admin;
});
// 获取项目根路径
function getProjectUrl() {
return '...省略';
}
- layui.config的base是告诉layui扩展模块所在目录
- layui.extend是配置每个模块具体js位置
- getProjectUrl()是封装的获取项目根目录的方法
像admin.js、index.js这些没有用子目录存放的模块不需要配置layui.extend， getProjectUrl()可以保证不同路径的子页面引用common.js都能正确配置模块位置，原理是获取layui.js的全路径， 并截取assets之前的路径，所以你的layui需要在assets目录下面，assets上一层必须是项目根路径， 你也可以根据你的目录结构合理的修改getProjectUrl方法，比如assets改成static。
注意： 每个页面都需要引入common.js，如果增加了新模块记得在这里配置模块
1.5.修改默认配置
所有的配置都在common.js里面的layui.config中配置：
layui.config({
pageTabs: false, // 关闭多标签
defaultTheme: 'theme-colorful', // 默认主题
cacheTab: false, // 刷新页面不恢复已经打开的Tab
maxTabNum: 20, // 最大打开的Tab数量
openTabCtxMenu: false, // 关闭Tab鼠标右键菜单
tableName: 'easyweb-iframe', // 存储表名
navArrow: 'arrow3', // 侧边栏导航箭头
closeFooter: true, // 是否关闭页脚
tabAutoRefresh: true, // 是否切换Tab自动刷新页面
getAjaxHeaders: function(){}, // ajax统一传递header
ajaxSuccessBefore: function(){},// ajax统一预处理
baseServer: '', // admin.req的url会自动在前面加这个
reqPutToPost: false, // 为true会自动把put变post，delete变get并加_method
version: true, // 加载模块不缓存
apiNoCache: true, // ajax请求json不加版本号
tplOpen: '{{', // url弹窗模板引擎边界符
tplClose: '}}', // url弹窗模板引擎边界符
defaultLoading: 1, // 默认的加载动画(只控制admin.showLoading的默认)
base: getProjectUrl() + 'assets/module/'
})
- tableName 是前端放缓存的表名，如果一个域名下有多个项目，需要修改成不同的名称。
- apiNoCache admin.ajax请求如果配置了version会自动加版本号解决缓存，配置为true如果请求的json数据则不加。
在设置界面修改的配置会高于默认配置，设置界面的配置是放在缓存中，清除缓存就会以默认配置为主，这些配置参数都有合适的默认值， 根据你的需要加，不是全部都要写上。
如何读取这些配置信息：
var setter = admin.setter;
console.log(setter);
console.log(setter.version);
// 也可以用layui.cache
console.log(layui.cache.version);
3.1.6版本开始都在这里配置，不用每次修改admin.js、index.js了。
1.6.增加一个页面
- 打开index.html，找到侧导航栏部分，添加一个菜单：
- 在index.html同目录下新建一个xxx.html页面
- 运行index.html，查看效果
<dd><a lay-href="xxx.html">XX管理</a></dd>
<!-- 还可以增加ew-title属性自定义打开的Tab标题
<a lay-href="xxx.html" ew-title="XXXXX">XX管理</a> -->
注意： 是lay-href不是href，加图标用 ew-title="XX"
