Advanced Guides
使用Back4App托管全栈网络应用开发指南

21min
创建和托管全栈网络应用程序
介绍
启动全栈应用程序可能令人畏惧。您必须担心托管前端、配置/提供服务器以及将所有内容连接在一起。您可能不知道，Back4App 提供了上述所有内容的最佳基础设施。
您可以轻松地使用 Back4App 的 Web 托管服务来提供前端 HTML（包括 React 和 Vue 等前端框架）。Cloud Code 是一个出色的后端，启动迅速。在本指南中，我们将在 Back4App 上构建一个完整的，尽管是初步的，网络应用程序。
这是由 约翰·康西丁 编写的客座教程，他是 K-Optional 的首席开发人员。
目标
在 Back4App 上启动全栈网络应用程序
前提条件
要完成本教程，您需要：

熟悉命令行
﻿Git 和 NPM 应该已安装
拥有一个 Back4App 账户，并安装和配置 CLI 工具，详见 这里获取帮助﻿
在您的 Back4App 仪表板上创建一个全新的项目- 详见 这里获取帮助.
本教程必须设置为 Parse Server 版本 3.1.x。有关更多详细信息，请直接查看下面的内容
该项目将使用新发布的版本 3.1 Parse Server。这意味着您需要确保您的 Back4App 项目设置为此版本- 否则将无法工作。在您的项目仪表板上，转到服务器设置 » 管理 Parse Server（设置）并选择 3.1.1（可能处于 Beta 版本）。
有关迁移到 Parse Server 3.1.x 的更多信息，请参见 本指南。
如果您不理解此项目的云代码语法，请参见此指南。
项目背景
我们将推出一个初步的票务交换应用程序。它允许用户注册、登录，并发布他们出售的不同活动的票——管理员可以使用仪表板创建这些活动。其他用户可以通过他们的电子邮件或电话号码与他们联系，具体取决于发布者选择显示的内容。
我已经推出了应用程序 在这里, 使用我们在本指南中探讨的相同代码。您可以自由创建帐户，发布票务，并查看应用程序的外观。
本教程的目的是演示如何高效地启动一个应用程序。因此，我们将从一个基本完成的代码库开始，而不是逐行讨论代码，专注于部署的简便性。您只需在一个地方编辑代码：
在第一步中，您需要添加项目设置（应用程序 ID、JavaScript 密钥和服务器 URL）。
不过，您可以随意编辑和扩展此应用程序。
项目结构
在您开始准备代码之前，了解此项目的文件结构非常重要。我将在本指南中将其作为参考。完成后，您的目录将如下所示：
1   project
2   │   .parse.local
3   │   .parse.project
4   │   .gitignore
5   │   README.md
6   └───public
7   │   │   index.html
8   │   │   login.html
9   │   │   signup.html
10  │   └───css
11  │       │   signin.css
12  │       │   bootstrap.min.css
13  │   └───js
14  │       │   main.js
15  │       │   parse.js
16  │       │   signin.js
17  │       │   signup.js
18  │
19  └───cloud
20      │   main.js
此设置的主要要点是：
前端代码位于 public 目录中。前端只是用户与之交互的应用程序部分。
后端代码位于 cloud 目录中。后端在应用程序中执行幕后工作。这包括将内容保存到数据库和发送数据。
前端通过发送HTTP请求告诉后端该做什么。在我们的案例中，这意味着运行云函数
请注意这个设置的简单性。三个HTML文件代表这个应用程序中的三个页面。我们的整个后端是一个单一的文件！
在第二步中，我们将简要查看前端代码——也就是公共目录。在第三步中，我们转向后端。
1 - 准备文件
如前所述，先决条件, 你应该在Back4App上创建一个新的项目，并且配置你的CLI工具﻿
在访问任何代码之前，你需要下载并准备好它。在这一步中，我们正是这样做的。请注意，你将在命令行上运行几个命令。我会给你每一个命令以便你复制和运行。如果在这个步骤中感到困惑，不用担心；这只是将Back4App应用程序连接到我在Git上的项目所需的过程。了解发生了什么并不重要。
在这一步我们：
使用CLI初始化一个本地目录与您的Back4App项目
使用.git将示例项目文件拉入此目录
与Back4App的初始化
在您的命令行中运行
1 b4a new
您应该会看到提示：
1   您想创建一个新应用，还是向现有应用添加云代码？
2   输入"(n)ew"或"(e)xisting":
选择“e”以使用现有应用。然后从列表中选择您创建的应用程序。
接下来，系统会询问您要将代码安装到哪个目录。如果您没有偏好，可以直接按‘回车’。为了这个项目，我将假设目录名为“ticketlister”。最后，当被问到时：
1   目录名称：
2   您可以设置一个空白项目或下载当前已部署的云代码
3   如果您希望设置一个空白项目，请输入"(b)lank"，否则按回车
只需按回车（不要按空白）。当此命令返回时，您可以cd进入新目录。您应该会看到两个目录，一个名为“cloud”，另一个名为“public”。
您的整个输出应该看起来像这样：
1   $ b4a new
2   您想创建一个新应用，还是向现有应用添加云代码？
3   输入"(n)ew"或"(e)xisting": e
4   1: ticketlister
5   选择要添加到配置的应用：11
6   请输入我们可以下载最新已部署的
7   您的应用"ticketlister"的云代码的文件夹名称
8
9   目录名称：
10  您可以设置一个空白项目或下载当前已部署的云代码
11  如果您希望设置一个空白项目，请输入"(b)lank"，否则按回车：
12  成功为当前项目配置电子邮件："[email protected]"
13  您的云代码已创建在/tmp/ticketlister。
14
15  这包括一个"Hello world"云函数，因此一旦您部署，
16  您可以通过打印的curl命令测试它是否有效。
17
18  接下来，您可能想用以下命令部署此代码：
19
20	  cd /tmp/ticketlister
21	  b4a deploy
22
23  部署后，您可以通过运行以下命令测试它是否有效：
24  curl -X POST \
25   -H "X-Parse-Application-Id: Ivy4QAJQuAjDhpqQ2D3MCR4jlrCvDcVVH6yom1kk" \
26   -H "X-Parse-REST-API-Key: yLgPHNEnt0jnzWy9BYt6ZCWHqmsWRyvCfsmqrvuS" \
27   -H "Content-Type: application/json" \
28   -d "{}" \
29   https://parseapi.back4app.com/functions/hello
30
31  $ cd ticketlister 
32  $ ls
33  cloud  public
将应用程序与项目文件同步
除了云和公共文件夹外，您的目录中将有两个文件：
.parse.local
.parse.project
这些文件包含与 Back4App 项目相关的数据。其他所有内容都应被来自 该仓库. 以下是最简单的方法：
1   cd ticketlister
2   git init
3   git remote add origin https://github.com/back4app/back4app-ticketlister
4   git fetch origin
5   git checkout --force -b  master --track origin/master
如果一切正常，您现在应该拥有以下文件：
$ ls -R
README.md         cloud             index.js          package-lock.json package.json      public

