在完成了 UI 界面的实现后，接下来可以开始进行和云开发相关的数据对接。完成数据对接后，应用根本就打好了，接下来的就是颁布上线以及一些小的 feature 的插手。

配置

在进行相关的配置挪用的时候，你需要先登陆腾讯云控制台，进行一些配置。

使用你的小措施账号登陆腾讯云，并在此中找到云开发产品。进入到产品控制台。

在产品控制台中找到你的环境，点击进入详情页

在环境详情页面选择用户打点、登陆设置、匿名登陆

启用匿名登陆。

云开发的数据盘问目前必需登陆后才可以盘问，因为但愿给用户供给的是免登陆的解决方案，因此，必需开通匿名登陆，确保可以进行数据盘问。

由于需要在网页中挪用相应的函数，因此，也需要在同一个页面的 WEB 安适域名中添加应用的上线域名（本地调试用的 localhost 无需添加）。

为应用措施添加匿名登陆的逻辑

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

由于但愿用户可以打开网页就可以盘问数据，因此，必需在用户无感的情况下，完成匿名登陆逻辑。

按照对 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.linux.cn/blob/master/src/views/Result.vue

完成初始化后，就需要完成相应的数据挪用，，这里不再针对每一个进行讲解，选择一个例子来说明。

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.linux.cn/blob/master/src/main.js

由于为用户供给的是快速盘问成果，因此但愿用户无论何时都是无感进行盘问的。但实际测试的时候，发明用户如果直接通过命令行登陆的时候，会导致报错。按照控制台返回的信息来看，是用户登陆状态尚未完成，就进行了数据盘问。

通过盘问云开发的文档，发明云开发的 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') 总结