本文档介绍如何无需域名、无需服务器快速搭建一个Todo List 应用,该应用可记录您的待办事项并可为待办事项添加附件。最终成型的应用展示如下:
准备工作
- 请 注册腾讯云账号,注册成功后即可使用腾讯云服务,已注册可忽略此步骤。
- 登录腾讯云 云开发控制台,您在填写环境名称之后,单击下一步,直接提交授权并使用云开发服务。
如果您之前创建过环境,可以继续使用已创建的按量计费环境,或者再次新建环境。 - 开通成功之后,单击环境名称,进入 环境总览 页面,如下所示:注意:
请记住您的环境 ID,这个 ID 在后续步骤将被使用。您可单击环境Id右侧的
图标进行复制。
步骤1:开启匿名登录
搭建 Todo List 应用,需开启匿名登录功能,请前往 登录授权 控制台,打开匿名登录开关,如下图所示:
步骤2:建立本地 Todo List 文件
- 在本地新建文本文件(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>
- 保存文本文件,并将后缀改为
html
,命名为index.html
。
步骤3:托管静态文件
该步骤中您将使用云开发静态网站托管功能。为了让更多人可以访问 Todo List 应用,云开发提供默认域名,可通过公网访问应用。
- 登录 云开发控制台,进入在 准备工作 中已经创建好的按量计费环境。
- 进入云开发控制台的 静态网站托管,单击上传文件,上传 步骤2 中的
index.html
文件。 - 上传完毕后,单击配置信息中的默认域名,在浏览器中打开该链接,即可在公网环境下访问 Todo List 网站。说明:
默认域名可供您快速验证业务,如您需要对外正式提供网站服务,请前往基础配置绑定您已备案的自定义域名。
步骤4:创建数据库
该步骤中您将使用云开发的数据库功能,将 Todo List 应用内的数据存储在云数据库中。
进入云开发控制台的 数据库 中,单击新建集合,新建一个名称为todo
的集合,如下图所示:
之后 Todo List 内的数据便会存储在这个集合中。
步骤5:创建云函数
该步骤中您将使用云开发的云函数功能,以统计共有多少名用户在使用 Todo List 应用。
- 进入云开发控制台的 云函数,单击新建云函数,开始创建云函数
- 在基础信息中,将函数名命名为
todo_getNumber
。 - 在函数配置中,均选择默认配置。
- 单击确定,即可创建云函数。
- 在基础信息中,将函数名命名为
- 上传云函数代码包。
- 单击下载 云函数代码 ZIP 包(需要注册 Gitee 才可进行下载)。
- 进入创建好的
todo_getNumber
函数,单击函数代码页签,进入函数代码页面。 - 在提交方法选项中,选择本地上传ZIP包,并单击上传,将下载的云函数代码包 ZIP上传至云开发中。
- 单击保存,即可完成上传云函数代码包。
步骤6:开始使用
至此,您已经成功创建了一个 Todo List 网页应用,打开 静态网站托管 中的默认域名链接即可访问应用:
总结
该版本的 Todo List 应用为入门教学案例,通过使用云开发中的登录授权、云函数、数据库、云存储、静态托管等功能,快速搭建了一个简易 Todo List 应用并开放给用户使用。
目前应用内使用匿名登录方式,不支持多端设备共享 Todo List 记录。云开发团队提供了一个支持邮件登录方式的 Todo List 应用实战项目,支持多设备共享记录。您可以在此基础上开发更多功能,打造一个您的专属 Todo List 应用。