Kurz: Vytvoření aplikace Node.js a Express v Visual Studio

Článek
09/25/2021
5 min ke čtení

tento kurz pro Visual Studio vývoj používá Node.js a Express. V tomto kurzu vytvoříte jednoduchou webovou aplikaci Node.js, přidáte nějaký kód, prozkoumáte některé funkce rozhraní IDE a spustíte aplikaci.

V tomto kurzu se naučíte:

Vytvořit projekt Node.js
Přidat kód
Použití IntelliSense k úpravám kódu
Spuštění aplikace
Volání zarážky v ladicím programu

Než začnete, najdete tady stručné Nejčastější dotazy, které vám povedou k některým klíčovým koncepcím:

Co je Node.js?

Node.js je běhové prostředí JavaScriptu na straně serveru, které spouští JavaScriptový kód.
Co je npm?

Správce balíčků usnadňuje publikování a sdílení knihoven zdrojového kódu Node.js. Výchozím správcem balíčků pro Node.js je npm. Správce balíčků npm zjednodušuje instalaci, aktualizaci a odinstalaci knihovny.
Co je Express?

Express je serverová webová aplikace, kterou Node.js používá k sestavování webových aplikací. Pomocí Express můžete vytvořit uživatelské rozhraní pomocí různých rozhraní front-end. V tomto kurzu se pro své rozhraní front-endu používá Pug, dříve nazývaný Jade.

Požadavky

Tento kurz vyžaduje následující předpoklady:

Visual Studio s nainstalovanou úlohou vývoj Node.js.

Pokud jste ještě nenainstalovali Visual Studio:
1. pokud chcete nainstalovat Visual Studio zdarma, navštivte stránku Visual Studio ke stažení .
2. v Instalační program pro Visual Studio vyberte úlohu vývojeNode.js a vyberte nainstalovat.
pokud jste již Visual Studio nainstalováni:
1. v Visual Studio přejdete na nástroje > získat nástroje a funkce.
2. v Instalační program pro Visual Studio zvolte úlohu vývojeNode.js a vyberte upravit ke stažení a instalaci úlohy.
Instalovaný modul runtime Node.js:

Pokud nemáte nainstalovaný modul runtime Node.js, nainstalujte z webu Node.js verzi LTS. Verze LTS má nejlepší kompatibilitu s jinými rozhraními a knihovnami.

Node.js nástroje v rámci úlohy Visual Studio Node.js podporují Node.js 32 a 64 verze architektury. Visual Studio vyžaduje jenom jednu verzi a instalační program Node.js podporuje jenom jednu verzi v jednom okamžiku.

Visual Studio obvykle automaticky detekuje nainstalovanou Node.js modul runtime. Pokud ne, můžete nakonfigurovat projekt tak, aby odkazoval na instalovaný modul runtime:
1. Po vytvoření projektu klikněte pravým tlačítkem myši na uzel projektu a vyberte možnost vlastnosti.
2. V podokně vlastnosti nastavte Node.exe cestu tak, aby odkazovala na globální nebo místní instalaci Node.js. Můžete zadat cestu k místnímu interpretu v každém z vašich Node.jsch projektů.

Tento kurz byl testován s Node.js 14.17.5.

Tento kurz byl testován s Node.js 8.10.0.

Vytvoření nového projektu Node.js

Visual Studio spravuje soubory pro jednu aplikaci v projektu. Projekt obsahuje zdrojový kód, prostředky a konfigurační soubory.

V tomto kurzu začnete s jednoduchým projektem, který obsahuje kód pro Node.js a aplikaci Express.

otevřete Visual Studio a stisknutím klávesy Esc zavřete okno start.
Stiskněte kombinaci kláves CTRL + Q, do vyhledávacího pole zadejte node.js a v rozevíracím seznamu zvolte základní Azure Node.js Express 4 Application-JavaScript .

Pokud nevidíte základní volbu aplikace pro Azure Node.js Express 4 , musíte nainstalovat Node.js vývojové úlohy. Pokyny najdete v části požadavky.
V dialogovém okně Konfigurovat nový projekt vyberte vytvořit.

Visual Studio vytvoří nové řešení a projekt a otevře projekt v pravém podokně. Soubor projektu app.js se otevře v editoru v levém podokně.
Podívejte se na strukturu projektu v Průzkumník řešení v pravém podokně.
- Na nejvyšší úrovni je řešení (1), které ve výchozím nastavení má stejný název jako projekt. Řešení, reprezentované na disku souborem .sln, je kontejner pro jeden nebo více souvisejících projektů.
- Váš projekt (2) s použitím názvu, který jste zadali v dialogovém okně Konfigurovat nový projekt , je zvýrazněný tučně. V systému souborů je projekt souborem . njsproj ve složce projektu.
  
  Můžete zobrazit a nastavit vlastnosti projektu a proměnné prostředí tak, že kliknete pravým tlačítkem na projekt a vyberete vlastnosti z kontextové nabídky. Můžete pracovat s jinými nástroji pro vývoj, protože soubor projektu neprovádí vlastní změny ve zdrojovém projektu Node.js.
