Cvičení – vytvoření nové webové aplikace pomocí Expressu
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.
Spusťte proces vytvoření nového prostředí GitHub Codespace ve
main
větviMicrosoftDocs/node-essentials
úložiště GitHub.Na stránce Vytvořit kódspace zkontrolujte nastavení konfigurace codespace a pak vyberte Vytvořit nový prostor kódu.
Počkejte, až se prostor kódu spustí. Tento proces spuštění může trvat několik minut.
Otevřete nový terminál v codespace.
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.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.
Otevřete terminál v vývojovém kontejneru.
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říkazinstall
nainstaluje architekturu Express.V editoru kódu otevřete soubor package.json.
dependencies
V části vyhledejteexpress
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.
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ímapp
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}!'));
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.
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.
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!
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.
V editoru kódu otevřete
app.js
soubor.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); });
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}/`); });
Uložte změny do souboru app.js a soubor zavřete.
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
V prohlížeči se vraťte na kartu z předchozího kroku a přidejte novou trasu
/products
na 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"}]
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.