目录

layuiAdmin std v1.x 【iframe版】开发者文档

题外

快速上手

目录说明

部署到服务端

全局配置

基础方法

在 iframe 页面内部打开新标签

方法一&＃xff1a;

方法二&＃xff1a;

自定义标签栏标题

实用组件

Hover 提示层

兼容性

升级事项

源码构建

layuiAdmin std v1.x 【iframe版】开发者文档

更新日志 常见问题 在线演示 会员专区 切换到&＃xff1a;单页版文档

layuiAdmin.std&＃xff08;iframe 版&＃xff09; 是完全基于 layui 架构而成的通用型后台管理模板系统&＃xff0c;采用传统的 iframe 多页面开发模式&＃xff0c;可更快速直接地开发网页后台应用程序&＃xff0c;无需过多地学习成本&＃xff0c;简单高效&＃xff0c;撸起袖子直接干。

题外

• 该文档适用于 layuiAdmin.std 常规版&＃xff08;iframe&＃xff09;&＃xff0c;阅读之前请务必确认是否与你使用的版本对应。
• 熟练掌握 layuiAdmin 的前提是熟练掌握 layui&＃xff0c;因此除了本篇文档&＃xff0c; layui 的文档 也是必不可少的存在。

快速上手

目录说明

解压文件后&＃xff0c;你将看到以下目录&＃xff1a;

• src/
  layuiAdmin 源代码&＃xff0c;通常用于开发环境&＃xff08;如本地&＃xff09;。

  • src/layuiadmin/&＃xff1a;layuiAdmin 的静态资源&＃xff08;JS、CSS、模块碎片等&＃xff09;

    • **src/layuiadmin/json/&＃xff1a;模拟接口返回的 JSON 相应信息&＃xff0c;实际应用时可无视。
    • **src/layuiadmin/layui/&＃xff1a;layui 基础框架&＃xff0c;功能一般领先于官网提供下载的版本。
    • **src/layuiadmin/lib/&＃xff1a;layuiAdmin 的核心模块&＃xff0c;通常不建议修改。
    • **src/layuiadmin/modules/&＃xff1a;layuiAdmin 的业务模块
    • **src/layuiadmin/style/&＃xff1a;layuiAdmin 的样式文件
    • **src/layuiadmin/tpl/&＃xff1a;layuiAdmin 部分区块可能用到的模版碎片
    • **src/layuiadmin/config.js&＃xff1a;全局配置文件

  • src/views/&＃xff1a;layuiAdmin 提供的视图文件&＃xff0c;你可以将其移动到你服务端工程的 view 层中&＃xff0c;注意修改 JS/CSS 的路径即可。

• dist/
  通过 gulp 将 资源包的 src 目录的源代码进行构建后生成的目录&＃xff08;即&＃xff1a;将 JS 和 CSS 文件进行了压缩等处理&＃xff09;&＃xff0c;通常用于线上环境。关于 gulp 的使用&＃xff0c;下文也有介绍。

部署到服务端

1. 将 src 目录中的 views 文件夹整个复制到你 服务端工程 的 view 层中&＃xff0c;通过本地 web 服务器访问&＃xff08;Tomcat / IIS / Apache / Nginx 等&＃xff09;
2. 确保可以访问后&＃xff0c;修改好 HTML 文件中的 JS/CSS 路径&＃xff0c;即可正常运行页面。

iframe 常规版 相比于 单页面模式的专业版 &＃xff0c;无论是在目录结构还是开发模式上都要简单很多。因为单页版是接管了服务端 MVC 的视图层&＃xff0c;而 iframe 版则将视图交给了服务端来控制和输出&＃xff0c;可以避免鉴权的复杂程度&＃xff0c;直接可衔接好新老项目&＃xff08;因为你们的大部分老项目都是采用 iframe 模式&＃xff09;。

全局配置

当你已经顺利在本地预览了 layuiAdmin 后&＃xff0c;你一定迫不及待关注更深层的结构。假设你页面引入的是 src 目录 的 JS&＃xff0c;你还需要关注的是 src/layuiadmin/
目录中的 config.js&＃xff0c;它里面存储着所有的默认配置。你可以按照实际需求选择性修改&＃xff1a;

