layuiAdminstdv1.x【iframe版】开发者⽂档layuiAdmin.std（iframe 版）是完全基于 layui 架构⽽成的通⽤型后台管理模板系统，采⽤传统的 iframe 多页⾯开发模式，可更快速直接地开发⽹页后台应⽤程序，⽆需过多地学习成本，简单⾼效，撸起袖⼦直接⼲。
题外
该⽂档适⽤于 layuiAdmin.std 常规版（iframe），阅读之前请务必确认是否与你使⽤的版本对应。
熟练掌握 layuiAdmin 的前提是熟练掌握 layui，因此除了本篇⽂档，也是必不可少的存在。
快速上⼿
⽬录说明
解压⽂件后，你将看到以下⽬录：
src/
layuiAdmin 源代码，通常⽤于开发环境（如本地）。
src/layuiadmin/： layuiAdmin 的静态资源（JS、CSS、模块碎⽚等）
src/layuiadmin/json/：模拟接⼝返回的 JSON 相应信息，实际应⽤时可⽆视。
src/layuiadmin/layui/：layui 基础框架，功能⼀般领先于官⽹提供下载的版本。
src/layuiadmin/lib/：layuiAdmin 的核⼼模块，通常不建议修改。
src/layuiadmin/modules/：layuiAdmin 的业务模块
src/layuiadmin/style/：layuiAdmin 的样式⽂件
src/layuiadmin/tpl/：layuiAdmin 部分区块可能⽤到的模版碎⽚
src/layuiadmin/config.js：全局配置⽂件
src/views/： layuiAdmin 提供的视图⽂件，你可以将其移动到你服务端⼯程的 view 层中，注意修改 JS/CSS 的路径即可。
dist/
通过 gulp 将资源包的 src ⽬录的源代码进⾏构建后⽣成的⽬录（即：将 JS 和 CSS ⽂件进⾏了压缩等处理），通常⽤于线上环境。
关于 gulp 的使⽤，下⽂也有介绍。
部署到服务端
1. 将 src ⽬录中的 views ⽂件夹整个复制到你服务端⼯程的 view 层中，通过本地 web 服务器访问（Tomcat / IIS / Apache / Nginx 等）
2. 确保可以访问后，修改好 HTML ⽂件中的 JS/CSS 路径，即可正常运⾏页⾯。
iframe 常规版相⽐于单页⾯模式的专业版，⽆论是在⽬录结构还是开发模式上都要简单很多。因为单页版是接管了服务端 MVC 的视图层，⽽ iframe 版则将视图交给了服务端来控制和输出，可以避免鉴权的复杂程度，直接可衔接好新⽼项⽬（因为你们的⼤部分⽼项⽬都是采⽤ iframe 模式）。
全局配置
当你已经顺利在本地预览了 layuiAdmin 后，你⼀定迫不及待关注更深层的结构。假设你页⾯引⼊的是 src ⽬录的 JS，你还需要关注的是src/layuiadmin/
⽬录中的 config.js，它⾥⾯存储着所有的默认配置。你可以按照实际需求选择性修改：
layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
exports('setter', {
container: 'LAY_app' //容器ID
,base: layui.cache.base //记录静态资源所在路径
,views: layui.cache.base + 'tpl/' //动态模板所在⽬录
,entry: 'index' //默认视图⽂件名
,engine: '.html' //视图⽂件后缀名
,pageTabs: true //是否开启页⾯选项卡功能。iframe 版推荐开启
,name: 'layuiAdmin'
,tableName: 'layuiAdmin' //本地存储表名
,MOD_NAME: 'admin' //模块事件名
,debug: true //是否开启调试模式。如开启，接⼝异常时会抛出异常 URL 等信息
/
/⾃定义请求字段
,request: {
tokenName: false //⾃动携带 token 的字段名（如：access_token）。可设置 false 不携带。
}
//⾃定义响应字段
,response: {
statusName: 'code' //数据状态的字段名称
,statusCode: {
ok: 0 //数据状态⼀切正常的状态码
,logout: 1001 //登录状态失效的状态码
}
,
msgName: 'msg' //状态信息的字段名称
,dataName: 'data' //数据详情的字段名称
}
//扩展的第三⽅模块
,extend: [
'echarts', //echarts 核⼼包
'echartsTheme' //echarts 主题
]
//主题配置
,theme: {
//配⾊⽅案，如果⽤户未设置主题，第⼀个将作为默认
color: [{
main: '#20222A' //主题⾊
,selected: '#009688' //选中⾊
,logo: '' //logo区域背景⾊
,header: '' //头部区域背景⾊
iframe参数传递,alias: 'default' //默认别名
}] //为了减少篇幅，更多主题此处不做列举，可直接参考 config.js
//初始的颜⾊索引，对应上⾯的配⾊⽅案数组索引
//如果本地已经有主题⾊记录，则以本地记录为优先，除⾮清除 LocalStorage（步骤：F12呼出调试⼯具→Aplication→Local Storage→选中页⾯地址→layuiAdmin→再点上⾯的X） // 1.0 正式版开始新增
,initColorIndex: 0
}
});
});
基础⽅法
config 模块
你可以在任何地⽅通过 layui.setter 得到 config.js 中的配置信息。如：
layui.setter.base
admin 模块
var admin = layui.admin;
Ajax 请求，⽤法同 $.ajax(options)，只是该⽅法会进⾏错误处理
admin.screen()
获取屏幕类型，根据当前屏幕⼤⼩，返回 0 - 3 的值
0: 低于768px的屏幕
1：768px到992px之间的屏幕
2：992px到1200px之间的屏幕
3：⾼于1200px的屏幕
admin.sideFlexible(status)
侧边伸缩。
status 为 null：收缩；
status为 “spread”：展开
<(eventName, callback)
事件监听，下⽂会有讲解
admin.popup(options)
弹出⼀个 layuiAdmin 主题风格的 layer 层，参数 options 跟 layer.open(options) 完全相同
admin.popupRight(options)
在屏幕右侧呼出⼀个⾯板层。options 同上。
admin.popupRight({
id: 'LAY-popup-right-new1' //定义唯⼀ID，防⽌重复弹出
,success: function(){
//将 views ⽬录下的某视图⽂件内容渲染给该⾯板
layui.view(this.id).render('视图⽂件所在路径');
}
});
窗⼝ resize 事件处理，我们推荐你使⽤该⽅法取代 jQuery 的 resize 事件，以避免多页⾯标签下可能存在的冲突。
admin.fullScreen()
全屏
退出全屏
admin.events
fresh()
刷新当前右侧区域
admin.events.closeThisTabs()
关闭当前标签页
注意：如果是在 iframe 页⾯中执⾏关闭，需要如下写法：
parent.layui.admin.events.closeThisTabs();
admin.events.closeOtherTabs()
关闭其它标签页
admin.events.closeAllTabs()
关闭全部标签页
view 模块
在 iframe 页⾯内部打开新标签
通常你会涉及⼀些在右侧 iframe 页⾯内部去打开⼀个新标签的需求，⽬前有以下⽅式可以实现
⽅法⼀：
直接在 a 标签上加上相关属性
<a lay-href="url">⽂本</a>
⽅法⼆：
调⽤ index 模块的相关⽅法
parent.layui.index.openTabsPage(href, text); //这⾥要注意的是 parent 的层级关系
⾃定义标签栏标题
每当你打开⼀个标签页，头部都会出现标题。它默认读取的是所点元素的⽂本，但是你也可以⾃定义标题。
<a lay-href="url" lay-text="⾃定义标题⽂本">默认读取的⽂本</a>
值得说明的是，只要你配置了上述的 lay-href 属性，就会打开⼀个新的标签，如果要在当前标签跳转，直接配置 href="" 属性即可。实⽤组件
Hover 提⽰层
通过对元素设置 lay-tips="提⽰内容" 来开启⼀个 hover 提⽰，如：
<i class="layui-icon layui-icon-tips" lay-tips="要⽀持的噢" lay-offset="5"></i>
其中 lay-offset ⽤于定于⽔平偏移距离（单位px），以调整箭头让其对准元素
兼容性
layuiAdmin 使⽤到了 layui 的栅格系统，⽽栅格则是基于浏览器的媒体查询。ie8、9不⽀持。
所以要在宿主页⾯（如 start/index.html ）加上下⾯这段保证兼容：
<!-- 让IE8/9⽀持媒体查询，从⽽兼容栅格 -->
<!--[if lt IE 9]>
<script src="/html5shiv/r29/html5.min.js"></script>
<script src="/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
升级事项
从官⽹更新资源包后，以 src ⽬录为例（dist 由于是 src 构建后⽣成的⽬录，所以本质是和 src ⼀样的）
src ⽬录下可以直接覆盖的有：
src/json/
src/layui/
src/lib/
src/style/
需要灵活调配的有：
src/modules/
src/tpl/
src/config.js
如果没有改动默认配置，事实上 config.js 也可以覆盖升级
源码构建
当你在 src ⽬录完成开发后，你可通过 gulp 对 src 源码进⾏⾃动化构建，以⽣成⽤于线上环境的 dist ⽬录。并在 HTML 源代码中引⼊该⽬录的 JS/CSS。
在资源包中根⽬录下看到的 gulpfile.js 是 layuiAdmin 写好的任务脚本，package.json 是任务配置⽂件，你只需按照以下步骤：
step1：确保你的电脑已经安装好了，如果未安装，可去官⽹下载安装
step2: 命令⾏安装 gulp：npm install gulp -g
step3：切换到 layuiAdmin 项⽬根⽬录（即 gulpfile.js 所在⽬录），命令⾏安装任务所依赖的包：npm install
安装完成后，后续只需直接执⾏命令：gulp 即可完成 src 到 dist ⽬录的构建
发表评论