使用 Parse 掌握网络 API 身份验证 – Javascript SDK 和 GraphQL 功能

许多应用程序，尤其是网站，都需要限制对其内容的访问，而建立用户账户，以安全的方式只显示与该用户相关的信息，是实现这一目标的最常用方法。

今天，我们将学习如何在已有的 HTML 页面上实现登录功能，只需编写很少的代码，Parse 就能为你完成所有繁重的工作，为此，我选择了登录表单模板，你可以免费下载。

我们将使用两种不同的技术供你选择：Javascript SDK 和通过 Javascript 实现的 GraphQL。

GraphQL 是我们刚刚发布的全新闪亮技术，我的目标是比较这两种做同一件事的方法，这样你就可以选择你最喜欢的一种。
剧透警报 我相信你会更喜欢 GraphQL…

GraphQL 已经包含了可视化显示文件所需的所有文件，但缺少我们即将添加的功能。

如果你想了解更多有关 GraphQL 的信息，请查看这篇文章：什么是 GraphQL

这将是一篇内容广泛的文章，让我按章节向你介绍你将学到的具体内容：

1. 在Back4app中设置虚拟主机
2. 启用 GraphQL
3. 部署您的第一个网站
4. 创建第一个 Javascript 文件
5. 嵌入 Parse SDK
6. 在代码中配置和实例化 SDK
7. 以图形方式添加用户
8. 使用 Javascript SDK 注册用户
9. 使用网站测试注册（硬编码值）
10. 编写读取表单的代码并应用到 Javascript 代码中
11. 使用网站测试注册（动态值）
12. 使用 Javascript SDK 创建登录流程
13. 使用网站测试登录（动态值）
14. 结束 Javascript SDK 部分
15. GraphQL 简介
16. 使用 GraphQL 所需的工具
17. 安装所需的工具
18. 简要说明我们如何为前端生成代码
19. 在 NodeJS 代码中使用 NPM 模块
20. GraphQL 中的查询和突变简介
21. 查询
22. 突变
23. 创建自己的 GraphQL SingUp 方法
24. 创建自己的 GraphQL 登录方法
25. 使用 Browserify 将 NodeJS 代码转换为前端兼容代码
26. 将代码包含到 HTML 文件中
27. 编写 Javascript 函数以调用 Browserify 生成的代码
28. 测试 GraphQL 注册和登录
29. GraphQL 部分的结论

1.第一步 首先

第一步是在 Back4app 中创建应用程序（如果还没有）。您可以查看此文档中的创建步骤。

这一步对于两种技术都是通用的，所以无论您选择哪种技术，都必须这样做。

创建应用程序后，我们需要设置虚拟主机功能。可以。您可以在 Back4app 上免费托管带有静态内容的网站。很棒吧？

创建应用程序后，进入服务器设置：

在 “虚拟主机 “和 “实时查询 “下点击 “设置”：

现在激活 Back4app Hosting 并为您的应用程序选择一个好域名。您可以在 back4app.io 中直接访问该域名，也可以根据需要在 DNS 上创建指向该域名的 CNAME 记录：

现在您可以开始部署代码了。

2.GraphQL 如何？

如果你想使用 GraphQL，还需要采取另一个步骤。如果只打算使用 Javascript SDK，可以使用任何 Parse 版本，但为什么不使用最新和最好的版本呢？

转到服务器设置：

在 “管理 Parse 服务器 “中的 “设置 “下：

选择 3.5.0 以上的版本。在 Back4app 中，我使用的是 3.6.0：

现在，你应该已经启用了 GraphQL，我们就可以开始了！
哦，你要知道，你可以在同一个应用程序中使用 GraphQL 和 SDK。无需选择。

如果你只对 GraphQL 感兴趣，可以滚动到本教程的第 15 章。

3.部署第一个网站

在设置了虚拟主机功能后，我们就可以部署网站了。
这一步也是两种技术的共同点。
虽然它还没有任何功能，但第一次看到它工作的感觉还是不错的，所以让我们开始吧。

再次进入服务器设置：

现在选择 “云代码 “下的 “设置”：

在那里你会发现两个文件夹：云 “和 “公共”。

云用于部署云代码，即从 Back4app 服务器运行的 NodeJS 代码，为您的应用程序完成所有繁重的处理工作，并带来许多优势，如节省手机电池和数据计划，因为手机本身无需实际处理大量数据，也无需检索全部数据，只需依赖 Back4app 服务器提供的最终处理结果。

