該文檔適用于 layuiAdmin 專業(yè)版(單頁面)，閱讀之前請務(wù)必確認(rèn)是否與你使用的版本對應(yīng)。

熟練掌握 layuiAdmin 的前提是熟練掌握 layui，因此除了本篇文檔， layui 的文檔 也是必不可少的存在。

快速上手

部署解壓文件后，將 layuiAdmin 完整放置在任意目錄

通過本地 web 服務(wù)器去訪問 ./start/index.html 即可運(yùn)行 Demo由于 layuiAdmin 可采用前后端分離開發(fā)模式，因此你無需將其放置在你的服務(wù)端 MVC 框架中，你只需要給 layuiAdmin 主入口頁面(我們也稱之為：宿主頁面)進(jìn)行訪問解析，它即可全權(quán)完成自身路由的跳轉(zhuǎn)和視圖的呈現(xiàn)，而數(shù)據(jù)層則完全通過服務(wù)端提供的異步接口來完成。

目錄說明src/layuiAdmin 源代碼，通常用于開發(fā)環(huán)境(如本地)，推薦你在本地開發(fā)時(shí)，將 ./start/index.html 中的 layui.css 和 layui.js 的引入路徑由 dist 改為 src 目錄。src/controller/：存放 JS 業(yè)務(wù)模塊，即對視圖進(jìn)行事件等交互性處理

src/lib/：layuiAdmin 的核心模塊，一般不推薦修改

src/style/：存放樣式，其中 admin.css是核心樣式

src/views/：存放視圖文件。其中 layout.html 是整個框架結(jié)構(gòu)的承載，一般不推薦做大量改動。

src/config.js：layuiAdmin 的全局配置文件，可隨意修改。

src/index.js：layuiAdmin 的入口模塊，一般不推薦修改

dist/通過 gulp 將 layuiAdmin src 目錄的源代碼進(jìn)行構(gòu)建后生成的目錄(即：將 JS 和 CSS 文件進(jìn)行了壓縮等處理)，通常用于線上環(huán)境。關(guān)于 gulp 的使用，下文也有介紹。

start/存放 layuiAdmin 的入口頁面、模擬接口數(shù)據(jù)、layui

宿主頁面

你所看到的 start/index.html 是我們提供好的宿主頁面，它是整個單頁面的承載，所有的界面都是在這一個頁面中完成跳轉(zhuǎn)和渲染的。事實(shí)上，宿主頁面可以放在任何地方，但是要注意修改里面的

全局配置

當(dāng)你已經(jīng)順利在本地預(yù)覽了 layuiAdmin 后，你一定迫不及待關(guān)注更深層的結(jié)構(gòu)。打開 src 目錄，你將看到 config.js，里面存儲著所有的默認(rèn)配置。你可以按照實(shí)際需求選擇性修改，下面是 layuiAdmin 默認(rèn)提供的配置：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' //默認(rèn)視圖文件名

,engine: '.html' //視圖文件后綴名

,pageTabs: false //是否開啟頁面選項(xiàng)卡功能。單頁版不推薦開啟

,name: 'layuiAdmin Pro'

,tableName: 'layuiAdmin' //本地存儲表名

,MOD_NAME: 'admin' //模塊事件名

,debug: true //是否開啟調(diào)試模式。如開啟，接口異常時(shí)會拋出異常 URL 等信息

,interceptor: false //是否開啟未登入攔截

//自定義請求字段

,request: {

tokenName: 'access_token' //自動攜帶 token 的字段名?？稍O(shè)置 false 不攜帶。

}

//自定義響應(yīng)字段

,response: {

statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱

,statusCode: {

ok: 0 //數(shù)據(jù)狀態(tài)一切正常的狀態(tài)碼

,logout: 1001 //登錄狀態(tài)失效的狀態(tài)碼

}

,msgName: 'msg' //狀態(tài)信息的字段名稱

,dataName: 'data' //數(shù)據(jù)詳情的字段名稱

}

//獨(dú)立頁面路由，可隨意添加(無需寫參數(shù))

,indPage: [

'/user/login' //登入頁

,'/user/reg' //注冊頁

,'/user/forget' //找回密碼

,'/template/tips/test' //獨(dú)立頁的一個測試 demo

]

