Cvičení – nastavení a prozkoumání ukázkového projektu

  • 5 min

V této lekci získáte kód stávající aplikace z GitHubu, připravíte kód a nastavíte vývojové prostředí.

Získání a příprava kódu

  1. V terminálu Bash naklonujte úložiště kódu.

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

  2. Přejděte do adresáře úložiště kódu.

    cd learn-functions

  3. Nainstalujte závislosti balíčku npm.

    npm install

  4. Sestavte kód Node.js Express a Angular.

    npm run full:build

Principy struktury aplikace

Ukázková aplikace je konvenční Node.js a rozhraní API Express se čtyřmi metodami, které obsluhují následující koncové body:

metoda Koncový bod trasy
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Otevřete projekt v editoru Visual Studio Code a otevřete složku serveru a prozkoumejte strukturu rozhraní 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. Vstupním bodem je soubor server/index.ts, na kterém běží kód server.ts pro spuštění serveru Express.
  2. Potom se trasy, například /vacations, načtou ze složky /routes .
  3. Trasy spouští příslušný kód ve složce /services . Konfigurace úložiště dat je definována v souboru vacation.service.ts .

Klientská aplikace Angular odešle HTTP GET požadavek na trasu /api/vacations a trasa ve routes/vacation.routes.ts volání logiky dat v services/vacation.service.ts souboru, aby získala dovolenou.

Konfigurace proxy serveru

Aplikace Angular musí být schopná provádět požadavky na rozhraní API Node.js Express. Aplikace Angular používá k předávání požadavků na server Express proxy server. Nastavení proxy serveru umožňuje prohlížeči vyhledat server Express. Otevřete proxy.conf.json a všimněte si, že port aplikace Express je nastavený na 7070port aplikace Express.

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