云开发 CloudBase
文档捉虫大赛：人工智能与机器学习专题> HOT
文档中心 > 云开发 CloudBase > 示例教程 > Web 端 > 搭建 Todo List 应用

搭建 Todo List 应用

最近更新时间：2023-09-13 16:55:09

我的收藏

本页目录：

本文档介绍如何无需域名、无需服务器快速搭建一个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 应用并开放给用户使用。
中国站