云开发再谈云 + 端开发模式

在第 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" rel="external nofollow" ></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 方法，是不是跟数据库 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)
})

因此可以根据应用的情况，开启安全域名，比如部分数据库写入操作可以放在云函数里，读取操作完全可以在浏览器中进行。

云开发 再谈 云 + 端 开发模式

先贴代码，看效果

代码解释

登录鉴权

插入和读取数据

附录

推荐文章

推荐教程

推荐课程

云开发再谈云 + 端开发模式