在完成了介面的實現後，接下來可以開始進行和雲開發相關的資料對接。

介紹

在完成了介面的實現後，接下來可以開始進行和雲開發相關的資料對接。完成資料對接後，應用基礎就打好了，接下來的就是釋出上線以及一些小的功能的加入。

配置

在進行相關的配置呼叫的時候，你需要先登入騰訊雲控制檯，進行一些配置。使用你的小程式賬號登入騰訊雲，並在其中找到“雲開發”產品。進入到“產品控制檯”。

在環境“詳情頁面”選擇“使用者管理”->“登入設定”->“匿名登入”：

啟用匿名登入。

雲開發的資料查詢目前必須登入後才可以查詢，因為希望給使用者提供的是免登入的解決方案，因此，必須開通匿名登入，確保可以進行資料查詢。

由於需要在網頁中呼叫相應的函式，因此，也需要在同一個頁面的 WEB 安全域名中新增應用的上線域名（本地除錯用的 localhost 無需新增）。

為應用程式新增匿名登入的邏輯

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

由於希望使用者可以開啟網頁就可以查詢資料，因此，必須在使用者無感的情況下，完成匿名登入邏輯。

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

具體實現程式碼如下：

// main.jsnew 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.linux.cn/blob/master/src/views/Result.vue

完成初始化後，就需要完成相應的資料呼叫，這裡不再針對每一個進行講解，選擇一個例子來說明。

const db = this.$tcb.database();const cmd = db.collection('command');if(this.id){ // 這裡的 id 是 props 傳入的引數，為命令對應的 doc idcmd.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-lineconsole.error(err)})}

在這段程式碼中，首先是前期掛載的 $tcb 中抽取 database() 物件，並基於 database() 物件構建 collection() 物件。 然後就是使用 collection() 物件進行查詢。

由於這裡涉及到不同的頁面邏輯，使用了一個 if 來判斷資料。上下兩種分別是獲取單個數據和使用多個數據的方法。獲取到資料以後，將資料更新，同步到 Vue 的 Data 中，完成相應的邏輯的呼叫。

雲開發登入的坑

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

由於為使用者提供的是快速查詢功能，因此希望使用者無論何時都是無感進行查詢的。但實際測試的時候，發現使用者如果直接通過命令列登入的時候，會導致報錯。根據控制檯返回的資訊來看，是使用者登入狀態尚未完成，就進行了資料查詢。

通過查詢雲開發的文件，發現雲開發的 auth 物件在登入的時候，可以傳入一個 persistence 引數來控制身份資訊的持久化。

由於預設使用的是會話 ，所以導致使用者的登入態丟失。為了確保應用的狀態正常進行，將 persistence 設定為 local，確保應用在一次登入後可以將使用者登入狀態下放到使用者的儲存 中，這樣可以避免使用者總是會遭遇請求失敗的問題。

// main.jsnew 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 設定搞定了登入狀態丟失的問題。