创建 Vue.js 无服务器结账表单：设置和测试

任何年轻应用程序的生命周期中都会出现需要获利的时刻。有很多方法可以实现盈利，但接受现金是实现更直接盈利的可靠方法。在本为期四部分的教程中，我们将介绍如何设置无服务器函数，使其与 Stripe API 交互，并将其连接到作为 Vue 应用程序设置的结账表单。这听起来可能令人生畏，但实际上非常简单！让我们深入了解。

文章系列

什么是无服务器？

我们之前已经介绍过无服务器概念，但是，如果您还没有阅读那篇文章，让我们花一分钟时间谈谈我们所说的“无服务器”，因为它有点误导性。

无服务器的承诺是减少设置和维护服务器所需的时间。您实际上是让服务为您处理维护和扩展，并将您需要的功能缩减为在发出请求时运行特定代码的函数。因此，人们可能会将此称为 FaaS。这非常有用，因为您只需为所使用的资源付费，而不是为可能不需要的整个容器付费。您还主要集中精力处理需要运行的代码，而不是照看服务器，这对许多希望快速启动和运行的人来说非常有吸引力。

但 FaaS 并不总是合适的工具。它对于小型执行非常有用，但是，如果您有可能会占用资源或大量计算的进程，能够像平常一样与服务器通信可能效率更高。

我们要制作的是一个非常适合使用无服务器的用例。Stripe 结账在客户端和服务器端都非常容易集成，但我们确实需要在服务器上执行一些逻辑，因此我们将使用 Azure 来帮助我们实现这一点。门户网站和 GitHub 集成很容易操作，只要您知道去哪里。所以，让我们开始吧！

注册 Stripe

首先，我们将创建一个 Stripe 帐户。我们通过电子邮件验证新帐户，然后转到 API 部分，在那里我们可以检索两个密钥。您会注意到我们现在处于测试模式，这很好！我们会一直保持这种状态以进行测试，并在设置应用程序时公开用于测试的密钥令牌。

登录后，转到仪表板的 API 部分以检索您的密钥。

Stripe testing dashboard — Stripe API 屏幕

您可能还想为您的帐户添加电话号码，以便进行双因素身份验证。

在 Azure 门户中设置无服务器函数

首先，我们将前往门户（如果您还没有帐户，可以在这里注册免费试用），然后选择“新建”>“无服务器函数”。

当我们单击无服务器函数应用程序时，我们会进入一个面板，该面板要求提供一些详细信息来帮助设置。正如您在上面的屏幕截图中看到的，它会根据应用程序名称自动填充大多数字段，但让我们快速回顾一下其中的一些选项。

添加一个 **唯一名称**
一个 **资源组**（如果您还没有，请创建一个）
我使用 **Windows OS**，因为 Linux 仍然处于预览阶段，因此 Windows 更加稳定。
我使用 **消耗计划**，因为这是与使用量相匹配的付款方式，它也会自动扩展。另一个选项“应用程序服务计划”适用于喜欢手动操作一切的人。
选择靠近您的客户群的 **位置**，或选择两个客户群之间的中点。
选择一个 **存储**，或者像我一样创建一个。
我还将选中 **固定到仪表板**，因为我以后想快速检索我的函数。

这将带您回到主要门户仪表板，并告知您您的函数正在部署。完成后，它会将您带到一个包含所有选项的主屏幕。从这里，我们将创建我们的函数，它将是一个 HTTP 触发器。

我们将选择函数名称下的“函数”，您会看到一个带有加号的小表格，上面写着“新建函数”。

单击这里后，我们有一些创建选项。我们将选择 HTTP 触发器。

我们将能够选择语言（选择“JavaScript”），然后选择“创建”。

默认测试函数

从这里，我们将获得一个默认的测试函数，它可以帮助我们了解所有内容是如何工作的。如果我们打开所有这些面板并点击“运行”按钮，我们将在日志中看到输出。

这是我们得到的代码

module.exports = function(context, req) {
  context.log('JavaScript HTTP trigger function processed a request.');

  if (req.query.name || (req.body && req.body.name)) {
    context.res = {
      // status: 200, /* Defaults to 200 */
      body: 'Hello ' + (req.query.name || req.body.name)
    };
  } else {
    context.res = {
      status: 400,
      body: 'Please pass a name on the query string or in the request body'
    };
  }
  context.done();
};

您会看到这里我们传递了 context。这允许我们记录日志，它将显示在下面的最下方面板中。在右侧的 **测试** 面板中，我们可以传递一个请求主体，该主体可用于测试我们的应用程序。运行时，我们看到输出状态为 200，并且知道一切正常。我们还有一个 context.log，用于它返回 400 错误的情况。如果您想玩玩无服务器函数并亲眼看看它的运行方式，可以使用免费试用帐户创建一个。

接下来…

现在我们有了无服务器函数的基础，让我们设置与 Stripe 交互所需的内容！本系列的下一篇文章将介绍更多内容。