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

2020-07-22 15:35 更新

在第 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)
})

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

附录

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号