【圖文教程】前端使用雲存儲，利用LeanCloud管理頁面數據

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

背景

個人博客有個「個人小鋪」頻道，是我我的書籍出售展現頁面，實際上是一個靜態頁面，託管在 coding.net 上，每次更新頁面，好比上架下架一本書，都要打開源碼編輯代碼而後 push 到服務器中，步驟是：

1. 打開頁面源碼
2. 上架一本書要 copy 已有的 DOM 結果，修改相應位置的值，好比標題、描述、價格等等
3. 修改完畢，git push
4. 等待 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 的可視化界面作的也很方便。

全文完。

---

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。