云開發(fā) 云接入與HTTP觸發(fā)

2020-07-22 15:32 更新

云接入是云開發(fā)基于云函數(shù)之上為開發(fā)者提供的HTTP訪問服務(wù),開發(fā)者可以輕松使用 POST、PUT、GET、DELETE等方法通過 HTTP 請求訪問到云開發(fā)環(huán)境內(nèi)的全部資源,而不需要使用Web端 SDK。而且云接入天然支持跨域請求,將域名添加至Web 安全域名中,這個(gè)域名里的網(wǎng)頁便可以跨域訪問云接入。當(dāng)使用云函數(shù)時(shí),系統(tǒng)會(huì)自動(dòng)預(yù)配TLS證書,因此我們可以通過安全連接調(diào)用云函數(shù)。

一、使用云接入訪問云函數(shù)

給云函數(shù)啟用云接入的方式非常簡單,我們可以使用騰訊云云開發(fā)網(wǎng)頁控制臺(tái)以及Cloudbase Cli命令兩種方式。

1、云開發(fā)控制臺(tái)啟動(dòng)云接入

打開騰訊云云開發(fā)網(wǎng)頁控制臺(tái)的云函數(shù)菜單,然后點(diǎn)擊HTTP觸發(fā)標(biāo)簽,開啟HTTP觸發(fā),云接入就啟動(dòng)啦,云接入的默認(rèn)域名就是https://{你的環(huán)境id}.service.tcloudbase.com/。

在前面我們已經(jīng)上傳了一個(gè)webtest的云函數(shù)(其他云函數(shù)也都可以的哦),點(diǎn)擊進(jìn)入webtest云函數(shù)的管理頁,然后點(diǎn)擊右上角的編輯,在HTTP 觸發(fā)路徑里輸入/webtest(也可以是其他值),保存之后,在瀏覽器里打開以下鏈接(網(wǎng)頁控制臺(tái)直接就有鏈接)就可以訪問云接入了:

  1. https://{你的環(huán)境id}.service.tcloudbase.com/webtest

大家可以對比一下event、context對象與調(diào)用云函數(shù)返回的對象有什么不同。使用云接入調(diào)用云函數(shù)時(shí),HTTP 請求會(huì)被轉(zhuǎn)化為特殊的結(jié)構(gòu)體,稱之為集成請求,結(jié)構(gòu)如下:

  1. {
  2. path: 'HTTP請求路徑,如 /hello',
  3. httpMethod: 'HTTP請求方法,如 GET',
  4. headers: {HTTP請求頭},
  5. queryStringParameters: {HTTP請求的Query,鍵值對形式},
  6. requestContext: {云開發(fā)相關(guān)信息},
  7. body: 'HTTP請求體',
  8. isBase64Encoded: 'true or false,表示body是否為Base64編碼'
  9. }

這里的queryStringParameters是HTTP請求的Query,我們可以在鏈接里傳入一些參數(shù),比如在訪問云接入的鏈接里加一些參數(shù):

  1. https://xly-xrlur.service.tcloudbase.com/webtest?name=bbsky&location=shenzhen

2、使用Cloudbase Cli啟動(dòng)云接入

在前面我們已經(jīng)了解到通過在終端輸入cloudbase --help可以了解到Cloudbase Cli有哪些命令(盡管cloudbase是全局的,建議大家在云開發(fā)項(xiàng)目的根目錄執(zhí)行),我們可以看到關(guān)于云接入的命令有:

  1. service:switch [options] 開啟/關(guān)閉 HTTP Service 服務(wù)
  2. service:auth:switch [options] 開啟/關(guān)閉 HTTP Service 服務(wù)訪問鑒權(quán)
  3. service:create [options] 創(chuàng)建 HTTP Service
  4. service:delete [options] 刪除 HTTP Service
  5. service:list [options] 獲取 HTTP Service 列表
  6. service:domain:bind [options] <domain> 綁定自定義 HTTP Service 域名
  7. service:domain:unbind [options] <domain> 解綁自定義 HTTP Service 域名
  8. service:domain:list [options] 查詢自定義 HTTP Service 域名

由這些命令,我們可以在終端里輸入以下命令來開啟和關(guān)閉云接入,比如開啟云開發(fā)環(huán)境id為xly-xrlur的云接入服務(wù):

  1. cloudbase service:switch -e xly-xrlur

