公众号原文地址：http://mp.weixin.qq.com/s?__biz=MzI0MDIwNTQ1Mg==&mid=529008837&idx=1&sn=02cc92331ef809e67677d9382d2ae912&chksm=7362c32644154a30e300067fc016ca1f65fc78113a5214a3b3bc696f9953b3e8b11f9c760f17#rd
Serverless 云开发是现在的大热门和趋势，各大云服务厂商都已经支持 FaaS(函数即服务) 云开发方式，微信小程序云开发是典型的例子。
1. 背景
我的博客有个“我的小铺”频道，是我个人书籍出售展示页面，其实是一个静态页面，托管在 coding.net 上，每次更新页面，比如上架下架一本书，都要打开源码编辑代码然后 push 到服务器中，步骤是：
- 打开页面源码
- 上架一本书要 copy 已有的 DOM 结果，修改相应位置的值，比如标题、描述、价格等等
- 修改完毕，git push
- 等待 Coding Pages 部署
缺点是：如果是要标记一本书售罄这样的简单动作也需要修改一下HTML。
此前一直是这么做的，这个过程也很简单没什么问题。但是由于 coding.net 已经卖身腾讯云了，个人版服务很不稳定，直到前段时间 push 代码后 coding.net 一直部署出错，修改代码后真实环境数据无改变，不得不得重新关闭 Pages 服务再打开。
我的小铺页面2. 需求
于是我在想，把数据动态化，DOM 结构固定化，通过数据渲染的方式来改变页面，比如下架一本书，我只需要把某个值设为 false 即可，不需要 push代码，不需要经过 Coding Pages 服务部署。
3. 方案
很早以前就想使用一个配置文件如JSON，但是就该JSON同样要push代码，而且会被浏览器缓存，这跟直接修改代码没什么区别。
然后最近就想起了找云服务，比如云数据库之类的，于是一通趴拉和寻找，试过阿里云、APICloud、腾讯云等等，都不是我想要的，要么一时半会儿不会用?，要么不提供 HTTP API，要么免费一个月后面要收费，我就一丁点儿数据犯不着，最后发现了 LeanCloud 最符合我的要求。
LeanCloud.pngLeanCloud 的数据存储服务个人用户可免费使用一定容量，不需要提供域名，而且提供 RESTful API 用于 Web 页面调用，简单方便。
4. 使用 LeanCloud
4.1 注册和创建表
LeanCloud 注册后首先要实名验证，这个很简单，只需要提供身份证号码即可、完善相关开发者信息后创建应用
image.png填写应用名称，选择开发版
image.png上述操作都无误后会有如下界面，存储 - 结构化数据，创建 Class 其实创建一个数据表，如果你懂关系型数据库如 MySQL 的话你应该很明白。
image.png创建 Class 后，就可以为表添加字段了，点击添加列添加你想要的字段
image.png之后就可以添加行，为你的的列字段输入值
image.png之后你还可以双击列进行编辑。
特别需要注意的是权限设置问题，这里 ACL 权限一定要设置 read 为所有用户，否则我们接口请求不到数据，因为我这是只读应用，所以read 保证为所有用户即可，write 无所谓了，为了安全起见还是别所有用户吧。
LeanCloud9.png4.2 在页面中调用
LeanCloud 提供了 JavaScript SDK 和用于 Web页面的 CDN 链接（官方文档)
代码语言：txt复制<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.0.0/dist/av-min.js"></script>但是我们都是查询操作，所以根本不需要，只需要 Ajax 请求接口即可，所以也不用什么第三方 Ajax 请求库了，直接使用 Fetch API，只是为了渲染页面使用了 Vue.js CDN。全部JS代码如下
代码语言：txt复制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.pngLeanCloud 的可视化界面做的也很方便。
全文完。
如果对你有一点点帮助，可以点个关注。
作者简介：做工程不做码农(微信公众号同名)，Web前端工程师，7年开发经验，坐标杭州，聚焦大前端技术的公众号，分享我的原创或精选文章，欢迎关注。我的个人微信(dunizb)，欢迎添加好友进一步交流。
