layuiAdmin (单页版)常见问题

本文阅读 3 分钟
首页 知识库 正文

单页版缓存问题

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

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

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

动态模板中的 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
   }
});
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 || "上传失败")
   }
})
解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

利用layuiAdmin和layui Table根据HTTP状态码判断授权
« 上一篇 12-06
基于thinkphp8.0的控制器success,error转跳构造
下一篇 » 12-06

发表评论

惪特博客
  • 文章总数:
    18474 篇
  • 评论总数:
    53211 条
  • 标签总数:
    8841 个
  • 总浏览量:
    20516912 次
  • 最后更新:
    12月7日

最多点赞

随便看看

标签TAG