公共版用于部署静态内容，如 HTML、CSS 和静态 Javascript 文件。这是我们目前感兴趣的文件夹。
选择该文件夹，点击上方的 +ADD 按钮，为我们从第一章网站下载的模板添加 HTML 和 CSS 文件。

选择这些文件后，点击 “部署 “按钮，就能在公共文件夹中看到这些文件了：

现在是测试的时候了。
如果你点击虚拟主机上设置的 URL，就会看到你闪亮的新网站正在免费运行：

4.带来一些智能

一个漂亮闪亮的新网站已经启动并开始运行，而我们只花了 2 分钟？看吧，这可是免费的，互联网！
我有没有告诉过你，它是完全安全的，而且已经内置了 HTTPS？如果 Back4app 免费提供证书，我们就不用花钱买证书了，不是吗？

现在，是时候对其进行智能化了。如果我们再花 2 分钟就能搞定呢？我喜欢智能，也喜欢快速。

启动你最喜欢的集成开发环境，开始学习 Javascript 吧。请给我 Visual Studio Code。再来一杯浓咖啡。

从现在起，我将只关注 Javascript SDK，以后也只关注 GraphQL。

创建一个名为 Parse.js 的新文件，就可以开始了。

5.添加 Parse 框架

(仅限 Javascript SDK）

Parse 让部署框架变得非常容易。首先，你需要在index.html文件的 “头部”（Head）部分添加以下内容，将Javascript框架实例化：

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

现在，可以从你的 Javascript 代码中访问完整的 Parse（最小化）框架，我们可以使用其中的所有内容。

6.启动 Parse 引擎

(仅限 Javascript SDK）

现在我们已经可以访问 Parse 框架了，但我们需要在启动前启动它。

我们需要向 Parse 标识我们的应用程序，具体方法是为我们的应用程序设置 AppId 和 Javascript Key，以及服务器 URL（告诉我们的应用程序在 Back4app 中运行）。

为此，请转到服务器设置：

和核心设置下的设置：

中找到所需的全部信息：

复制这些信息，然后像这样粘贴到我们的 Parse.js 文件中：

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere")；
Parse.serverURL = "YourParseAPIAddressHere

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE")；
Parse.serverURL = 'https://parseapi.back4app.com/'；

现在，我们的应用程序可以完全访问 Parse，Parse 也知道了我们的设置，因此它可以运行了。
绿光。全速运行

7.但我只有几个用户…

如果你的应用程序不需要用户注册，而且你更喜欢手动管理用户，你可以在 Parse 控制面板的数据库浏览器中点击 “添加行 “按钮来获取用户类：

但实际上，你的应用程序可能会随着时间的推移而增长，让用户自己注册到系统中会有所帮助。

8.没有用户？没问题！signUp() 来帮忙！

(仅限 Javascript SDK）

起初，您的应用程序中不会有任何用户，因此我们必须为用户提供一种注册方式。

我们的网站已经有了一个漂亮的注册表单。让我们开始工作吧，好吗？
如果我告诉你我们只需不到 12 行代码就能做到呢？听起来不错吧？

Parse.User类有三个基本属性可以设置。如果你想或有需要，还可以设置更多，但这三个属性是为了方便而创建的，其中两个是必须设置的：

• 用户名（必须设置）
• 密码（必填）
• 电子邮件（可选）

让我们在数据库中添加一个测试用户，检查一下操作。将此添加到 Parse.js 文件中：

function singnUp(){
    var user = new Parse.User()；
    user.set("username", "alex"); // 将用户名表单中的值设置为用户名属性
    user.set("password", "abc123"); // 将密码表单中的值设置为密码属性
    user.set("email", "[email protected]"); // 将电子邮件表单中的值设置为电子邮件属性
    try {
        user.signUp(); // 一切正常，用户已登录
    catch (error) {
        alert("Error: " + error.code + " " + error.message); // Oops... something wrong happened
    }
}

这将创建一个带有硬编码值的新用户：

用户名：alexk
密码： abc123
电子邮件： [email protected]

我们将进一步学习如何从表单中获取这些值，但对于这个测试用户来说，这样就可以了。

现在打开 index.html 文件，查找这一行：

<input type="submit" class="button" value="注册">。

并将其改为

<input type="submit" class="button" value="Sign Up" onclick="singnUp()">

基本上，我们在这里所做的就是设置一个 onClick 事件来触发我们刚刚编码的函数 signUp。

将这两个文件部署到云代码公共文件夹（新的 Parse.js 文件和更改后的 index.html 文件），并在浏览器上重新打开网站。

9.测试…测试…123…

是时候进行测试了，宝贝！让代码自己说话！

转到 “注册 “部分，无需填写任何内容，因为我们传递的不是真实数据，只是一个硬编码测试，然后点击 “注册 “按钮：

如果一切顺利，你就能在 Parse 控制面板中看到该用户以及该用户的新会话：

10.万岁现在让我们让它变得更智能……

(Javascript SDK 和 GraphQL）

现在我们可以注册用户了，让我们制作一个完整的可运行的注册功能。
我们需要读取表单的值，以便将其插入数据库，为此，我们将使用 javascript 方法：

document.getElementById("idOfTheInput").value

在写这篇文章时，我发现我们使用的模板有一个小问题。ID 必须是唯一的，这样我们才能检索到正确的值，而我们的模板有一些重复，这可能是由于创建者复制和粘贴代码造成的，所以我们来修改一下。

打开 HTML 文件，在注册-htm 部分找到以下几行：

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="text" class="input"> <input id="pass" type="password" class="input" data-type="password">

注意到这些行的 id 属性在代码中重复了几次。让我们将其改为唯一的：

<input id="username" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input"> 电子邮件

    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('Passwords dont match')
        返回；
    }

    user.set("username", "alexk"); // 将用户名表单中的值设置为用户名属性
    user.set("password", "abc123"); // 将密码表单中的值设置为密码属性
    user.set("email", "[email protected]"); // 将电子邮件表单中的值设置为电子邮件属性

    user.set("username", alexl); // 将用户名表单中的值设置为用户名属性
    user.set("password", password); // 将密码表单中的值设置为密码属性
    user.set("email", email); // 将电子邮件表单中的值设置为电子邮件属性

11.又到了测试时间。现在是真正的测试。

12.登录时间到了，宝贝！

(仅限 Javascript SDK）

函数 logIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；
}

Parse.User.logIn(user, pass).then(() => { // Hooray!
    // 万岁！用户已登录
    alert('Hooray! User logged in!')；
});

Parse.User.logIn(user, pass).then(() => { // Hooray!
    // 万岁！用户已登录
    alert('Hooray! User logged in!')；
}).catch(function(error){
    // 哎呀......出错了
    alert("Error: " + error.code + " " + error.message)；
});

13.现在….

14.结束 Javascript SDK 部分

15.让 GraphQL 进来

如果你对 Javascript SDK 感到兴奋，那么现在就去吃点爆米花吧，因为好戏即将上演。

Back4app 现在支持 GraphQL，也就是说，我们紧跟最新、最时尚的技术潮流，现在 Parse 比以往任何时候都更加智能！

您可以依赖带自动完成功能（是的！！！）的 GraphQL Playground 生成我们要做的查询。

此外，我们还可以精确地指定我们想要检索的内容，从而减少有效载荷，使您的数据更快地传递给最终用户，并使应用程序接口更易于长期维护。

好了。废话少说。GraphQL 实在是太赞了，如果我不停止的话，我就会一直写下去，而不会展示如何使用它。

16.我们需要什么

(仅限 GraphQL）

如果你还没有将 Parse 版本至少更改为 3.5.0（Back4app 上的 3.6.0 是最早支持 GraphQL 的版本），请一直读到本文第 2 节，然后更改为 3.5.0。

我们需要安装NPM，以便使用其模块。
这些模块是用 NodeJS 编写的，最初是为后端编程而设计的，因此我们必须对其进行修改。
我不会向你展示如何安装 NPM，因为上面网站上的教程涵盖了相当广泛的内容。
不过，我将向你展示如何使用这些模块，这样我们就能在编码时节省大量精力。

准备好了吗？安装好这些工具，系好安全带，我们开始吧！

17.安装 GraphQL 客户端和 Browserify

(仅限 GraphQL）

GraphQL 有几个客户端可供使用。由于我无法选择其中一个（因为它们都很不错），我决定在第一个教程中使用最容易配置的客户端，然后在下一个教程中使用其他客户端，这样我们就可以对它们进行比较。

我发现最容易设置的是graphql-request，只要打开终端，进入 Parse.js 所在的文件夹，输入

npm install graphql-request

如果安装成功，你应该会看到类似这样的内容：

我们还可以安装一个名为Browserify 的工具。
Browserify 可以将 NPM 模块转换到前端（浏览器）使用。还记得我说过NPM模块最初是为后台使用而设计的吗？这个工具能让它以最小的代价在前端使用。
我喜欢全局安装（-g 键），这样就能在任何地方使用它了：

npm install -g browserify

如果一切顺利，你应该会得到类似这样的结果：

现在我们已经安装了 GraphQL 客户端，可以将其转换为前端使用。只花了 2 分钟就完成了，所以我们进展很快。

18.这到底是如何工作的？

(仅限 GraphQL）

基本上，我们将

1. 使用 NPM 模块编写一些 NodeJS 代码
2. 使用 Browserify 将其转换为前端兼容的代码
3. 导出代码，以便我们能从其他文件中调用它
4. 从我们的 Javascript 代码中调用该代码

Browserify的命令是

browserify inputFile.js -o outputFile.js

outputFile.js 将包含与前端兼容的代码，因此让我们启动程序，创建 inputFile.js，并在最喜欢的集成开发环境中打开它。

19.一些 NodeJS 代码

(仅限 GraphQL）

首先，我们将在代码中添加 NPM 模块，并要求使用该模块。

const { GraphQLClient }= require('graphql-request')；

然后创建一个全局导出，其名称将用于调用我们的函数，在本例中就是 signUp：

global.singUp = function() {

}

这样，我们就可以开始为 singUp 函数添加代码了。
首先添加端点 URL，您可以从 GraphQL Playground 获取该 URL：

const endpoint = 'https://parseapi.back4app.com/graphql'；

由于我们需要进行身份验证，因此需要实例化我们的 GraphQL 客户端，将 URL 作为参数，并将身份验证头作为参数：X-Parse-Application-ID 和 X-Parse-Javascript-Key。这些头信息将包含 AppId 和 Javascript Key，您在第 6 步中已经学习了如何获取这两个信息。

const { GraphQLClient }= require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql'；
    
    constgraphQLClient=newGraphQLClient(endpoint, {
        headers：{
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq" }.
        },
    });
}

现在是时候编写一些 GraphQL 查询和突变了。

20.查询和突变，通用或特定

(仅限 GraphQL）

在编写本文档时，Back4app 和 Parse 使用的是查询和突变。随着时间的推移，我们还会开发出新的方法，但我们先来讨论这两种方法。

查询用于从服务器检索数据。

突变用于更改服务器上的数据，而服务器也可以或不可以检索结果。

因此，如果只是消费信息，则应使用查询；如果是添加或更改信息，则应使用突变。

我们将从简单的查询开始，然后发展到突变。

说到这一点，我们在 GraphQL 中使用了特定方法和通用方法，这两种方法各有利弊。

通用方法允许你在任何类中操作。例如，如果您要进行泛型查询，您可以通过指定您想要的类来检索数据。这非常棒，因为你可以使用相同的语法来处理几乎所有事情，而且在使用突变时，你可以创建一开始并不存在的类和对象。

缺点是由于通用方法没有模式，因此不能依赖自动完成功能，所以必须知道自己在做什么。
通用方法 get 和 find 的示例。
通用突变包括更新、删除或创建。

另一方面，特定方法具有模式，因此它们只能被预先存在的类使用。 这就是缺点。
但使用特定方法会带来另一个层面的惊喜，让我们可以使用自动完成功能，并拥有更强大的资源来检索数据。
特定查询以 get 和 find 开头，类名紧随其后：findPerson、getPerson 等等。
特定的突变以创建、更新和删除开头，类名紧随其后：createPerson、getPerson、deletePerson：

21.查询

(仅限 GraphQL）

让我们做一个简单的查询来玩玩 GraphQL。
在 Parse 控制面板上，转到 API 控制台，然后转到 GraphQL 控制台。
使用查找用户的特定查询键入以下查询。在任何时候，你都可以按下 CTRL + 空格键（Windows）或 OPTION + 空格键（Mac），以便在输入时自动完成。

不同版本的 Parse 会有不同的查询方式：

Parse 3.7.2：

查询 {
    对象{
        查找用户
            结果{
                用户名
                电子邮件
            }
        }
    }
}

Parse 3.8：

查询 {
  users{
      结果{
          用户名
          电子邮件
      }
  }
}

Parse 3.9：

查询 {
  users{
      结果{
          用户名
          电子邮件
      }
  }
}

点击播放按钮：

你应该能看到我们用 Javascript SDK 创建的用户。如果你跳过了这一部分，只需按照第 7 章中的说明添加几个用户，然后再次尝试运行查询。你应该会看到这样的结果：

我们刚刚使用特定查询 find_User 找到了所有用户，并检索了他们的用户名和电子邮件。我们准确地指定了要检索的内容，生成了较小的有效载荷，同时依靠自动完成功能帮助我们开发，因此在过程中我们知道哪些操作是可用的。

很棒吧？

让我们做得更好！

22.突变

(仅限 GraphQL）

让我们用特定的 signUp 方法创建 GraphQL 突变，就像我们在 Javascript 中使用的 signUp 方法一样。

突变将是这样的

Parse 3.7.2

突变{
  users{
    signUp(fields：{
      username: "john"
      密码： "123456"
      电子邮件"[email protected]"
    }){
      对象 ID
    }
  }
}

Parse 3.8

突变 SignUp{
  signUp(fields:{
    用户名: "somefolk"
    password: "somepassword"
  }){
    对象 ID
    创建时间
  }
}

Parse 3.9

突变 SignUp{
  signUp(fields:{
    用户名: "somefolk"
    password: "somepassword"
  }){
    id
    创建时间
    会话令牌
  }
}

运行并检查用户是否已添加到数据库浏览器的用户类中。

耶现在让它在我们的代码中运行吧。

23.使用 GraphQL 的登录方法

(仅限 GraphQL）

对于我们的 javascript 签到方法，我们将使用一个与我们在 GraphQL Playground 上使用的几乎相同的突变，但在那里我们使用的是硬编码值，而在这里我们必须设置变量，以假定用户在表单上键入的值。

要在我们使用的 GraphQL 客户端上使用变量，我们必须首先在方法中指定变量名和类型。我们将为我们的 signUp 方法传递 3 个变量：用户名、密码和电子邮件，它们都是字符串，因此我们的方法 singUp 将是：

const signUpMutation = /* GraphQL */
`
mutation signUp($username: String! $password: String! $email: String!){
    
}
`

然后，我们必须在 create_User 方法中使用这些变量，就像这样：

Parse 3.7.2

        
        users{
            signUp(fields：{
              username: $username
              密码: $password
              电子邮件电子邮件
            }){
              对象Id
            }
        }

Parse 3.8

        
        users{
            signUp(fields：{
              username: $username
              密码: $password
              电子邮件电子邮件
            }){
              对象Id
            }
        }

Parse 3.9

        
        users{
            signUp(fields：{
              username: $username
              密码: $password
              电子邮件电子邮件
            }){
              id
            }
        }

最后在另一个 JSON 对象中为其设置值，该对象将作为参数与突变一起传递：

const variables = {
        username: formUsername、
        password: formPassword、
        电子邮件：formEmail
    }

现在，请注意我有三个值：formUsername、form Password 和 formEmail，我将从表单中获取这三个值并将其传递给我们的 singUp 函数，因此我必须在函数参数中指定这三个值：

global.singUp = function(formUsername, formPassword, formEmail)

准备就绪！

下面是完整的方法：

const { GraphQLClient }= require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers：{
            "X-Parse-Application-Id"："5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Master-Key"："pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"。
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutation signUp($username: String! $password: String! $email: String!){
        用户{
            signUp(fields：{
                用户名: $username
                password: $password
                电子邮件电子邮件
            }){
                对象Id
            }
        }
    }
    `

    const variables = {
        username: formUsername、
        password: formPassword、
        电子邮件：formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('Hooray! User created!')
    }).catch(error => {
        alert('Error: ' + error.code + ' ' + error.message)
    })
    
}

24.既然来了…登录…

(仅限 GraphQL）

由于我已经解释了 singUp 突变的每一步，我将只留下 logIn 方法的代码，它遵循完全相同的原则，但使用特定的突变 logIn：

突变 logIn($username: String! $password: String!){
  用户{
    登录（用户名：$username 密码：$password）{
    	会话令牌  
    }
  }
}

完整的代码如下

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers：{
            "X-Parse-Application-Id"："5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Master-Key"："pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"。
        },
    })

    const logInMutation = /* GraphQL */
    `
    突变 logIn($username: String! $password: String!){
        用户{
            logIn(username: $username password: $password){
                会话令牌  
            }
        }
    }
    `

    const variablesLogIn = {
        username: formUsername、
        password: formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('Hooray! User logged in!')
    }).catch(error => {
        alert('Error :' + error.code + ' ' + error.message)
    })
}

25.Browserifying（说什么？）

(仅限 GraphQL）

还记得第 18 章中我给你的 Broserify（也就是把我们的 NPM 模块变成前端兼容）命令吗？
如果不记得，那就再来一遍：

browserify inputFile.js -o outputFile.js

让我们在 inputFile.js 上运行它，并将其输出到名为 graphql.js 的文件中：

browserify inputFile.js -o graphql.js

如果一切顺利，我们应该不会有任何输出：

这还不简单？

26.在 HTML 中加入我们闪亮的新代码

(仅限 GraphQL）

在 HTML 文件的 head 标签中，加入生成的 graphql.js 文件。
此外，还需要创建一个名为 Parse.js 的空白文件，并将其包含在内。我们将用它来调用 GraphQL 方法：

<scriptsrc="./graphql.js"></script>。
<scriptsrc="./Parse.js"></script>

请注意如果您跳过了本教程的 Javascript 部分，请回到第 10 章，按照其中的描述更改 HTML 标记的 ID。我们需要该部分的工作，以便从表单中获取值。

27.向我展示一些操作！

(仅限 GraphQL）

到这里为止，我们已经取得了很多进展，是吧？让我们添加一些代码来实现一些操作！

同样，如果你跳过了 Javascript 部分，请回到第 10 章，看看我们如何使用 Javascript 通过 getElementById 方法从表单中读取值：

document.getElementById("idOfTheInput").value

因此，让我们打开 Parse.js 文件，在其中添加两个方法：logIn 和 singUp：

函数 parseSignUp(){

}

function parseLogIn(){ }

}

此外，我们还要添加从表单中读取值的代码，以及一些密码平等性验证代码，第 10 章将再次对此进行说明：

function parseSingnUp(){
    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('Passwords dont match')
        返回；
    }

}

function parseLogIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；

}

但这次我们不使用 Javascript SDK，而是直接在 graphql.js 文件中调用 signUp 和 logIn 方法。完整代码如下

function parseSingnUp(){
    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('Passwords dont match')
        返回；
    }

    signUp(username, password, email)
}

function parseLogIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；

    logIn(user, pass)
}

对了，别忘了调用 HTML 文件中的 onClick 事件：

按照第 3 章的说明部署好一切后，我们就可以开始……

28.测试

(仅限 GraphQL）

访问您的网站，进入注册部分。填写表格并点击注册按钮：

如果一切正常，你应该能在用户表中看到新用户：

现在回到登录部分，尝试用该用户登录：

如果一切正常，你现在就可以登录了：

29.结束 GraphQL 部分

呼！我知道信息量很大，但现在你已经是登录和注册高手了！恭喜你

刚开始接触 GraphQL 时可能会觉得有点麻烦，因为要使用它还需要一些过程，但请相信我：当你在开发过程中掌握了它的窍门后，使用它将变得轻而易举！

在 Autocomplete 的帮助下，我们现在有了更有机、更易于维护的代码，甚至在开始编码之前，我们就可以在 GraphQL Playground 上测试和验证响应。这一点非常重要，因为您不仅可以在编写代码之前编写和测试所有查询，还可以为团队分担开发工作：几个开发人员可以编写 GraphQL 查询，其他人则编写 Javascript 代码，从而加快整个过程。

更妙的是，从现在起，如果您需要更改代码中的任何内容，只需更改查询即可。

还能更好吗？当然可以！

使用完全相同的语法，您可以在每个平台上重复使用 GraphQL 查询。它与所有语言相似。您不必再问自己 “在这种我不熟悉的语言中该怎么做？”。相同的查询，不同的语言。

我希望您能在开发过程中给 GraphQL 一个机会。我敢肯定，您一定会为自己所能达到的高度而感到惊讶！