Gyakorlat – A mintaprojekt beállítása és felfedezése

  • 5 perc

Ebben a leckében lekérheti a meglévő alkalmazás kódját a GitHubról, előkészítheti a kódot, és beállíthatja a fejlesztési környezetet.

A kód lekérése és előkészítése

  1. Bash-terminálban klónozza a kódtárat.

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

  2. Váltson a kódtár könyvtárára.

    cd learn-functions

  3. Telepítse az npm-csomag függőségeit.

    npm install

  4. Hozza létre az Node.js Express- és Angular-kódot.

    npm run full:build

Az alkalmazásstruktúra ismertetése

A mintaalkalmazás egy hagyományos Node.js és expressz API négy metódussal, amelyek a következő végpontokat szolgálják ki:

Metódus Útválasztási végpont
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Nyissa meg a projektet a Visual Studio Code-ban, és nyissa meg a kiszolgálómappát az API szerkezetének megismeréséhez.

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. A belépési pont a server/index.ts fájl, amely a server.ts kóddal indítja el az Express-kiszolgálót.
  2. Ezután a rendszer betölti az útvonalakat, például /vacationsaz /routes mappából.
  3. Az útvonalak végrehajtják a megfelelő kódot a /services mappában. Az adattár konfigurációja a vacation.service.ts fájlban van definiálva.

Az Angular-ügyfélalkalmazás kérést HTTP GET küld az /api/vacations útvonalra, és a benne lévő routes/vacation.routes.ts útvonal meghívja a fájl adatlogikát a services/vacation.service.ts szabadságok lekéréséhez.

Proxy konfigurálása

Az Angular-alkalmazásnak képesnek kell lennie arra, hogy kéréseket küldjön az Node.js Express API-nak. Az Angular-alkalmazás proxyval továbbítja a kéréseket az Express-kiszolgálónak. A proxy beállítása lehetővé teszi, hogy a böngésző megkeresse az Express-kiszolgálót. Nyissa meg proxy.conf.json , és figyelje meg, hogy a port 7070értéke az Express-alkalmazás portja.

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