基於雲開發開發 Web 應用（三）：雲開發相關數據調用

體驗 Linux 小程序

小程序端

PC 端

訪問 https://tldr.linux.cn/ 體驗

介紹

在完成了 UI 界面的實現後，接下來能夠開始進行和雲開發相關的數據對接。完成數據對接後，應用基礎就打好了，接下來的就是發佈上線以及一些小的 feature 的加入。

配置

在進行相關的配置調用的時候，你須要先登錄騰訊雲控制檯，進行一些配置。

使用你的小程序帳號登錄騰訊雲，並在其中找到雲開發產品。進入到產品控制檯。

在產品控制檯中找到你的環境，點擊進入詳情頁

在環境詳情頁面選擇用戶管理、登錄設置、匿名登錄

啓用匿名登錄。

雲開發的數據查詢目前必須登錄後才能夠查詢，由於但願給用戶提供的是免登錄的解決方案，所以，必須開通匿名登錄，確保能夠進行數據查詢。

因爲須要在網頁中調用相應的函數，所以，也須要在同一個頁面的 WEB 安全域名中添加應用的上線域名（本地調試用的 localhost 無需添加）。

爲應用程序添加匿名登錄的邏輯

此部分代碼位置： https://github.com/LCTT/tldr....

因爲但願用戶能夠打開網頁就能夠查詢數據，所以，必須在用戶無感的狀況下，完成匿名登錄邏輯。

根據對 Vue 生命週期的預研，將相應的邏輯放在了 beforeCreate 中，確保在應用初始化完成後，就能夠自動完成匿名登錄。

具體實現代碼以下

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: function(){                           // 新增匿名登錄邏輯
        const auth = this.$tcb.auth();        // 新增匿名登錄邏輯
        auth.signInAnonymously();             // 新增匿名登錄邏輯
  }                                                   // 新增匿名登錄邏輯
}).$mount('#app')

加入完成後，你可使用雲開發的數據庫等命令，來完成相應的數據庫調用，驗證本身的調用是否正常。

在這裏須要注意，因爲 Vue 默認的 ESLint 規則限制，默認是沒法在 Vue 項目代碼中使用 console.log 的，你須要使用一些命令來跳過相應的檢查
只須要在你須要打印變量的前一行加入 // eslint-disable-next-line 就能夠避免對應的檢查了。

調用數據

此部分代碼位置： https://github.com/LCTT/tldr....

完成初始化後，就須要完成相應的數據調用，這裏再也不針對每個進行講解，選擇一個例子來講明。

const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 這裏的 id 是 props 傳入的參數，爲命令對應的 doc id
    cmd.doc(this.id).get().then(res => {
      this.command = res.data
    })
    }else{
    cmd.where({
      name: this.$route.params.cmd // 命令能夠從 Route 中獲取，但實際場景下，由於開啓了 `props: true`，也能夠直接從 props 中獲取。
    }).limit(1).get().then(res => {
      this.command = res.data[0]
    }).catch((err) => {
      alert("命令查詢出錯，請聯繫咱們")
      // eslint-disable-next-line
      console.error(err)
    })
}

在這段代碼中，首先是前期掛載的 $tcb 中抽取 database ，並基於 database 構建 collection.
而後就是使用 collection 進行查詢。

因爲這裏涉及到不一樣的頁面邏輯，使用了一個 if 來判斷數據。上下兩種分別是獲取單個數據和使用多個數據的方法。獲取到數據之後，將數據更新，同步到 Vue 的 Data 中，完成相應的邏輯的調用。

雲開發登錄的坑

此部分代碼位置： https://github.com/LCTT/tldr....

因爲爲用戶提供的是快速查詢功能，所以但願用戶不管什麼時候都是無感進行查詢的。但實際測試的時候，發現用戶若是直接經過命令行登錄的時候，會致使報錯。根據控制檯返回的信息來看，是用戶登錄狀態還沒有完成，就進行了數據查詢。

經過查詢雲開發的文檔，發現雲開發的 auth 對象在登錄的時候，能夠傳入一個 persistence 來控制身份信息的持久化。

因爲默認使用的是 session ，因此致使用戶的登錄態丟失。爲了確保應用的狀態正常進行，將 persistence 設置爲 local，確保應用在一次登錄後能夠將用戶登錄狀態下放到用戶的 storage 中，這樣能夠避免用戶老是會遭遇請求失敗的問題。

// main.js
new Vue({
  router,
  vuetify,
  render: h => h(App),
  beforeCreate: async function(){
        const auth = this.$tcb.auth({ persistence: 'local' });
        await auth.signInAnonymously();
  }
}).$mount('#app')

總結

在實際開發中，若是你須要經過雲開發的 Web SDK 調用相應的數據，則須要先行開啓雲開發的匿名登錄並配置 Web 安全域名；在數據調用的部分和在小程序端調用雲開發沒有太大的區別；並經過設置 presistence 設置搞定了登錄狀態丟失的問題。