layuiAdmin std v1.x 【iframe版】开发者文档
layuiAdmin pro v1.x 【单页版】开发者文档
layuiAdmin.std(iframe 版) 是完全基于 layui 架构而成的通用型后台管理模板系统,采用传统的 iframe 多页面开发模式,可更快速直接地开发网页后台应用程序,无需过多地学习成本,简单高效,撸起袖子直接干。
题外
- 该文档适用于 layuiAdmin.std 常规版(iframe),阅读之前请务必确认是否与你使用的版本对应。
- 熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, 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 的使用,下文也有介绍。
部署到服务端
- 将 src 目录中的 views 文件夹整个复制到你 服务端工程 的 view 层中,通过本地 web 服务器访问(Tomcat / IIS / Apache / Nginx 等)
- 确保可以访问后,修改好 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: '' //头部区域背景色
,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;
- admin.req(options)
Ajax 请求,用法同 $.ajax(options),只是该方法会进行错误处理
- admin.screen()
获取屏幕类型,根据当前屏幕大小,返回 0 - 3 的值
0: 低于768px的屏幕
1:768px到992px之间的屏幕
2:992px到1200px之间的屏幕
3:高于1200px的屏幕
- admin.sideFlexible(status)
侧边伸缩。
status 为 null:收缩;
status为 “spread”:展开
- admin.on(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('视图文件所在路径');
}
});
- admin.resize(callback)
窗口 resize 事件处理,我们推荐你使用该方法取代 jQuery 的 resize 事件,以避免多页面标签下可能存在的冲突。
- admin.fullScreen()
全屏
- admin.exitScreen()
退出全屏
admin.events
- admin.events.refresh()
刷新当前右侧区域
- admin.events.closeThisTabs()
关闭当前标签页
注意:如果是在 iframe 页面中执行关闭,需要如下写法:
parent.layui.admin.events.closeThisTabs();
- admin.events.closeOtherTabs()
关闭其它标签页
- admin.events.closeAllTabs()
关闭全部标签页
- view 模块
用法同 专业版:http://fly.layui.com/docs/5/#base-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="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/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:确保你的电脑已经安装好了 Node.js,如果未安装,可去官网下载安装
- step2: 命令行安装 gulp:npm install gulp -g
- step3:切换到 layuiAdmin 项目根目录(即 gulpfile.js 所在目录),命令行安装任务所依赖的包:npm install
安装完成后,后续只需直接执行命令:gulp 即可完成 src 到 dist 目录的构建
layuiAdmin std v1.x 【iframe版】开发者文档的更多相关文章
- layuiAdmin pro v1.x 【单页版】开发者文档
layuiAdmin std v1.x [iframe版]开发者文档 题外 该文档适用于 layuiAdmin 专业版(单页面),阅读之前请务必确认是否与你使用的版本对应. 熟练掌握 layuiAdm ...
- ShiWangMeSDK Android版接口文档 0.2.0 版
# ShiWangMeSDK Android版接口文档 0.2.0 版 android 总共有 14 个接口,分别涉及到初始化和对界面的一些细节的控制.下面详细介绍接口,如果没有特殊说明,接口都在 S ...
- developers.google.com上的开发者文档如何切换显示语言
一个小的tip,搜索到developers.google.com上的开发者文档,有些被翻译了的会自动显示中本版,如果想看英文版,可以在当前url后面加?hl=en,就会变成英文版.估计是根据地区直接推 ...
- Thinking in Java 4th(Java编程思想第四版)文档、源码、习题答案
Thinking in Java 4th 中.英文两版pdf文档,书中源码及课后习题答案.链接:https://pan.baidu.com/s/1BKJdtgJ3s-_rN1OB4rpLTQ 密码:2 ...
- 【swagger】1.swagger提供开发者文档--简单集成到spring boot中【spring mvc】【spring boot】
swagger提供开发者文档 ======================================================== 作用:想使用swagger的同学,一定是想用它来做前后台 ...
- 将html版API文档转换成chm格式的API文档
文章完全转载自: https://blog.csdn.net/u012557538/article/details/42089277 将html版API文档转换成chm格式的API文档并不是一件难事, ...
- Typora+PicGo+cos图床打造开发者文档神器
一.Typora简介 markdown简单.高效的语法,被每一个开发者所喜爱.Typora又是一款简约.强悍的实时渲染markdown编辑器.本文将介绍Typora搭配PicGo与腾讯cos对象存储( ...
- Android 开发者文档 -- 应用基础知识
https://developer.android.com/guide/components/fundamentals 应用基础知识 Android 应用采用 Java 编程语言编写.Android ...
- Java版office文档在线预览
java将office文档pdf文档转换成swf文件在线预览 第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux ...
随机推荐
- Myeclipse连接Mysql数据库时报错:Error while performing database login with the pro driver:unable
driver template: Mysql connector/j(下拉框进行选择) driver name: 任意填,最好是数据库名称,方便查找 connection URL: jdbc:mysq ...
- 番外:可刷新PDB的管理操作(如何切换PDB Switching Over)
基于版本:19c (12.2.0.3) AskScuti 主题:可刷新PDB如何进行切换操作 内容说明:本篇延续如何克隆可刷新的PDB(Refreshable PDB)一文,进行切换实验. 具体请参考 ...
- javascript当中的构造函数的用法
5)构造函数的用法: 例 3.5.1 <head> <meta http-equiv="content-type" content="text/h ...
- ECMAScript基本语法——⑤运算符 一元运算符
++自增 在前先自增,再运算 在后先运算,再自增 --自减 在前先自减,再运算 在后先运算,再自减 +正号,-负号.表示数字的正负 注意:在JavaScript中,如果运算数不是运算符要求的类型, 那 ...
- url跳转问题
window.history.replaceState(null, null, "/callPlanning/1") //替换路径不刷新页面 window.location.rep ...
- C++-POJ2234-Matches Game[Nim][SG函数]
#include <set> #include <map> #include <cmath> #include <queue> #include < ...
- Python入门5 —— 基本运算符
1.算数运算符('+'.'-'.'*'.'/'.'//'.'%'.'**') print(10 + 3) -- 输出:13 print(10 - 3) -- 输出:7 print(10 * 3) -- ...
- 动图演示23个鲜为人知的VSCode快捷键
动图演示23个鲜为人知的VSCode快捷键 原文地址:dev.to/devmount/23… 代码同步浏览器 安装vccode 安装live server插件 尽管我在VS Code中经常使用许多快捷 ...
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(8.21)-- Host Operation with Asymmetric Namespace Access Reporting
8.21 使用ANA报告的主机操作 8.21.1 主机ANA普通操作 主机通过在Identify Controller数据结构中CMIC域的第3位来判断是否支持ANA.NSID或标识(参考第7.10章 ...
- Linux下基于PAM机制的USB Key的制作
摘自:https://server.zzidc.com/fwqpz/157.html USB Key这个概念最早是由加密锁厂家提出来的,加密锁是用来防止软件盗版的硬件产品,加密锁的概念是使安装在计算机 ...