【图文教程】前端使用云存储，利用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 的可视化界面作的也很方便。

全文完。

---

关注公众号，第一时间接收最新文章。若是对你有一点点帮助，能够点喜欢点赞点收藏，还能够小额打赏做者，以鼓励做者写出更多更好的文章。