再谈 云 + 端 开发模式
在第 8 篇的末尾谈到了 云端一体化模式，这里做一些实操。
第一种方式，在前后端分离的开发模式下，一般我们通过 Ajax 直接对后端（云函数）发起请求，然后后端操作数据库和云存储。
这种开发方式其实已经 run 了很多年了，当云函数出现后，可以使用云函数代替服务器环境。
第二种方式，就是综合运用端和云的优势，如下图：
我们可以在客户端中集成云开发的 SDK，直接使用 SDK 对数据库、云存储等发起请求，当然也可以直接使用 callFunction 方法去请求云函数，这样就不用开启云函数的 HTTP 请求。所以整个应用架构，建议综合采取此方案。
先贴代码，看效果
第 1 步：在控制台【数据库】模块创建一个集合（表）：test-js-sdk
因为下面演示使用 JS-SDK，在前端页面直接向数据库插入和读取数据，所以第一步建集合，也就是建表。
第 2 步：创建一个 html 文件，将下面代码复制进去保存，比如文件取名为 web-demo.html。同时在控制台将环境 ID 替换成自己的。
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Hello 云开发! <br />
Hello Serverless! <br />
Hello 云计算! <br />
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.6.1/tcb.js"></script>
<script>
let app = tcb.init({ env: "你的环境 ID" });
let auth = app.auth();
let db = app.database();
//匿名登录
//用于演示作用
async function login() {
await auth.signInAnonymously();
const loginState = await auth.getLoginState();
//为 true 表示登录成功
console.log(loginState.isAnonymous);
}
login();
//向数据库插入一条数据
db.collection("test-js-sdk")
.add({
text: "Hello 云计算",
due: new Date(),
})
.then((res) => {
//res 返回插入数据的 id和 requestId
console.log(res);
//读取刚插入的数据
db.collection("test-js-sdk")
.doc(res.id)
.get()
.then((res) => {
console.log(res.data);
});
});
</script>
</body>
</html>
第 3 步：将文件上传到静态托管，其实也可以本地开启一个 localhost 静态服务器。这里的目的是为了第 3 步，配置安全域名（用于跨域访问）。
第 4 步：设置安全域名，在环境中默认添加了静态托管的域名，因此可以直接访问，如果是本地起了静态服务器，也可以添加域名，如下图。
第 5 步：打开网页，验证效果
如果文件上传到了静态托管的根目录，则是静态托管默认域名/web-demo.html的访问路径 ，例如这里是：
https://open-cloud-5d89b0-1300954686.tcloudbaseapp.com/web-demo.html
也可以可以点击web-demo 看效果，如下图。
这个案例可以清楚的看到，没有使用云函数，直接使用了 JS-SDK 即可向数据库插入数据、也可以读取数据，当然也可以上传/删除文件等，当然也可使用 云函数-callFunction 直接触发云函数。云端一体化的模式，是不是比较爽呢。
代码解释
通过 CDN 引入 JS-SDK 这个很好理解，可以通过 NPM 安装。
登录鉴权
这里使用了 auth 模块，目的是开启授权，同时也提供了用户管理模块，可以到控制台【用户管理】模块查看。
let app = tcb.init({ env: "你的环境 ID" });
let auth = app.auth();
目前支持的登录方式有 4 种：
插入和读取数据
使用 db.collection("test-js-sdk") 直接获取集合的引用，然后使用 add 方法，是不是跟 第 06 篇：数据库 CRUD 很像，只不过这代码是运行在浏览器里的。
let db = app.database();
db.collection("test-js-sdk")
.add({
text: "Hello 云计算",
due: new Date(),
})
.then((res) => {
//res 返回插入数据的 id和 requestId
console.log(res);
});
同样读取一条数据数据使用了 doc 方法，如果是多条，可以使用 where 查询条件查询。
db.collection("test-js-sdk")
.doc(res.id)
.get()
.then((res) => {
console.log(res.data);
});
因此可以根据应用的情况，开启安全域名，比如部分数据库写入操作可以放在云函数里，读取操作完全可以在浏览器中进行。
附录
本文出自 王利华