免費AI編程助手
云開發(fā) 再談 云 + 端 開發(fā)模式
在第 8 篇的末尾談到了 云端一體化模式，這里做一些實操。
第一種方式，在前后端分離的開發(fā)模式下，一般我們通過 Ajax 直接對后端（云函數(shù)）發(fā)起請求，然后后端操作數(shù)據(jù)庫和云存儲。
這種開發(fā)方式其實已經 run 了很多年了，當云函數(shù)出現(xiàn)后，可以使用云函數(shù)代替服務器環(huán)境。
第二種方式，就是綜合運用端和云的優(yōu)勢，如下圖：
我們可以在客戶端中集成云開發(fā)的 SDK，直接使用 SDK 對數(shù)據(jù)庫、云存儲等發(fā)起請求，當然也可以直接使用 callFunction 方法去請求云函數(shù)，這樣就不用開啟云函數(shù)的 HTTP 請求。所以整個應用架構，建議綜合采取此方案。
先貼代碼，看效果
第 1 步：在控制臺【數(shù)據(jù)庫】模塊創(chuàng)建一個集合（表）：test-js-sdk
因為下面演示使用 JS-SDK，在前端頁面直接向數(shù)據(jù)庫插入和讀取數(shù)據(jù)，所以第一步建集合，也就是建表。
第 2 步：創(chuàng)建一個 html 文件，將下面代碼復制進去保存，比如文件取名為 web-demo.html。同時在控制臺將環(huán)境 ID 替換成自己的。
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Hello 云開發(fā)! <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: '你的環(huán)境 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()
//向數(shù)據(jù)庫插入一條數(shù)據(jù)
db.collection("test-js-sdk")
.add({
text: 'Hello 云計算',
due: new Date()
}).then(res => {
//res 返回插入數(shù)據(jù)的 id和 requestId
console.log(res)
//讀取剛插入的數(shù)據(jù)
db.collection("test-js-sdk").doc(res.id).get().then(res=>{
console.log(res.data)
})
})
</script>
</body>
</html>第 3 步：將文件上傳到靜態(tài)托管，其實也可以本地開啟一個 localhost 靜態(tài)服務器。這里的目的是為了第 3 步，配置安全域名（用于跨域訪問）。
第 4 步：設置安全域名，在環(huán)境中默認添加了靜態(tài)托管的域名，因此可以直接訪問，如果是本地起了靜態(tài)服務器，也可以添加域名，如下圖。
第 5 步：打開網(wǎng)頁，驗證效果
如果文件上傳到了靜態(tài)托管的根目錄，則是靜態(tài)托管默認域名/web-demo.html的訪問路徑 ，例如這里是：
https://open-cloud-5d89b0-1300954686.tcloudbaseapp.com/web-demo.html也可以可以點擊web-demo 看效果，如下圖。
這個案例可以清楚的看到，沒有使用云函數(shù)，直接使用了 JS-SDK 即可向數(shù)據(jù)庫插入數(shù)據(jù)、也可以讀取數(shù)據(jù)，當然也可以上傳/刪除文件等，當然也可使用 云函數(shù)-callFunction 直接觸發(fā)云函數(shù)。云端一體化的模式，是不是比較爽呢。
代碼解釋
通過 CDN 引入 JS-SDK 這個很好理解，可以通過 NPM 安裝。
登錄鑒權
這里使用了 auth 模塊，目的是開啟授權，同時也提供了用戶管理模塊，可以到控制臺【用戶管理】模塊查看。
let app = tcb.init({ env: '你的環(huán)境 ID'})
let auth = app.auth()目前支持的登錄方式有 4 種：
插入和讀取數(shù)據(jù)
使用 db.collection("test-js-sdk") 直接獲取集合的引用，然后使用 add 方法，是不是跟 數(shù)據(jù)庫 CRUD 很像，只不過這代碼是運行在瀏覽器里的。
let db = app.database()
db.collection("test-js-sdk")
.add({
text: 'Hello 云計算',
due: new Date()
}).then(res => {
//res 返回插入數(shù)據(jù)的 id和 requestId
console.log(res)
})同樣讀取一條數(shù)據(jù)數(shù)據(jù)使用了 doc 方法，如果是多條，可以使用 where 查詢條件查詢。
db.collection("test-js-sdk").doc(res.id).get().then(res=>{
console.log(res.data)
})因此可以根據(jù)應用的情況，開啟安全域名，比如部分數(shù)據(jù)庫寫入操作可以放在云函數(shù)里，讀取操作完全可以在瀏覽器中進行。
更多建議：