而我們可以執(zhí)行以下命令創(chuàng)建一條云接入路由,路徑為 /webtest,指向的云函數(shù)為 webtest:

  1. cloudbase service:create -p /webtest -f webtest

除了可以使用瀏覽器里打開云接入的鏈接,我們還可以使用cURL命令行來調(diào)用云接入,比如我們可以在終端輸入以下命令:

  1. curl https://xly-xrlur.service.tcloudbase.com/webtest

3、參數(shù)的傳入與獲取總結(jié)

我們有必要重新梳理一下一些參數(shù)的傳入與獲取相關(guān)的知識(shí),我們往云函數(shù)里傳入?yún)?shù)的方式有調(diào)用云函數(shù)時(shí)傳入?yún)?shù)、訪問云接入鏈接時(shí)傳入?yún)?shù)以及配置云函數(shù)環(huán)境時(shí)添加配置信息,那這三種方法又是如何獲取這些參數(shù)呢?(還有一種是通過require模塊、文件,這里就不多做介紹了)

調(diào)用云函數(shù)傳入?yún)?shù)

在小程序端、Web端以及云函數(shù)端,我們可以通過callFunction的接口(小程序端為wx.callFunction、云函數(shù)端為cloud.callFunction、web端為app.callFunction)來調(diào)用云函數(shù),并傳入?yún)?shù):

  1. wx.cloud.callFunction({
  2. name: 'webtest', //被調(diào)用的云函數(shù)的名稱
  3. data: {
  4. userInfo:{
  5. name:"李東bbsky"
  6. },
  7. id:"20200420001"
  8. }
  9. })

那我們應(yīng)該如何獲取使用調(diào)用云函數(shù)時(shí)傳遞的參數(shù)呢?我們可以從event對象里拷貝:

  1. const {userInfo,id} = event

訪問云接入鏈接時(shí)傳入?yún)?shù)

我們通過訪問云接入鏈接或axios等進(jìn)行HTTP 請求的方式也能向云函數(shù)里傳遞參數(shù),這個(gè)參數(shù)會(huì)在queryStringParameters對象里,我們可以通過

  1. const {name,title} = event.queryStringParameters

云函數(shù)配置信息傳入?yún)?shù)

我們可以在云開發(fā)控制臺(tái)對云函數(shù)進(jìn)行一些參數(shù)的配置,也就是新增環(huán)境變量的字段,這個(gè)參數(shù)在云函數(shù)的獲取方式如下:

  1. const {school,name} = process.env

二、后臺(tái)函數(shù)與云接入

有了云接入的概念,我們可以把云函數(shù)分為兩類,在前面的章節(jié)云函數(shù)主要用于調(diào)用云函數(shù)、處理數(shù)據(jù)庫、云存儲(chǔ)云調(diào)用,我們可以稱之為后臺(tái)函數(shù),而HTTP函數(shù)則是我們可以通過標(biāo)準(zhǔn)HTTP請求來調(diào)用的。

參考上節(jié)Web端云開發(fā)的內(nèi)容,在functions文件夾里新建一個(gè)云函數(shù)比如backfunction,然后在index.js里輸入以下代碼,注意有一個(gè)dbName的參數(shù)會(huì)由HTTP請求傳入:

  1. const tcb = require('@cloudbase/node-sdk')
  2. tcb.init({
  3. env: "xly-xrlur"
  4. })
  5. const db = tcb.database()
  6. const _ = db.command
  7. exports.main = (event,context) =>{
  8. const {dbName} = event.queryStringParameters //注意queryStringParameters的來源
  9. return db.collection(dbName)
  10. .where({
  11. gdp: _.gt(3000)
  12. })
  13. .get()
  14. }

然后安裝該云函數(shù)的依賴,將云函數(shù)的代碼部署上傳到云端,并開啟云接入以及設(shè)置路由,具體操作前面都有介紹,然后我們在瀏覽器里打開如下鏈接,就能看到云函數(shù)返回的數(shù)據(jù)了。

  1. http://xly-xrlur.service.tcloudbase.com/backfunction?dbName=china

在小程序端我們知道獲取獲取可以使用wx.request()接口,而在web端我們則可以使用axios,在靜態(tài)托管的html頁面,比如打開之前public文件夾里的index.html,輸入以下代碼,然后打開鏈接,然后在瀏覽器的控制臺(tái)可以獲取到的數(shù)據(jù)啦:

  1. <script src="https://unpkg.com/axios/dist/axios.min.js" rel="external nofollow" ></script>
  2. <script>
  3. const url ="https://xly-xrlur.service.tcloudbase.com/backfunction?dbName=china"
  4. axios.get(url).then(res => {
  5. console.log(res)
  6. console.log(res.data)
  7. }).catch(err => {
  8. console.log(err)
  9. })
  10. </script>

