练习 - 设置并浏览示例项目

  • 5 分钟

在本单元中，从 GitHub 获取现有应用程序的代码、准备代码并设置开发环境。

获取并准备代码

  1. 在 bash 终端中，克隆代码存储库。

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. 更改为代码存储库目录。

    cd learn-functions

  3. 安装 npm 包依赖项。

    npm install

  4. 生成 Node.js Express 和 Angular 代码。

    npm run full:build

了解应用程序结构

示例应用程序是一个传统的 Node.js 和 Express API，具有四种服务于以下终结点的方法：

方法 路由终结点
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

在 Visual Studio Code 中打开项目，然后打开“server”文件夹以浏览 API 的结构。

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. 入口点是 server/index.ts 文件，该文件运行 server.ts 代码以启动 Express 服务器。
  2. 然后从“/routes”文件夹加载路由（例如 /vacations）。
  3. 这些路由执行“/services”文件夹中的相应代码。 数据存储配置是在 vacation.service.ts 文件中定义的。

Angular 客户端应用向 /api/vacations 路由发出 HTTP GET 请求，然后 routes/vacation.routes.ts 中的路由会调用 services/vacation.service.ts 文件中的数据逻辑来获取假期。

代理配置

Angular 应用程序需要能够向 Node.js Express API 发出请求。 Angular 应用程序使用代理将请求转发到 Express 服务器。 设置代理使浏览器能够找到 Express 服务器。 打开 proxy.conf.json，请注意该端口设置为 7070，即 Express 应用的端口。

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}