如何用云开发快速搭建实时 Todo List 应用
借助云开发数据库的实时推送能力和云开发官方出品的前后端一体化部署工具CloudBase Framework,可以轻松搭建一个完整应用。
效果展示
示例地址:
http://cloud.qinmudi.cn/watch-todolist
1.开发前准备
1.1 腾讯云 CloudBase 的按量计费环境
我们要部署静态网站,因此,需要提前准备按量计费环境。
1.2 项目创建
使用 CloudBase Framework 创建一个 vue 应用。具体操作,参见:如何用 Cloudbase Framework 部署一个 Vue 项目?
2.项目开发
2.1 创建数据库集合
两种创建方式,任选。
2.1.1 手动创建
打开云开发控制台,手动创建 watch-todos 集合。
2.1.2 插件方式创建
配置 cloudbaserc.json。
{
"envId": "your envId",
"framework": {
"plugins": {
"client": {
"use": "@cloudbase/framework-plugin-website",
"inputs": {
"buildCommand": "npm run build",
"outputPath": "dist",
"cloudPath": "/watch-todolist"
}
},
"database": {
"use": "@cloudbase/framework-plugin-database",
"inputs": {
"collections": [
{
"collectionName": "watch-todos"
}
]
}
}
}
}
}
请注意 database 部分的配置。
这里,"database"是自定义的名称,你可以配置成任何你喜欢的名字~
之后,在 package.json 中,相应配置部署的 script 脚本即可。
比如,我们这里配置了:
{
"scripts": {
"deploy:database": "cloudbase framework:deploy database"
}
}
配置完成后,执行:
yarn deploy:database
or
npm run deploy:database
进行部署,云数据库中,就会自动生成 watch-todos 集合。
2.2 tcb-js-sdk 引入
yarn add tcb-js-sdk
or
npm install tcb-js-sdk
2.3 创建 tcb 接入层
2.3.1 用户登录与数据库实例获取
【注】 获取数据库实例,必须先进行登录授权,否则无法获取。
为了便于演示,这里采用匿名登录方式。
具体实现方式如下:
【step1】云开发控制台开启匿名登录:
【step2】tcb/index.js
import tcb from 'tcb-js-sdk';
import $config from '../../cloudbaserc';
// 初始化
const app = tcb.init({
env: $config.envId,
});
const auth = app.auth();
let db = null;
async function login() {
await auth.signInAnonymously();
// 匿名登录成功检测登录状态isAnonymous字段为true
const loginState = await auth.getLoginState();
console.log(loginState.isAnonymousAuth); // true
return app.database();
}
function getDB() {
if (!db) {
db = login();
}
return db;
}
export default getDB;
2.3.2 增删改查逻辑开发
tcb/service.js
import $getDB from './index';
// 正确数据
const data = {
code: 0,
data: null,
msg: 'success',
};
// 操作失败数据
function getFailData(msg) {
return {
code: -1000,
data: null,
msg,
};
}
// 发生错误数据
function getErrorData(err) {
return {
code: -4000,
data: null,
msg: err.message,
};
}
// 数据库集合获取
async function getCollection() {
const db = await $getDB();
return db.collection('watch-todos');
}
// 增加
async function addItem(params) {
const addRes = Object.assign({}, data);
try {
const myCollection = await getCollection();
const res = await myCollection.add(params);
// 如果插入出错
if (!res.id) {
return getFailData('add fail');
}
} catch (e) {
return getErrorData(e);
}
return addRes;
}
// 删除
async function deleteItem({ _id }) {
const deleteRes = Object.assign({}, data);
try {
const myCollection = await getCollection();
const res = await myCollection.doc(_id).remove();
// 如果没有成功删除
if (res.deleted === 0) {
return getFailData('delete fail');
}
} catch (e) {
return getErrorData(e);
}
return deleteRes;
}
// 修改
async function updateItem(params) {
const updateRes = Object.assign({}, data);
const { _id, checked, color, starred, text } = params;
try {
const myCollection = await getCollection();
const res = await myCollection.doc(_id).update({
checked,
color,
starred,
text,
});
// 如果没有成功更新
if (res.updated === 0) {
return getFailData('update fail');
}
} catch (e) {
return getErrorData(e);
}
return updateRes;
}
// 查询
async function getList() {
const listRes = Object.assign({}, data);
try {
const myCollection = await getCollection();
const dbData = await myCollection.get();
listRes.data = {
page: 1,
limit: 10,
total: 100,
list: dbData.data,
};
} catch (e) {
return getErrorData(e);
}
return listRes;
}
export default {
addItem,
deleteItem,
updateItem,
getList,
};
2.4 页面注册 watcher 实时监听
这是 demo 中的 App.vue
import $getDB from './tcb';
import $service from './tcb/service';
methods: {
// 拉取数据列表
async getList() {
const res = await $service.getList();
if (res && res.code === 0) {
this.todoList = [...res.data.list];
}
},
// 注册数据库变动的实时监听
async registerTcbWatcher() {
const getList = this.getList;
const db = await $getDB();
this.watcher = db
.collection('watch-todos')
.where({
// query...
})
.watch({
onChange(snapshot) {
console.log('snapshot', snapshot);
getList();
},
onError(err) {
console.error('the watch closed because of error', err);
},
});
},
},
created() {
this.registerTcbWatcher();
},
destroyed() {
// 关闭数据库变动的实时监听
this.watcher.close();
},
2.5 页面样式美化 + cloudfunctions 文件夹删除(我们没有使用到云函数)
2.6 本地预览
yarn dev
or
npm run dev
访问 http://localhost:8080/watch-todolist
3.项目部署
3.1 配置 cloudbaserc.json
1)配置 envId(要使用按量计费环境,因为我们要部署的是一个静态网站);
2)删除 server 相关配置(删不删都行,删掉减少冗余);
3)配置你自己的 cloudPath(这里以 /watch-todolist 为例)。
{
"envId": "your envId",
"framework": {
"name": "vue",
"plugins": {
"client": {
"use": "@cloudbase/framework-plugin-website",
"inputs": {
"buildCommand": "npm run build",
"outputPath": "dist",
"cloudPath": "/watch-todolist"
}
}
}
}
}
3.2 执行部署
yarn dev
4.项目访问
根据你的配置,访问:http://your_domain/your_path
查看我们的示例,访问:http://cloud.qinmudi.cn/watch-todolist
打开两个窗口,同时访问。一个窗口进行增删改操作,另一窗口观察效果~
附:示例代码的本地运行与上线部署
1.示例源码地址
https://github.com/oteam-sources/watch-todolist.git
2.本地预览
2.1 git clone
git clone https://github.com/oteam-sources/watch-todolist.git
2.2 配置 cloudbaserc.json
配置自己的 envId。
2.3 部署 database
yarn deploy:database
2.4 本地启动
yarn dev
or
npm run dev
2.5 本地预览
浏览器访问:http://localhost:8080/watch-todolist/
3.一键部署我们的示例:
3.1 执行部署
yarn deploy
or
npm run deploy
3.2 线上预览
浏览器访问
预览部署后的示例
以上,来自 CloudBase Framework Oteam 团队。
欢迎更多的小伙伴加入,共建社区生态~
Github 开源地址,欢迎扫码给我们点个star,帮助我们做得更好:
https://github.com/TencentCloudBase/cloudbase-framework
作者:张效玮,腾讯前端开发工程师。
点击文末阅读原文进入云开发社区官网,了解云开发的更多信息。
欢迎在下方评论区留言或在微信开放社区 进入云开发专区与我们交流。
☁
更多精彩
点击下方图片即可了解
△ 2020小程序云开发挑战赛报名开启,海量大奖等你来拿!
△ 2020云开发校园执行官招募开启
由于公众号推送规则更改,请多多分享、点赞和“在看”,以及时获取云开发Cloudbase的最新动态。
点击在看让更多人发现精彩
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
- ubuntu中安装tomcat
- python文件操作
- Owasp测试4.0手册
- 推荐一款Web渗透测试数据库
- 【提莫】一个域名收集及枚举工具
- chmod: changing permissions of `/usr/local/bin/...
- a windows service with the name MYSQL already e...
- NameError: name 'admin' is not defined(彻底解决方案)
- Error: No module named blog
- ubuntu中的django安装配置与操作
- IOS开发之-搜索栏UISearchController详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解android 通过uri获取bitmap图片并压缩
- android线程消息机制之Handler详解
- 分布式一致性协议 - ZAB
- 删除链表的倒数第N个节点
- Open3d学习计划—高级篇 2(彩色点云配准)
- Android7.0上某些PopuWindow出现显示位置不正确问题的解决方法
- 有效的括号
- Android PopupWindow实现左侧弹窗效果
- LeetCode. 209. 长度最小的子数组
- 一篇文章就能了解Rxjava
- 二叉树遍历非递归程序 -- 使用栈模拟系统栈
- Android开发之多媒体文件获取工具类实例【音频,视频,图片等】
- 二叉树及leetcode练习题
- 利用递归函数的返回值
- Android DataBinding的官方双向绑定示例