创建你自己的无服务器 API

如果您还不知道，Todd Motto 有 这个很棒的公共 API 列表。如果您正在尝试新的框架或新的布局模式，并且希望快速上手而无需费心处理内容，则它非常棒。

但是，如果您想或需要创建自己的 API 呢？无服务器可以帮助您为要公开使用的数据创建一个不错的 API。

无服务器真正适合此用例，希望这篇文章能说明原因。在非无服务器范例中，我们必须选择类似 express 的东西，我们必须设置端点，我们必须为您的 Web 服务器提供对数据库服务器的安全访问权限，您必须部署它，等等。相反，在这里我们将能够通过几次点击按钮，并进行少量修改来创建 API。

本教程的灵感来自：我一直在构建一个查找器来搜索新的鸡尾酒并获取随机鸡尾酒。我最初开始使用一个公共 API，但很快意识到我发现内容有限，并希望塑造自己的 API。

我将在此示例中使用 Azure，但也可以使用其他云提供商来实现我们在这里所做的操作。

创建函数

首先，如果您还没有，请创建一个 免费的 Azure 试用帐户。然后转到门户：preview.portal.azure.com。

接下来，我们将点击左上角的加号，并从列表中选择无服务器函数应用。然后，我们可以填写函数的新名称和一些选项。它将获取我们的资源组、订阅，并从默认值创建存储帐户。它还将使用资源组中的位置数据。因此，幸运的是，填充数据非常容易。

接下来，我们将使用 HTTP 触发器创建一个新函数，并转到集成选项卡以执行一些操作

我们所做的是

• 为路由模板命名
• 将授权级别更改为“匿名”
• 将允许的 HTTP 方法更改为“选定方法”
• 为选定方法选择“GET”，并取消选中所有其他方法

现在，如果我们从函数的右上角获取函数 URL，我们将得到以下内容

https://sdras-api-demo.azurewebsites.net/api/hello

我们获得的初始样板测试代码是

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();
};

现在，如果我们访问下面的 URL，我们将看到以下内容

https://sdras-api-demo.azurewebsites.net/api/hello/?name=TacoFace

在 这篇博文中有更多信息，包括使用函数代理进行 API 统一。您还可以使用自定义域名，此处未介绍。

好的，现在初始部分都设置好了，让我们找到一个托管数据的地方。

使用 CosmosDB 存储数据

有多种方法可以存储函数的数据。我想使用 Cosmos，因为它具有一键式集成，因此是一个非常低摩擦的选择。在此处获取 免费帐户。进入门户后，我们将转到左上角的加号以创建新的服务，这次选择“CosmosDB”。在这种情况下，我们选择了 SQL 版本。

我们有几个选项可以创建数据库中的文档。我们只是为了演示目的而创建一个小的示例，因此我们可以通过转到侧边栏中的数据资源管理器手动创建它们。在那里，我创建了一个名为CocktailFinder的数据库，一个名为Cocktails的集合，并添加了每个文档。对于我们的分区键，我们将使用/id。

在实际操作中，您可能希望通过点击“上传 JSON”按钮上传 JSON 文件，或者 按照本文档了解如何使用 CLI 创建文件。

我们可以添加如下所示的 JSON 格式内容

{
 "id": "1",
 "drink": "gin_and_tonic",
 "ingredients": [
   "2 ounces gin",
   "2 lime wedges",
   "3–4 ounces tonic water"
   ],
 "directions": "Add gin to a highball glass filled with ice. Squeeze in lime wedges to taste, then add them to glass. Add tonic water; stir to combine.",
 "glass": [
   "highball",
   "hurricane"
   ],
 "image": "https://images.unsplash.com/photo-1523905491727-d82018a34d75?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=52731e6d008be93fda7f5af1145eac12&auto=format&fit=crop&w=750&q=80"
}

这是我们创建的所有三个示例，以及 Cosmos 添加的内容

使函数显示数据

好的，现在我们有一些虚拟数据可以使用了，所以让我们将其连接到我们的无服务器函数，以便我们可以完成我们的 API！

如果我们回到门户中的函数并再次点击侧边栏中的集成，则有一个名为输入的中间列。在这里，我们可以点击显示“+ 新输入”的加号，然后会出现几个选项。我们将点击 CosmosDB 选项并“创建”。

将弹出一个提示，要求我们提供有关数据库和集合的信息。如果您还记得，databaseName 是CocktailFinder，collectionName 是Cocktails。我们还想使用相同的partitionKey，即/id。我们将使用所有其他默认值。

现在，如果我们转到我们的function.jso，您会看到它现在已更新为

{
  "type": "documentDB",
  "name": "inputDocument",
  "databaseName": "CocktailFinder",
  "collectionName": "Cocktails",
  "partitionKey": "/id",
  "connection": "sdrassample_DOCUMENTDB",
  "direction": "in"
}

我们将使用该inputDocument更新我们的测试函数以反映我们正在尝试访问的内容。我还经常添加状态和日志，但这是可选的。

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

  if (context.bindings) {
    context.log('Get ready');
    context.res = {status: 200, body: context.bindings.inputDocument};
    context.log(context.res);
  }
  else {
    context.res = {
      status: 400,
      body: "Something went wrong"
    };
  }
  context.done();
};

现在您可以看到我们的函数在工作了！

CORS！

不能忘记 CORS。回到门户，我们将点击函数名称，然后点击平台功能。CORS 列在 API 标题下。

我们可以在此处添加任何允许的来源。请记住，这包括localhost。

提供服务！

现在，为了确保 API 正常工作，并且我们可以从应用程序访问其数据，我们将使用 axios 调用。我有一个非常基础的 CodePen 实现，以便您可以了解其工作原理。在 Vue 中，我们正在挂接到created 生命周期方法并发出 GET 请求，以便将 JSON 数据输出到页面。

查看 Sarah Drasner 在 CodePen 上的 Pen 显示 API 输出，Vue.js 集成的开始（@sdras）。

从这里开始，您可以使用所有这些数据，并且可以以您喜欢的任何形式存储任何内容。您可以使用 Vue、React 或 Angular 等工具来创建与我们存储在数据库中的内容的界面，而我们的无服务器函数则为我们创建了 API。我们可以创建的东西无限！🎉