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

背景

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

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

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

若是你不想执行如下步骤翻看代码，能够直接点击下方按钮一键部署

1、构建本地化TodoList

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

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

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

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

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

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

2、将本地TodoList发布，给其余人使用

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

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

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

按量计费环境建立完毕后，通常自动开通静态网站托管服务，若是未开通点击开通便可。

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

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

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

3、为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 db = app.database();
  window.onload = function () {
    LO.init();
    TODO.init();
  }
  LO.Done = function () {
    uid = app.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>

保存文件，从新上传至静态网站托管中，如此一个有后台服务的Todo应用便构建完成了，仍然打开配置信息中的【默认域名】（若是有缓存，能够在连接后加 ?123 等随机数），打开后以下图所示：

应用中引入的登陆模块自动展现登陆框，输入邮件地址和密码，若是未注册会直接发送注册邮件。

此时，前往邮箱中查看注册邮件，以下图所示：

点击验证连接，将跳转到云开发验证页，验证成功后，显示以下：

此时，返回应用网站，10s后按钮变为可点击状态，直接点击登陆，便可登陆成功，登陆框消失。

以后，经过邮箱地址和密码便可完成以后登陆。

若是你想展现多少人使用TODO应用，能够将项目目录functions里todo_getNumber文件夹上传为云函数

写在最后

本实战项目经过模块化方式构建，直接突出云开发的开发步骤，更加直观。若是你想探寻Todo模块的内容，能够自行解压缩读代码。

login_util模块，是做者构建的一个简易登陆插件，能够实现简单的登陆操做，提供自定义方法，默认是云开发的邮件登陆方式，因此在无自定义时请保证邮件登陆配置正确并打开。

todo.js暴露接口：

TODO.todo;             //待办事项内容json，可按照规则直接改变
TODO.todoinit();                    //刷新显示待办事项
TODO.itemChange(id,type,des);  //监听待办列表变化[id，类型，描述]
TODO.downLoadfile(file)             //下载文件触发，能够在上传时修改todo列表file的值

login_util简易登陆窗口插件，默认邮件登陆，暴漏接口：

LO.custom                         //是否自定义登陆方法，默认为false为邮件登陆
  LO.init()                         //初始化方法调用打开登陆框，默认邮件登陆时则会自动判断，若是登陆则触发LO.done(),不会初始化登陆框
  LO.done()                         //当登陆完毕时触发，默认登陆时可用，自定义无效
  LO.close()                        //关闭登陆框
  LO.onClose()                      //监听关闭
  LO.onLogin(obj)                   //监听登陆按钮，需LO.custom=true才可生效
  LO.setBtn(text,disable)           //设置登陆按钮
  LO.setDes(text,style)             //设置描述

产品介绍

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程当中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开通云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】