//擴(kuò)展的第三方模塊

,extend: [

'echarts', //echarts 核心包

'echartsTheme' //echarts 主題

]

//主題配置

,theme: {

//配色方案，如果用戶未設(shè)置主題，第一個將作為默認(rèn)

color: [{

main: '#20222A' //主題色

,selected: '#009688' //選中色

,logo: '' //logo區(qū)域背景色

,header: '' //頭部區(qū)域背景色

,alias: 'default' //默認(rèn)別名

}] //為了減少篇幅，更多主題此處不做列舉，可直接參考 config.js

//初始的顏色索引，對應(yīng)上面的配色方案數(shù)組索引

//如果本地已經(jīng)有主題色記錄，則以本地記錄為優(yōu)先，除非清除 localStorage(步驟：F12呼出調(diào)試工具→Aplication→Local Storage→選中頁面地址→layuiAdmin→再點(diǎn)上面的X)

// 1.0 正式版開始新增

,initColorIndex: 0

}

});

});

側(cè)邊菜單在 start/json/menu.js 文件中，我們放置了默認(rèn)的側(cè)邊菜單數(shù)據(jù)，你可以去隨意改動它。

如果你需要動態(tài)加載菜單，你需要將 views/layout.html 中的對應(yīng)地址改成你的真實(shí)接口地址側(cè)邊菜單最多可支持到三級。無論你采用靜態(tài)的菜單還是動態(tài)的，菜單的數(shù)據(jù)格式都必須是一段合法的 JSON，且必須符合以下規(guī)范：{

"code": 0 //狀態(tài)碼，key 名可以通過 config.js 去重新配置

,"msg": "" //提示信息

,"data": [{ //菜單數(shù)據(jù)，key名可以通過 config.js 去重新配置

"name": "component" //一級菜單名稱(與視圖的文件夾名稱和路由路徑對應(yīng))

,"title": "組件" //一級菜單標(biāo)題

,"icon": "layui-icon-component" //一級菜單圖標(biāo)樣式

,"jump": '' //自定義一級菜單路由地址，默認(rèn)按照 name 解析。一旦設(shè)置，將優(yōu)先按照 jump 設(shè)定的路由跳轉(zhuǎn)

,"spread": true //是否默認(rèn)展子菜單(1.0.0-beta9 新增)

,"list": [{ //二級菜單

"name": "grid" //二級菜單名稱(與視圖的文件夾名稱和路由路徑對應(yīng))

,"title": "柵格" //二級菜單標(biāo)題

,"jump": '' //自定義二級菜單路由地址

,"spread": true //是否默認(rèn)展子菜單(1.0.0-beta9 新增)

,"list": [{ //三級菜單

"name": "list" //三級菜單名(與視圖中最終的文件名和路由對應(yīng))，如：component/grid/list

,"title": "等比例列表排列" //三級菜單標(biāo)題

},{

"name": "mobile"

,"title": "按移動端排列"

}

}]

}TIPS：實(shí)際運(yùn)用時(shí)，切勿出現(xiàn)上述中的注釋，否則將不是合法的 JSON ，會出現(xiàn)解析錯誤。需要注意的是以下幾點(diǎn)：當(dāng)任意級菜單有子菜單，點(diǎn)擊該菜單都只是收縮和展開操作，而并不會跳轉(zhuǎn)，只有沒有子菜單的菜單才被允許跳轉(zhuǎn)。

菜單的路由地址默認(rèn)是按照菜單層級的 name 來設(shè)定的。我們假設(shè)一級菜單的 name 是：a，二級菜單的是：b，三級菜單的 name 是 c，那么：三級菜單最終的路由地址就是：/a/b/c

如果二級菜單沒有三級菜單，那么二級菜單就是最終路由，地址就是：/a/b/

如果一級菜單沒有二級菜單，那么一級菜單就是最終路由，地址就是：/a/

但如果你設(shè)置了 參數(shù) jump，那么就會優(yōu)先讀取 jump 設(shè)定的路由地址，如："jump": "/user/set"

路由

layuiAdmin 的路由是采用?location.hash?的機(jī)制，即路由地址是放在?./#/?后面，并通過 layui 自帶的方法：layui.router()?來進(jìn)行解析。每一個路由都對應(yīng)一個真實(shí)存在的視圖文件，且路由地址和視圖文件的路徑是一致的(相對?views目錄)。因此，你不再需要通過配置服務(wù)端的路由去訪問一個頁面，也無需在 layuiAdmin 內(nèi)部代碼中去定義路由，而是直接通過 layuiAdmin 的前端路由去訪問，即可匹配相應(yīng)目錄的視圖，從而呈現(xiàn)出頁面結(jié)果。

路由規(guī)則./#/path1/path2/path3/key1=value1/key2=value2…

一個實(shí)際的示例：./#/user/set./#/user/set/uid=123/type=1#xxx(下面將以這個為例繼續(xù)講解)

當(dāng)你需要對路由結(jié)構(gòu)進(jìn)行解析時(shí)，你只需要通過 layui 內(nèi)置的方法 layui.router() 即可完成。如上面的路由解析出來的結(jié)果是：{path: ['user','set'],search: {uid: 123, type: 1},href: 'user/set/uid=123/type=1',hash: 'xxx'}

可以看到，不同的結(jié)構(gòu)會自動歸納到相應(yīng)的參數(shù)中，其中：path：存儲的是路由的目錄結(jié)構(gòu)

search：存儲的是路由的參數(shù)部分

href：存儲的是 layuiAdmin 的完整路由地址

hash：存儲的是 layuiAdmin 自身的錨記，跟系統(tǒng)自帶的 location.hash 有點(diǎn)類似

通過layui.router()?得到路由對象后，你就可以對頁面進(jìn)行個性化操作、異步參數(shù)傳值等等。如：//在 JS 中獲取路由參數(shù)

var router = layui.router();

admin.req({

url:'xxx',data:{

uid: router.search.uid}});

路由跳轉(zhuǎn)

通過上文的路由規(guī)則，你已經(jīng)大致清楚了 layuiAdmin 路由的基本原理和解析方法。那么如何完成路由的跳轉(zhuǎn)呢？在視圖文件的 HTML 代碼中，通過對任意元素設(shè)定lay-href="/user/set/uid=123/type=1"，好處是：任意元素都可以觸發(fā)跳轉(zhuǎn)。缺點(diǎn)是：只能在瀏覽器當(dāng)前選項(xiàng)卡完成跳轉(zhuǎn)(注意：不是 layuiAdmin 的選項(xiàng)卡)

直接對 a 標(biāo)簽設(shè)定 href，如：?text?。好處是：你可以通過設(shè)定target="_blank"來打開一個瀏覽器新選項(xiàng)卡。缺點(diǎn)是：只能設(shè)置 a 標(biāo)簽，且前面必須加 /#/

在 JS 代碼中，還可通過?location.hash = '/user/set'; 來跳轉(zhuǎn)。前面無需加 #，它會自動追加。

路由結(jié)尾

在路由結(jié)尾部分出現(xiàn)的 / 與不出現(xiàn)，是兩個完全不同的路由。比如下面這個：user/set讀取的視圖文件是：.views/user/set.html

user/set/讀取的視圖文件是：./views/user/set/index.html (TIPS：這里的 index.html 即是目錄下的默認(rèn)主視圖，下文會有講解)

因此一定要注意結(jié)尾處的 /，避免視圖讀取錯誤。

視圖

這或許是你應(yīng)用 layuiAdmin 時(shí)的主要焦點(diǎn)，在開發(fā)過程中，你的大部分精力都可能會聚焦在這里。它取代了服務(wù)端 MVC 架構(gòu)中的 view 層，使得應(yīng)用開發(fā)變得更具擴(kuò)展性。因此如果你采用 layuiAdmin 的 SPA(單頁應(yīng)用)模式，請務(wù)必要拋棄服務(wù)端渲染視圖的思想，讓頁面的控制權(quán)限重新回歸到前端吧！views目錄存放的正是視圖文件，你可以在該目錄添加任意的新目錄和新文件，通過對應(yīng)的路由即可訪問。

注意：如果是單頁面模式，視圖文件通常是一段 HTML 碎片，而不能是一個完整的 html 代碼結(jié)構(gòu)。

視圖與路由的關(guān)系

每一個視圖文件，都對應(yīng)一個路由。其中index.html是默認(rèn)文件(你也可以通過?config.js?去重新定義)。視圖文件的所在目錄決定了路由的訪問地址，如：視圖路徑對應(yīng)的路由地址./views/user/index.html/user/

./views/user.html/user

./views/user/set/index.html/user/set/

./views/user/set.html/user/set

./views/user/set/base.html/user/set/base

通過上述的表格列舉的對應(yīng)關(guān)系，可以總結(jié)出：當(dāng)視圖文件是 index.html，那么路由地址就是它的上級目錄(相對 views)，以?/?結(jié)尾

當(dāng)視圖文件不是 index.html，那么路由地址就是它的上級目錄+視圖文件名，不以?/?結(jié)尾值得注意的是：路由路徑并非最多只能三級，它可以無限極。但對應(yīng)的視圖也必須存放在相應(yīng)的層級目錄下

視圖中加載 JS 模塊

在視圖文件中，除了寫 HTML，也可以寫 JavaScript 代碼。如：

Hello layuiAdmin

var $= layui.jquery;

admin.popup({

content: $('#LAY-demo-hello').html()});});

如果該視圖對應(yīng)的 JS 代碼量太大，我們更推薦你在?controller目錄下新增一個業(yè)務(wù)模塊，并在視圖中直接?layui.use?去加載該模塊。下面以控制臺主頁?index.html為例：

html區(qū)域

小貼士：

這里 console 模塊對應(yīng) 的 console.js 并不會重復(fù)加載，

然而該頁面的視圖可能會重新插入到容器，那如何保證腳本能重新控制視圖呢？有兩種方式：

1): 借助 layui.factory 方法獲取 console 模塊的工廠(回調(diào)函數(shù))給 layui.use

