//加载 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'));

当视图被渲染后，layui.factory 返回的函数也会被执行，从而保证在不重复加载 JS 模块文件的前提下，保证脚本能重复执行。

动态模板

layuiAdmin 的视图是一个“动静结合”的载体，除了常规的静态模板，你当然还可以在视图中存放动态模板，因此它可谓是焦点中的焦点。

定义模板

在视图文件中，通过下述规则定义模板：

下面是一个简单的例子：

当前 layuiAdmin 的版本是：{{ layui.admin.v }}

路由地址：{{ layui.router().href }}

在不对动态模板设定数据接口地址的情况下，它能读取到全局对象。但更多时候，一个动态模板应该是对应一个接口地址，如下所示：

我叫：{{ d.data.username }}

{{# if(d.data.sex === '男'){ }}

公的

{{# } else { }}

母的

{{# } }}

模板中的 d 对应的是你接口返回的 json 转化后的一维对象，如：{

"code": 0

,"data": {

"username": "贤心"

,"sex": "男"

}

}

那么，上述动态模板最终输出的结果就是：我叫：贤心

公的

模板基础属性

动态模板支持以下基础属性lay-url

用于绑定模板的数据接口地址，支持动态模板解析，如：

lay-type

用于设定模板的接口请求类型(默认：get)，如：

lay-data

用于定义接口请求的参数，其值是一个 JavaScript object 对象，同样支持动态模板解析，如：

lay-headers

用户定义接口请求的 Request Headers 参数，用法与 lay-data 的完全类似，支持动态模板解析。

lay-done

接口请求完毕并完成视图渲染的回调脚本，里面支持写任意的 JavaScript 语句。事实上它是一个封闭的函数作用域，通过给 Function 实例返回的函数传递一个参数

d，用于得到接口返回的数据：

很多时候，你在动态模板中可能会放入一些类似于 layui 的 form 元素，而有些控件需要执行 form.render() 才会显示，这时，你可以对 lay-done

赋值一个全局函数，如：

layui.data.done = function(d){

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

var form = layui.form;

form.render(null, 'LAY-filter-demo-form'); //渲染该模板下的动态表单

});

};

TIPS：如果模板渲染完毕需要处理过多的交互，我们强烈推荐你采用上述的方式定义一个全局函数赋值给 lay-done，会极大地减少维护成本。

无需担心该全局函数的冲突问题，该函数是一次性的。其它页面即便声明了一个同样的函数，也只是用于新的视图，丝毫不会对之前的视图造成任何影响。

layui.data.done 中的 done 可以随意命名，但需与 lay-done 的赋值对应上。

模板语法

登录与接口鉴权

由于 layuiAdmin 接管了视图层，所以不必避免可能会与服务端分开部署，这时你有必要了解一下 layuiAdmin 默认提供的：从 登录 到 接口鉴权，再到 注销

的整个流程。

登录拦截器

进入登入页面登入成功后，会在 localStorage 的本地表中写入一个字段。如： access_token (名称可以在 config.js 自定义)。拦截器判断没有 access_token

时，则会跳转到登入页。尽管可以通过伪造一个假的 access_token 绕过视图层的拦截，但在请求接口时，会自动带上 access_token，服务端应再次做一层校验。

流程打开 config.js ，将 interceptor 参数设置为 true(该参数为 1.0.0-beta6

开始新增)。那么，当其未检查到 access_token 值时，会强制跳转到登录页面，以获取 access_token。

打开登录对应的视图文件 views/user/login.html，在代码最下面，你将看到一段已经写好的代码，你需要的是将接口地址改为服务端的真实接口，并返回 access_token

值。

layuiAdmin 会将服务端返回的 access_token 值进行本地存储，这时你会发现 layuiAdmin

不再强制跳转到登录页面。并在后面每次请求服务端接口时，都会自动在参数和 Request Headers 中带上 access_token，以便服务端进行鉴权。

若鉴权成功，顺利返回数据；若鉴权失败，服务端的 code 应返回 1001(可在 config.js 自定义) ， layuiAdmin

将会自动清空本地无效 token 并跳转到登入页。

退出登录：重新打开 controller/common.js，搜索 logout，配上注销接口即可。如果是在其它场景请求的接口(如：table.render())，那么你需要获取本地存储的 token 复制给接口参数，如：table.render({

elem: '#xxxx'

,url: 'url'

,where: {

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

}

})

事实上，layuiAdmin 的所有 Ajax 请求都是采用 admin.req(options)，它会自动传递 access_token，因此推荐你在 JS

执行 Ajax 请求时直接使用它。其中参数 options 和 $.ajax(options) 的参数完全一样。

接口鉴权

我们推荐服务端遵循 JWT(JSON Web Token) 标准进行鉴权。对 JWT

不甚了解的同学，可以去搜索一些相关资料，会极大地增加应用的可扩展性。当然，你也可以直接采用传统的 cookie / session 机制。

基础方法config 模块你可以在任何地方通过 layui.setter 得到 config.js 中的配置信息

admin 模块var admin = layui.admin;admin.req(options)

Ajax 请求，用法同 $.ajax(options)，只是该方法会进行错误处理和 token 的自动传递

admin.screen()

获取屏幕类型，根据当前屏幕大小，返回 0 - 3 的值

0: 低于768px的屏幕

1：768px到992px之间的屏幕

2：992px到1200px之间的屏幕

3：高于1200px的屏幕

admin.exit()

清除本地 token，并跳转到登入页

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.events

admin.events.refresh()

刷新当前右侧区域

admin.events.closeThisTabs()

关闭当前标签页

admin.events.closeOtherTabs()

关闭其它标签页

admin.events.closeAllTabs()

关闭全部标签页

view 模块var view = layui.view;view(id)

获取指定容器，并返回一些视图渲染的方法，如：//渲染视图，viewPath 即为视图路径

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

//视图文件请求完毕，视图内容渲染前的回调

}).done(function(){

//视图文件请求完毕和内容渲染完毕的回调

});

//直接向容器插入 html，tpl 为 模板字符；data 是传入的数据。该方法会自动完成动态模板解析

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

另外，render 方法支持动态传参，以用于视图内容接受。如：admin.popup({

id: 'LAY-popup-test1'

,success: function(){

view(this.id).render('视图文件所在路径', {

id: 123 //这里的 id 值你可以在一些事件中动态获取(如 table 模块的编辑)

});

}

})

那么，在视图文件中，你可以在动态模板中通过 {{ d.params.xxx }} 得到传入的参数，如：

配置了接口的动态模板，且接口动态获取了 render 传入的参数：{{ d.params.id }}

也可以直接获取：

驾驭好 view().render().done(callback) 对您的项目开发至关重要。

ID唯一性

如果你开启了标签页功能，请务必注意 ID 的冲突，尤其是在你自己绑定事件的情况。ID 的命令可以遵循以下规则来规避冲突：LAY-路由-任意名

以消息中心页面为例，假设它的路由为：/app/message/，那么 ID 应该命名为：删除

实用组件

Hover 提示层

通过对元素设置 lay-tips="提示内容" 来开启一个 hover 提示，如：

其中 lay-offset 用于定于水平偏移距离(单位px)，以调整箭头让其对准元素

事件监听hash

监听路由地址改变// 下述中的 xxx 可随意定义，不可与已经定义的 hash 事件同名，否则会覆盖上一事件

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

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

});side

