云开发 CloudBase 搭建 Todo List 应用

本文档介绍如何无需域名、无需服务器快速搭建一个Todo List 应用，该应用可记录您的待办事项并可为待办事项添加附件。最终成型的应用展示如下：
﻿
﻿
准备工作
1. 请 注册腾讯云账号，注册成功后即可使用腾讯云服务，已注册可忽略此步骤。
2. 在新建环境窗口中，根据实际需求填写环境名称，选择套餐，单击立即开通即可开通环境。
﻿
﻿
﻿
3. ﻿开通
成功之后，单击环境名称，进入环境总览页面。请记住您的环境 ID，这个 ID 在后续步骤将被使用，如下所示：
﻿
﻿
4. 单击左侧菜单栏中的静态网站托管，在页面中单击开通静态托管服务。
﻿

当您能看到如下界面时，即说明静态网站托管开通成功。
﻿
﻿
操作步骤
步骤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.1 在基础信息中，将函数名命名为todo_getNumber。
﻿
﻿
1.2 在函数配置中，均选择默认配置。
﻿
﻿
1.3 单击确定，即可创建云函数。
2. 上传云函数代码包。
2.1 ﻿单击下载 云函数代码 ZIP 包（需要注册 Gitee 才可进行下载）。
2.2 进入创建好的 todo_getNumber 函数，单击函数代码页签，进入函数代码页面。
2.3 在提交方法选项中，选择本地上传ZIP包，并单击上传，将下载的云函数代码包 ZIP上传至云开发中。
2.4 单击保存，即可完成上传云函数代码包。
﻿
﻿
步骤6：开始使用
至此，您已经成功创建了一个 Todo List 网页应用，打开 静态网站托管 中的默认域名链接即可访问应用。
﻿
﻿
总结
该版本的 Todo List 应用为入门教学案例，通过使用云开发中的登录授权、云函数、数据库、云存储、静态托管等功能，快速搭建了一个简易 Todo List 应用并开放给用户使用。
搭建 Todo List 应用

本页目录：

准备工作

操作步骤

步骤1：开启匿名登录

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

步骤3：托管静态文件

步骤4：创建数据库

步骤5：创建云函数

步骤6：开始使用

总结