2): 直接在 layui.use 方法的回調(diào)中書寫業(yè)務(wù)代碼，即:

layui.use('console', function(){

//同 console.js 中的 layui.define 回調(diào)中的代碼

});

這里我們采用的是方式1。其它很多視圖中采用的其實(shí)都是方式2，因?yàn)楦唵涡?#xff0c;也減少了一個請求數(shù)。

*/

layui.use('console', layui.factory('console'));

當(dāng)視圖被渲染后，layui.factory 返回的函數(shù)也會被執(zhí)行，從而保證在不重復(fù)加載 JS 模塊文件的前提下，保證腳本能重復(fù)執(zhí)行。

動態(tài)模板

layuiAdmin 的視圖是一個“動靜結(jié)合”的載體，除了常規(guī)的靜態(tài)模板，你當(dāng)然還可以在視圖中存放動態(tài)模板，因此它可謂是焦點(diǎn)中的焦點(diǎn)。

定義模板

在視圖文件中，通過下述規(guī)則定義模板：

下面是一個簡單的例子：

在不對動態(tài)模板設(shè)定數(shù)據(jù)接口地址的情況下，它能讀取到全局對象。但更多時(shí)候，一個動態(tài)模板應(yīng)該是對應(yīng)一個接口地址，如下所示：

