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 || "上傳失敗")
   }
})

 

作者：舊舊的 <[e-mail]> 解決問題的方式，就是解決它一次