Alıştırma - Örnek projeyi ayarlama ve keşfetme

  • 5 dakika

Bu ünitede GitHub'dan mevcut uygulamanın kodunu alır, kodu hazırlar ve geliştirme ortamınızı ayarlarsınız.

Kodu alma ve hazırlama

  1. Bash terminalinde kod deposunu kopyalayın.

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

  2. Kod deposu dizinine geçin.

    cd learn-functions

  3. npm paketi bağımlılıklarını yükleyin.

    npm install

  4. Node.js Express ve Angular kodunu oluşturun.

    npm run full:build

Uygulama yapısını anlama

Örnek uygulama, aşağıdaki uç noktalara hizmet veren dört yönteme sahip geleneksel bir Node.js ve Express API'dir:

Metot Yol uç noktası
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Projeyi Visual Studio Code'da açın ve API'nin yapısını keşfetmek için sunucu klasörünü açın.

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. Giriş noktası, server/index.ts dosyası olup bu dosya, Express sunucusunu başlatmak için server.ts kodunu çalıştırır.
  2. Ardından gibi /vacationsyollar /routes klasöründen yüklenir.
  3. Yollar /services klasöründe uygun kodu yürütür. Veri deposu yapılandırması vacation.service.ts dosyasında tanımlanır.

Angular istemci uygulaması rotaya /api/vacations bir HTTP GET istekte bulunur ve içindeki routes/vacation.routes.ts yol, tatilleri almak için dosyadaki services/vacation.service.ts veri mantığını çağırır.

Ara sunucu yapılandırması

Angular uygulamasının Node.js Express API'sine istekte bulunabilmesi gerekir. Angular uygulaması, istekleri Express sunucusuna iletmek için bir ara sunucu kullanır. Ara sunucu ayarlamak, tarayıcının Express sunucusunu bulmasını sağlar. proxy.conf.json açın ve bağlantı noktasının Express uygulamasının bağlantı noktası olarak ayarlandığına 7070dikkat edin.

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