使用LeanCloud存儲和更新你的靜態頁面數據

  • 2019 年 12 月 27 日
  • 筆記

Serverless 雲開發是現在的大熱門和趨勢，各大雲服務廠商都已經支援 FaaS(函數即服務) 雲開發方式，微信小程式雲開發是典型的例子。

背景

我的部落格有個「我的小鋪」頻道，是我個人書籍出售展示頁面，其實是一個靜態頁面，託管在 coding.net 上，每次更新頁面，比如上架下架一本書，都要打開源碼編輯程式碼然後 push 到伺服器中，步驟是：

  1. 打開頁面源碼
  2. 上架一本書要 copy 已有的 DOM 結果，修改相應位置的值，比如標題、描述、價格等等
  3. 修改完畢，git push
  4. 等待 Coding Pages 部署

缺點是：如果是要標記一本書售罄這樣的簡單動作也需要修改一下HTML。

此前一直是這麼做的，這個過程也很簡單沒什麼問題。但是由於 coding.net 已經賣身騰訊雲了，個人版服務很不穩定，直到前段時間 push 程式碼後 coding.net 一直部署出錯，修改程式碼後真實環境數據無改變，不得不得重新關閉 Pages 服務再打開。

需求

於是我在想，把數據動態化，DOM 結構固定化，通過數據渲染的方式來改變頁面，比如下架一本書，我只需要把某個值設為 false 即可，不需要 push程式碼，不需要經過 Coding Pages 服務部署。

store.png

方案

很早以前就想使用一個配置文件如JSON，但是就該JSON同樣要push程式碼，而且會被瀏覽器快取，這跟直接修改程式碼沒什麼區別。

然後最近就想起了找雲服務，比如雲資料庫之類的，於是一通趴拉和尋找，試過阿里雲、APICloud、騰訊雲等等，都不是我想要的，要麼一時半會兒不會用?，要麼不提供 HTTP API，要麼免費一個月後面要收費，我就一丁點兒數據犯不著，最後發現了 LeanCloud 最符合我的要求。

LeanCloud.png

LeanCloud 的數據存儲服務個人用戶可免費使用一定容量，不需要提供域名，而且提供 RESTful API 用於 Web 頁面調用，簡單方便。

使用 LeanCloud

註冊和創建表

LeanCloud 註冊後首先要實名驗證，這個很簡單，只需要提供身份證號碼即可、完善相關開發者資訊後創建應用

image.png

填寫應用名稱，選擇開發版

image.png

上述操作都無誤後會有如下介面，存儲 - 結構化數據，創建 Class 其實創建一個數據表，如果你懂關係型資料庫如 MySQL 的話你應該很明白。

image.png

創建 Class 後，就可以為表添加欄位了，點擊添加列添加你想要的欄位

image.png

之後就可以添加行，為你的的列欄位輸入值

image.png

之後你還可以雙擊列進行編輯。

特別需要注意的是許可權設置問題，這裡 ACL 許可權一定要設置 read 為所有用戶，否則我們介面請求不到數據，因為我這是只讀應用，所以read 保證為所有用戶即可，write 無所謂了，為了安全起見還是別所有用戶吧。

LeanCloud9.png

在頁面中調用

LeanCloud 提供了 JavaScript SDK 和用於 Web頁面的 CDN 鏈接（官方文檔)

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>

但是我們都是查詢操作，所以根本不需要，只需要 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 中可以查看

image.png

這樣就完成了，只需要在後台向Class中修改數據頁面一刷新就可以看到變化了，不需要去動程式碼了。比如我要標記一本書售罄，我只要 設置一下 is_can_buy 欄位為 false 即可（修改欄位值雙擊相應欄位單元格）

LeanCloud8.png

LeanCloud 的可視化介面做的也很方便。

全文完。

本文代表個人觀點，內容僅供參考。若有不恰當之處，望不吝賜教！

本文鏈接：https://zhangbing.site/2019/12/01/使用LeanCloud存儲靜態頁面數據/。

Tags:

VirMach 便宜 VPS