监听侧边伸缩// 下述中的 xxx 可随意定义，不可与已经定义的 side 事件同名，否则会覆盖上一事件

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

console.log(obj.status); //得到伸缩状态：spread 为展开状态，其它值为收缩状态

});

兼容性

layuiAdmin 使用到了 layui 的栅格系统，而栅格则是基于浏览器的媒体查询。ie8、9不支持。

所以要在宿主页面(如 start/index.html )加上下面这段保证兼容：

缓存问题

由于单页面版本的视图文件和静态资源模块都是动态加载的，所以可能存在浏览器的本地缓存问题，事实上我们也考虑到这个，因此，为了避免改动后的文件未及时生效，你只需在入口页面(默认为start/index.html)中，找到

layui.config ，修改其 version 的值即可。我们推荐你分场景来更新缓存：

场景一：如果项目是在本地开发。你可以设置 version 为动态毫秒数，如：

version: new Date().getTime() //这样你每次刷新页面，都会更新一次缓存

场景二：如果项目是在线上运行。建议你手工更新 version，如：

version: '1.0.0' //每次发布项目时，跟着改动下该属性值即可更新静态资源的缓存

升级事项

从官网更新资源包后，除了 src 和 dist 目录需要注意一下，其它目录和文件均可覆盖，下面以 src 为例(dist 由于是 src 构建后生成的目录，所以本质是和 src 一样的)

src 目录下可以直接覆盖的有：src/lib/

src/style/

src/index.js

需要灵活调配的有：src/controller/

src/views/

src/config.js

如果没有改动默认配置，事实上 config.js 也可以覆盖升级

开发过程中，建议同时运行两个 layuiAdmin 。一个是已经实际运用的，一个是 layuiAdmin 本身的 Demo。以便从 Demo 中获取参考和提取示例。

源码构建当你在 src 目录完成开发后，你可通过 gulp 对 src 源码进行自动化构建，以生成用于线上环境的 dist 目录。并在入口页面中的 layui.config 的

base 参数指向 dist。

在资源包中根目录下看到的 gulpfile.js 是 layuiAdmin 写好的任务脚本，package.json 是任务配置文件，你只需按照以下步骤：step1：确保你的电脑已经安装好了 Node.js，如果未安装，可去官网下载安装

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

step3：切换到 layuiAdmin 项目根目录(即 gulpfile.js 所在目录)，命令行安装任务所依赖的包：npm install

安装完成后，后续只需直接执行命令：gulp 即可完成 src 到 dist 目录的构建

关于版权layuiAdmin 受国家计算机软件著作权保护，未经官网正规渠道授权擅自公开产品源文件、以及直接对产品二次出售的，我们将追究相应的法律责任。