Ćwiczenie — konfigurowanie i eksplorowanie przykładowego projektu

  • 5 min

W tej lekcji uzyskasz kod istniejącej aplikacji z usługi GitHub, przygotujesz kod i skonfigurujesz środowisko programistyczne.

Pobieranie i przygotowywanie kodu

  1. W terminalu powłoki bash sklonuj repozytorium kodu.

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

  2. Przejdź do katalogu repozytorium kodu.

    cd learn-functions

  3. Zainstaluj zależności pakietów npm.

    npm install

  4. Skompiluj kod Node.js Express i Angular.

    npm run full:build

Omówienie struktury aplikacji

Przykładowa aplikacja to konwencjonalny interfejs API Node.js i Express z czterema metodami obsługującymi następujące punkty końcowe:

Method Punkt końcowy trasy
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Otwórz projekt w programie Visual Studio Code i otwórz folder serwera , aby poznać strukturę interfejsu 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. Punktem wejścia jest plik server/index.ts, który uruchamia kod server.ts, aby uruchomić serwer Express.
  2. Następnie trasy, takie jak /vacations, są ładowane z folderu /routes .
  3. Trasy wykonują odpowiedni kod w folderze /services . Konfiguracja magazynu danych jest zdefiniowana w pliku vacation.service.ts .

Aplikacja kliencka Angular wysyła HTTP GET żądanie do /api/vacations trasy, a trasa w routes/vacation.routes.ts wywołaniu logiki danych w services/vacation.service.ts pliku w celu uzyskania urlopów.

Konfiguracja serwera proxy

Aplikacja Angular musi być w stanie wysyłać żądania do interfejsu API platformy Node.js Express. Aplikacja Angular używa serwera proxy do przekazywania żądań do serwera Express. Skonfigurowanie serwera proxy umożliwia przeglądarce lokalizowanie serwera Express. Otwórz proxy.conf.json i zwróć uwagę, że port jest ustawiony na 7070, port aplikacji Express.

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