请选择 进入手机版 | 继续访问电脑版
 找回密码
 免费注册
搜索

layuiAdmin 发开摘要

0
回复
153
查看
[复制链接]

300

主题

301

帖子

1545

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1545
2020-6-1 14:50:01 显示全部楼层 |阅读模式
layuiAdmin pro 是完全基于 layui 架构而成的后台管理模板系统,可以更轻松地实现前后端分离,它是 mvc 的简化版,全面接管 视图 和 页面路由,并可自主完成数据渲染,服务端通常只负责数据接口,而前端只需专注视图和事件交互,所有的页面动作都是在一个宿主页面中完成,因此这赋予了 layuiAdmin 单页面应用开发的能力。

它即可全权完成自身路由的跳转和视图的呈现,而数据层则完全通过服务端提供的异步接口来完成

通过 gulp 将 layuiAdmin src 目录的源代码进行构建后生成的目录(即将JS 和 CSS 文件进行了压缩等处理),通常用于线上环境。下面会介绍如何使用 gulp

侧边菜单最多可支持到三级。无论你采用静态的菜单还是动态的,菜单的数据格式都必须是一段合法的 JSON,且必须符合以下规范:
{
"code": 0 //状态码,key 名可以通过 config.js 去重新配置
,"msg": "" //提示信息
,"data": [{ //菜单数据,key名可以通过 config.js 去重新配置
  "name": "component" //一级菜单名称(与视图的文件夹名称和路由路径对应)
  ,"title": "组件" //一级菜单标题
  ,"icon": "layui-icon-component" //一级菜单图标样式
  ,"jump": '' //自定义一级菜单路由地址,默认按照 name 解析。一旦设置,将优先按照 jump 设定的路由跳转
  ,"list": [{ //二级菜单
    "name": "grid" //二级菜单名称(与视图的文件夹名称和路由路径对应)
    ,"title": "栅格" //二级菜单标题
    ,"jump": ''  //自定义二级菜单路由地址
    ,"list": [{ //三级菜单
      "name": "list" //三级菜单名(与视图中最终的文件名和路由对应),如:component/grid/list
      ,"title": "等比例列表排列" //三级菜单标题
    },{
      "name": "mobile"
      ,"title": "按移动端排列"
    }
  }]
}

layuiAdmin 的路由是采用 location.hash 的机制,即路由地址是放在 ./#/ 后面,并通过 layui 自带的方法: layui.router() 来进行解析。每一个路由都对应一个真实存在的视图文件,且路由地址和视图文件的路径是一致的(相对 views 目录)。因此,你不再需要通过配置服务端的路由去访问一个页面,也无需在 layuiAdmin 内部代码中去定义路由,而是直接通过 layuiAdmin 的前端路由去访问,即可匹配相应目录的视图,从而呈现出页面结果。

{
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() 得到路由对象后,你就可以对页面进行个性化操作、异步参数传值等等。如:

视图
这或许是你应用 layuiAdmin 时的主要焦点,在开发过程中,你的大部分精力都可能会聚焦在这里。它取代了服务端 MVC 架构中的 view 层,使得应用开发变得更具扩展性。因此如果你采用 layuiAdmin 的 SPA(单页应用)模式,请务必要抛弃服务端渲染视图的思想,让页面的控制权限重新回归到前端吧!

views 目录存放的正是视图文件,你可以在该目录添加任意的新目录和新文件,通过对应的路由即可访问。

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

模板基础属性
lay-url
用于绑定模板的数据接口地址,支持动态模板解析,如:
<script type="text/html" template lay-url="https://api.xxx.com?id={{ layui.router().search.id }}">
<!-- 动态模板碎片 -->
</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>
<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>

登录拦截器
进入登入页面登入成功后,会在 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 }} 得到传入的参数,如:

<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>
驾驭好 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]-->  

升级事项
从官网更新资源包后,除了 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 目录。
其中,gulpfile.js 是 layuiAdmin 写好的任务脚本,package.json 是任务配置文件,你只需按照以下步骤:

step1:确保你的电脑已经安装好了 Node.js,如果未安装,可去官网下载安装
step2: 命令行安装 gulp:npm install gulp -g
step3:切换到 layuiAdmin 项目根目录(即 gulpfile.js 所在目录),命令行安装任务所依赖的包:npm install
安装完成后,后续只需直接执行命令:gulp 即可完成 src 到 dist 目录的构建

关键字:红手套前端网
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册