搜索到
3
篇与
的结果
-
layuiAdmin pro v1.x 【单页版】开发者文档 layuiAdmin pro （单页版）是完全基于 layui 架构而成的后台管理模板系统，可以更轻松地实现前后端分离，它是 mvc 的简化版，全面接管 视图 和 页面路由，并可自主完成数据渲染，服务端通常只负责数据接口，而前端只需专注视图和事件交互，所有的页面动作都是在一个宿主页面中完成，因此这赋予了 layuiAdmin 单页面应用开发的能力。题外该文档适用于 layuiAdmin 专业版（单页面），阅读之前请务必确认是否与你使用的版本对应。熟练掌握 layuiAdmin 的前提是熟练掌握 layui，因此除了本篇文档， layui 的文档 也是必不可少的存在。快速上手部署解压文件后，将 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 ，会出现解析错误。需要注意的是以下几点：当任意级菜单有子菜单，点击该菜单都只是收缩和展开操作，而并不会跳转，只有没有子菜单的菜单才被允许跳转。菜单的路由地址默认是按照菜单层级的 name 来设定的。我们假设一级菜单的 name 是：a，二级菜单的是b，三级菜单的 name 是c，那么：三级菜单最终的路由地址就是：/a/b/c如果二级菜单没有三级菜单，那么二级菜单就是最终路由，地址就是：/a/b/如果一级菜单没有二级菜单，那么一级菜单就是最终路由，地址就是：/a/但如果你设置了 参数 jump，那么就会优先读取 jump 设定的路由地址，如："jump": "/user/set"路由layuiAdmin 的路由是采用 location.hash 的机制，即路由地址是放在 ./#/ 后面，并通过 layui 自带的方法： layui.router() 来进行解析。每一个路由都对应一个真实存在的视图文件，且路由地址和视图文件的路径是一致的（相对 views 目录）。因此，你不再需要通过配置服务端的路由去访问一个页面，也无需在 layuiAdmin 内部代码中去定义路由，而是直接通过 layuiAdmin 的前端路由去访问，即可匹配相应目录的视图，从而呈现出页面结果。路由规则./#/path1/path2/path3/key1=value1/key2=value2… 一个实际的示例：./#/user/set ./#/user/set/uid=123/type=1#xxx（下面将以这个为例继续讲解） 当你需要对路由结构进行解析时，你只需要通过 layui 内置的方法 layui.router() 即可完成。如上面的路由解析出来的结果是：{ 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 有点类似通过 layui.router() 得到路由对象后，你就可以对页面进行个性化操作、异步参数传值等等。如：//在 JS 中获取路由参数 var router = layui.router(); admin.req({ url: 'xxx' ,data: { uid: router.search.uid } }); <!-- 在动态模板中获取路由参数 --> <script type="text/html" template lay-url="./xxx/?uid={{ layui.router().search.uid }}"> … </script> <!-- 或 --> <script type="text/html" template lay-url="./xxx/" lay-data="{uid:'{{ layui.router().search.uid }}'}"> … </script> 路由跳转通过上文的路由规则，你已经大致清楚了 layuiAdmin 路由的基本原理和解析方法。那么如何完成路由的跳转呢？在视图文件的 HTML 代码中，通过对任意元素设定 lay-href="/user/set/uid=123/type=1" ，好处是：任意元素都可以触发跳转。缺点是：只能在浏览器当前选项卡完成跳转（注意：不是 layuiAdmin 的选项卡）直接对 a 标签设定 href，如： <a href="#/user/set">text</a> 。好处是：你可以通过设定 target="_blank" 来打开一个浏览器新选项卡。缺点是：只能设置 a 标签，且前面必须加 /#/在 JS 代码中，还可通过 location.hash = '/user/set'; 来跳转。前面无需加 #，它会自动追加。路由结尾在路由结尾部分出现的 / 与不出现，是两个完全不同的路由。比如下面这个：user/set读取的视图文件是：.views/user/set.htmluser/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 }} 路由地址：{{ layui.router().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="https://api.xxx.com?id={{ layui.router().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: '{{ layui.router().search.id }}', type: 1}"> <!-- 动态模板碎片 --> </script> lay-headers 用户定义接口请求的 Request Headers 参数，用法与 lay-data 的完全类似，支持动态模板解析。lay-done 接口请求完毕并完成视图渲染的回调脚本，里面支持写任意的 JavaScript 语句。事实上它是一个封闭的函数作用域，通过给 Function 实例返回的函数传递一个参数 d，用于得到接口返回的数据：<script type="text/html" template lay-url="接口地址" lay-done="console.log(d);"> <!-- 动态模板碎片 --> </script> 很多时候，你在动态模板中可能会放入一些类似于 layui 的 form 元素，而有些控件需要执行 form.render() 才会显示，这时，你可以对 lay-done 赋值一个全局函数，如：<script type="text/html" template lay-url="接口地址" lay-done="layui.data.done(d);"> <div class="layui-form" lay-filter="LAY-filter-demo-form"> <input type="checkbox" title="复选框"> </div> </script> <!-- 注意：别看眼花了，下面可不是动态模板，而是 JS 脚本区域 --> <script> layui.data.done = function(d){ layui.use(['form'], function(){ var form = layui.form; form.render(null, 'LAY-filter-demo-form'); //渲染该模板下的动态表单 }); }; </script> TIPS：如果模板渲染完毕需要处理过多的交互，我们强烈推荐你采用上述的方式定义一个全局函数赋值给 lay-done，会极大地减少维护成本。无需担心该全局函数的冲突问题，该函数是一次性的。其它页面即便声明了一个同样的函数，也只是用于新的视图，丝毫不会对之前的视图造成任何影响。layui.data.done 中的 done 可以随意命名，但需与 lay-done 的赋值对应上。模板语法动态模板基于 layui 的 laytpl 模块，详细语法可见： http://www.layui.com/doc/modules/laytpl.html#syntax登录与接口鉴权由于 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 实例的 token（这样一来，所有 table 实例均会有效） table.set({ headers: { //通过 request 头传递 access_token: layui.data('layuiAdmin').access_token } ,where: { //通过参数传递 access_token: layui.data('layuiAdmin').access_token } }); //设置单个 table 实例的 token table.render({ elem: '#xxxx' ,url: 'url' ,where: { access_token: layui.data('layuiAdmin').access_token } //,headers: {} }); 事实上，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.fullScreen() 全屏admin.exitScreen() 退出全屏admin.eventsadmin.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 }} 得到传入的参数，如：<script type="text/html" template lay-url="http://api.com?id={{ d.params.id }}"> 配置了接口的动态模板，且接口动态获取了 render 传入的参数：{{ d.params.id }} </script> <script type="text/html" template> 也可以直接获取：<input type="hidden" name="id" value="{{ d.params.id }}"> </script> 而如果是在 JS 语句中去获取模板传递过来的变量，可以借助动态模板的 lay-done 属性去实现，如：<script type="text/html" template lay-done="layui.data.sendParams(d.params)"> </script> 然后在 JS 语句中通过执行动态模板 lay-done 中对应的方法得到对应的参数值：<script> //定义一个 lay-done 对应的全局方法，以供动态模板执行 layui.data.sendParams = function(params){ console.log(params.id) //得到传递过来的 id 参数（或其他参数）值 //通过得到的参数值，做一些你想做的事 //… //若需用到 layui 组件，layui.use 需写在该全局方法里面，如： layui.use(['table'], function(){ var table = layui.table; table.render({ elem: '' ,url: 'url?id='+ params.id }); }); }; </script> 注意：上述实现需保证 layuiAdmin 为 1.2.0+`总之，驾驭好 view().render().done(callback) 对您的项目开发至关重要。ID唯一性如果你开启了标签页功能，请务必注意 ID 的冲突，尤其是在你自己绑定事件的情况。ID 的命令可以遵循以下规则来规避冲突：LAY-路由-任意名 以消息中心页面为例，假设它的路由为：/app/message/，那么 ID 应该命名为：<button class="layui-btn" id="LAY-app-message-del">删除</button> 实用组件Hover 提示层通过对元素设置 lay-tips="提示内容" 来开启一个 hover 提示，如：<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i> 其中 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 ）加上下面这段保证兼容：<!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> 缓存问题由于单页面版本的视图文件和静态资源模块都是动态加载的，所以可能存在浏览器的本地缓存问题，事实上我们也考虑到这个，因此，为了避免改动后的文件未及时生效，你只需在入口页面（默认为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 -gstep3：切换到 layuiAdmin 项目根目录（即 gulpfile.js 所在目录），命令行安装任务所依赖的包：npm install安装完成后，后续只需直接执行命令：gulp 即可完成 src 到 dist 目录的构建 -
layuiAdmin std v1.x 【iframe版】开发者文档 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.baseadmin 模块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.eventsadmin.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 ）加上下面这段保证兼容：<!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> 升级事项从官网更新资源包后，以 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 -gstep3：切换到 layuiAdmin 项目根目录（即 gulpfile.js 所在目录），命令行安装任务所依赖的包：npm install安装完成后，后续只需直接执行命令：gulp 即可完成 src 到 dist 目录的构建
-
BootStrap 前端样式框架学习 BootStrap 前端样式框架 响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验Bootstrap是一个用于构建响应式网站的前端框架，需要比较熟悉HTML+CSS+JavaScript知识, 就能入门Bootstrap布局主要是一个网格系统布局来支持响应式布局，需要学习Bootstrap网格系统布局的原理。网格布局有两种：默认（固定）网格布局和流式网格布局，两者都支持响应式布局。学习Bootstrap布局还有一个特别重要的知识点就是容器布局。响应式布局也有一些必需的标签和文件是肯定要掌握的。Bootstrap主要有下面几部分组成： 12栅格系统——就是将屏幕平分12份（列）。使用行(row)来组织元素（每一行都包括12个列），然后将内容放在列内。通过col-md-offset-*来控制列偏移。 基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。 Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件，就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外，还需要引用Jquery库的原因，两者是依赖关系。 CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。 JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。 响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。 Bootstrap就是由上面几部分组成的12栅格系统Bootstrap定义12栅格系统，就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面，就是利用行和列来创建页面布局的。其布局有几个原则： 行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中 每行都包含12列 将内容放置在每列中 在bootstrap的栅格系统中，根据宽度将浏览器分为4种。其值分别是：自动（100%）、750px、970px、 1170px。对应的样式为超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）其本就是通过媒体查询定义最小宽度实现。所以，Bootstrap做出来的网页向大兼容，向小不兼容！在Bootstrap框架内，已预先定义好了屏幕大小的分界值，其分界值得定义就是通过媒体查询来定义的。其定义方式如下：/* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } 框架为我们定义了媒体查询，如果超过了媒体查询中定义的最小宽度对应某个类型屏幕，通过这样的方式，就可以在不同屏幕之间收缩元素大小来适应屏幕。Bootstrap提出的概念是移动设备优先的，所以Bootstrap设计出来的页面只能向大兼容，向小不兼容。基础布局组件基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!--因为这里没有使用到Bootstrap的JS插件，所以就没有引用Jquery组件--> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>默认样式的Table</h3> <table class="table"> <caption>表标题.</caption> <!-- 表头，组合为t+head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Tommy</td> <td>Li</td> </tr> <tr> <th scope="row">2</th> <td>Bob</td> <td>san</td> </tr> <tr> <th scope="row">3</th> <td>Sam</td> <td>wang</td> </tr> </tbody> </table> <h3>带边框的表格</h3> <table class="table-bordered"> <caption>表标题.</caption> <!-- 表头，组合为t+head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Tommy</td> <td>Li</td> </tr> <tr> <th scope="row">2</th> <td>Bob</td> <td>san</td> </tr> <tr> <th scope="row">3</th> <td>Sam</td> <td>wang</td> </tr> </tbody> </table> <!-- 更多表格样式参考： http://v3.bootcss.com/css/#tables--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html> CSS组件CSS组件和基础布局组件差不多，也就是Bootstrap为一些标签定义了一些已有的样式，这些样式运行的效果都非常美观，这样每个公司或开发人员都不需要再去写一篇样式，从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西，你用多了自然就熟了。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>导航条</h3> <nav class="navbar navbar-default navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Home</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">About</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action 1</a></li> <li><a href="#">Action 2</a></li> <li><a href="#">Action 3</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated Action</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html> JavaScript插件默认情况下，所有的JS插件都可以通过设置特定的HTML代码和相应的属性来实现，而无需写一行JavaScript代码。其实现本质就是Bootstrap为这些属性实现了对应的JavaScript代码。下面就直接看一个模态窗口的例子：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3>模态窗口</h3> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Click me </button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Test body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
