Упражнение. Настройка и изучение примера проекта

  • 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

Общие сведения о структуре приложения

Пример приложения — это обычный api Node.js и Express с четырьмя методами, которые служат следующим конечным точкам:

Способ Маршрутизация конечной точки
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Откройте проект в Visual Studio Code и откройте папку сервера для изучения структуры 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. Затем маршруты, например /vacations, загружаются из папки /routes .
  3. Маршруты выполняют соответствующий код в папке /services . Конфигурация хранилища данных определяется в файле vacation.service.ts .

Клиентское приложение Angular выполняет HTTP GET запрос к /api/vacations маршруту, а маршрут вызывает routes/vacation.routes.ts логику данных в services/vacation.service.ts файле, чтобы получить отпуск.

настройки прокси-сервера;

Приложение Angular должно иметь возможность выполнять запросы к API Node.js Express. Приложение Angular использует прокси-сервер для пересылки запросов на сервер Express. Настройка прокси-сервера позволяет браузеру находить сервер Express. Откройте proxy.conf.json и обратите внимание, что для порта задан 7070порт приложения Express.

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