查看“腾讯云云开发：搭建 Todo List 应用”的源代码

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

[[文件:cloud1119-1.png|600px]]

==准备工作==

1.参考[[腾讯云 云开发]]开通云开发环境。

2.如果您之前创建过环境，可以继续使用已创建的【按量计费环境】，或者再次【新建环境】。

[[文件:cloud1119-2.png|600px]]

3.开通成功之后，单击环境名称，进入 环境总览 页面，如下所示：

[[文件:cloud1119-3.png|600px]]

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

===步骤1：开启匿名登录===

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

[[文件:cloud1119-4.png|600px]]

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

在本地新建文本文件（Mac 用户推荐使用无格式文本编辑），在文件中填入如下内容，并将第17行代码中的${envId}替换为 准备工作 中复制的环境Id：

 <nowiki>
<html>
<head>
<meta charset="UTF-8">
<script src="https://acc.cloudbase.vip/todo/src/todo.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></nowiki>

保存文本文件，并将后缀改为 html，命名为 index.html

===步骤3：托管静态文件===

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

1.登录 云开发控制台，进入在 准备工作 中已经创建好的按量计费环境。

2.进入云开发控制台的 静态网站托管，单击【上传文件】，上传 步骤2 中的 index.html 文件。

[[文件:cloud201019.png|500px]]

[[文件:cloud201020.png|500px]]

上传完毕后，单击【配置信息】中的【默认域名】，在浏览器中打开该链接，即可在公网环境下访问 Todo List 网站。

[[文件:cloud1119-5.png|500px]]

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

===步骤4：创建数据库===

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

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

[[文件:cloud1119-6.png|500px]]

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

===步骤5：创建云函数===

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

1.进入云开发控制台的 云函数，单击【新建云函数】，开始创建云函数

 1.在基础信息中，将函数名命名为todo_getNumber。

[[文件:cloud1119-7.png|500px]]

 ii.在函数配置中，均选择默认配置。

[[文件:cloud1119-8.png|500px]]

    单击【确定】，即可创建云函数。

上传云函数代码包。

    单击下载 云函数代码 ZIP 包。
    进入创建好的todo_getNumber函数，单击【函数代码】页签，进入函数代码页面。
    在【提交方法】选项中，选择【本地上传ZIP包】，并单击【上传】，将下载的云函数代码包 ZIP上传至云开发中。
    单击【保存】，即可完成上传云函数代码包。