什么是云開發?
云開發是可以幫助我們快速成為全棧的一種后端云服務,采用的是Serverless的架構。開發者無須搭建服務器,可直接使用其中的云數據庫、云存儲、云函數等云服務基礎功能。
那么這個時候你可能會想,這和現在的傳統開發模式有什么區別呢?下面通過現實生活中蓋房子的過程來了解傳統開發模式與云開發模式的區別。
如果傳統方式來蓋房子需要6步:
1)將房子的地基打好,設計整理結構。(后端云服務基礎架構)
2)打地梁,地梁也是決定房子是否穩固的關鍵。(搭建云數據庫)
3)主體的砌筑,將房子的基本結構蓋好。(搭建云存儲)
4)在步屋內填上土,砸夯,將地面砸實。(搭建云函數)
5)在屋頂鋪上水泥,封實。(提供靜態托管和擴展能力)
6)裝修成自己喜歡的風格。(編寫業務需求邏輯代碼)
而云開發模式只有一步,即裝修成自己喜歡的風格。可以看到圖1-1展示的是傳統開發需要管理的基礎資源與云開發需要管理的基礎資源的對比,可以幫助我們更清晰的了解兩者之間的差距。
圖1-1 傳統開發需要管理的基礎資源VS云開發需要管理的基礎資源
就這一步即可。云開發提供完整的后端云服務,提供數據庫、存儲、函數、靜態托管等基礎能力,以及擴展能力,無須管理基礎架構。相比較傳統的開發模式,云開發至少可節省50%的人力成本、交付效率提升70%。
云開發模式調整
在此之前我們需要把原來碼仔備忘錄項目改成云開發項目,所以需要先把項目從項目管理中先刪除。(如果是直接新建的云開發項目可以忽略這一步)
首先,先進入小程序項目管理頁面:
然后點擊右上角「管理」按鈕進入該頁面的管理狀態。
然后選中你之前的單機版本勾選進行刪除即可。
接下來我們在導入項目界面對云開發進行勾選即可。
這個時候進入我們會發現小程序開發工具自動給我們生成了一套云開發Demo,我們先直接處理掉。
意思就是找不到小程序云開Demo代碼的里面的一些模塊,這個不用理會直接先把Demo代碼全部刪除。
刪除后我們就可以看到正常的頁面渲染了。
回到正常狀態下,我們接下來要改造的就是數據操作這塊的業務。
數據緩存改造云開發
在改造之前我們先要梳理思路。
- 首先我們先通過之前學習過抽象方法。
- 把所有和數據操作相關的方法都抽取到一個js類里面,這樣便于維護。
- 將所有的方法替換成云數據庫的操作函數。
抽象數據操作API
我們在根目錄下面新增 api 的文件夾,然后在其文件夾下面新增一個 memo.js 用于存放所有備忘錄的操作API。
梳理下有哪些方法:
- 獲取備忘錄列表
- 獲取備忘錄詳情
- 新增備忘錄信息
- 刪除備忘錄信息
- 修改備忘錄信息
先給相關的方法取好函數名稱,然后進行導出聲明。
memo.js 完整代碼
首先我們來實現獲取備忘錄列表,在列表頁面 onShow 函數中會被調用。
在這個時候setData是頁面操作函數,所以我們要抽象的部分是:
接下來我們就把這段代碼放在memo.js里面去。
memo.js 關于 getMemoList 的代碼片段
然后替換成列表頁面的調用,先引入memo的獲取 getMemoList 函數。
list.js 頭部引入代碼片段
引入后在 onShow 函數中使用
在 onShow 所有代碼片段
采取同樣的方式,我們可以把之前的獲取詳情、刪除、修改都抽象到 memo.js 中:
memo.js 所有代碼
在相應業務場景進行調用,調用之前都要先引入方法才行。由于引入代碼相對重復,下面就不貼引入代碼了,只貼使用代碼。
刪除代碼方法調用:
list.js 中 del 函數所有代碼
查看備忘錄詳情調用:
edit.js 中 onLoad 函數所有代碼
新增和刪除方法調用:
edit.js 中 save 函數中的關于保存和修改的代碼片段
到這里我們就完成了第一步,先抽取數據操作對象,然后我們要進行云數據庫到操作了。
操作云數據庫
初始化數據庫
首先我們先進入云開發控制臺。
然后選中「數據庫」。
云開發提供了一個 JSON 數據庫,顧名思義,數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫可以有多個集合(相當于關系型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。
我們會發現沒有可用的集合,再次新建一個集合 memo,用于存放備忘錄數據。
新增一條數據
我們先手動新增一條測試數據看看,點擊「添加記錄」。
我們用以上測試數據添加進去
除此之外我們可以看到可以添加多種不同類型的數據,云開發數據庫提供以下幾種數據類型:
- String:字符串
- Number:數字
- Object:對象
- Array:數組
- Bool:布爾值
- Date:時間
- Geo:多種地理位置類型
- Null
我們先默認都用 string 類型的數據,新增完成之后就可以做memo集合中看到一條數據了。
數據表已經有數據了,那么我們怎么獲???
獲取數據庫數據
我們回到小程序編輯臺,對我們的獲取數據方法進行下改造。
這個是獲取本地的數據方法,下面是獲取數據庫方法
當我們去列表頁面進行調用的時候發現報錯:
原來是在此之前還需要進行云API的初始化。
那么現在問題來了,我們后續會遇到大量的調用云API,那么都需要一開始初始化,并且這個初始化只需要一次,這個時候初始化我們應該在哪里進行調用呢?
當一個函數應用一開始就需要調用的時候并且只需要調用一次,我們可以在app.js的 onLaunch 生命周期中調用。
app.js 的 onLaunch 函數代碼片段
接下來在看調用看看,在這里告訴大家一個調試技巧,使用調試器中的Network面板,然后選中Cloud標簽進行過濾,在這里我們就可以剛才調用API請求。
先看看請求狀態,從狀態來看是成功的請求。
然后我們再來看看返回的數據:
明明有一條數據,為什么獲取不到呢?
因為云開發數據庫集合讀取權限問題。默認我們新建的集合讀取權限是僅創建則可以讀寫,第一條測試數據是我們手動錄入的,所以沒有創建者,默認權限于是就讀取不到。
我們可以來到云開發控制面板,然后找到 數據庫=> 數據權限。
我們把權限從「僅創建者可讀寫」修改為「所有用戶可讀,僅創建者可讀寫」試試看。修改完成之后再次調用獲取方法,看到返回結果中出現了這條測試數據。
雖然數據出來了,但是我們會發現還有一個錯誤日志。
具體代碼塊:
原因:在沒有使用云API之前我們使用的緩存操作API是同步操作返回了具體數據,而修改后的獲取數據方法是異步函數,沒有給到數據到列表頁面進行使用。最終導致list數據對象為空,list的length自然就出現了undefined的錯誤提示。
從數據庫獲取數據除了可以用以上的實現 success 方法,同樣還支持可以用 Promise 風格調用:
可以簡單理解成將包裹的回調函數調用方式改成了鏈式調用的回調函數
基于 Promise 風格調用,我們可以將函數拆解成兩部分。接下來再改造一下,傳遞數據的部分代碼:
1.將查詢代碼在 getMemoList 完成
2.將查詢結果在列表頁面進行列表渲染
這樣我們就成功的將數據庫的數據顯示出來了
接下來,我們就來把所有方法進行云API的實現。
查看數據詳情
在這里我們就不能用index下標來,通常與后端交互我們都會采用ID來進行查詢,每條數據都會生成一個ID字段,字段名稱為_id。
獲取id進行頁面傳遞
查詢方法改造,由于通過id查詢是非常常用的方法,所以云API直接有個doc方法傳入id即可查詢:
memo.js 中 getMemoInfo 函數代碼
查詢方法調用:
edit.js 中 onLoad 函數代碼
新增備忘錄數據
新增方法改造:
memo.js 中 addMemoInfo 函數
調用方法:
edit.js 中 save 函數新增邏輯代碼片段
新增成功后會返回新增數據的id信息。
然后在數據庫當中就可以看到新增的數據了。
然后在看下列表返回的數據,只有自己新增的那條數據了。
修改備忘錄數據
修改方法改造:
memo.js 中 updateMemoInfo 函數。
之前修改的邏輯是采用的刪除之后再新增做的“假”修改,這次我們直接采用修改方法。
edit.js 中 save 函數修改邏輯代碼片段
返回結果中的 updated 是代表修改成功數據的數量
刪除備忘錄數據
刪除方法改造:
memo.js 中 deleteMemoInfo 函數
調用方法:
list.js 中 del 函數
在這里要注意的是刪除之后還需要調用查詢所有數據方法對列表更新。
返回值 removed 為刪除數量。
總結
在本小節我們使用云API在小程序端操作了云數據庫,學習了以下函數:
- 使用 get() 進行了數據庫的查詢
- 使用 add() 進行了數據添加
- 使用 update() 進行了數據修改
- 使用 remove() 進行了數據刪除
在這里我們就已經完成了使用云數據庫來存儲備忘錄數據。