### 部署 解壓文件后，將 layuiAdmin 完整放置在任意目錄 通過本地 web 服務器去訪問 ./start/index.html 即可運行 Demo 由于 layuiAdmin 可采用前后端分離開發模式，因此你無需將其放置在你的服務端 MVC 框架中，你只需要給 layuiAdmin 主入口頁面（我們也稱之為：宿主頁面）進行訪問解析，它即可全權完成自身路由的跳轉和視圖的呈現，而數據層則完全通過服務端提供的異步接口來完成。 ### 目錄說明 - src/ layuiAdmin 源代碼，通常用于開發環境（如本地），推薦你在本地開發時，將 ./start/index.html 中的 layui.css 和 layui.js 的引入路徑由 dist 改為 src 目錄。 src/controller/：存放 JS 業務模塊，即對視圖進行事件等交互性處理 src/lib/：layuiAdmin 的核心模塊，一般不推薦修改 src/style/：存放樣式，其中 admin.css是核心樣式 src/views/：存放視圖文件。其中 layout.html 是整個框架結構的承載，一般不推薦做大量改動。 src/config.js：layuiAdmin 的全局配置文件，可隨意修改。 src/index.js：layuiAdmin 的入口模塊，一般不推薦修改 - dist/ 通過 gulp 將 layuiAdmin src 目錄的源代碼進行構建后生成的目錄（即：將 JS 和 CSS 文件進行了壓縮等處理），通常用于線上環境。關于 gulp 的使用，下文也有介紹。 - start/ 存放 layuiAdmin 的入口頁面、模擬接口數據、layui ### 宿主頁面 你所看到的 start/index.html 是我們提供好的宿主頁面，它是整個單頁面的承載，所有的界面都是在這一個頁面中完成跳轉和渲染的。事實上，宿主頁面可以放在任何地方，但是要注意修改里面的 <link> <script> 的 src 和 layui.config 中 base 的路徑。 ### 全局配置 當你已經順利在本地預覽了 layuiAdmin 后，你一定迫不及待關注更深層的結構。打開 src 目錄，你將看到 config.js，里面存儲著所有的默認配置。你可以按照實際需求選擇性修改，下面是 layuiAdmin 默認提供的配置： layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){ exports('setter', { container: 'LAY_app' //容器ID ,base: layui.cache.base //記錄layuiAdmin文件夾所在路徑 ,views: layui.cache.base + 'views/' //視圖所在目錄 ,entry: 'index' //默認視圖文件名 ,engine: '.html' //視圖文件后綴名 ,pageTabs: false //是否開啟頁面選項卡功能。單頁版不推薦開啟 ,name: 'layuiAdmin Pro' ,tableName: 'layuiAdmin' //本地存儲表名 ,MOD_NAME: 'admin' //模塊事件名 ,debug: true //是否開啟調試模式。如開啟，接口異常時會拋出異常 URL 等信息 ,interceptor: false //是否開啟未登入攔截 //自定義請求字段 ,request: { tokenName: 'access_token' //自動攜帶 token 的字段名。可設置 false 不攜帶。 } //自定義響應字段 ,response: { statusName: 'code' //數據狀態的字段名稱 ,statusCode: { ok: 0 //數據狀態一切正常的狀態碼 ,logout: 1001 //登錄狀態失效的狀態碼 } ,msgName: 'msg' //狀態信息的字段名稱 ,dataName: 'data' //數據詳情的字段名稱 } //獨立頁面路由，可隨意添加（無需寫參數） ,indPage: [ '/user/login' //登入頁 ,'/user/reg' //注冊頁 ,'/user/forget' //找回密碼 ,'/template/tips/test' //獨立頁的一個測試 demo ] //擴展的第三方模塊 ,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 } }); }); ### 側邊菜單 在 start/json/menu.js 文件中，我們放置了默認的側邊菜單數據，你可以去隨意改動它。 如果你需要動態加載菜單，你需要將 views/layout.html 中的對應地址改成你的真實接口地址 側邊菜單最多可支持到三級。無論你采用靜態的菜單還是動態的，菜單的數據格式都必須是一段合法的 JSON，且必須符合以下規范： { "code": 0 //狀態碼，key 名可以通過 config.js 去重新配置 ,"msg": "" //提示信息 ,"data": [{ //菜單數據，key名可以通過 config.js 去重新配置 "name": "component" //一級菜單名稱（與視圖的文件夾名稱和路由路徑對應） ,"title": "組件" //一級菜單標題 ,"icon": "layui-icon-component" //一級菜單圖標樣式 ,"jump": '' //自定義一級菜單路由地址，默認按照 name 解析。一旦設置，將優先按照 jump 設定的路由跳轉 ,"spread": true //是否默認展子菜單（1.0.0-beta9 新增） ,"list": [{ //二級菜單 "name": "grid" //二級菜單名稱（與視圖的文件夾名稱和路由路徑對應） ,"title": "柵格" //二級菜單標題 ,"jump": '' //自定義二級菜單路由地址 ,"spread": true //是否默認展子菜單（1.0.0-beta9 新增） ,"list": [{ //三級菜單 "name": "list" //三級菜單名（與視圖中最終的文件名和路由對應），如：component/grid/list ,"title": "等比例列表排列" //三級菜單標題 },{ "name": "mobile" ,"title": "按移動端排列" } }] } TIPS：實際運用時，切勿出現上述中的注釋，否則將不是合法的 JSON ，會出現解析錯誤。 需要注意的是以下幾點： 1、當任意級菜單有子菜單，點擊該菜單都只是收縮和展開操作，而并不會跳轉，只有沒有子菜單的菜單才被允許跳轉。 2、菜單的路由地址默認是按照菜單層級的 name 來設定的。 我們假設一級菜單的 name 是：a，二級菜單的是：b，三級菜單的 name 是 c，那么： 三級菜單最終的路由地址就是：/a/b/c 如果二級菜單沒有三級菜單，那么二級菜單就是最終路由，地址就是：/a/b/ 如果一級菜單沒有二級菜單，那么一級菜單就是最終路由，地址就是：/a/ 3、但如果你設置了 參數 jump，那么就會優先讀取 jump 設定的路由地址，如："jump": "/user/set"