- Uzel npm (3) zobrazuje všechny nainstalované balíčky npm. Můžete kliknout pravým tlačítkem na uzel npm a vyhledat a nainstalovat balíčky npm pomocí dialogového okna.
  
  Balíčky můžete nainstalovat a aktualizovat pomocí nastavení v balíčku Package. JSON a možností kliknutí pravým tlačítkem na uzel npm .
- Project soubory (4) se zobrazí pod uzlem projektu. Spouštěcí soubor projektu, app.js, je zobrazen tučně.
  
  Spouštěcí soubor můžete nastavit tak, že kliknete pravým tlačítkem na soubor v projektu a vyberete nastavit jako Node.js spouštěcí soubor.
- NPM používá soubor Package. JSON (5) pro správu závislostí a verzí pro místně instalované balíčky. Další informace najdete v tématu Správa balíčků npm.
Otevřete uzel npm a ujistěte se, že jsou k dispozici všechny požadované balíčky npm.

Pokud se některé balíčky zobrazí jako (chybí), klikněte pravým tlačítkem myši na uzel npm , vyberte instalovat balíčky npm a nainstalujte chybějící balíčky.

Otevřete sadu Visual Studio.
Vytvoření nového projektu

Stisknutím klávesy ESC zavřete okno Start. Zadáním CTRL + Q otevřete vyhledávací pole, zadejte Node.js a pak zvolte vytvořit novou základní aplikaci Azure Node.js Express 4 (JavaScript). V dialogovém okně, které se zobrazí, vyberte vytvořit.

Pokud nevidíte základní šablonu projektu aplikace Azure Node.js Express 4 , je nutné přidat úlohu vývojeNode.js . Pokyny najdete v části požadavky.

Visual Studio vytvoří nové řešení a otevře projekt v pravém podokně. Soubor projektu app.js se otevře v editoru (levé podokno).

(1) zvýrazněná tučně je váš projekt pomocí názvu, který jste zadali v dialogovém okně nový Project . V systému souborů je tento projekt reprezentovaný souborem .njsproj ve složce projektu. Vlastnosti a proměnné prostředí přidružené k projektu můžete nastavit tak, že kliknete pravým tlačítkem na projekt a zvolíte Vlastnosti. Můžete provést operaci round-trip s jinými nástroji pro vývoj, protože soubor projektu neprovádí vlastní změny ve zdroji projektu Node.js.

(2) na nejvyšší úrovni je řešení, které ve výchozím nastavení má stejný název jako projekt. Řešení, reprezentované na disku souborem .sln, je kontejner pro jeden nebo více souvisejících projektů.

(3) uzel npm zobrazuje všechny nainstalované balíčky npm. Kliknutím pravým tlačítkem myši na uzel npm můžete vyhledat a nainstalovat balíčky npm pomocí dialogového okna nebo nainstalovat a aktualizovat balíčky pomocí nastavení v balíčku npm. JSON a kliknutím pravým tlačítkem myši na možnosti v uzlu.

(4) Package. JSON je soubor, který npm používá ke správě závislostí balíčků a verzí balíčků pro místně nainstalované balíčky. Další informace najdete v tématu Správa balíčků npm.

(5) Project soubory, jako je app.js , se zobrazí pod uzlem projektu. app.js je spouštěcí soubor projektu a to je důvod, proč se zobrazuje tučně. Spouštěcí soubor můžete nastavit tak, že kliknete pravým tlačítkem na soubor v projektu a vyberete nastavit jako Node.js spouštěcí soubor.
Otevřete uzel npm a ujistěte se, že jsou k dispozici všechny požadované balíčky npm.

Pokud chybí některé balíčky (ikona s vykřičníkem), můžete kliknout pravým tlačítkem na uzel npm a zvolit instalovat balíčky npm.

Otevřete sadu Visual Studio.
Vytvoření nového projektu

V horním řádku nabídek zvolte Soubor > Nový > Project. V levém podokně dialogového okna Nový Project rozbalte JavaScript a pak zvolteNode.js. V prostředním podokně zvolte Základní Azure Node.js Express 4 a pak zvolte OK.

Pokud nevidíte šablonu projektu základní aplikace Azure Node.js Express 4, musíte přidat úlohu Node.js vývoj. Pokyny najdete v tématu Požadavky.

