实战丨Web云开发项目—TodoList待办事项

背景

TodoList应用，是面向零基础同学的快速入门应用。你可以一行代码完成TodoList的本地化搭建，如果你想要网络同步你的Todo数据，在多个设备之间实时同步共享，云开发构建仅需100行。

体验地址：https://acc.cloudbase.vip/todo/

此项目适用于零基础用户体验使用，通过一定的模块手段集约了整体编码。如果想要深入学习请掌握js、html、css等编程技术，自主解析模块中的代码（均为入门原生代码）

如果你不想执行以下步骤翻看代码，可以直接点击下方按钮一键部署

一、构建本地化TodoList

在本地任意地方新建文本文件，在文件中填入如下内容：

<script src="https://acc.cloudbase.vip/todo/src/todo.js" 

charset="utf-8"></script>

保存，并将后缀改为html，命名为index.html【注意：mac用户推荐使用无格式文本编辑】

使用浏览器打开此html文件，浏览器显示如下，即为正常。

如此，你就通过一行代码完成了本地化Todo应用的构建。通过此应用，你可以回车新增一条待办，也可以以勾选已完成，修改事项内容，删除事项；当页面关闭再次加载时仍然保留待办事项。

二、将本地TodoList发布，给其他人使用

我们只在本地构建了这个应用网站，如何将这个应用分享给其他人呢？

我们需要将这个应用网站发布到云开发静态网站托管中

打开云开发控制台，新建一个按量计费环境（如果已有按量计费环境则直接使用，跳过此步）

按量计费环境创建完毕后，一般自动开通静态网站托管服务，如果未开通点击开通即可。

点击上传文件，将上一步的index.html选择上传

上传完毕后，点击上图配置信息中的【默认域名】，即可在公网环境下访问Todo应用网站。

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

三、为Todo应用构建后台服务

以上一行代码实现的单一应用网站只能做到在本地进行Todo记录，当更换设备时，无法做到同步，接下来，我们来构建后台服务，实现同步需求。

打开云开发控制台，找到上一步操作的环境，打开数据库，新建todo集合，如下图所示：

打开环境-登录授权，开启邮箱登录，如下图所示：

开启后点击右边【配置发件人】，参考配置QQ邮箱进行配置。

随后，点击右边【应用配置】，填写一下应用名称，如下图所示

配置完成后，将你的云环境ID复制保存，填入下步骤代码中

打开之前本地构建的index.html，填充内容如下所示

<script src="https://acc.cloudbase.vip/todo/src/todo.js" charset="utf-8"></script>
<script src="https://acc.cloudbase.vip/todo/src/login_util.js" charset="utf-8"></script>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script>
<script>
  let uid = null;
  const app = tcb.init({
   
    env: "替换自己的云开发环境ID"
  })
  const auth = app.auth({
   
    persistence: "local"
  });
  const</