layui.define([&＃39;laytpl&＃39;, &＃39;layer&＃39;, &＃39;element&＃39;, &＃39;util&＃39;], function(exports){exports(&＃39;setter&＃39;, {container: &＃39;LAY_app&＃39; //容器ID,base: layui.cache.base //记录静态资源所在路径,views: layui.cache.base &＃43; &＃39;tpl/&＃39; //动态模板所在目录,entry: &＃39;index&＃39; //默认视图文件名,engine: &＃39;.html&＃39; //视图文件后缀名,pageTabs: true //是否开启页面选项卡功能。iframe 版推荐开启,name: &＃39;layuiAdmin&＃39;,tableName: &＃39;layuiAdmin&＃39; //本地存储表名,MOD_NAME: &＃39;admin&＃39; //模块事件名,debug: true //是否开启调试模式。如开启&＃xff0c;接口异常时会抛出异常 URL 等信息//自定义请求字段,request: {tokenName: false //自动携带 token 的字段名&＃xff08;如&＃xff1a;access_token&＃xff09;。可设置 false 不携带。}//自定义响应字段,response: {statusName: &＃39;code&＃39; //数据状态的字段名称,statusCode: {ok: 0 //数据状态一切正常的状态码,logout: 1001 //登录状态失效的状态码},msgName: &＃39;msg&＃39; //状态信息的字段名称,dataName: &＃39;data&＃39; //数据详情的字段名称}//扩展的第三方模块,extend: [&＃39;echarts&＃39;, //echarts 核心包&＃39;echartsTheme&＃39; //echarts 主题]//主题配置,theme: {//配色方案&＃xff0c;如果用户未设置主题&＃xff0c;第一个将作为默认color: [{main: &＃39;#20222A&＃39; //主题色,selected: &＃39;#009688&＃39; //选中色,logo: &＃39;&＃39; //logo区域背景色,header: &＃39;&＃39; //头部区域背景色,alias: &＃39;default&＃39; //默认别名}] //为了减少篇幅&＃xff0c;更多主题此处不做列举&＃xff0c;可直接参考 config.js//初始的颜色索引&＃xff0c;对应上面的配色方案数组索引//如果本地已经有主题色记录&＃xff0c;则以本地记录为优先&＃xff0c;除非清除 LocalStorage&＃xff08;步骤&＃xff1a;F12呼出调试工具→Aplication→Local Storage→选中页面地址→layuiAdmin→再点上面的X&＃xff09;// 1.0 正式版开始新增,initColorIndex: 0}});
});

基础方法

• config 模块

你可以在任何地方通过 layui.setter 得到 config.js 中的配置信息。如&＃xff1a;layui.setter.base

• admin 模块

var admin &＃61; layui.admin;

• admin.req(options)
  Ajax 请求&＃xff0c;用法同 $.ajax(options)&＃xff0c;只是该方法会进行错误处理

• admin.screen()
  获取屏幕类型&＃xff0c;根据当前屏幕大小&＃xff0c;返回 0 - 3 的值
  0: 低于768px的屏幕
  1&＃xff1a;768px到992px之间的屏幕
  2&＃xff1a;992px到1200px之间的屏幕
  3&＃xff1a;高于1200px的屏幕

• admin.sideFlexible(status)
  侧边伸缩。status 为 null&＃xff1a;收缩&＃xff1b;status为 “spread”&＃xff1a;展开

• admin.on(eventName, callback)
  事件监听&＃xff0c;下文会有讲解

• admin.popup(options)
  弹出一个 layuiAdmin 主题风格的 layer 层&＃xff0c;参数 options 跟 layer.open(options) 完全相同

• admin.popupRight(options)
  在屏幕右侧呼出一个面板层。options 同上。

admin.popupRight({id: &＃39;LAY-popup-right-new1&＃39; //定义唯一ID&＃xff0c;防止重复弹出,success: function(){//将 views 目录下的某视图文件内容渲染给该面板layui.view(this.id).render(&＃39;视图文件所在路径&＃39;);}
});


• admin.resize(callback)
  窗口 resize 事件处理&＃xff0c;我们推荐你使用该方法取代 jQuery 的 resize 事件&＃xff0c;以避免多页面标签下可能存在的冲突。

• admin.fullScreen()
  全屏

• admin.exitScreen()
  退出全屏

• admin.events

  • admin.events.refresh()
    刷新当前右侧区域

  • admin.events.closeThisTabs()
    关闭当前标签页

    注意&＃xff1a;如果是在 iframe 页面中执行关闭&＃xff0c;需要如下写法&＃xff1a;

    parent.layui.admin.events.closeThisTabs();

  • admin.events.closeOtherTabs()
    关闭其它标签页

  • admin.events.closeAllTabs()
    关闭全部标签页

• view 模块

用法同 专业版&＃xff1a;http://fly.layui.com/docs/5/#base-view

在 iframe 页面内部打开新标签

通常你会涉及一些在右侧 iframe 页面内部去打开一个新标签的需求&＃xff0c;目前有以下方式可以实现

方法一&＃xff1a;

直接在 a 标签上加上相关属性

文本


方法二&＃xff1a;

调用 index 模块的相关方法

parent.layui.index.openTabsPage(href, text); //这里要注意的是 parent 的层级关系


自定义标签栏标题

每当你打开一个标签页&＃xff0c;头部都会出现标题。它默认读取的是所点元素的文本&＃xff0c;但是你也可以自定义标题。

默认读取的文本


• 值得说明的是&＃xff0c;只要你配置了上述的 lay-href 属性&＃xff0c;就会打开一个新的标签&＃xff0c;如果要在当前标签跳转&＃xff0c;直接配置 href&＃61;"" 属性即可。

实用组件

Hover 提示层

通过对元素设置 lay-tips&＃61;"提示内容" 来开启一个 hover 提示&＃xff0c;如&＃xff1a;

其中 lay-offset 用于定于水平偏移距离&＃xff08;单位px&＃xff09;&＃xff0c;以调整箭头让其对准元素

兼容性

layuiAdmin 使用到了 layui 的栅格系统&＃xff0c;而栅格则是基于浏览器的媒体查询。ie8、9不支持。
所以要在宿主页面&＃xff08;如 start/index.html &＃xff09;加上下面这段保证兼容&＃xff1a;

升级事项

从官网更新资源包后&＃xff0c;以 src 目录为例&＃xff08;dist 由于是 src 构建后生成的目录&＃xff0c;所以本质是和 src 一样的&＃xff09;
src 目录下可以直接覆盖的有&＃xff1a;

• src/json/
• src/layui/
• src/lib/
• src/style/

需要灵活调配的有&＃xff1a;

• src/modules/
• src/tpl/
• src/config.js
  如果没有改动默认配置&＃xff0c;事实上 config.js 也可以覆盖升级

开发过程中&＃xff0c;建议同时运行两个 layuiAdmin 。一个是已经实际运用的&＃xff0c;一个是 layuiAdmin 本身的 Demo。以便从 Demo 中获取参考和提取示例。

源码构建

当你在 src 目录完成开发后&＃xff0c;你可通过 gulp 对 src 源码进行自动化构建&＃xff0c;以生成用于线上环境的 dist 目录。并在 HTML 源代码中引入该目录的 JS/CSS。

在资源包中根目录下看到的 gulpfile.js 是 layuiAdmin 写好的任务脚本&＃xff0c;package.json 是任务配置文件&＃xff0c;你只需按照以下步骤&＃xff1a;

1. step1&＃xff1a;确保你的电脑已经安装好了 Node.js&＃xff0c;如果未安装&＃xff0c;可去官网下载安装
2. step2: 命令行安装 gulp&＃xff1a;npm install gulp -g
3. step3&＃xff1a;切换到 layuiAdmin 项目根目录&＃xff08;即 gulpfile.js 所在目录&＃xff09;&＃xff0c;命令行安装任务所依赖的包&＃xff1a;npm install

安装完成后&＃xff0c;后续只需直接执行命令&＃xff1a;gulp 即可完成 src 到 dist 目录的构建