背景
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 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
最新资讯关注微信公众号【腾讯云云开发】