./cloud:
main.js

./public:
css         index.html  js          login.html  signup.html

./public/css:
bootstrap.min.css signin.css

./public/js:
main.js   parse.js  signin.js signup.js
别担心——那是最难的部分！现在我们可以专注于项目。
2 - 前端
作为提醒，该应用程序的前端代码位于 public 目录中。为了保持相对简单，我选择不使用像 React、Angular 或 Vue 这样的前端框架。这样就没有外部依赖或构建。
该项目确实使用了 HTML5 Web 组件。这些组件在浏览器中原生支持。它们有助于封装用户界面的不同部分的功能。它们允许开发者声明新的 HTML 元素（想想‘<p>’）。否则，它们只使用普通的 JavaScript。
在 public/js 目录中，有 4 个 JavaScript 文件：
$ ls public/js
# main.js   parse.js  signin.js signup.js
main.js 是主页面加载的代码，index.html。这个页面是用户列出票据等的地方。
signup.js 是注册页面加载的代码，signup.html
signin.js 是登录页面加载的代码，login.html
parse.js 是所有页面使用的一个简单文件。它创建与后端的连接。这个文件是你唯一需要编辑的文件，项目将无法正常工作，除非你这样做！
添加你的 Back4App 凭证
首先，你需要从你的 Back4App 项目中获取你的 应用程序 ID 和你的 JavaScript 密钥。登录 Back4App 后，选择你的项目。然后点击左侧的 应用设置，并选择 安全性与密钥。
﻿
你应该能看到显示的几个密钥。获取 应用程序 ID 和 JavaScript 密钥 并将它们保留在手边。
最后，打开 public/js/parse.js 并将每个字符串放在适当的位置。记得确保 serverURL 是 https://parseapi.back4app.com。
JS
1   // PART 1: Put your APP ID, JS Key, and SERVER URL
2   Parse.initialize(
3     '', // YOUR APP ID
4     '' // YOUR Javascript  KEY
5   );
6   // YOUR SERVER URL
7   Parse.serverURL = 'https://parseapi.back4app.com';
1   // PART 1: Put your APP ID, JS Key, and SERVER URL
2   Parse.initialize(
3     '', // YOUR APP ID
4     '' // YOUR Javascript  KEY
5   );
6   // YOUR SERVER URL
7   Parse.serverURL = 'https://parseapi.back4app.com';
﻿
应用程序现在可以与服务器通信！
 对代码的浅层探讨。
