数据存储入门教程 · JavaScript

欢迎使用 LeanCloud。本教程将以一个发布商品的场景为例讲解 LeanCloud 的数据存储 LeanStorage 的核心使用方法。

你将学到什么

• 用户系统：如何注册、登录和登出
• 保存数据到 LeanCloud 平台
• 从客户端查询数据
• 处理数据表之间的简单关系

如何学习

您可以以下面三种方式通过提供的示例来熟悉基本功能：

1. 直接运行本教程配套的 Demo（以下简称为 Demo）。你可以通过浏览界面，同时查看里面的代码，对 LeanStorage 有一个初步的了解。
2. 创建一个新应用。找到 Demo 里的初始化代码，替换为你的 App ID 和 App Key，然后再次运行 Demo。这时候，通过对比运行 Demo 里的代码，同时观察你的控制台的数据变化，来全面深入地理解 LeanStorage。
3. 新建一个项目，开发出一个一模一样的 Demo。照搬教程 Demo 里各个业务部分的代码，同时需要你额外地去编写界面。

要做的准备

• 请下载你所需要平台的 Demo;
• 在开始第三步「新建一个项目，开发出一个一模一样的 Demo」之前，请先阅读 JavaScript 安装指南，集成 SDK。

主要步骤

1、用户注册和登录

打开 Demo 后首先看到的是登录界面。然后点击「注册」来新建一个用户账号。

AV.User 是用来描述一个用户的特殊对象，与之相关的数据都保存在 _User 数据表中。它和下面所讲到的 AV.Object 本质上是相同的。

输入用户名、密码和邮箱，点击注册，成功后在你的控制台的 _User 表里，会对应地生成一条用户数据，具体代码如下：

  var username = $('#inputUsername').val();
  var password = $('#inputPassword').val();
  var email = $('inputEmail').val();

  // LeanCloud - 注册
  // https://leancloud.cn/docs/leanstorage_guide-js.html#注册
  var user = new AV.User();
  user.setUsername(username);
  user.setPassword(password);
  user.setEmail(email);
  user.signUp().then(function (loginedUser) {
    // 注册成功，跳转到商品 list 页面
  }, (function (error) {
      alert(JSON.stringify(error));
  }));

如果已有账号，那就在登录页面，通过以下代码完成登录操作：

  var username = $('#inputUsername').val();
  var password = $('#inputPassword').val();

  // LeanCloud - 登录
  // https://leancloud.cn/docs/leanstorage_guide-js.html#用户名和密码登录
  AV.User.logIn(username, password).then(function (loginedUser) {
    // 登录成功，跳转到商品 list 页面
  }, function (error) {
    alert(JSON.stringify(error));
  });

2、发布第一件商品

登录成功后，假设我们要发布的商品具有以下属性：

• 商品标题
• 商品描述
• 商品价格
• 封面图片
• 所有者

我们可以将一件商品，对应到一个 AV.Object 的实例。AV.Object 是 LeanCloud 提供的面向对象存储模型的核心概念，一个 Object 可以拥有若干属性，每一个属性就是一个键值对（key-value）。像上面的商品属性，我们可以设计成如下的存储 schema：

属性名	类型	含义
title	String	商品标题
description	String	商品描述
price	Number	商品价格
owner	Pointer	所有者
image	File	封面图片

这里还有两个属性比较特殊：

• 所有者
• 封面图片

Pointer 类型，本质上是指向另外一张表的指针。在这个案例里，owner 字段，就是 Product 表里，用来指向 _User 表里一名用户的指针。

File 类型，对应着 AV.File。 AV.File 是用来描述一个文件的特殊对象，与之相关的数据都保存在 _File 数据表中。

依次输入商品标题、商品描述和商品价格，并从相册挑选一张封面图片后，点击发布，成功后，在你的控制台里会新增一张名为 Product 的表，同时表里会有一条新数据。具体代码如下：

  var title = $('#inputTitle').val();
  var price = parseFloat($('#inputPrice').val());
  var description = $('#inputDescription').val();

  // LeanCloud - 当前用户
  // https://leancloud.cn/docs/leanstorage_guide-js.html#当前用户
  var currentUser = AV.User.current();

  // LeanCloud - 文件
  // https://leancloud.cn/docs/leanstorage_guide-js.html#文件
  var file = $('#inputFile')[0].files[0];
  var name = file.name;
  var avFile = new AV.File(name, file);

  // LeanCloud - 对象
  // https://leancloud.cn/docs/leanstorage_guide-js.html#数据类型
  var product = new Product();
  product.set('title', title);
  product.set('price', price);
  product.set('description', description);
  product.set('owner', AV.User.current());
  product.set('image', avFile);
  product.save().then(function() {
    //  发布成功，跳转到商品 list 页面
  }, function(error) {
    alert(JSON.stringify(error));
  });

3、展示商品列表

发布成功后，我们回到主页面。对 Product 表进行查询，然后展示出来。

AV.Query 是构建针对 AV.Object 查询的基础类。

还记得前面提到的 Pointer？Product 表里的 owner 字段，就是一个 Pointer 型字段，它仅包含 3 个键值对的信息，数据形式为：

  "owner": {
    "__type": "Pointer",
    "className": "_User",
    "objectId": "57e264c667f3560056c3cb1e"
  },

而如果想在查询 Product 表时，同时获取到 _User 表的其它字段信息呢？这样的话，就需要用到 include 关键字。

请看示例，通过如下代码实现查询过程：

  // LeanCloud - 查询
  // https://leancloud.cn/docs/leanstorage_guide-js.html#查询
  var query = new AV.Query('Product');
  query.include('owner');
  query.include('image');
  query.descending('createdAt');
  query.find().then(function (products) {
       // 查询到商品后，在前端展示到相应的位置中。
  }).catch(function(error) {
    alert(JSON.stringify(error));
  });

4、退出登录

可以使用如下代码：

  AV.User.logOut();

更进一步

我们在这次的教程中，逐一地去熟悉几个核心的概念：AV.User、AV.Object、AV.File、Pointer、AV.Query 和 include。在理解了这些基础知识后，就可以开始基于 LeanCloud 的快速开发了。

如果你在后续存储模块的开发过程中，遇到任何问题，请查阅以下进阶文档的相关部分：JavaScript 数据存储开发指南。