Vytváření aplikací ASP.NET Core v sadě Visual Studio pro Mac

ASP.NET Core je open source architektura pro různé platformy pro vytváření moderních cloudových aplikací připojených k internetu, jako jsou webové aplikace a služby, aplikace IoT a mobilní back-endy. aplikace ASP.NET Core mohou běžet v prostředí .net Core nebo v .NET Framework modulech runtime. Byla navržena tak, aby poskytovala optimalizované vývojové rozhraní pro aplikace, které jsou nasazeny do cloudu nebo místně spuštěné. Skládá se z modulárních komponent s minimálními nároky, takže při vytváření vašich řešení si zachováte flexibilitu. můžete vyvíjet a spouštět aplikace ASP.NET Core pro různé platformy v systémech Windows, Mac a Linux. ASP.NET Core je open source v GitHub.

v tomto testovacím prostředí vytvoříte a prozkoumáte ASP.NET Core aplikaci pomocí Visual Studio pro Mac.

Cíle

  • Vytvoření webové aplikace ASP.NET Core
  • prozkoumejte ASP.NET Core hostování, konfigurace a middlewarového modelu
  • ladění ASP.NET Core webové aplikace

Požadavky

Zamýšlená cílová skupina

Toto testovací prostředí je určené pro vývojáře, kteří znají jazyk C#, ale hloubkové prostředí není nutné.