虽然本项目中的所有代码超出了本指南的范围，但我鼓励您浏览每个文件。没有什么太复杂的，我想花一点时间给出一个1000英尺的概述。
该项目使用 HTML5 Web 组件 来封装界面的每个逻辑部分。
HTML 文件中的重要标记位于 HTML <template> 标签内。这就是我们描述布局的方式
应用程序的“功能”发生在 JavaScript 文件中。在这里，应用程序描述在提交表单或单击按钮等情况下该做什么。
例如，取登录组件。标记 (public/login.html) 看起来像这样:
HTML
1   <template id="signin-template">
2     <style>
3       @import 'css/signin.css';
4       @import 'css/bootstrap.min.css';
5     </style>
6     <div class="signin-wrapper text-center">
7       <form class="auth-form">
8         <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
9         <label for="inputEmail" class="sr-only">Email address</label>
10        <input
11          type="email"
12          id="inputEmail"
13          class="form-control"
14          placeholder="Email address"
15          required=""
16          autofocus=""
17        />
18        <label for="inputPassword" class="sr-only">Password</label>
19        <input
20          type="password"
21          id="inputPassword"
22          class="form-control"
23          placeholder="Password"
24          required=""
25        />
26        <button class="btn btn-lg btn-primary btn-block" type="submit">
27          Sign in
28        </button>
29        <div class="text-center"><a href="/signup.html"> Sign Up</a></div>
30      </form>
31    </div>
32  </template>
33  <!-- This tag below simply tells the browser to render the component we declared above -->
34  <login-form></login-form>
1   <template id="signin-template">
2     <style>
3       @import 'css/signin.css';
4       @import 'css/bootstrap.min.css';
5     </style>
6     <div class="signin-wrapper text-center">
7       <form class="auth-form">
8         <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
9         <label for="inputEmail" class="sr-only">Email address</label>
10        <input
11          type="email"
12          id="inputEmail"
13          class="form-control"
14          placeholder="Email address"
15          required=""
16          autofocus=""
17        />
18        <label for="inputPassword" class="sr-only">Password</label>
19        <input
20          type="password"
21          id="inputPassword"
22          class="form-control"
23          placeholder="Password"
24          required=""
25        />
26        <button class="btn btn-lg btn-primary btn-block" type="submit">
27          Sign in
28        </button>
29        <div class="text-center"><a href="/signup.html"> Sign Up</a></div>
30      </form>
31    </div>
32  </template>
33  <!-- This tag below simply tells the browser to render the component we declared above -->
34  <login-form></login-form>
﻿
功能出现在 JavaScript 文件中 (public/signin.js)
JS
1   // Code above ^
2       // When the code is ready, listen for the form to be submitted. When it is,
3       //  call the 'onSubmit' method
4       connectedCallback() {
5         const form = this.shadowRoot.querySelector('form');
6         form.addEventListener('submit', this.onSubmit.bind(this), false);
7       }
8     // Obtain the email and password from the markup inputs
9       onSubmit(e) {
10        e.preventDefault();
11        //   Get inputs
12        const email = this.shadowRoot.querySelector('#inputEmail').value;
13        const password = this.shadowRoot.querySelector('#inputPassword').value;
14        this.login(email, password);
15      }
16    // Send a request to the backend, attempting to login. If the login
17    //  is successful, go to the index.html page. Otherwise, give the user
18    // an alert explaining what went wrong
19      login(email, password) {
20        // Add login method here
21        Parse.User.logIn(email, password)
22          .then(user => {
23            window.location.href = 'index.html';
24          })
25          .catch(e => {
26            alert(e.message);
27          });
28      }
29      // More code below
30
1   // Code above ^
2       // When the code is ready, listen for the form to be submitted. When it is,
3       //  call the 'onSubmit' method
4       connectedCallback() {
5         const form = this.shadowRoot.querySelector('form');
6         form.addEventListener('submit', this.onSubmit.bind(this), false);
7       }
8     // Obtain the email and password from the markup inputs
9       onSubmit(e) {
10        e.preventDefault();
11        //   Get inputs
12        const email = this.shadowRoot.querySelector('#inputEmail').value;
13        const password = this.shadowRoot.querySelector('#inputPassword').value;
14        this.login(email, password);
15      }
16    // Send a request to the backend, attempting to login. If the login
17    //  is successful, go to the index.html page. Otherwise, give the user
18    // an alert explaining what went wrong
19      login(email, password) {
20        // Add login method here
21        Parse.User.logIn(email, password)
22          .then(user => {
23            window.location.href = 'index.html';
24          })
25          .catch(e => {
26            alert(e.message);
27          });
28      }
29      // More code below
30
﻿
整个应用程序采用这种一般结构。注意前端与后端交互的时机，例如：(public/js/main.js)。
在下一步中，我们将研究这些函数是如何声明的。
3 - 后端
整个后端将位于 cloud/main.js, 云代码函数文件。它由非常少量的代码组成，证明了我们在 Back4App 上可以用如此少的代码完成多少工作。
应用程序的一部分（创建可以列出门票的事件）将简单地使用 Back4App 仪表板。这个很棒的功能随我们的项目而来，因此无需重新发明轮子！
再次强调，逐行检查代码超出了我们的范围。然而，我们将再次广泛地查看代码的工作原理。
﻿
您在 Cloud Functions 的 cloud/main.js 文件中声明。可以从前端调用这些函数（请参见 第2步)。有关 Cloud Functions 的更多信息，请参见 文档。
此外，这些 Cloud Functions 在 Parse Server 上运行。这个 指南 讨论了一些使用的语法，因此查看一下可能会有所帮助。
更具体地说，我们定义的函数是：
‘user:signup’ - 处理用户注册流程的代码
‘tickets:list’ - 检索所有列出门票的代码
‘tickets:create’ - 创建新票的代码
‘events:list’ - 列出所有事件的代码
最后一条代码说明：我在文件顶部添加了一个简单的方法：
JS
1   const requireAuth = user => {
2     if (!user) throw new Error('User must be authenticated!');
3   };
1   const requireAuth = user => {
2     if (!user) throw new Error('User must be authenticated!');
3   };
﻿
某些云函数要求用户登录。通过使用请求的用户属性调用此函数，我们确保没有人可以进行未经授权的请求。
我强烈建议您浏览其余的函数以了解它们的工作原理。现在您知道它们的功能，我们可以部署了！
4 - 部署
我们已经整理好了所有代码，现在应用程序可以部署到 Back4App。以下命令将上传所有公共和云文件：
b4a deploy
本地网站托管
要获取一个公共域名以查看您上传的网络应用程序，您需要在 Back4App 仪表板中启用 Web 托管。
首先，在仪表板左侧打开“服务器设置”：
﻿
接下来，点击“Web托管和实时查询”下的“设置”链接
﻿
最后，勾选“激活 Back4App 托管”。您需要选择一个独特的子域名；我已经为这个项目申请了 ticketlister，所以请选择其他的。可选地，您可以配置一个您拥有的域名以“指向”这个 back4app 域名。我为 http://ticketlister.koptional.com 配置了我的设置如下：
﻿
请注意“自定义域”下方的文本，如果您计划从您的网站启动.
如果您正确完成此步骤，您可以访问您的域并使用该应用。如果您没有自定义域，只需打开 http://<YOUR_SUBDOMAIN>.back4app.io，其中 YOUR_SUBDOMAIN 是您刚刚选择的名称.
5 - 使用和仪表板
要开始列出票务，您需要从 Back4App 的管理仪表板创建一个事件.
转到数据浏览器，创建一个‘事件’类。添加‘名称’（字符串）和‘时间’（日期）列。然后您可以直接添加一个事件。记得填写所有列。它应该看起来像这样:
﻿
﻿
﻿
现在，在您的网络应用上，您可以登录并列出与该事件相关的票务.
﻿
Parse / Back4App 附带的此管理功能是另一个减少您工作量的捷径.
结论
创建一个具有后端的网络应用通常需要几周或几个月的时间。我们利用了 Back4App 强大的基础设施和 Parse SDK，以更快的速度启动一个应用。使用这种方法构建任何应用程序都可以让您在不浪费时间的情况下创造出惊人的东西.
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
升级到Parse 3.1版本的技术要点与开发者指南
下一个
在Parse Cloud Code中集成测试：自动化指南