练习 - 创建 Azure Functions 应用并重构代码

  • 5 分钟

在本练习中，你将创建一个运行 API 的无服务器 Azure Functions 应用程序，而不是创建 Express 应用程序。 然后，将应用程序逻辑从 Node.js Express 应用程序迁移到 Functions 应用程序。 无需重写代码。 只需更改少量代码即可进行转换。

创建新的 Azure Functions 应用

确保已安装适用于 Azure Functions 的 Visual Studio Code 扩展。

  1. 在 Visual Studio Code 中，按 F1 打开命令面板

  2. 键入并选择“Azure Functions: 创建新项目”。

    Screenshot of Visual Studio Code creating a new function app.

  3. 选择存储库的根目录作为新项目的位置。

  4. 出现提示时，输入以下值。

    名称 值
    语言 TypeScript
    选择 TypeScript 编程模型 模型 V4
    模板 HTTP 触发器
    名称 getVacations

现在已创建 Functions 应用来为应用程序的 API 终结点提供服务。 在下一单元中，你将创建列出、添加、更新和删除假期的函数。

注意

你在“functions”文件夹中创建了 Functions 应用，这会将其与 Angular 应用分开。 你可以决定如何构造应用程序，但出于学习目的，在一个位置查看两个应用会有所帮助。

复制和重构路由处理程序代码

返回数据的所有 Node.js Express 逻辑都位于“server/services”文件夹中。 可以将此代码从 Node.js Express 应用程序复制到 Functions 应用程序，然后执行一些次要重构，使代码适用于 Functions 而不是 Node.js Express。

下表列出了 Node.js Express 应用程序与 Functions 应用程序的主要差异：

组件 Node.js Express 函数
导入 npm 包用于为应用程序提供服务 express @azure/functions
请求和响应对象 req 和 res request 和 context

首先重构代码以导入相应的 npm 包。 然后重构以处理 Express 和 Functions 请求和响应对象传递方式的差异。

从 Express 项目复制现有代码

在 Visual Studio Code 中，从 Express 应用程序中的 server 文件夹复制以下子文件夹，并将其粘贴到 functions/ 文件夹中：

  • 数据
  • 模型
  • services

无需复制 routes 文件夹，因为将在 Azure Functions 应用中为每个路由创建新函数。

继续学习下一单元，创建函数并重构终结点和路由。