专栏首页前端全栈开发者【图文教程】前端程序员的利器,如何使用LeanCloud存储和更新你的静态页面数据?
原创

【图文教程】前端程序员的利器,如何使用LeanCloud存储和更新你的静态页面数据?

公众号原文地址:http://mp.weixin.qq.com/s?__biz=MzI0MDIwNTQ1Mg==&mid=529008837&idx=1&sn=02cc92331ef809e67677d9382d2ae912&chksm=7362c32644154a30e300067fc016ca1f65fc78113a5214a3b3bc696f9953b3e8b11f9c760f17#rd

Serverless 云开发是现在的大热门和趋势,各大云服务厂商都已经支持 FaaS(函数即服务) 云开发方式,微信小程序云开发是典型的例子。

1. 背景

我的博客有个“我的小铺”频道,是我个人书籍出售展示页面,其实是一个静态页面,托管在 coding.net 上,每次更新页面,比如上架下架一本书,都要打开源码编辑代码然后 push 到服务器中,步骤是:

  1. 打开页面源码
  2. 上架一本书要 copy 已有的 DOM 结果,修改相应位置的值,比如标题、描述、价格等等
  3. 修改完毕,git push
  4. 等待 Coding Pages 部署

缺点是:如果是要标记一本书售罄这样的简单动作也需要修改一下HTML。

此前一直是这么做的,这个过程也很简单没什么问题。但是由于 coding.net 已经卖身腾讯云了,个人版服务很不稳定,直到前段时间 push 代码后 coding.net 一直部署出错,修改代码后真实环境数据无改变,不得不得重新关闭 Pages 服务再打开。

我的小铺页面

2. 需求

于是我在想,把数据动态化,DOM 结构固定化,通过数据渲染的方式来改变页面,比如下架一本书,我只需要把某个值设为 false 即可,不需要 push代码,不需要经过 Coding Pages 服务部署。

3. 方案

很早以前就想使用一个配置文件如JSON,但是就该JSON同样要push代码,而且会被浏览器缓存,这跟直接修改代码没什么区别。

然后最近就想起了找云服务,比如云数据库之类的,于是一通趴拉和寻找,试过阿里云、APICloud、腾讯云等等,都不是我想要的,要么一时半会儿不会用?,要么不提供 HTTP API,要么免费一个月后面要收费,我就一丁点儿数据犯不着,最后发现了 LeanCloud 最符合我的要求。

LeanCloud.png

LeanCloud 的数据存储服务个人用户可免费使用一定容量,不需要提供域名,而且提供 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.png

4.2 在页面中调用

LeanCloud 提供了 JavaScript SDK 和用于 Web页面的 CDN 链接(官方文档)

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.0.0/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 的可视化界面做的也很方便。

全文完。


如果对你有一点点帮助,可以点个关注。

作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州,聚焦大前端技术的公众号,分享我的原创或精选文章,欢迎关注。我的个人微信(dunizb),欢迎添加好友进一步交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

相关文章

  • 【小技巧】几个好用的Chrome DevTools配置

    在Firefox中,status显示有颜色区分,且状态、方法和地址的顺序阅读更加友好,喜欢Firefox的朋友可以试试

    Dunizb
  • 【图文教程】MongoDB云数据库Atlas的使用

    学习使用 MongoDB 官方提供的免费云数据库,初学者的学习利器,手把手图文教程。

    Dunizb
  • System.out.println与System.err.println的区别

    System.out.println能重定向到别的输出流,这样的话你在屏幕上将看不到打印的东西了, 而System.err.println只能在屏幕上实现打印,...

    Dunizb
  • 图数据库neo4j介绍(2)——概念

    DC童生
  • 在Vs Code中借助腾讯云实现图片的自动上传(上)

    它在名义上是一个编辑器,但很多人都在暗地里叫它IDE。虽然是被强推上了这个名号,但它还能够写写markdown,写写latex,画画思维导图……

    叮当叮
  • 宝塔关闭h2

    背景:腾讯云CDN回源不支持Upgrade:h2,但是宝塔新版本极速安装默认开启了Upgrade:h2,现在教大家如何关闭Upgrade:h2(实际上这个功能目...

    215431047
  • 项目管理之时间管理

    为了确保项目最终的按时完成的一系列管理过程。它包括具体活动的界定,如:活动排序、时间估计、进度安排及时间控制等项工作。

    netkiller old
  • 腾讯云 Elasticsearch 实战篇(十七) 构建日志分析系统

    在前面的众多章节中,我们从开源架构ELK讲到腾讯云Elasticsearch Service .最近的六篇中我们讲了腾讯云ES集群的选择、安装、运维监控...

    南非骆驼漫谈ELK Stack
  • wordpress站点到底要不要做sitemap网站地图,为什么?

    一般来说,几乎所有的网站都需要网站地图的,这个能一方面来说方便搜索引擎的收录和抓取,一方面一些用户可能也会看站点地图了解网站内容和结构的,所以一般来说的话站点地...

    wordpress建站吧
  • Win10系统在任务栏显示实时网络速度的设置方法

    在Windows 10系统运行时,我们有时会感到网络速度太慢,很想查看一下网络速度,如何才能将网络的实时速度显示在任务栏中呢?

    壬辰龙99

扫码关注云+社区

领取腾讯云代金券