layuiAdmin (单页版)常见问题与解决方案

最近项目开发中用到了layuiAdmin的单页版进行开发,期间遇到一些问题,在此总结一二:

单页版缓存问题

由于单页面版本的视图文件和静态资源模块都是动态加载的,所以可能存在浏览器的本地缓存问题,因此,为了避免改动后的文件未及时生效,只需在入口页面(默认为start/index.html)中,找到 layui.config ,修改其 version 的值即可。

//开发环境
version: new Date().getTime() //刷新页面,都会更新一次缓存

//生产环境
version: '1.2.0' //每次发布项目时,跟着改动下该属性值即可更新静态资源的缓存

动态模板中的 select 正确用法

当试图用动态模板输出 <select>元素 的 <option></option> 时,务必注意不要将动态模板结构放在 select 内部,而应该将 select 整体放在动态模板内,然后在遍历输出 option,如:

<script type="text/html" lay-url="" template>
  <select name="" lay-filter="">
    {{# layui.each(d, function(index, item){ }}
      <option value="{{ item.value }}">{{ item.title }}</option>
    {{# }); }}
  </select>
</script>

由于 select 标签的特殊性,很多人将 <script type="text/html" lay-url="" template> </script> 放在了 select 标签的里面,导致无法正确输出相应视图,所以请务必纠正写法。

刷新动态模板

需要对一个已经渲染完毕的动态模板再次进行刷新,可以借助 view 模块的 refresh 方法

<script type="text/html" id="testID" template lay-url="" lay-data="" lay-done="">
  <div lay-templateid="testID">  <!-- 注意:此处 lay-templateid 属性值需要与模版定义的 ID 值一致  -->
    内容放此处
  </div>
</script>

然后在需要执行模版刷新的地方执行

view('testID').refresh();

设置 table 的 token

尽管 admin.req() 方法会自动传递 token,但 layui 中涉及到接口请求的公共组件(如:table、upload)并不走 admin.req(),这时就需要你获取本地存储的 token 赋值给接口参数,方式如下:

方式一:设置单个 table 实例的 token

//设置单个 table 实例的请求 token
table.render({
  elem: '#xxxx'
  ,url: 'url'
  ,headers: { //通过 request 头传递
    access_token: layui.data('layuiAdmin').access_token
  }
  ,where: { //通过参数传递
    access_token: layui.data('layuiAdmin').access_token
  }
});

方式二:设置全局 table 实例的 token(推荐

//所有 table 实例均会有效,这样就不用在每个 table.render() 都设置一次 token
table.set({
  headers: { //通过 request 头传递
    access_token: layui.data('layuiAdmin').access_token
  }
  ,where: { //通过参数传递
    access_token: layui.data('layuiAdmin').access_token
  }
});
  • 一般情况,结合实际需求,headers 和 where 二者中设置一个即可。
  • 这里 access_token 的命名对应 config.js 定义的 tokenName 的值
  • 目前upload组件没有全局设置的方法,需自行添加

设置 layedit 富文本编辑器的上传图片 token 或 额外参数

需要使用到富文本编辑器,用了layui自带的layedit,不过上传图片时报错:“请求上传接口异常”,因接口需要携带token和额外参数,修改如下:

layedit.set({
uploadImage: {
url: setter.api_url + '/admin/slide/upload'
, headers: {AccessToken: layui.data(setter.tableName).AccessToken} //这里增加headers
, data: {} //增加携带data
}
});

注意: layedit.set 放在 layedit.build 前面的任意位置即可

找到layui-src/dist/layer/modules/layedit.js,复制解压缩,搜索 uploadImage,修改为:

o.render({
url: r.url
, method: r.type
, elem: e(n).find("input")[0]
, headers: r.headers //增加携带headers,或者也可以携带data
, data: r.data //增加携带data
, done: function (e) {
0 == e.code ? (e.data = e.data || {}, v.call(t, "img", {
src: e.data.src, alt: e.data.title
}, a)) : i.msg(e.msg || "上传失败")
}
})

 

作者:旧旧的 <393210556@qq.com> 解决问题的方式,就是解决它一次

转载于:https://www.cnblogs.com/widgetbox/p/11170521.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值