2022-03-24 【待办Todo】day03-连接数据库

一、搭建云开发环境

1. 注册腾讯云账号

腾讯云开发 CloudBase

2. 创建环境实例

点击免费开通
地域：广州
计费方式：包年包月

二、连接云开发服务

1. 下载云开发服务模块包

npm install @cloudbase/js-sdk -S

2. 在 Vuex 文件（store/index.js）中引入

import cloudbase from "@cloudbase/js-sdk"

const app = cloudbase.init({
  env: 'your-env-id',
  region: 'ap-guangzhou'
})

3. 将 app 实例保存到 Vuex 的 state 中

配置后即可通过 this.$store.state.app 全局访问 app 实例

export default new Vuex.Store({
  state: {
    app
  }
})

三、登录认证

1. 使用匿名登录

云开发文档
在云开发控制台的登录授权中启用匿名登录

2. 在 App.vue 中添加 login 方法

login () {
  const auth = this.$store.state.app.auth()
  auth.anonymousAuthProvider().signIn().then(() => {
	console.log('登录成功')
  })
}

3. 在组件创建时调用

created () {
  this.login()
}

四、修改待办页面的添加弹窗

1. 点击确认时阻止弹窗关闭

添加 :beforeClose 属性，绑定 beforeClose 方法

beforeClose (action, done) {
  if (action === 'confirm') {
	done(false) // 阻止弹窗关闭
  } else {
	done() //关闭弹窗
  }
}

2. 为表单组件 van-form 添加 ref 属性

通过 ref 可以获取到 Form 实例并调用实例方法

<van-form ref="todoFormRef">
  ...
</van-form>

3. 为弹窗组件 van-dialog 添加 @closed 事件

@closed 事件会在关闭弹窗且动画结束后触发其绑定的方法
为 @closed 事件绑定 reset 方法，代码如下

reset () {
  this.todoForm = this.$options.data().todoForm // 重置表单数据
  this.$refs.todoFormRef.resetValidation() // 重置表单项的验证提示
}

4. 点击确认且表单项不为空则保存到数据库

html 部分代码

<van-dialog v-model="showDialog" title="添加待办" show-cancel-button :before-close="beforeClose" @closed="reset" @confirm="submit">
  <van-form ref="todoFormRef" @submit="setTodo">
	<van-field v-model="todoForm.name" label="待办名称" placeholder="请输入待办名称" :rules="[{ required: true }]" />
	<van-field v-model="todoForm.time" type="digit" label="专注时间" placeholder="输入专注分钟数" :rules="[{ required: true }]" />
  </van-form>
</van-dialog>

js 部分代码

export default {
  data () {
    return {
      showDialog: false,
      todoForm: {
        name: '',
        time: ''
      }
    }
  },
  methods: {
    beforeClose (action, done) {
      if (action === 'confirm') {
        done(false)
      } else {
        done()
      }
    },
    reset () {
      this.todoForm = this.$options.data().todoForm
      this.$refs.todoFormRef.resetValidation()
    },
    submit () {
      this.$refs.todoFormRef.submit() // 触发提交表单事件 @submit
    },
    setTodo () {
      const db = this.$store.state.app.database() // 获取数据库实例
      const todo = db.collection('todo') // 获取集合的引用，请先在云数据库中新建 todo 集合
      todo.add(this.todoForm).then(() => {
        this.$toast({
          message: '添加成功',
          position: 'top'
        })
        this.showDialog = false
      })
    }
  }
}

五、Todo 组件创建时获取待办列表

1. 添加 getTodo 方法

getTodo () {
  const db = this.$store.state.app.database()
  const todo = db.collection('todo')
  todo.get().then(res => {
	this.todoList = res.data // 将获取到的数据保存到 todoList 数组，请先在 data 中添加 todoList: []
  })
}

2. 在组件创建时调用

created () {
  this.getTodo()
}

3. 在添加待办后调用

todo.add(this.todoForm).then(() => {
  this.$toast({ // 轻提示
	message: '添加成功',
	position: 'top'
  })
  this.showDialog = false // 关闭弹窗
  this.getTodo() // 获取待办列表
})