云开发 CloudBase

新手指引

动态与公告

产品简介

购买指南

快速入门

操作指南

开发指南

CLI 使用指南

SDK 文档

API 文档

示例教程

视频专区

常见问题

服务协议

联系我们

词汇表
填写文档满意度调查问卷，赢取缤纷好礼> HOT
文档中心 > 云开发 CloudBase > 示例教程 > Web 端 > 搭建 Todo List 应用

搭建 Todo List 应用

最近更新时间：2022-05-16 11:02:04

前往 GitHub 编辑 我的收藏

本页目录：

本文档介绍如何无需域名、无需服务器快速搭建一个Todo List 应用，该应用可记录您的待办事项并可为待办事项添加附件。最终成型的应用展示如下：

准备工作

  1. 请 注册腾讯云账号，注册成功后即可使用腾讯云服务，已注册可忽略此步骤。
  2. 登录腾讯云 云开发控制台，您在填写环境名称之后，单击下一步，直接提交授权并使用云开发服务。

    如果您之前创建过环境，可以继续使用已创建的按量计费环境，或者再次新建环境。
  3. 开通成功之后，单击环境名称，进入 环境总览 页面，如下所示：
    注意：

    请记住您的环境 ID，这个 ID 在后续步骤将被使用。您可单击环境Id右侧的图标进行复制。

步骤1：开启匿名登录

搭建 Todo List 应用，需开启匿名登录功能，请前往 登录授权 控制台，打开匿名登录开关，如下图所示：

步骤2：建立本地 Todo List 文件

  1. 在本地新建文本文件（Mac 用户推荐使用无格式文本编辑），在文件中填入如下内容，并将第17行代码中的${envId}替换为 准备工作 中复制的环境Id：
    <html>
<head>
  <meta charset="UTF-8">
  <script src="https://upload-dianshi-1255598498.file.myqcloud.com/todo-698d26c543e7f35729c121106f55ef1ffaeca67d.js" charset="utf-8"></script>
  <script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script>
</head>
<body>
  <div id="model">
    <input id="text-in" type="text" placeholder="写下您的待办事项…">
    <label id="file-in" for="file-input">上传附件</label>
    <input id="file-input" type="file" onchange="TODO.filechange(this)">
    <ul id="todo-list"></ul>
  </div>
  <script>
    let uid = null;
    const app = tcb.init({
      env: "${envId}"
    })
    const auth = app.auth({
      persistence: "local"
    });
    const db = app.database();
    window.onload = function () {
      sign();
      TODO.init();
    }
    function sign() {
      auth.anonymousAuthProvider().signIn().then(() => {
        uid = auth.hasLoginState().user.uid;
        db.collection('todo').doc(uid).get().then(res => {
          if (res.data.length == 0) {
            db.collection('todo').add({
              _id: uid,
              list: TODO.todo,
              time: new Date()
            }).then(res => {
              console.log(res);
              watchtodo();
            })
          }
          else {
            console.log(res);
            TODO.todo = res.data[0].list;
            TODO.todoinit();
            watchtodo();
          }
        });
        app.callFunction({
          name:'todo_getNumber'
        }).then(res=>{
          document.getElementById('model').innerHTML+=`<p class='bottom-des'>共${res.result}人使用云开发TODO</p>`
        })
      })
    }
    TODO.itemChange = function (id, type, des) {
      if (type === 'add') {
        if (des != null) {
          app.uploadFile({
            cloudPath: `todo/${uid}/${TODO.todo[id].file}`,
            filePath: des
          }).then((result) => {
            console.log(result)
            TODO.todo[id].file = result.fileID
            updatetodo()
          });
        } else {
          updatetodo()
        }
      } else if (type === 'delete') {
        if (TODO.todo[id].file != null) {
          app.deleteFile({
            fileList: [TODO.todo[id].file]
          }).then((result) => {
            delete TODO.todo[id]
            console.log(result)
            updatetodo()
          });
        } else {
          delete TODO.todo[id]
          updatetodo()
        }
      } else {
        updatetodo()
      }
    }
    TODO.downLoadfile = function (file) {
      app.downloadFile({
        fileID: file
      })
    }
    function updatetodo() {
      db.collection('todo').doc(uid).update({
        list: db.command.set(TODO.todo),
        time: new Date()
      }).then(res => {
      }).catch(e => {
        console.log(e);
      })
    }
    function watchtodo() {
      db.collection('todo').where({ _id: uid }).watch({
        onChange: (snapshot) => {
          if (snapshot.msgType != "INIT_EVENT") {
            TODO.todo = snapshot.docs[0].list;
            TODO.todoinit();
          }
        },
        onError: (error) => {
          alert('远端数据库监听失败！');
        }
      });
    }
  </script>
</body>
</html>
  2. 保存文本文件，并将后缀改为 html，命名为 index.html。

步骤3：托管静态文件

该步骤中您将使用云开发静态网站托管功能。为了让更多人可以访问 Todo List 应用，云开发提供默认域名，可通过公网访问应用。

  1. 登录 云开发控制台，进入在 准备工作 中已经创建好的按量计费环境。
  2. 进入云开发控制台的 静态网站托管，单击上传文件，上传 步骤2 中的 index.html 文件。
  3. 上传完毕后，单击配置信息中的默认域名，在浏览器中打开该链接，即可在公网环境下访问 Todo List 网站。
    说明：

    默认域名可供您快速验证业务，如您需要对外正式提供网站服务，请前往基础配置绑定您已备案的自定义域名。

步骤4：创建数据库

该步骤中您将使用云开发的数据库功能，将 Todo List 应用内的数据存储在云数据库中。

进入云开发控制台的 数据库 中，单击新建集合，新建一个名称为todo的集合，如下图所示：

之后 Todo List 内的数据便会存储在这个集合中。

步骤5：创建云函数

该步骤中您将使用云开发的云函数功能，以统计共有多少名用户在使用 Todo List 应用。

  1. 进入云开发控制台的 云函数，单击新建云函数，开始创建云函数
    1. 在基础信息中，将函数名命名为todo_getNumber。
    2. 在函数配置中，均选择默认配置。
    3. 单击确定，即可创建云函数。
  2. 上传云函数代码包。
    1. 单击下载 云函数代码 ZIP 包（需要注册 Gitee 才可进行下载）。
    2. 进入创建好的 todo_getNumber 函数，单击函数代码页签，进入函数代码页面。
    3. 在提交方法选项中，选择本地上传ZIP包，并单击上传，将下载的云函数代码包 ZIP上传至云开发中。
    4. 单击保存，即可完成上传云函数代码包。

步骤6：开始使用

至此，您已经成功创建了一个 Todo List 网页应用，打开 静态网站托管 中的默认域名链接即可访问应用：

总结

该版本的 Todo List 应用为入门教学案例，通过使用云开发中的登录授权、云函数、数据库、云存储、静态托管等功能，快速搭建了一个简易 Todo List 应用并开放给用户使用。

目前应用内使用匿名登录方式，不支持多端设备共享 Todo List 记录。云开发团队提供了一个支持邮件登录方式的 Todo List 应用实战项目，支持多设备共享记录。您可以在此基础上开发更多功能，打造一个您的专属 Todo List 应用。

目录
中国站