云函數 Todo 重構 + Vue 客戶端調用
在上篇《Serverless 云開發(fā)高階應用》搞清楚各個配置的含義之后,我們就可以按照之前的思路,實現 Todo 應用了。
先配置一個添加任務的函數。
注意,配置文件不能幫我們在本地創(chuàng)建文件及文件夾,不具備小程序的能力,所以,寫好配置文件,我們需要自己創(chuàng)建對應的代碼目錄及文件。
代碼寫好之后,如何進行本地測試呢?還記得之前我們使用的 SCF 這個工具嗎?沒錯,就用它就行了。
然后再使用 Postman 發(fā)個請求試試:
測試完成后,我們可以使用 tcb 命令進行全量部署。注意,全量部署時,vue 也會跟隨打包并部署到靜態(tài)站點中,如果只想部署單個云函數,可以使用命令 tcb fn deploy add 對 add 這個函數單獨部署:
部署完成后可以登錄云控制臺查看,也可以在本地使用 tcb fn list 查看已部署的函數列表。
Vue 客戶端調用
在 Vue 中調用云函數,與傳統(tǒng)方式不一樣的是,我們不需要自己發(fā)送 HTTP 請求,騰訊官方封裝了 Vue 插件:vue-provider。
地址:https://github.com/TencentCloudBase/cloudbase-vue
在我們構建的項目中已經引入了該插件。在 main.js 中修改我們的環(huán)境參數,就可以使用了。
同時,在 index.html 中,還會默認加載一個靜態(tài)的配置文件 _init_tcb-env.js,其實就是環(huán)境的配置參數。因為我們已經在 main.js 配置了環(huán)境參數,因此,直接屏蔽這個文件即可。
完成這些配置之后,我們在 Vue 中完成添加任務的功能,進行測試。但是,這里有個坑,騰訊在這個地方是個小學生收割機,收割了我1個小時的時光我才搞清楚,callFunction 調用的傳參與 HTTP 觸發(fā)器調用的 event 入參是不一樣的,一定注意!手冊中沒有寫明這一點。
手冊地址:https://docs.cloudbase.net/cloud-function/how-works.html
callFunction 調用的云函數 event 的入參就是傳入 callFunction 的 data,沒有請求信息數據,所以云函數的代碼一定記得修改。
此時,我們會收到一個沒有權限的報錯,這是因為調用云函數必須要進行登錄鑒權,我們暫時先使用匿名登錄的方式,調通接口的數據通信,后面我們再詳細介紹 Cloudbase 的用戶管理服務器。
但是,就算是使用匿名登陸也是個坑,控制臺中登錄鑒權的實例代碼是錯誤的,正確的代碼示例在文檔中心那里。
文檔中心地址:
https://docs.cloudbase.net/authentication/anonymous.html
當然,光有代碼還不夠,你還需要到控制臺中開啟應用允許匿名登錄的選項才行。不過一般都是默認就開通的,這里就不再細說了,通過登錄驗證后,我們終于可以去罵罵騰訊寫的垃圾文檔了。