Visual Studio vytvoří nové řešení a otevře projekt v pravém podokně. Soubor app.js projektu se otevře v editoru (levé podokno).

(1) Projekt je zvýrazněný tučně s použitím názvu, který jste dali v dialogovém Project nový projekt. V systému souborů je tento projekt reprezentovaný souborem .njsproj ve složce projektu. Vlastnosti a proměnné prostředí přidružené k projektu můžete nastavit tak, že kliknete pravým tlačítkem na projekt a zvolíte Vlastnosti. U jiných vývojových nástrojů můžete provádět zpětná přecházování, protože soubor projektu neproovádá vlastní změny ve zdroji Node.js projektu.

(2) Na nejvyšší úrovni je řešení, které má ve výchozím nastavení stejný název jako váš projekt. Řešení, reprezentované na disku souborem .sln, je kontejner pro jeden nebo více souvisejících projektů.

(3) Uzel npm zobrazuje všechny nainstalované balíčky npm. Kliknutím pravým tlačítkem na uzel npm můžete vyhledat a nainstalovat balíčky npm pomocí dialogového okna nebo nainstalovat a aktualizovat balíčky pomocí nastavení v souboru package.json a kliknout pravým tlačítkem na možnosti v uzlu npm.

(4) package.json je soubor, který npm používá ke správě závislostí balíčků a verzí balíčků pro místně nainstalované balíčky. Další informace najdete v tématu Správa balíčků npm.

(5) Project soubory, jakoapp.js se zobrazí pod uzlem projektu. app.js je spouštěcí soubor projektu, a proto se zobrazuje tučně. Spouštěcí soubor můžete nastavit tak, že kliknete pravým tlačítkem na soubor v projektu a vyberete Nastavit jako Node.js spouštěcí soubor.
Otevřete uzel npm a ujistěte se, že jsou k dispozici všechny požadované balíčky npm.

Pokud některé balíčky chybí (ikona vykřičník), můžete kliknout pravým tlačítkem na uzel npm a zvolit Nainstalovat balíčky npm.

Přidání kódu

Aplikace používá Pug pro front-endovou javascriptovou rozhraní. Pug používá jednoduchý kód značek, který se kompiluje do HTML.

Pug je nastavený jako modul zobrazení vapp.js s kódem app.set('view engine', 'pug'); .

V Průzkumník řešení otevřete složku views a pak výběrem souboru index.pug otevřete soubor .

Obsah souboru nahraďte následujícím kódem.

extends layout

block content
  h1= title
  p Welcome to #{title}
  script.
    var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
  script.
    var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
  script.
    var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }

  button(onclick='f1()') One!
  button(onclick='f2()') Two!
  button(onclick='f3()') Three!
  p
  a: img(id='myImage' height='300' width='300' src='')

Předchozí kód dynamicky vygeneruje stránku HTML s názvem a uvítací zprávou. Stránka obsahuje také kód pro zobrazení obrázku, který se změní pokaždé, když stisknete tlačítko.

Ve složce routes otevřete index.js.

Před volání funkce přidejte router.get následující kód:

var getData = function () {
    var data = {
        'item1': 'https://images.unsplash.com/photo-1563422156298-c778a278f9a5',
        'item2': 'https://images.unsplash.com/photo-1620173834206-c029bf322dba',
        'item3': 'https://images.unsplash.com/photo-1602491673980-73aa38de027a'
    }
    return data;
}

Tento kód vytvoří datový objekt, který předáte dynamicky generované stránce HTML.

Volání router.get funkce nahraďte následujícím kódem:
```
router.get('/', function (req, res) {
    res.render('index', { title: 'Express', "data" });
});
```
Předchozí kód nastaví aktuální stránku pomocí objektu směrovače Express a vykreslí stránku a předá na stránku název a datový objekt. Kód určuje soubor index.pug jako stránku, která se má načíst přiindex.js spuštění. Následující app.js, který tady není zobrazený, konfigurujeindex.js jako výchozí trasu.

Pro demonstraci Visual Studio funkcí je na řádku kódu úmyslná chyba, která obsahuje res.render . V další části vám IntelliSense pomůže chybu opravit, aby bylo možné aplikaci spustit.

Používání technologie IntelliSense

IntelliSense je Visual Studio nástroj, který vám při psaní kódu pomůže.

V index.js editoru Visual Studio přejděte na řádek kódu, který obsahuje res.render .
Umístěte kurzor za řetězec a "data" zadejte : get . IntelliSense zobrazí getData funkci, kterou jste definovali dříve v kódu. Vyberte getData.
Přidejte závorky, aby byl kód voláním funkce: getData() .
Odeberte čárku před "data" . U výrazu se zobrazí zelené zvýraznění syntaxe. Najeďte myší na zvýraznění syntaxe.

