工作生活

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

2019-07-04  本文已影响0人  insmoin

文档更新时间：2019-3-26 22:28:17

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

题外

快速上手

目录说明

解压文件后，你将看到以下目录：

部署到服务端

  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: '' //头部区域背景色
        ,alias: 'default' //默认别名
      }] //为了减少篇幅，更多主题此处不做列举，可直接参考 config.js

      //初始的颜色索引，对应上面的配色方案数组索引
      //如果本地已经有主题色记录，则以本地记录为优先，除非清除 LocalStorage（步骤：F12呼出调试工具→Aplication→Local Storage→选中页面地址→layuiAdmin→再点上面的X）
      // 1.0 正式版开始新增
      ,initColorIndex: 0
    }
  });
});

基础方法

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

var admin = layui.admin;

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

用法同 专业版：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>

实用组件

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 是任务配置文件，你只需按照以下步骤：

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

安装完成后，后续只需直接执行命令：gulp 即可完成 src 到 dist 目录的构建

上一篇 下一篇

猜你喜欢

热点阅读