模板中的?d?對應(yīng)的是你接口返回的 json 轉(zhuǎn)化后的一維對象，如：{

"code": 0

,"data": {

"username": "賢心"

,"sex": "男"

}

}

那么，上述動態(tài)模板最終輸出的結(jié)果就是：我叫：賢心

公的

模板基礎(chǔ)屬性

動態(tài)模板支持以下基礎(chǔ)屬性lay-url用于綁定模板的數(shù)據(jù)接口地址，支持動態(tài)模板解析，如：lay-type用于設(shè)定模板的接口請求類型(默認(rèn)：get)，如：lay-data用于定義接口請求的參數(shù)，其值是一個 JavaScript object 對象，同樣支持動態(tài)模板解析，如：lay-headers用戶定義接口請求的 Request Headers 參數(shù)，用法與 lay-data 的完全類似，支持動態(tài)模板解析。

lay-done接口請求完畢并完成視圖渲染的回調(diào)腳本，里面支持寫任意的 JavaScript 語句。事實(shí)上它是一個封閉的函數(shù)作用域，通過給 Function 實(shí)例返回的函數(shù)傳遞一個參數(shù) d，用于得到接口返回的數(shù)據(jù)：

很多時(shí)候，你在動態(tài)模板中可能會放入一些類似于 layui 的 form 元素，而有些控件需要執(zhí)行 form.render() 才會顯示，這時(shí)，你可以對 lay-done 賦值一個全局函數(shù)，如：

