---
title: Install Parse SDK
slug: docs-ch/javascript/parse-javascript-sdk
description: 通过三步指南学习安装 Parse SDK，连接至 JavaScript 项目，创建用户类，并测试应用连接。了解如何设置认证令牌。
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-04T14:11:19.651Z
---

# 将 Parse SDK 安装到您的 JavaScript 项目

## 介绍

在本节中，您将学习如何将 Parse JavaScript SDK 安装到您的 HTML 项目中。

:::hint{type="success"}
有关 Parse SDK 的更多信息，请访问 [Parse JavaScript SDK API 参考](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) 和 [Parse JavaScript SDK 开源文档](https://docs.parseplatform.org/js/guide/).
:::

## 先决条件

:::hint{type="info"}
**要完成本教程，您需要：**

- 在 Back4App 创建的应用程序。
  - 请遵循 [新 Parse 应用程序教程](https://www.back4app.com/docs/get-started/new-parse-app) 以了解如何在 Back4App 上创建 Parse 应用程序。
:::

:::hint{type="danger"}
Parse JavaScript SDK 支持 Firefox 23+、Chrome 17+、Safari 5+ 和 IE 10。

**IE 9 仅支持使用 HTTPS 托管的应用程序。**
:::

## 1 - 安装 SDK

要在您的 Web 应用程序中启用 Parse JavaScript SDK，请创建一个新的 <font color="#2166ae">`index.html`</font> 文件或使用您的主 HTML 文件，并在其 <font color="#2166ae">`<head>`</font> 标签中添加以下脚本：

:::CodeblockTabs
index.html

```html
<!-- This is the minified production version of Parse JS -->
<script type="text/javascript" src="https://unpkg.com/parse/dist/parse.min.js"></script>
```
:::

## 2 - 连接你的 Parse 应用

### 初始化你的 Parse 应用

在使用任何 Parse 功能之前，你需要调用 <font color="#2166ae">`Parse.Initialize`</font> 方法来设置认证令牌并将你的页面连接到 Back4App 服务器。

在你的 <font color="#2166ae">`index.html`</font> 文件中，在底部创建一个 <font color="#2166ae">`<script>`</font> 标签，并添加以下代码：

:::CodeblockTabs
index.html

```html
<script>
  // Initialize Parse
  Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
  Parse.serverURL = "https://parseapi.back4app.com/";
</script>
```
:::

请注意，强烈建议创建和导入一个单独的 JavaScript 文件，而不是在你的 HTML 文件中使用内联 JS 代码，但为了简单起见，我们将在这里使用后者。

### 找到你的应用 ID 和客户端密钥

1. 前往 Back4App 网站上的应用仪表板。
2. 导航到应用设置：点击 <font color="#2166ae">`服务器设置`</font> > <font color="#2166ae">`核心设置`</font> 块> <font color="#2166ae">`设置`</font>.
3. 返回到你的 <font color="#2166ae">`Parse.Initialize`</font> 函数并粘贴你的 <font color="#2166ae">`applicationId`</font> 和 <font color="#2166ae">`javaScriptKey`</font> 在那里。

## 3 - 测试你的连接

### 创建测试代码

使用以下代码测试你的初始设置，该代码创建一个新的用户类对象。将其添加到 <font color="#2166ae">`<script>`</font> 标签中，紧接着 <font color="#2166ae">`Parse.initialize`</font> 方法之后：

:::CodeblockTabs
index.html

```html
// Create a new User
async function createParseUser() {
  // Creates a new Parse "User" object, which is created by default in your Parse app
  let user = new Parse.User();
  // Set the input values to the new "User" object
  user.set("username", document.getElementById("username").value);
  user.set("email", document.getElementById("email").value);
  user.set("password", document.getElementById("password").value);
  try {
    // Call the save method, which returns the saved object if successful
    user = await user.save();
    if (user !== null) {
      // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
      alert(
        `New object created with success! ObjectId: ${
          user.id
        }, ${user.get("username")}`
      );
    }
  } catch (error) {
    alert(`Error: ${error.message}`);
  }

 // Add on click listener to call the create parse user function
 document.getElementById("createButton").addEventListener("click", async function () {
   createParseUser();
});
```
:::

您还需要创建输入字段以将数据传递给您的 JavaScript 函数，因此将这些普通元素添加到您的 <font color="#2166ae">`<body>`</font> HTML 文件的部分：

:::CodeblockTabs
index.html

```html
<h1>JS SDK</h1>   
<input id="username" type="text" placeholder="Username"/>
<input id="email" type="email" placeholder="Email"/>
<input id="password" type="password" placeholder="Password" />
<button id="createButton">Create User</button>
```
:::

继续按照以下步骤测试此示例应用程序：

1. 在您的网络浏览器中打开您的 HTML 文件。
2. 填写输入字段并点击；
3. 将显示一个警报框，显示新创建的用户对象的 ID。
4. 在 Back4App 登录。
5. 找到您的应用程序并点击仪表板。
6. 点击 <font color="#2166ae">`核心`</font>。
7. 转到 <font color="#2166ae">`浏览器`</font>。
8. 点击 <font color="#2166ae">`用户`</font> 类。
9. 在那检查您的新对象。

完成这些步骤后，您应该会看到类似这样的内容：

![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/wj7qnwGleQ7IQYyQwDV1y_image.png)

这是完整的应用代码：

:::CodeblockTabs
index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- This is the minified production version of parse js -->
    <script
      type="text/javascript"
      src="https://unpkg.com/parse/dist/parse.min.js"
    ></script>
  </head>
  <body>
    <h1>JS SDK</h1>
    <input id="username" type="text" placeholder="Username" />
    <input id="email" type="email" placeholder="Email" />
    <input id="password" type="password" placeholder="Password" />
    <button id="createButton">Create User</button>
  </body>
  <script>
    // Initialize Parse
    Parse.initialize("YOUR_PARSE_APP_ID", "YOUR_PARSE_JS_KEY"); //PASTE HERE YOUR Back4App APPLICATION ID AND YOUR JavaScript KEY
    Parse.serverURL = "https://parseapi.back4app.com/";

    // Create a new User
    async function createParseUser() {
      // Creates a new Parse "User" object, which is created by default in your Parse app
      let user = new Parse.User();
      // Set the input values to the new "User" object
      user.set("username", document.getElementById("username").value);
      user.set("email", document.getElementById("email").value);
      user.set("password", document.getElementById("password").value);
      try {
        // Call the save method, which returns the saved object if successful
        user = await user.save();
        if (user !== null) {
          // Notify the success by getting the attributes from the "User" object, by using the get method (the id attribute needs to be accessed directly, though)
          alert(
            `New object created with success! ObjectId: ${
              user.id
            }, ${user.get("username")}`
          );
        }
      } catch (error) {
        alert(`Error: ${error.message}`);
      }
    }

    // Add on click listener to call the create parse user function
    document.getElementById("createButton").addEventListener("click", async function () {
      createParseUser();
    });
  </script>
</html>
```
:::

## 完成！

到此为止，您已经学习了如何开始使用 JavaScript 网络应用。

:::hint{type="info"}
通过阅读 [Parse 开源文档以获取 JavaScript SDK](https://docs.parseplatform.org/js/guide/) 来了解更多信息。
:::

