介紹

在完成了界面的實(shí)現(xiàn)后，接下來(lái)可以開(kāi)始進(jìn)行和云開(kāi)發(fā)相關(guān)的數(shù)據(jù)對(duì)接。完成數(shù)據(jù)對(duì)接后，應(yīng)用基礎(chǔ)就打好了，接下來(lái)的就是發(fā)布上線以及一些小的功能的加入。

配置

在進(jìn)行相關(guān)的配置調(diào)用的時(shí)候，你需要先登錄騰訊云控制臺(tái)，進(jìn)行一些配置。使用你的小程序賬號(hào)登錄騰訊云，并在其中找到“云開(kāi)發(fā)”產(chǎn)品。進(jìn)入到“產(chǎn)品控制臺(tái)”。

在“產(chǎn)品控制臺(tái)”中找到你的環(huán)境，點(diǎn)擊進(jìn)入“詳情頁(yè)”：

在環(huán)境“詳情頁(yè)面”選擇“用戶管理”->“登錄設(shè)置”->“匿名登錄”：

啟用匿名登錄。

云開(kāi)發(fā)的數(shù)據(jù)查詢目前必須登錄后才可以查詢，因?yàn)橄Ｍo用戶提供的是免登錄的解決方案，因此，必須開(kāi)通匿名登錄，確保可以進(jìn)行數(shù)據(jù)查詢。

由于需要在網(wǎng)頁(yè)中調(diào)用相應(yīng)的函數(shù)，因此，也需要在同一個(gè)頁(yè)面的 WEB 安全域名中添加應(yīng)用的上線域名（本地調(diào)試用的 localhost 無(wú)需添加）。

為應(yīng)用程序添加匿名登錄的邏輯

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于希望用戶可以打開(kāi)網(wǎng)頁(yè)就可以查詢數(shù)據(jù)，因此，必須在用戶無(wú)感的情況下，完成匿名登錄邏輯。

根據(jù)對(duì) Vue 生命周期的預(yù)研，將相應(yīng)的邏輯放在了 beforeCreate 中，確保在應(yīng)用初始化完成后，就可以自動(dòng)完成匿名登錄。

具體實(shí)現(xiàn)代碼如下：

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

加入完成后，你可以使用云開(kāi)發(fā)的數(shù)據(jù)庫(kù)等命令，來(lái)完成相應(yīng)的數(shù)據(jù)庫(kù)調(diào)用，驗(yàn)證自己的調(diào)用是否正常。

在這里需要注意，由于 Vue 默認(rèn)的 ESLint 規(guī)則限制，默認(rèn)是無(wú)法在 Vue 項(xiàng)目代碼中使用 console.log 的，你需要使用一些命令來(lái)跳過(guò)相應(yīng)的檢查 只需要在你需要打印變量的前一行加入 // eslint-disable-next-line 就可以避免對(duì)應(yīng)的檢查了。

調(diào)用數(shù)據(jù)

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue

完成初始化后，就需要完成相應(yīng)的數(shù)據(jù)調(diào)用，這里不再針對(duì)每一個(gè)進(jìn)行講解，選擇一個(gè)例子來(lái)說(shuō)明。

const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 這里的 id 是 props 傳入的參數(shù)，為命令對(duì)應(yīng)的 doc id
    cmd.doc(this.id).get().then(res => {
      this.command = res.data
    })
    }else{
    cmd.where({
      name: this.$route.params.cmd // 命令可以從 Route 中獲取，但實(shí)際場(chǎng)景下，因?yàn)殚_(kāi)啟了 `props: true`，也可以直接從 props 中獲取。
    }).limit(1).get().then(res => {
      this.command = res.data[0]
    }).catch((err) => {
      alert("命令查詢出錯(cuò)，請(qǐng)聯(lián)系我們")
      // eslint-disable-next-line
      console.error(err)
    })
}

在這段代碼中，首先是前期掛載的 $tcb 中抽取 database() 對(duì)象，并基于 database() 對(duì)象構(gòu)建 collection() 對(duì)象。 然后就是使用 collection() 對(duì)象進(jìn)行查詢。

由于這里涉及到不同的頁(yè)面邏輯，使用了一個(gè) if 來(lái)判斷數(shù)據(jù)。上下兩種分別是獲取單個(gè)數(shù)據(jù)和使用多個(gè)數(shù)據(jù)的方法。獲取到數(shù)據(jù)以后，將數(shù)據(jù)更新，同步到 Vue 的 Data 中，完成相應(yīng)的邏輯的調(diào)用。

云開(kāi)發(fā)登錄的坑

此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js

由于為用戶提供的是快速查詢功能，因此希望用戶無(wú)論何時(shí)都是無(wú)感進(jìn)行查詢的。但實(shí)際測(cè)試的時(shí)候，發(fā)現(xiàn)用戶如果直接通過(guò)命令行登錄的時(shí)候，會(huì)導(dǎo)致報(bào)錯(cuò)。根據(jù)控制臺(tái)返回的信息來(lái)看，是用戶登錄狀態(tài)尚未完成，就進(jìn)行了數(shù)據(jù)查詢。

通過(guò)查詢?cè)崎_(kāi)發(fā)的文檔，發(fā)現(xiàn)云開(kāi)發(fā)的 auth 對(duì)象在登錄的時(shí)候，可以傳入一個(gè) persistence 參數(shù)來(lái)控制身份信息的持久化。

由于默認(rèn)使用的是會(huì)話 ，所以導(dǎo)致用戶的登錄態(tài)丟失。為了確保應(yīng)用的狀態(tài)正常進(jìn)行，將 persistence 設(shè)置為 local，確保應(yīng)用在一次登錄后可以將用戶登錄狀態(tài)下放到用戶的存儲(chǔ) 中，這樣可以避免用戶總是會(huì)遭遇請(qǐng)求失敗的問(wèn)題。

// 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')

總結(jié)

在實(shí)際開(kāi)發(fā)中，如果你需要通過(guò)云開(kāi)發(fā)的 Web SDK 調(diào)用相應(yīng)的數(shù)據(jù)，則需要先行開(kāi)啟云開(kāi)發(fā)的匿名登錄并配置 Web 安全域名；在數(shù)據(jù)調(diào)用的部分和在小程序端調(diào)用云開(kāi)發(fā)沒(méi)有太大的區(qū)別；并通過(guò)設(shè)置 presistence 設(shè)置搞定了登錄狀態(tài)丟失的問(wèn)題。