layui.use(['form'],function(){

var form= layui.form;

form.render(null,'LAY-filter-demo-form');//渲染該模板下的動態(tài)表單});};

TIPS：如果模板渲染完畢需要處理過多的交互，我們強(qiáng)烈推薦你采用上述的方式定義一個全局函數(shù)賦值給 lay-done，會極大地減少維護(hù)成本。無需擔(dān)心該全局函數(shù)的沖突問題，該函數(shù)是一次性的。其它頁面即便聲明了一個同樣的函數(shù)，也只是用于新的視圖，絲毫不會對之前的視圖造成任何影響。layui.data.done 中的 done 可以隨意命名，但需與 lay-done 的賦值對應(yīng)上。

模板語法

登錄與接口鑒權(quán)

由于 layuiAdmin 接管了視圖層，所以不必避免可能會與服務(wù)端分開部署，這時(shí)你有必要了解一下 layuiAdmin 默認(rèn)提供的：從 登錄 到 接口鑒權(quán)，再到 注銷 的整個流程。

登錄攔截器

進(jìn)入登入頁面登入成功后，會在 localStorage 的本地表中寫入一個字段。如： access_token (名稱可以在 config.js 自定義)。攔截器判斷沒有 access_token 時(shí)，則會跳轉(zhuǎn)到登入頁。盡管可以通過偽造一個假的 access_token 繞過視圖層的攔截，但在請求接口時(shí)，會自動帶上 access_token，服務(wù)端應(yīng)再次做一層校驗(yàn)。

流程打開?config.js?，將?interceptor參數(shù)設(shè)置為?true(該參數(shù)為 1.0.0-beta6 開始新增)。那么，當(dāng)其未檢查到?access_token值時(shí)，會強(qiáng)制跳轉(zhuǎn)到登錄頁面，以獲取 access_token。

打開登錄對應(yīng)的視圖文件?views/user/login.html，在代碼最下面，你將看到一段已經(jīng)寫好的代碼，你需要的是將接口地址改為服務(wù)端的真實(shí)接口，并返回?access_token值。

layuiAdmin 會將服務(wù)端返回的?access_token值進(jìn)行本地存儲，這時(shí)你會發(fā)現(xiàn) layuiAdmin 不再強(qiáng)制跳轉(zhuǎn)到登錄頁面。并在后面每次請求服務(wù)端接口時(shí)，都會自動在參數(shù)和?Request Headers?中帶上?access_token，以便服務(wù)端進(jìn)行鑒權(quán)。

若鑒權(quán)成功，順利返回?cái)?shù)據(jù)；若鑒權(quán)失敗，服務(wù)端的?code應(yīng)返回?1001(可在 config.js 自定義) ， layuiAdmin 將會自動清空本地?zé)o效 token 并跳轉(zhuǎn)到登入頁。

退出登錄：重新打開?controller/common.js，搜索?logout，配上注銷接口即可。如果是在其它場景請求的接口，如：table.render()，那么你需要獲取本地存儲的 token 賦值給接口參數(shù)，如下：//設(shè)置全局 table 實(shí)例的 token(這樣一來，所有 table 實(shí)例均會有效)

table.set({

headers: { //通過 request 頭傳遞

access_token: layui.data('layuiAdmin').access_token

}

,where: { //通過參數(shù)傳遞

access_token: layui.data('layuiAdmin').access_token

}

});

//設(shè)置單個 table 實(shí)例的 token

table.render({

elem: '#xxxx'

,url: 'url'

,where: {

access_token: layui.data('layuiAdmin').access_token

}

//,headers: {}

});

事實(shí)上，layuiAdmin 的所有 Ajax 請求都是采用?admin.req(options)，它會自動傳遞?access_token，因此推薦你在 JS 執(zhí)行 Ajax 請求時(shí)直接使用它。其中參數(shù) *options *和?$.ajax(options)?的參數(shù)完全一樣。

接口鑒權(quán)

