【iframe版】開發者文檔 · layui

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() 關閉當前標簽頁 - 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 ）加上下面這段保證兼容：   ### 升級事項從官網更新資源包后，以 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 目錄的構建