Cvičení – vytvoření nové webové aplikace pomocí Expressu

  • 5 min

Společnost Tailwind Traders vás požádala o vytvoření jednoduchého rozhraní API pomocí architektury Express. Online prodejce chce vyzkoušet Express, aby zjistil, jestli se v něm dá jednoduše pracovat. V rámci tohoto vyhodnocení od vás chce vytvořit webovou aplikaci, která používá různé trasy.

Otevření projektu ve vývojovém kontejneru

K dokončení cvičení v tomto modulu použijte poskytnutý vývojový kontejner. Vývojový kontejner je předem nakonfigurovaný pomocí nástrojů, které potřebujete ke cvičením.

  1. Spusťte proces vytvoření nového prostředí GitHub Codespace ve main větvi MicrosoftDocs/node-essentials úložiště GitHub.

    Otevření tohoto projektu v GitHub Codespaces

  2. Na stránce Vytvořit kódspace zkontrolujte nastavení konfigurace codespace a pak vyberte Vytvořit nový prostor kódu.

    Screenshot of the confirmation screen before creating a new codespace.

  3. Počkejte, až se prostor kódu spustí. Tento proces spuštění může trvat několik minut.

  4. Otevřete nový terminál v codespace.

    Tip

    Pomocí hlavní nabídky můžete přejít na možnost nabídky Terminál a pak vybrat možnost Nový terminál .

    Screenshot of the codespaces menu option to open a new terminal.

  5. Ověřte, že je ve vašem prostředí nainstalovaný Node.js:

    node --version

    Vývojový kontejner používá verzi Node.js LTS, například v20.5.1. Přesná verze se může lišit.

  6. Zbývající cvičení v tomto projektu probíhají v kontextu tohoto vývojového kontejneru.

Vytvoření základní webové aplikace v Expressu

Vytvořte základní aplikaci, která zpracovává požadavky.

  1. Otevřete terminál v vývojovém kontejneru.

  2. Pomocí následujících příkazů vytvořte nový projekt Node.js a nainstalujte architekturu Express:

    mkdir my-express-app
cd my-express-app
npm init -y
npm install express

    Příkaz init vytvoří výchozí soubor package.json pro váš projekt Node.js. Příkaz install nainstaluje architekturu Express.

  3. V editoru kódu otevřete soubor package.json.

    dependencies V části vyhledejte express položku:

    "dependencies": {
  "express": "^4.18.2"
  ...
}

    Tato položka označuje, že je nainstalovaná architektura Express. Vaše verze může být novější. Tento ukázkový kód používá verzi 4 architektury Express.

  4. V editoru my-express-app kódu ve složce vytvořte soubor s názvem app.js a přidejte následující kód:

    const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}! http://localhost:${port}/`));

    Kód vytvoří instanci aplikace Express vyvoláním express() metody. Jedná se o funkci nejvyšší úrovně exportovanou modulem Express. Veškerá další konfigurace a funkce se přidávají prostřednictvím app proměnné.

    Všimněte si, jak kód nastaví trasu lomítko /, kořen se syntaxí:

    app.get('/', (req, res) => res.send('Hello World!'));

    Po nastavení trasy spustí kód webovou aplikaci vyvoláním listen() metody:

    app.listen(port, () => console.log('Example app listening on port ${port}!'));

  5. Otevřete terminál pro tuto podsložku tak, že kliknete pravým tlačítkem myši na název podsložky a vyberete Otevřít v integrovaném terminálu.

  6. V terminálu spusťte následující příkaz, který spustí webovou aplikaci Express:

    node app.js

    Měl by se zobrazit následující výstup:

    Example app listening at http://localhost:3000

    Tento výstup znamená, že aplikace je v provozu a je připravená přijímat požadavky.

  7. Můžete kliknout pravým tlačítkem myši a vybrat adresu URL v terminálu nebo můžete otevřít prohlížeč, když Visual Studio Code zobrazí oznámení s dotazem, jestli chcete otevřít v prohlížeči. Měl by se zobrazit následující výstup:

    Hello World!

  8. V terminálu stisknutím kombinace kláves Ctrl + C zastavte webový program Express.

Vytvoření webové aplikace, která vrací data ve formátu JSON

K přidání nové trasy použijte stejný soubor app.js.

  1. V editoru kódu otevřete app.js soubor.

  2. Za existující app.get syntaxi přidejte následující kód za kód první trasy: /

     app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

  3. Ujistěte se, že soubor app.js vypadá jako v tomto příkladu:

     const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => res.send('Hello World!'));

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

 app.listen(port, () => {
     console.log(`Example app listening on port ${port}! http://localhost:${port}/`);
 });

  4. Uložte změny do souboru app.js a soubor zavřete.

  5. V terminálu spusťte následující příkaz, který restartuje webovou aplikaci Express:

    node app.js

    Měl by se zobrazit následující výstup:

    Example app listening at http://localhost:3000

  6. V prohlížeči se vraťte na kartu z předchozího kroku a přidejte novou trasu /productsna konec adresy URL. Měl by se zobrazit následující výstup JSON:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]

  7. V terminálu stisknutím kombinace kláves Ctrl + C zastavte webový program Express.

Blahopřejeme! Implementovali jste druhou trasu, která může obsluhovat statická data JSON.