我們推薦服務(wù)端遵循?JWT(JSON Web Token) 標(biāo)準(zhǔn)進(jìn)行鑒權(quán)。對 JWT 不甚了解的同學(xué)，可以去搜索一些相關(guān)資料，會極大地增加應(yīng)用的可擴(kuò)展性。當(dāng)然，你也可以直接采用傳統(tǒng)的 cookie / session 機(jī)制。

基礎(chǔ)方法config 模塊你可以在任何地方通過 layui.setter 得到 config.js 中的配置信息admin 模塊var admin = layui.admin;admin.req(options)Ajax 請求，用法同 $.ajax(options)，只是該方法會進(jìn)行錯誤處理和 token 的自動傳遞

admin.screen()獲取屏幕類型，根據(jù)當(dāng)前屏幕大小，返回 0 - 3 的值0: 低于768px的屏幕1：768px到992px之間的屏幕2：992px到1200px之間的屏幕3：高于1200px的屏幕

admin.exit()清除本地 token，并跳轉(zhuǎn)到登入頁

admin.sideFlexible(status)側(cè)邊伸縮。status 為 null：收縮；status為 “spread”：展開

admin.on(eventName, callback)事件監(jiān)聽，下文會有講解

admin.popup(options)彈出一個 layuiAdmin 主題風(fēng)格的 layer 層，參數(shù) options 跟 layer.open(options) 完全相同

admin.popupRight(options)在屏幕右側(cè)呼出一個面板層。options 同上。admin.popupRight({

id: 'LAY-popup-right-new1' //定義唯一ID，防止重復(fù)彈出

,success: function(){

//將 views 目錄下的某視圖文件內(nèi)容渲染給該面板

layui.view(this.id).render('視圖文件所在路徑');

}

});admin.resize(callback)窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁面標(biāo)簽下可能存在的沖突。

admin.fullScreen()全屏

admin.exitScreen()退出全屏

admin.eventsadmin.events.refresh()刷新當(dāng)前右側(cè)區(qū)域

admin.events.closeThisTabs()關(guān)閉當(dāng)前標(biāo)簽頁

admin.events.closeOtherTabs()關(guān)閉其它標(biāo)簽頁

admin.events.closeAllTabs()關(guān)閉全部標(biāo)簽頁

view 模塊var view = layui.view;view(id)獲取指定容器，并返回一些視圖渲染的方法，如：//渲染視圖，viewPath 即為視圖路徑

view('id').render(viewPath).then(function(){

//視圖文件請求完畢，視圖內(nèi)容渲染前的回調(diào)

}).done(function(){

//視圖文件請求完畢和內(nèi)容渲染完畢的回調(diào)

});

//直接向容器插入 html，tpl 為 模板字符；data 是傳入的數(shù)據(jù)。該方法會自動完成動態(tài)模板解析

view('id').send(tpl, data);

另外，render方法支持動態(tài)傳參，以用于視圖內(nèi)容接受。如：admin.popup({

id: 'LAY-popup-test1'

,success: function(){

view(this.id).render('視圖文件所在路徑', {

id: 123 //這里的 id 值你可以在一些事件中動態(tài)獲取(如 table 模塊的編輯)

});

}

});

那么，在視圖文件中，你可以在動態(tài)模板中通過 {{?d.params.xxx?}} 得到傳入的參數(shù)，如：

而如果是在 JS 語句中去獲取模板傳遞過來的變量，可以借助動態(tài)模板的 lay-done 屬性去實(shí)現(xiàn)，如:

然后在 JS 語句中通過執(zhí)行動態(tài)模板 lay-done 中對應(yīng)的方法得到對應(yīng)的參數(shù)值：