úloha 1: vytvoření nové aplikace ASP.NET Core

  1. spusťte Visual Studio pro Mac.

  2. Vyberte soubor > nové řešení.

  3. vyberte kategorii aplikace > .net Core a šablonu ASP.NET Core webové aplikace (C#) . Klikněte na Next (Další).

    Snímek obrazovky ukazující, jak vybrat šablonu webové aplikace pro nový projekt.

  4. Zadejte název "CoreLab" a kliknutím na vytvořit vytvořte projekt. Dokončení této akce bude chvíli trvat.

    snímek obrazovky s konfigurací webové aplikace a přidáním názvu Project

Úkol 2: Seznámení s řešením

  1. výchozí šablona vytvoří řešení s jedním ASP.NET Core projektem s názvem CoreLab. Rozbalením uzlu projektu vystavte jeho obsah.

    Snímek obrazovky uzlu projektu řešení, aby se zobrazil jeho obsah, včetně složek a souborů

  2. Tento projekt následuje po paradigmatu Model-View-Controller (MVC) a poskytuje jasné rozdělení zodpovědnosti mezi daty (modely), prezentací (zobrazeními) a funkcemi (kontroléry). Otevřete soubor HomeController. cs ze složky Controllers .

    Snímek projektu řešení s třídou C# s názvem HomeController vybrán.

  3. Konvence třídy HomeController – zpracovává všechny příchozí požadavky, které začínají na /Home. Metoda index zpracovává požadavky do kořenové složky adresáře (jako http://site.com/Home ) a další metody zpracovávají požadavky na jejich pojmenovanou cestu na základě konvence, jako je například zpracování žádostí o () http://site.com/Home/About . To je samozřejmě vše konfigurovatelné. Jednou z důležitých verzí je, že HomeController je výchozí kontroler v novém projektu, takže požadavky na kořen webu ( http://site.com ) by procházejí prostřednictvím indexu () HomeController , stejně jako žádosti http://site.com/Home nebo http://site.com/Home/Index .

    Snímek obrazovky třídy jazyka C# s názvem HomeController.

  4. Projekt má také složku zobrazení , která obsahuje další složky, které jsou namapovány na jednotlivé řadiče (a také na jeden pro sdílená zobrazení. Například soubor zobrazení CSHTML (rozšíření HTML) pro cestu /Home/about by měl být v zobrazení/domů/o. cshtml. Otevřete tento soubor.

    Snímek projektu řešení se souborem C S H T M L s názvem o vybrané.

  5. Tento soubor CSHTML používá syntaxe Razor k vykreslování kódu HTML na základě kombinace standardních značek a vloženého jazyka C#. Další informace najdete v online dokumentaci.

    Snímek obrazovky části souboru C S H T M L zobrazující syntaxe Razor.

  6. Řešení obsahuje také složku wwwroot , která bude kořenem vašeho webu. Statický obsah webu, jako jsou CSS, obrázky a knihovny JavaScriptu, můžete umístit přímo na cesty, ve kterých byste měli při nasazení webu.

    Snímek obrazovky s vybraným kořenovou složkou w w w

  7. K dispozici jsou také různé konfigurační soubory, které slouží ke správě projektu, jeho balíčků a aplikace za běhu. Například výchozí Konfigurace aplikace je uložena v appsettings.js. Vnořený pod appsettings.jsv souboru je appsettings.Development.jsv souboru. Tady můžete potlačit některá nebo všechna tato nastavení v jednotlivých prostředích. Visual Studio pro Mac bude tímto způsobem vnořovat soubory pomocí stejné logiky jako Visual Studio pro Windows, takže soubory, které potřebujete k častým přístupům, jsou v forefrontu.

    Snímek obrazovky znázorňující zobrazení podrobností se zvoleným souborem JSON

Úloha 3: princip hostování aplikace

  1. Z Průzkumník řešení otevřete program. cs. Toto je zaváděcí nástroj, který spustí vaši aplikaci.

    Snímek obrazovky řešení s vybraným zdrojovým souborem C# s názvem program

  2. I když zde jsou pouze dva řádky kódu, jsou zásadní. Pojďme je rozdělit. Nejprve se vytvoří nový WebHostBuilder . ASP.NET Core aplikace vyžadují hostitele, ve kterém se má provést. Hostitel musí implementovat rozhraní IWebHost , které zpřístupňuje kolekce funkcí a služeb a metodu Start . Hostitel je obvykle vytvořen pomocí instance třídy WebHostBuilder, která sestaví a vrací instanci webhost . Webhost odkazuje na server, který bude zpracovávat požadavky.

    Snímek obrazovky s hlavní metodou jazyka C# s příkazem, který inicializuje proměnnou s názvem host s typem WebHostBuilder.

  3. I když je WebHostBuilder zodpovědný za vytvoření hostitele, který spustí server aplikace, vyžaduje poskytnutí serveru, který implementuje IServer . ve výchozím nastavení se jedná o Kestrel webový server pro různé platformy pro ASP.NET Core založený na libuv, což je asynchronní vstupně-výstupní knihovna pro různé platformy.

    Snímek obrazovky Main Method v jazyce C# zvýraznění proměnné hostitele nastavení serveru pomocí metody UseKestrel

  4. V dalším kroku je nastaven kořen obsahu serveru. To určuje, kde hledá soubory obsahu, například soubory zobrazení MVC. Výchozí kořen obsahu je složka, ze které se aplikace spouští.

    Snímek obrazovky Main Method v jazyce C# zvýraznění proměnné hostitele nastavení kořenového adresáře obsahu pro server pomocí metody UseContentRoot

  5. pokud aplikace musí spolupracovat s webovým serverem Internetová informační služba (IIS), měla by být metoda UseIISIntegration volána jako součást sestavení hostitele. To neprovádí konfiguraci serveru, jako je UseKestrel . chcete-li použít službu IIS s ASP.NET Core, je nutné zadat jak UseKestrel , tak UseIISIntegration. Kestrel je navržený tak, aby se spouštěl za proxy serverem a neměl by se nasazovat přímo na Internet. UseIISIntegration Určuje službu IIS jako reverzní proxy server, ale je relevantní pouze při spuštění na počítačích, které mají službu IIS. pokud nasadíte aplikaci na Windows, ponechte ji v. Nesnížit jinak.

    Snímek obrazovky Main Method v jazyce C# zvýraznění proměnné hostitele nastavení reverzních proxy server s metodou UseIISIntegration

  6. Je to čisticí postup, který odděluje načítání nastavení z zavedení aplikace. Aby to bylo možné snadno, je volána metoda UseStartup , která určuje, zda má být spouštěcí třída volána pro načítání nastavení a další úlohy po spuštění, například vložení middlewaru do kanálu http. Je možné, že máte několik volání UseStartup s očekáváním, že každé z nich Přepisuje předchozí nastavení podle potřeby.

    Snímek obrazovky Main Method v jazyce C# zvýraznění proměnné hostitele nastavení spouštěcí třídy pomocí možnosti UseStartup

  7. Posledním krokem při vytváření IWebHost je volání buildu.

    Snímek z hlavní metody C# zvýrazňující proměnnou hostitele metodou sestavení.

  8. i když třídy IWebHost jsou vyžadovány k implementaci neblokujícího spuštění, ASP.NET Core projekty mají metodu rozšíření s názvem Run , která zabalí začátek s blokujícím kódem, takže nemusíte ručně zabránit, aby byla metoda ukončena okamžitě.

    Snímek obrazovky s hlavní metodou jazyka C# zvýraznění příkazu pro spuštění hostitele příkazu

Úloha 4: spuštění a ladění aplikace

  1. V Průzkumník řešení klikněte pravým tlačítkem myši na uzel projektu CoreLab a vyberte možnost možnosti.

    Snímek obrazovky znázorňující kontextovou nabídku řešení CoreLab, zvýraznění možností.

  2. dialog možnosti Project obsahuje vše, co potřebujete k úpravě způsobu sestavení a spuštění aplikace. V levém panelu vyberte Konfigurace spustit > > výchozí uzel.

  3. Kontrolovat spuštění na externí konzole a zrušit kontrolu výstupu konzoly pozastavit. Obvykle by se konzola aplikace v místním prostředí neměla zobrazovat, ale místo toho se zaprotokoluje jeho výsledky do okna výstup . Pro účely tohoto testovacího prostředí ji zobrazíme v samostatném okně, i když to nemusíte dělat během normálního vývoje.

  4. Klikněte na OK.

    Snímek obrazovky s kartou pro obecné spuštění konfigurace s vybranou možnost spustit u externí konzoly a pozastavit výstup konzoly nebyl vybrán.

  5. Stiskněte F5, aby se aplikace sestavila a spustila. Případně můžete vybrat spustit > spustit ladění.

  6. Visual Studio pro Mac spustí dvě okna. První je okno konzoly, které nabízí zobrazení serverové aplikace s místním hostitelem.

    Snímek obrazovky s oknem konzoly pro serverovou aplikaci hostovanou na sebe

  7. Druhým je typické okno prohlížeče k otestování lokality. Pokud prohlížeč ví, že tato aplikace může být hostována kdekoli. Kliknutím na tlačítko o přejděte na tuto stránku.

    Snímek obrazovky znázorňující okno prohlížeče pro otestování webu a zvýrazňování možnosti o

  8. Kromě jiných věcí stránka o stránku vykresluje nějaký text nastavený v kontroleru.

    Snímek obrazovky znázorňující výsledek výběru možnosti o produktu, což je stránka o produktu

  9. nechte windows otevřené a vraťte se k Visual Studio pro Mac. Otevřete Controllers/HomeController. cs , pokud ještě není otevřený.

    Snímek obrazovky s vybraným řešením pro třídu C# HomeController.

  10. Nastavte zarážku na prvním řádku metody About . Můžete to udělat tak, že kliknete na okraj nebo nastavíte kurzor na řádku a stisknete F9. Tento řádek nastaví některá data v kolekci ViewData , která se vykreslí na stránce cshtml na views/Home/About. cshtml.

    Snímek obrazovky znázorňující metodu about se sadou zarážek

  11. Vraťte se do prohlížeče a aktualizujte stránku o produktu. tím se aktivuje zarážka v Visual Studio pro Mac.

  12. Myš nad členem ViewData , aby se zobrazila jeho data. Můžete také rozbalit jeho podřízené členy, aby se zobrazila vnořená data.

    Snímek obrazovky znázorňující zarážku s rozbalenými daty

  13. Odeberte zarážku aplikace pomocí stejné metody, jakou jste použili k jejímu přidání.

  14. Otevřete zobrazení/domů/o. cshtml.

  15. Změňte text "Další" na "změněno" a uložte soubor.

    Snímek obrazovky se souborem C S H T M L s názvem o se změnou jeho textu

  16. Kliknutím na tlačítko pokračovat můžete pokračovat v provádění.

    snímek obrazovky okna Visual Studio zvýrazněním tlačítka pokračovat.

  17. Pokud se chcete podívat na aktualizovaný text, vraťte se do okna prohlížeče. Tato změna se může provést kdykoli a nemusela by nutně vyžadovat zarážku ladicího programu. Aktualizujte prohlížeč, pokud se změna neprojeví okamžitě.

    Snímek obrazovky se stránkou o aplikaci tentokrát se změněným textem.

  18. Zavřete okno testovacího prohlížeče a konzolu aplikace. Tím se zastaví i ladění.

Úkol 5: konfigurace spuštění aplikace

  1. Z Průzkumník řešení otevřete Startup. cs. všimněte si, že některé červené vlnovky se zpočátku na pozadí obnovují NuGet balíčky a kompilátor Roslyn vytváří kompletní přehled závislostí projektu.

    Snímek obrazovky řešení se souborem třídy jazyka C# s názvem Startup Selected.

  2. Vyhledejte metodu spuštění . Tato část definuje počáteční konfiguraci aplikace a je zhuštěná. Pojďme si ji rozdělit na jednotlivé kroky.

    Snímek obrazovky znázorňující metodu spuštění třídy Startup

  3. Metoda začíná inicializací nerozšiřuje configurationbuilder a nastavením jeho základní cesty.

    Snímek obrazovky metody spuštění se zobrazením příkazu, který inicializuje proměnnou s názvem Builder s typem nerozšiřuje configurationbuilder.

  4. V dalším kroku načte požadovaný appsettings.jsdo souboru.

    Snímek obrazovky metody spuštění, která zobrazuje proměnnou tvůrce pomocí metody AddJsonFile k přidání souboru JSON s názvem appSettings.

  5. Potom se pokusí načíst appsettings.jspro konkrétní prostředí, které by přepsaly stávající nastavení. Jedná se například o appsettings.Development.jsv souboru používaném pro toto konkrétní prostředí. další informace o konfiguraci v ASP.NET Core najdete v dokumentaci.

    Snímek obrazovky metody spuštění, která zobrazuje proměnnou tvůrce pomocí metody AddJsonFile k přidání souboru JSON pro konkrétní prostředí.

  6. Nakonec jsou proměnné prostředí přidány do nástroje Configuration Builder a konfigurace je sestavena a nastavena pro použití.

    Snímek obrazovky metody spuštění, která zobrazuje proměnnou prostředí pro přidání proměnných prostředí a následné použití metody sestavení k sestavení konfigurace.

Úloha 6: vložení middlewaru aplikace

  1. Vyhledejte metodu Configure ve třídě Startup . Tady je místo, kde je nakonfigurované všechny middleware, aby je bylo možné vložit do kanálu HTTP a použít ke zpracování všech požadavků na server. I když je tato metoda volána pouze jednou, může být obsah metod (například UseStaticFiles) proveden při každém požadavku.

    Snímek obrazovky znázorňující metodu Configure ve třídě Startup

  2. Můžete také přidat další middleware, který bude spuštěn jako součást kanálu. Přidejte kód níže po aplikaci. UseStaticFiles automaticky přidat hlavičku X-test do každé odchozí odpovědi. Technologie IntelliSense pomůže doplňovat kód při psaní.

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Test", new[] { "Test value" });
        await next();
    });
    
  3. Stisknutím klávesy F5 Sestavte a spusťte projekt.

  4. Pomocí prohlížeče můžeme zkontrolovat hlavičky a ověřit, zda jsou přidány. Následující pokyny jsou pro Safari, ale můžete je dělat stejně jako v Chrome nebo v prohlížeči Firefox.

  5. Jakmile prohlížeč načte lokalitu, vyberte možnost Safari > předvolby.

  6. Na kartě Upřesnit klikněte na příkaz Zobrazit nabídku vývoje v řádku nabídek a zavřete dialogové okno.

    Snímek obrazovky s podoknem Upřesnit v dialogovém okně Předvolby prohlížeče Safari s vybranou možností zobrazit nabídku vývoje v panelu nabídek

  7. Vyberte možnost vyvinout > zobrazit prostředky stránky.

  8. Aktualizujte okno prohlížeče tak, aby nově otevřené vývojářské nástroje mohly sledovat a analyzovat provoz a obsah.

  9. Stránka HTML localhost vykreslená serverem bude položka vybraná jako výchozí.

    Snímek obrazovky se zvýrazněnou stránkou localhost H T M L.

  10. Rozbalte postranní panel podrobností.

    Snímek obrazovky zvýraznění ovládacího prvku, který se má použít k rozbalení bočního panelu podrobností

  11. Posuňte se k dolnímu okraji bočního panelu, abyste viděli hlavičku odpovědi přidanou v kódu dříve.

    Snímek obrazovky se zvýrazněnou hlavičkou odpovědi s názvem XTest s hodnotou testovací hodnoty.

  12. Po splnění tohoto okna zavřete okno prohlížeče a konzolu.

Souhrn

v tomto testovacím prostředí jste se naučili, jak začít vyvíjet ASP.NET Core aplikace pomocí Visual Studio pro Mac. pokud chcete prozkoumat vývoj více kompletních databázových aplikací filmů, přečtěte si kurz začínáme s ASP.NET Core MVC .