[发财图床] 与LeanCloud交互

前言

在本项目中，我主要通过LeanCloud来实现Serverless，因此与后端的交互也是通过LeanCloud提供的API

代码实现

本项目中的交互较为简单，主要分为四个部分

用户注册

LeanCloud提供了注册的接口，只需要设置用户名和密码即可

const user = new AV.User();
user.setUsername(username);
user.setPassword(password);
user.signUp().then(function (loginedUser) {
  ...
}, (function (error) {
      alert(JSON.stringify(error));
}));

用户登录与注销

login(username: string, password: string) {
  return new Promise((resolve, reject) => {
    User.logIn(username, password).then((loginedUser) => resolve(loginedUser), error => reject(error));
  });
},
logout() {
  User.logOut().then();
},

上传图片

只需要设置文件名，所有者和地址即可上传文件

//Uploader
add(file: any, filename: string) {
  const item = new AV.Object('Image');
  const avFile = new AV.File(filename, file);
  item.set('filename', filename);
  item.set('owner', AV.User.current());
  item.set('url', avFile);
  return new Promise<AV.Object>((resolve, reject) => {
    item.save().then(serverFile => resolve(serverFile), error => reject(error));
  });
},

//image
upload() {
  this.isUploading = true;
  this.clearServerFile();
  return new Promise((resolve, reject) => {
    Uploader.add(this.file, this.filename)
      .then(serverFile => {
        this.setServerFile(serverFile);
        resolve(serverFile);
      })
      .catch(error => reject(error))
      .finally(() => this.changeIsUploading());
  });
}

查询历史记录

通过limit和skip实现分页查询，通过descending来排序，通过equalTo设置查询条件

find({page = 0, limit = 10}) {
  const query = new AV.Query('Image');
  query.limit(limit);
  query.skip(page * limit);
  query.descending('createdAt');
  query.equalTo('owner', AV.User.current());
  return new Promise<Queriable[]>((resolve, reject) => {
    query.find().then(results => resolve(results)).catch(error => reject(error));
  });
}

后记

通过LeanCloud的API来操作整体还是非常方便的，通过分析LeanCloud后台的数据库不难看出其实除了我们提供的信息之外，LeanCloud自己也给上传内容进行了处理，比如进行加密，生成唯一的ID，增加创建时间和修改时间等等，因此我们在自定义后端接口的时候也可以模仿这个