云服务器LeanCloud的使用

发表于 | 分类于

云服务器LeanCloud的使用
通过一个小demo了解基本用法
完整文档
数据结构：学生选课系统

初始化

  1. 登陆
  • 选择应用 -> 创建新应用 (相当于创建一个服务器)
  • 设置完新应用名称后，点击创建
  • 这样就创建了一个服务器
  • 点击应用名称进入对应服务器
  • 点击创建Class，从而创建数据库
  • 输入Class名称后，点击创建Class
  • 根据帮助手册操作
  • 选择开发语言或平台 -> 选择 LeanCloud 应用
  • 获取SDK：选择CDN加速，将av-min.js引入html文件中，得到window.AV对象
  • 初始化：将代码引入js文件中进行初始化
  • 验证：ping一下，看看能否访问LeanCloud的服务器
  • ping通后，在项目中编写提供的测试代码
  • 然后打开 控制台 > 存储 > 数据 > TestObject，如果看到如下内容，说明 SDK 已经正确地执行了上述代码，安装完毕。
1
2
3
4
5
6
7
var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var APP_KEY = 'xxxxxxxxxxx';
AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

保存数据

1
2
3
4
5
6
7
8
9
10
11
12
//在数据库中创建Class，名为Song
let Song = AV.Object.extend('Song');
//获取名为Song的Class
let song = new Song();
song.save({
  songName:'小幸运',
  singer:'田馥甄'
}).then(function(res) {
  console.log(res)
  alert('上传成功!');
})

一个一个set

除了song.save({数据})，你也可以一个一个地set

1
2
3
4
5
6
7
8
9
10
11
var Song = AV.Object.extend('Song');
var song = new Song();
// 设置名称
song.set('name','小幸运');
// 设置歌手
song.set('singer','田馥甄');
song.save().then(function (res) {
  console.log(res);
}, function (error) {
  console.error(error);
});

修改数据

打开文档 –> 对象 –> 更新对象

1
2
3
4
5
6
// 第一个参数是 className，第二个参数是 objectId
let todo = AV.Object.createWithoutData('Todo', '5745557f71cfe40068c6abe0');
// 修改属性
todo.set('content', '每周工程师会议，本周改为周三下午3点半。');
// 保存到云端
todo.save();

获取数据

获取所有数据

数据存储开发指南

选择开发指南中的对象 –> 批量操作
获取数据：

1
2
3
4
5
6
7
8
var query = new AV.Query('Message');//对应数据库中的Class名称
//query.include('owner'); 包含用户信息,否则返回的owner里面为空
query.find().then(function(datas) {
    console.log(datas.toJSON());//获取全部数据
    datas.forEach(function(value) {
    	console.log(value); //遍历数据
    });
});

.toJSON()

如果需要一次性获取返回对象的所有属性（比如进行数据绑定）而非显式地调用 get(属性名)，可以利用 AV.Object 实例的 toJSON() 方法 https://leancloud.cn/docs/leanstorage_guide-js.html#hash-1546606634

1
2
3
4
5
6
7
var query = new AV.Query('Todo');
query.get('558e20cbe4b060308e3eb36c').then(function (todo) {
  console.log(todo.toJSON());
}).catch(function (error) {
  // 异常处理
  console.error(error);
});

统计数量count

查询结果数量

1
2
3
4
5
6
//获取Todo的总数量
var query = new AV.Query('Todo');
query.count().then(function (count) {
    console.log(count);
}, function (error) {
});

按条件统计数量

1
2
3
4
5
6
7
//统计Todo中，title为test的数量
var query = new AV.Query('Todo');
query.equalTo('title', 'test');
query.count().then(function (count) {
    console.log(count);
}, function (error) {
});

返回指定属性

返回Todo中的title和content字段

1
2
3
4
5
6
7
8
9
var query = new AV.Query('Todo');
query.select(['title', 'content']);
query.find().then(function (todo) {
  console.log(todo.get('title')); // √
  console.log(todo.get('content')); // √
  console.log(todo.get('location')); // undefined
}, function (error) {
  // 异常处理
});

所指定的属性或字段也支持 Pointer 类型。例如，获取 Todo 这个对象的所有者信息（owner 属性，Pointer 类型），仅展示这个所有者的 username：

1
query.select('owner.username');

返回满足条件的数据

https://leancloud.cn/docs/leanstorage_guide-js.html#hash-1971670686
返回表Todo中，所有title:头条新闻的项,返回的是个数组

1
2
3
4
5
6
var query = new AV.Query('Todo');
//query.include('user');
query.equalTo('title', '头条新闻');//筛选出title为头条新闻的数据
query.find().then(res => {
  console.log(res);
})

限定返回数量和排序

限定返回数量和排序

设置返回 10 条结果：

1
2
3
4
5
6
7
8
9
10
var query = new AV.Query('Todo');
  // 按时间，从最老的开始返回
  query.ascending('createdAt');
  // 按时间，选出最新的返回
  query.descending('createdAt');
