layuiAdminprov1.x【单页版】开发者⽂档
题外
该⽂档适⽤于 layuiAdmin 专业版（单页⾯），阅读之前请务必确认是否与你使⽤的版本对应。
熟练掌握 layuiAdmin 的前提是熟练掌握 layui，因此除了本篇⽂档， layui 的⽂档也是必不可少的存在。
快速上⼿
部署
1. 解压⽂件后，将 layuiAdmin 完整放置在任意⽬录
2. 通过本地 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 和 fig 中 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"
路由
layuiAdmin 的路由是采⽤location.hash的机制，即路由地址是放在./#/后⾯，并通过 layui ⾃带的⽅法：uter()来进⾏解析。每⼀个路由都对应⼀个真实存在的视图⽂件，且路由地址和视图⽂件的路径是⼀致的（相对views⽬录）。因此，你不再需要通过配置服务端的路由去访问⼀个页⾯，也⽆需在 layuiAdmin 内部代码中去定义路由，⽽是直接通过 layuiAdmin 的前端路由去访问，即可匹配相应⽬录的视图，从⽽呈现出页⾯结果。
路由规则
./#/path1/path2/path3/key1=value1/key2=value2…
⼀个实际的⽰例：
./#/user/set
./#/user/set/uid=123/type=1#xxx（下⾯将以这个为例继续讲解）
当你需要对路由结构进⾏解析时，你只需要通过 layui 内置的⽅法 uter() 即可完成。如上⾯的路由解析出来的结果是：{
path: ['user','set']
,search: {uid: 123, type: 1}
,href: 'user/set/uid=123/type=1'
,hash: 'xxx'
}
可以看到，不同的结构会⾃动归纳到相应的参数中，其中：
path：存储的是路由的⽬录结构
search：存储的是路由的参数部分
href：存储的是 layuiAdmin 的完整路由地址
hash：存储的是 layuiAdmin ⾃⾝的锚记，跟系统⾃带的 location.hash 有点类似
通过uter()得到路由对象后，你就可以对页⾯进⾏个性化操作、异步参数传值等等。如：
//在 JS 中获取路由参数
var router = uter();
url: 'xxx'
,data: {
uid: router.search.uid
}
});
<!--  在动态模板中获取路由参数 -->
<script type="text/html" template lay-url="./xxx/?uid={{ uter().search.uid }}">
…
</script>
<!-- 或 -->
<script type="text/html" template lay-url="./xxx/" lay-data="{uid:'{{ uter().search.uid }}'}">
…
</script>
路由跳转
通过上⽂的路由规则，你已经⼤致清楚了 layuiAdmin 路由的基本原理和解析⽅法。那么如何完成路由的跳转呢？
1. 在视图⽂件的 HTML 代码中，通过对任意元素设定lay-href="/user/set/uid=123/type=1"，好处是：任意元素都可以触发跳转。缺点是：只能
在浏览器当前选项卡完成跳转（注意：不是 layuiAdmin 的选项卡）
jquery在一个元素后追加标签
2. 直接对 a 标签设定 href，如：<a href="#/user/set">text</a>。好处是：你可以通过设定target="_blank"来打开⼀个浏览器新选项卡。缺点
是：只能设置 a 标签，且前⾯必须加 /#/
3. 在 JS 代码中，还可通过location.hash = '/user/set'; 来跳转。前⾯⽆需加 #，它会⾃动追加。
路由结尾
在路由结尾部分出现的 / 与不出现，是两个完全不同的路由。⽐如下⾯这个：
1. user/set
读取的视图⽂件是：.views/user/set.html
2. user/set/
读取的视图⽂件是：./views/user/set/index.html （TIPS：这⾥的 index.html 即是⽬录下的默认主视图，下⽂会有讲解）
因此⼀定要注意结尾处的 /，避免视图读取错误。
视图
这或许是你应⽤ layuiAdmin 时的主要焦点，在开发过程中，你的⼤部分精⼒都可能会聚焦在这⾥。它取代了服务端 MVC 架构中的 view 层，使得应⽤开发变得更具扩展性。因此如果你采⽤ layuiAdmin 的 SPA（单页应⽤）模式，请务必要抛弃服务端渲染视图的思想，让页⾯的控制权限重新回归到前端吧！
views⽬录存放的正是视图⽂件，你可以在该⽬录添加任意的新⽬录和新⽂件，通过对应的路由即可访问。
注意：如果是单页⾯模式，视图⽂件通常是⼀段 HTML 碎⽚，⽽不能是⼀个完整的 html 代码结构。
视图与路由的关系
每⼀个视图⽂件，都对应⼀个路由。其中index.html是默认⽂件（你也可以通过config.js去重新定义）。视图⽂件的所在⽬录决定了路由的访问地址，如：
视图路径对应的路由地址
./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
通过上述的表格列举的对应关系，可以总结出：
当视图⽂件是 index.html，那么路由地址就是它的上级⽬录（相对 views），以/结尾
当视图⽂件不是 index.html，那么路由地址就是它的上级⽬录+视图⽂件名，不以/结尾
值得注意的是：路由路径并⾮最多只能三级，它可以⽆限极。但对应的视图也必须存放在相应的层级⽬录下
视图中加载 JS 模块
在视图⽂件中，除了写 HTML，也可以写 JavaScript 代码。如：
<div id=“LAY-demo-hello”>Hello layuiAdmin</div>
<script>
layui.use('admin', function(){
var $ = layui.jquery;
admin.popup({
content: $('#LAY-demo-hello').html()
});
});
</script>
如果该视图对应的 JS 代码量太⼤，我们更推荐你在controller⽬录下新增⼀个业务模块，并在视图中直接layui.use去加载该模块。下⾯以控制台主页index.html为例：
<div>html区域<div>
<script>
//加载 controller ⽬录下的对应模块
/*
⼩贴⼠：
这⾥ console 模块对应的 console.js 并不会重复加载，
然⽽该页⾯的视图可能会重新插⼊到容器，那如何保证脚本能重新控制视图呢？有两种⽅式：
1): 借助 layui.factory ⽅法获取 console 模块的⼯⼚（回调函数）给 layui.use
2): 直接在 layui.use ⽅法的回调中书写业务代码，即:
layui.use('console', function(){
//同 console.js 中的 layui.define 回调中的代码
});
这⾥我们采⽤的是⽅式1。其它很多视图中采⽤的其实都是⽅式2，因为更简单些，也减少了⼀个请求数。
*/
layui.use('console', layui.factory('console'));
</script>
当视图被渲染后，layui.factory 返回的函数也会被执⾏，从⽽保证在不重复加载 JS 模块⽂件的前提下，保证脚本能重复执⾏。
动态模板
layuiAdmin 的视图是⼀个“动静结合”的载体，除了常规的静态模板，你当然还可以在视图中存放动态模板，因此它可谓是焦点中的焦点。定义模板
在视图⽂件中，通过下述规则定义模板：
<script type="text/html" template>
<!-- 动态模板碎⽚ -->
</script>
下⾯是⼀个简单的例⼦：
<script type="text/html" template>
当前 layuiAdmin 的版本是：{{ layui.admin.v }}
路由地址：{{ uter().href }}
</script>
在不对动态模板设定数据接⼝地址的情况下，它能读取到全局对象。但更多时候，⼀个动态模板应该是对应⼀个接⼝地址，如下所⽰：<script type="text/html" template lay-url="接⼝地址">
我叫：{{ d.data.username }}
{{# if(d.data.sex === '男'){ }}
公的
{{# } else { }}
母的
{{# } }}
</script>
模板中的d对应的是你接⼝返回的 json 转化后的⼀维对象，如：
{
"code": 0
,"data": {
"username": "贤⼼"
,"sex": "男"
}
}
那么，上述动态模板最终输出的结果就是：
我叫：贤⼼
公的
模板基础属性
动态模板⽀持以下基础属性
lay-url
⽤于绑定模板的数据接⼝地址，⽀持动态模板解析，如：
<script type="text/html" template lay-url="?id={{ uter().search.id }}">
<!-- 动态模板碎⽚ -->
</script>
lay-type
⽤于设定模板的接⼝请求类型（默认：get），如：
<script type="text/html" template lay-url="接⼝地址" lay-type="post">
<!-- 动态模板碎⽚ -->
</script>
lay-data
⽤于定义接⼝请求的参数，其值是⼀个 JavaScript object 对象，同样⽀持动态模板解析，如：
<script type="text/html" template lay-url="接⼝地址" lay-data="{id: '{{ uter().search.id }}', type: 1}">
<!-- 动态模板碎⽚ -->
</script>
lay-headers
⽤户定义接⼝请求的 Request Headers 参数，⽤法与 lay-data 的完全类似，⽀持动态模板解析。
lay-done

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。