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 的使用，下文也有介紹。

部署到服務端

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
    }
  });
});

基礎方法

• 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 目錄的構建