query.limit(10);// 最多返回 10 条结果
query.find().then(res =>{
  console.log(res)
})

分页

将 skip 与 limit 搭配使用可以实现翻页效果。例如，在每页显示数量为 10，要获取第 3 页的对象：

1
2
3
4
5
6
7
var query = new AV.Query('Todo');
query.descending('createdAt');//从最新的返回
query.limit(10);// 最多返回 10 条结果
query.skip(20);// 跳过 20 条结果(从第21条开始)
query.find().then(res=>{
  console.log(res)
  })

根据objectId获取某个数据

1
2
3
4
5
6
7
8
let query = new AV.Query('Todo');
//query.include('owner'); 包含用户信息,否则返回的owner里面为空
query.get('57328ca079bc44005c2472d0').then(function (todo) {
  // todo 就是 id 为 57328ca079bc44005c2472d0 的 Todo 对象实例
  console.log(todo.toJSON())
}, function (error) {
  // 异常处理
});

删除数据

通过destroy删除数据

1
2
3
4
5
6
var todo = AV.Object.createWithoutData('Todo', '57328ca079bc44005c2472d0');
todo.destroy().then(function (success) {
  // 删除成功
}, function (error) {
  // 删除失败
});

判断当前用户是否登录状态

文档 -> 用户 -> 登录 -> 当前用户

1
2
3
4
5
6
7
8
9
10
11
var currentUser = AV.User.current();
  if (currentUser) {
     // 如果true，说明用户已经处于登录状态
     console.log(currentUser)
     currentUser.save({
      title:'1'
    });
  }
  else {
    //currentUser 为空时，跳转到注登录界面…
  }

新用户注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 新建 AVUser 对象实例
var user = new AV.User();
// 设置用户名
user.setUsername('Tom');
// 设置密码
user.setPassword('cat!@#123');
// 设置邮箱
user.setEmail('tom@leancloud.cn');
//设置自定义属性，不如头像
user.set('avatar','头像网址')
user.signUp().then(function (loginedUser) {
    console.log(loginedUser);
    console.log(loginedUser.toJSON())
}, function (error) {
  //console.dir(error);
  alert(error.rawMessage);
});

当用户忘记密码时，可以使用LeanCloud提供的通过邮箱重置密码服务

如果注册不成功，请检查一下返回的错误对象。错误代码 202，即 _User 表中的 username 字段已存在相同的值，此时需要提示用户该用户名已被别人注册过了。同样，邮件 email 和手机号码 mobilePhoneNumber 字段也要求在各自的列中不能有重复值出现，否则会出现 203(邮箱已被注册过)、214(手机号已被注册过) 错误。

用户名和密码登录

https://leancloud.cn/docs/leanstorage_guide-js.html#hash-452075549

1
2
3
4
5
6
7
8
9
10
11
12
13
AV.User.logIn('Tom', 'cat!@#123').then(function (loginedUser) {
  console.log(loginedUser);
  console.log(loginedUser.toJSON());
  loginedUser.set('avatar', '头像网址');//设置自定义属性
  loggedInUser.save().then(res => console.log(res.toJSON())); //查看更新后的数据
}, function (error) {
  console.dir(error);
  if(error.code===211){
    alert('该用户不存在');
  }else if(error.code===210){
    alert('用户名和密码不匹配');
  }
});

错误代码 211，表示用户名不存在
210，用户名和密码不匹配
200，成功~~

owner字段

1
2
3
4
5
6
7
8
9
10
11
12
13
var currentUser = AV.User.current();
var Product = AV.Object.extend('Product');
if (currentUser){//如果登录了
  var product = new Product();
  product.save({
    title:'苹果',
    price:'12元',
    owner:currentUser //指向User
    //owner:AV.User.current()
  }).then(data => {
    console.log(data);
  });
}

登出

文档 -> 用户 -> 重置密码 -> 登出

1
2
3
4
AV.User.logOut();
//此时currentUser为null
var currentUser = AV.User.current();

错误码error.code

https://leancloud.cn/docs/error_code.html

上传图片

文档
讨论区

1
<input id="file" type="file" accept="image/*">
1
2
3
4
5
6
7
8
9
var avFile;
var f = document.querySelector('#file');
var filename = f.files[0].name;
f.addEventListener('change', function() {
    avFile = new AV.File(filename, f.files[0]).save()
    .then(data=>console.log(data.url()),error=>console.log(error));
});
//data => console.log(data.thumbnailURL(200, 200)) //返回200x200的图片地址

JS Bin

结合Vue

新建leancloud-config.js

1
2
3
4
5
6
7
import AV from 'leancloud-storage';
var appId = 'xxxxxxxxxxx';
var appKey = 'yyyyyy';
AV.init({appId,appKey});
export default {Leancloud:AV};

然后在入口文件main.js中引入

1
2
3
4
import $AV from './leancloud-config.js';
Vue.prototype.$AV = $AV;
//打印this.$AV,得到 Leancloud:{数据}

-------------本文结束感谢您的阅读-------------