LeanCloud 傻瓜教程

3,016 阅读3分钟

LeanCloud是一个非常好用的数据库,不要钱而且不要服务器。只需要你会两点:

  1. 基本的JS语法,包括Promise
  2. 你了解http

如果你不懂,你就看不懂文档,就不会使用。所以前端要会JS,就是为了看懂文档。
面试造飞机,工作拧螺丝就是这个道理,需要你懂得别人的代码是什么意思,能看懂别人写的文档,自己拿过来会用就可以了,不需要你去从 0 开始写。


第一部分:创建数据库

简单步骤:

  1. 创建一个应用 resume-2019
  2. 引入 AV-min.js 得到window.AV
  3. 初始化 AV 对象(代码直接拷)
  4. 新建一条数据(代码直接拷)

具体步骤:

以创建一个JS的数据库为例

  1. 注册账号
  2. 点击控制台-应用-创建应用-(开发者版)-创建成功
  3. 进入仓库-点击帮助-快速入门(本次按照JavaScript为例)
  4. 选择开发语言或平台-选择 LeanCloud 应用-找到CDN-复制存储服务代码放入html中
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.14.0/dist/av-min.js"></script>
  1. 找到初始化-复制CDN对应的代码放入<scrpit>···</script>或者新建一个js文件(例如message.js)并放入代码,同时在html中引入message.js
var APP_ID = 'qwGKSwfSatRWccr9Bc384x9k-gzGzoHsz';// 注意 此处的ID和KEY每个人每个库是不一样的
var APP_KEY = 'asxDtkN1cGWq68LzdvM16WUG'; // 请复制你对应的代码

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});
  1. 找到验证-在命令行中输入ping "htgkswfs.api.lncld.net",确认本地网络环境是可以访问 LeanCloud 服务器。如果当前网路正常将会得到如下响应:(类似即可)
PING api-ucloud.leancloud.cn (123.59.41.31): 56 data bytes
64 bytes from 123.59.41.31: icmp_seq=0 ttl=51 time=9.032 ms
64 bytes from 123.59.41.31: icmp_seq=1 ttl=51 time=7.290 ms
64 bytes from 123.59.41.31: icmp_seq=2 ttl=51 time=8.131 ms
64 bytes from 123.59.41.31: icmp_seq=3 ttl=51 time=9.689 ms

--- api-ucloud.leancloud.cn ping statistics ---
10 packets transmitted, 10 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 6.288/7.984/9.689/0.997 ms
  1. 在入<scrpit>···</script>或者message.js中加入测试代码
// 创建TestObject表
var TestObject = AV.Object.extend('TestObject');
// 在表中创建一行数据
var testObject = new TestObject();
// 数据内容是words: 'Hello World!' 保存
// 如果保存成功,则运行 alert('')
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

然后打开 控制台 > 存储 > 数据 > TestObject,如果看到如下内容,说明 SDK 已经正确地执行了上述代码,安装完毕。

数据库完成后,即可在html上增加自己想要的样式比如form、input等,结合上文代码就可以往数据库里传输信息了。

注意:要监听form的submit,不要监听click,监听form的话,无论用户是点击提交按钮还是回车,都可以上传数据;如果监听click,需要写更多的代码才能实现回车上传数据这个功能,而且输入框越多代码越多。

更多的信息,请看LeanCloud文档


第二部分:调用数据库

如果你还想把数据库里的内容展示在html中,就需要参考LeanCloud 的API文档了。

例如实现留言板功能,不仅要能上传数据,还要展示数据。

参考LeadCloud 数据存储开发指南 · JavaScript

使用方法:
目标:获取数据库里所有的数据

  1. 获取对象: 发现不行,因为我们是自己创建的Message表,不知道它应该get什么。
  2. 批量操作: 发现用find就可以了。
  3. 通过console.log(messages),发现获得的数组的对象的第一个属性attributes的第一个属性就是content,就是我们想要的数据。

OK,任务完成!

这只是一个例子,你学会了如何看文档,结合一定的JS基础,就能做出你想要的功能和效果了。