Serverless 雲開發是現在的大熱門和趨勢，各大雲服務廠商都已經支持 FaaS(函數即服務) 雲開發方式，微信小程序雲開發是典型的例子。
背景
我的博客有個“我的小鋪”頻道，是我個人書籍出售展示頁面，其實是一個靜態頁面，託管在 coding.net 上，每次更新頁面，比如上架下架一本書，都要打開源碼編輯代碼然後 push 到服務器中，步驟是：
- 打開頁面源碼
- 上架一本書要 copy 已有的 DOM 結果，修改相應位置的值，比如標題、描述、價格等等
- 修改完畢，git push
- 等待 Coding Pages 部署
缺點是：如果是要標記一本書售罄這樣的簡單動作也需要修改一下HTML。
此前一直是這麼做的，這個過程也很簡單沒什麼問題。但是由於 coding.net 已經賣身騰訊雲了，個人版服務很不穩定，直到前段時間 push 代碼後 coding.net 一直部署出錯，修改代碼後真實環境數據無改變，不得不得重新關閉 Coding Pages 服務再打開。
需求
於是我在想，把數據動態化，DOM結構固定化，通過數據渲染的方式來改變頁面，比如下架一本書，我只需要把某個值設為 false 即可，不需要push代碼，不需要經過 Coding Pages 服務部署。
方案
很早以前就想使用一個配置文件如 JSON，但是就該 JSON 同樣要 push 代碼，而且會被瀏覽器緩存，這跟直接修改代碼沒什麼區別。
然後最近就想起了找雲服務，比如雲數據庫之類的，於是一通趴拉和尋找，試過阿里雲、APICloud、騰訊雲等等，都不是我想要的，要麼一時半會兒不會用😅，要麼不提供 HTTP API，要麼免費一個月後面要收費，我就一丁點兒數據犯不着，最後發現了 LeanCloud 最符合我的要求。
LeanCloud 的數據存儲服務個人用户可免費使用一定容量，不需要提供域名，而且提供 RESTful API 用於 Web 頁面調用，簡單方便。
使用 LeanCloud
註冊和創建表
LeanCloud 註冊後首先要實名驗證，這個很簡單，只需要提供身份證號碼即可、完善相關開發者信息後創建應用
填寫應用名稱，選擇開發版
上述操作都無誤後會有如下界面，存儲 - 結構化數據，創建 Class 其實創建一個數據表，如果你懂關係型數據庫如 MySQL 的話你應該很明白。
創建 Class 後，就可以為表添加字段了，點擊添加列添加你想要的字段
之後就可以添加行，為你的的列字段輸入值
之後你還可以雙擊列進行編輯
特別需要注意的是權限設置問題，這裏 ACL 權限一定要設置 read 為所有用户，否則我們接口請求不到數據，因為我這是隻讀應用，所以read 保證為所有用户即可，write 無所謂了，為了安全起見還是別所有用户吧。
在頁面中調用
由於只是查詢操作，所以也不需要引入SDK了，直接在頁面進行 Ajax 請求即可。由於我的頁面很簡單，所以也不用什麼第三方 Ajax 請求庫了，直接使用 Fetch API，只是為了渲染頁面使用了 Vue.js CDN。全部JS代碼如下
const baseUrl = 'https://oobzicxg.lc-cn-n1-shared.com/1.1/'
const header = {
'x-avoscloud-application-id': '你的應用AppID',
'x-avoscloud-session-token': '你的應用AppID',
'x-avoscloud-application-key': '你的應用AppKey'
}
new Vue({
el: '#app',
data: {
books: [],
softwares: []
},
created() {
const apiUrl = baseUrl + 'classes/BlogStore?limit=50&&order=-updatedAt&&'
fetch(apiUrl, {
headers: header
})
.then(response => response.json())
.then(res => {
this.books = res.results.filter(item => item.type === 'book')
this.softwares = res.results.filter(item => item.type === 'software')
}).catch(err => {
console.log('err', err)
});
}
})然後頁面就是 v-for 循環了。
應用 AppID 和應用 AppKey 在設置 - 應用 Keys 中可以查看
這樣就完成了，只需要在後台向Class中修改數據頁面一刷新就可以看到變化了，不需要去動代碼了。比如我要標記一本書售罄，我只要 設置一下 is_can_buy 字段為 false 即可（修改字段值雙擊相應字段單元格）
LeanCloud 的可視化界面做的也很方便。
全文完。
關注公眾號，第一時間接收最新文章。如果對你有一點點幫助，可以點喜歡點贊點收藏，還可以小額打賞作者，以鼓勵作者寫出更多更好的文章。
