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> 解决问题的方式，就是解决它一次