如何用云开发快速搭建实时 Todo List 应用

最新推荐文章于 2024-04-02 11:26:35 发布

Tencent_TCB

最新推荐文章于 2024-04-02 11:26:35 发布

阅读量514

点赞数 1

分类专栏：小程序·云开发 CloudBase 技术文章标签：云开发前端小程序实时全栈

本文链接：https://blog.csdn.net/TCB_CloudBase/article/details/107952490

版权

本文介绍如何利用腾讯云开发(CloudBase)快速搭建一个具备实时更新功能的Todo List应用。从创建按量计费环境、项目初始化、数据库集合创建、tcb-js-sdk的引入，到用户登录、数据库操作、页面实时监听、样式美化和本地预览的全过程，详细阐述了全栈开发流程。最后提供了一键部署示例代码的方法。

摘要由CSDN通过智能技术生成

效果展示

enter image description here

示例地址：http://cloud.qinmudi.cn/watch-todolist

项目开发

1.开发前准备

1.1 腾讯云 CloudBase 的按量计费环境

我们要部署静态网站，因此，需要提前准备按量计费环境。

1.2 项目创建

使用 CloudBase Framework 创建一个 vue 应用。

具体操作，参见：如何用 Cloudbase Framework 部署一个 Vue 项目？

2.项目开发

2.1 创建数据库集合

两种创建方式，任选。

2.1.1 手动创建

打开云开发控制台，手动创建 watch-todos 集合
enter image description here

2.1.2 插件方式创建

配置 cloudbaserc.json

{
  "envId": "your envId",
  "framework": {
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/watch-todolist"
        }
      },
      "database": {
        "use": "@cloudbase/framework-plugin-database",
        "inputs": {
          "collections": [
            {
              "collectionName": "watch-todos"
            }
          ]
        }
      }
    }
  }
}

请注意 database 部分的配置。
这里，"database"是自定义的名称，你可以配置成任何你喜欢的名字~
之后，在 package.json 中，相应配置部署的 script 脚本即可。
比如，我们这里配置了：

{
  "scripts": {
    "deploy:database": "cloudbase framework:deploy database"
  }
}

配置完成后，执行：

yarn deploy:database

npm run deploy:database

进行部署，云数据库中，就会自动生成 watch-todos 集合。

2.2 tcb-js-sdk 引入

yarn add tcb-js-sdk

npm install tcb-js-sdk

2.3 创建 tcb 接入层

enter image description here

2.3.1 用户登录与数据库实例获取

【注】
获取数据库实例，必须先进行登录授权，否则无法获取。

为了便于演示，这里采用匿名登录方式。

具体实现如下：

【step1】云开发控制台开启匿名登录：

enter image description here

【step2】tcb/index.js

import tcb from "tcb-js-sdk";
import $config from "../../cloudbaserc";

// 初始化
const app = tcb.init({
   
  env: $config.envId,
});

const auth = app.auth();

let db = null;

async function login() {
   
  await auth.signInAnonymously();
  // 匿名登录成功检测登录状态isAnonymous字段为true
  const loginState = await auth.getLoginState();
  console.log(loginState.isAnonymousAuth); // true
  return app.database();
}

function getDB() {
   
  if (!db) {
   
    db