三、返回集成響應(yīng)

云函數(shù)可以返回String、Object、Number等類型的數(shù)據(jù),還能返回集成響應(yīng),云接入會(huì)將返回值轉(zhuǎn)化成正常的HTTP響應(yīng),我們接下來使用云接入來返回一些靜態(tài)資源文件。

1、使用集成響應(yīng)返回HTML

使用VS Code在functions文件夾里新建一個(gè)云函數(shù),比如sendhtml,以及assets文件夾,里面存放我們要返回的HTML文件,結(jié)構(gòu)如下:

  1. ├── sendhtml //sendhtml云函數(shù)目錄
  2. └── assets
  3. └── index.html
  4. └── index.js
  5. └── config.json
  6. └── package.json

然后在index.js里輸入以下代碼,讀取云函數(shù)目錄assets文件夾里index.html,并返回HTML,這個(gè)云函數(shù)就和以往的云函數(shù)有很大的不同啦:

  1. const tcb = require('@cloudbase/node-sdk')
  2. tcb.init({
  3. env: "xly-xrlur"
  4. })
  5. const fs = require('fs')
  6. const path = require('path')
  7. exports.main = async (event,context) =>{
  8. //path.resolve() 方法將路徑或路徑片段的序列解析為絕對路徑
  9. const html = fs.readFileSync(path.resolve(__dirname, './assets/index.html'), {
  10. encoding: 'utf-8'
  11. })
  12. return {
  13. statusCode: 200,
  14. headers: {
  15. 'content-type': 'text/html'
  16. },
  17. body: html
  18. }
  19. }

在assets文件夾里index.html可以輸入一些html代碼,然后將sendhtml云函數(shù)部署上傳并開啟云接入,以及設(shè)置路由如/sendhtml之后,用瀏覽器打開云接入的地址,返回的HTML就被瀏覽器自動(dòng)解析了。

2、使用集成響應(yīng)返回其他類型的文件

除了html文件,還能返回其他類型的文件,在響應(yīng)中,Content-Type 實(shí)體頭部用于指示資源的MIME媒體類型,告訴Web端返回的內(nèi)容類型。媒體類型有很多,比如:

類型 描述 典型示例
text 普通文本類型 text/plaintext/htmltext/csstext/javascript
image 圖像類型 image/gifimage/pngimage/jpegimage/bmpimage/webpimage/x-iconimage/vnd.microsoft.icon
audio 音頻文件 audio/midiaudio/mpeg, audio/webm, audio/ogg, audio/wav
video 視頻文件 video/webmvideo/ogg
application 二進(jìn)制數(shù)據(jù)

將 content-type 分別設(shè)置為 application/javascript、text/css,即可在 body 中返回 JavaScript 文件和css文件,html、js、css文件是靜態(tài)網(wǎng)站的核心文件,都是可以返回的,這樣就用集成響應(yīng)返回一個(gè)完整的靜態(tài)網(wǎng)站啦。注意用集成請求返回的靜態(tài)網(wǎng)站和靜態(tài)托管之間的區(qū)別哦。

將content-type 設(shè)置為 image/png以及將 isBase64Encoded 設(shè)置為 true,就能返回圖片的二進(jìn)制文件,這個(gè)也可以和云存儲(chǔ)結(jié)合起來使用。比如我們可以寫如下云函數(shù),先下載云存儲(chǔ)里面的圖片,將Buffer轉(zhuǎn)成base64格式的圖片,然后返回,這樣我們就能通過云接入的鏈接查看到圖片了:

  1. const cloud = require('wx-server-sdk')
  2. cloud.init({
  3. env: "xly-xrlur"
  4. })
  5. exports.main = async (event,context) =>{
  6. const fileID = 'cloud://xly-xrlur.786c-xly-xrlur-1300446086/1572315793634-953.png'
  7. const res = await cloud.downloadFile({
  8. fileID: fileID,
  9. })
  10. const buffer = res.fileContent
  11. const base64img = await buffer.toString('base64')
  12. return {
  13. isBase64Encoded: true,
  14. statusCode: 200,
  15. headers: {
  16. 'content-type': 'image/png'
  17. },
  18. body: base64img
  19. }
  20. }
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)