Poslední řádek zprávy vás informuje, že interpret JavaScriptu očekával čárku.
V dolním podokně vyberte kartu Seznam chyb a v rozevíracím seznamu vyberte Build + IntelliSense pro typ nahlášených problémů.

V podokně se zobrazí upozornění a popis spolu s názvem souboru a číslem řádku.
Opravte kód tak, že nahradíte čárku před "data" .

Opravený řádek kódu by měl vypadat takhle: res.render('index', { title: 'Express', "data": getData() });

Spuštění aplikace

Dále spusťte aplikaci s připojeným Visual Studio ladicím programem. Než to budete dělat, musíte nastavit zarážku.

Nastavení zarážky

Zarážky jsou základní a nejjednodušší funkcí spolehlivého ladění. Zarážka označuje, kde Visual Studio by měl spuštěný kód pozastavit. Pak můžete sledovat hodnoty proměnných, chování paměti nebo to, jestli je spuštěná větev kódu.

Zarážku nastavíte tak, že index.js před následujícím řádem kódu klikněte do levého okapu:

res.render('index', { title: 'Express', "data": getData() });

Spuštění aplikace v režimu ladění

Na panelu nástrojů Ladění vyberte cíl ladění, například Webový server (Google Chrome) nebo Webový server (Microsoft Edge).

Pokud víte, že váš upřednostňovaný cíl ladění je k dispozici na vašem počítači, ale nezobrazuje se jako možnost, vyberte v rozevíracím seznamu cíl ladění procházet pomocí. V seznamu vyberte výchozí cíl prohlížeče a vyberte Nastavit jako výchozí.
Stisknutím klávesy F5 nebo výběrem možnosti Debug Start > Debugging (Spustit ladění) spusťte aplikaci.

Ladicí program se pozastaví na zarážce, kterou jste nastavili, abyste mohli zkontrolovat stav aplikace.
Najeďte getData myší na jeho vlastnosti v popisu dat:
Stisknutím klávesy F5 nebo výběrem možnosti > Pokračovat ladění pokračujte v provozu aplikace.

Aplikace se otevře v prohlížeči. V okně prohlížeče by se měl jako název zobrazit Express a první odstavec vítá vás Express.
Vyberte 1!, Two! a Three! tlačítka pro zobrazení různých obrázků.
Zavřete webový prohlížeč.

Publikování do Azure App Service (volitelné)

V Průzkumníku řešení klikněte pravým tlačítkem na požadovaný projekt a vyberte Publikovat.
- Pokud se zobrazí výzva, vyberte Přidat profil publikování.
- Pokud se zobrazí výzva k instalaci nástrojů webové úlohy Azure, vyberte Nainstalovat.
Na první obrazovce Publish (Publikovat) vyberte Azure a pak vyberte Next (Další).
Na druhé obrazovce Publish (Publikovat) vyberte Azure App Service (Windows) a pak vyberte Next (Další).
Na další obrazovce se v případě potřeby přihlaste k Azure. Vyberte předplatné Azure, skupinu prostředků a App Service, do kterého chcete publikovat, a pak vyberte Dokončit.
- Pokud nemáte předplatné Azure, skupinu prostředků ani App Service, můžete je vytvořit podle pokynů na této obrazovce.
Podrobnější pokyny najdete v tématu Publikování na webu Azure pomocí nasazení webu.
Prohlédněte si konfiguraci publikování a pak vyberte Publikovat.

V Visual Studio Výstup se zobrazuje průběh nasazení Azure.
Po úspěšném nasazení se vaše aplikace otevře Azure App Service v prohlížeči. Výběrem tlačítka zobrazíte obrázek.

V Průzkumník řešení klikněte pravým tlačítkem na projekt a zvolte Publikovat.
Zvolte Microsoft Azure App Service.

V dialogovém App Service se můžete přihlásit ke svému účtu Azure a připojit se ke stávajícím předplatným Azure.
Podle zbývajících kroků vyberte předplatné, zvolte nebo vytvořte skupinu prostředků, zvolte nebo vytvořte plán služby App Service a po zobrazení výzvy k publikování do Azure postupujte podle pokynů. Podrobnější pokyny najdete v tématu Publikování na webu Azure pomocí nasazení webu.
V okně Výstup se zobrazuje průběh nasazení do Azure.

Po úspěšném nasazení se vaše aplikace otevře v prohlížeči spuštěném v Azure App Service. Kliknutím na tlačítko zobrazíte obrázek.