layui.data.sendParams=function(params){

console.log(params.id)//得到傳遞過來的 id 參數(shù)(或其他參數(shù))值//通過得到的參數(shù)值，做一些你想做的事//…//若需用到 layui 組件，layui.use 需寫在該全局方法里面，如：

layui.use(['table'],function(){

var table= layui.table;

table.render({

elem:'',url:'url?id='+ params.id});});};注意：上述實(shí)現(xiàn)需保證 layuiAdmin 為 1.2.0+`

總之，駕馭好view().render().done(callback)?對您的項(xiàng)目開發(fā)至關(guān)重要。

ID唯一性

如果你開啟了標(biāo)簽頁功能，請務(wù)必注意 ID 的沖突，尤其是在你自己綁定事件的情況。ID 的命令可以遵循以下規(guī)則來規(guī)避沖突：LAY-路由-任意名

以消息中心頁面為例，假設(shè)它的路由為：/app/message/，那么 ID 應(yīng)該命名為：刪除

實(shí)用組件

Hover 提示層

通過對元素設(shè)置 lay-tips="提示內(nèi)容" 來開啟一個 hover 提示，如：

其中l(wèi)ay-offset用于定于水平偏移距離(單位px)，以調(diào)整箭頭讓其對準(zhǔn)元素

事件監(jiān)聽hash監(jiān)聽路由地址改變// 下述中的 xxx 可隨意定義，不可與已經(jīng)定義的 hash 事件同名，否則會覆蓋上一事件

admin.on('hash(xxx)', function(router){

console.log(router); //得到路由信息

});side監(jiān)聽側(cè)邊伸縮// 下述中的 xxx 可隨意定義，不可與已經(jīng)定義的 side 事件同名，否則會覆蓋上一事件

admin.on('side(xxx)', function(obj){

console.log(obj.status); //得到伸縮狀態(tài)：spread 為展開狀態(tài)，其它值為收縮狀態(tài)

});

兼容性

layuiAdmin 使用到了 layui 的柵格系統(tǒng)，而柵格則是基于瀏覽器的媒體查詢。ie8、9不支持。所以要在宿主頁面(如 start/index.html )加上下面這段保證兼容：

緩存問題

由于單頁面版本的視圖文件和靜態(tài)資源模塊都是動態(tài)加載的，所以可能存在瀏覽器的本地緩存問題，事實(shí)上我們也考慮到這個，因此，為了避免改動后的文件未及時(shí)生效，你只需在入口頁面(默認(rèn)為start/index.html)中，找到?layui.config?，修改其?version的值即可。

我們推薦你分場景來更新緩存：* 場景一：如果項(xiàng)目是在本地開發(fā)。你可以設(shè)置 version 為動態(tài)毫秒數(shù)，如：

version: new Date().getTime() //這樣你每次刷新頁面，都會更新一次緩存

* 場景二：如果項(xiàng)目是在線上運(yùn)行。建議你手工更新 version，如：

version: '1.0.0' //每次發(fā)布項(xiàng)目時(shí)，跟著改動下該屬性值即可更新靜態(tài)資源的緩存

升級事項(xiàng)

從官網(wǎng)更新資源包后，除了 src 和 dist 目錄需要注意一下，其它目錄和文件均可覆蓋，下面以 src 為例(dist 由于是 src 構(gòu)建后生成的目錄，所以本質(zhì)是和 src 一樣的)src 目錄下可以直接覆蓋的有：src/lib/

src/style/

src/index.js

需要靈活調(diào)配的有：src/controller/

src/views/

src/config.js

如果沒有改動默認(rèn)配置，事實(shí)上 config.js 也可以覆蓋升級開發(fā)過程中，建議同時(shí)運(yùn)行兩個 layuiAdmin 。一個是已經(jīng)實(shí)際運(yùn)用的，一個是 layuiAdmin 本身的 Demo。以便從 Demo 中獲取參考和提取示例。

源碼構(gòu)建當(dāng)你在 src 目錄完成開發(fā)后，你可通過 gulp 對 src 源碼進(jìn)行自動化構(gòu)建，以生成用于線上環(huán)境的 dist 目錄。并在入口頁面中的 layui.config 的 base 參數(shù)指向 dist。

在資源包中根目錄下看到的 gulpfile.js 是 layuiAdmin 寫好的任務(wù)腳本，package.json 是任務(wù)配置文件，你只需按照以下步驟：step1：確保你的電腦已經(jīng)安裝好了 Node.js，如果未安裝，可去官網(wǎng)下載安裝

step2: 命令行安裝 gulp：npm install gulp -g

step3：切換到 layuiAdmin 項(xiàng)目根目錄(即 gulpfile.js 所在目錄)，命令行安裝任務(wù)所依賴的包：npm install

安裝完成后，后續(xù)只需直接執(zhí)行命令：gulp 即可完成 src 到 dist 目錄的構(gòu)建

總結(jié)

以上是生活随笔為你收集整理的layui登录页面写入数据_layuiAdmin单页版文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。