基于云开发开发 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 设置搞定了登录状态丢失的问题。