Get best of the week

BlazingPizza：Blazor应用程序从头到尾。第1部分。设置环境

大家好！如果您听说过Blazor，但仍然不了解它是什么。然后，您在地址上。这是系列文章（共12篇）中的第一篇文章，它带您全面了解在Blazor上创建应用程序的整个过程。最后，我们将为小比萨店提供现成的场地，与某些比萨店的现成场地相当。因此，您将为此感到骄傲；）

这将与普通的HelloWorld有点不同。我刻意研究了一些复杂的问题，最好立即将它们作为规则，特别是这是一个典型的三层体系结构：View-Domain-DataAccess。

我认为，立即跟随它比显示与生命无关的虚假东西更好。如实践所示，许多开发人员陷入了HelloWorld级别，然后在设计先验大型应用程序时使用他们所看到的内容（我以前的绿色国家银行和它的Service.cs很好，所有应用程序代码都在一个文件中，我不是在开玩笑）。

我将告诉您如何轻松地在层之间映射数据，而无需编写多行代码。我们还将整个内容部署在Azure DevOps中。是的，现在这是任何开发过程中必不可少的一部分，今天，我们所有人都在云端进行部署，其中一些部署在本地，有些部署在Azure或AWS中。

而且，为了使第一篇文章不会成为关于如何在Visual Studio中按下一个按钮然后再按下另一个按钮的平庸故事，我认为安排一个小的挑战并尝试在Linux上进行一些尝试是一件很不错的事情。

我希望您对ASP.NET C＃的了解最少。尽管这是HelloWorld，但我不会谈论Program.cs是什么。

接下来，我们讨论在Linux下进行编程还需要什么。
注意：在以下几段中，我的印象是从Linux的实际工作中获得的，它是出于最好的意图而安装的，如果Linux给您带来热情的感觉，并且您不打开命令行就无法生活一天，那么您可能会破坏自己的心情，继续阅读本文！

发行：Ubuntu


实际上，在Linux下编程并不容易，但是如果您想专注于业务，请安装Ubuntu 19.10。我设法第二次提出，至少第二次很好。所有团队几乎都是第一次完成比赛。我强烈建议您不要安装任何其他发行版，我整日设置了最新的OpenSuse，然后将其删除了。

为什么甚至需要在Linux下进行开发？好吧，至少因为.Net Core支持它，也许您的雇主会决定省钱并在产品上的Linux上运行所有内容。而且我认为，在实际运行您的应用程序的OS下编写更好。

IDE冠军：骑士


就像我说的那样，仍然不可能在Linux下舒适地编写；对于所有的弊端，让我们选择较小的Rider。

除此以外，还有另外两个比较流行的IDE，例如文本编辑器MonoDevelop和Visual Studio Code。我将详细介绍每种解决方案的弊端。

Monodevelop


三位编辑中最可爱的一位。可读字体（低质量字体是转向Linux时引起您注意的第一件事）。但是不幸的是，尽管安装了.Net Core 2.1和3.1，但是在漂亮的外壳后面还是有一个空白，MonoDevelop为我创建了目标.Net Core 1.1持久性的ConsoleApplication。Blazor既没有创建项目，也没有启动手动创建的项目。

Visual Studio代码


严格来说，这不是IDE，而是具有语法突出显示和构建功能的文本编辑器。在第三次或第四次尝试的优势中，VS Code奇迹般地启动了我在MonoDevelop和Rider拒绝这样做时创建的WebAssembly项目。这是一个加号。我还列出了一些缺点：一种不可读且很小的默认字体，我认为经过几个月的常规工作后，您的眼睛会发疯。 下一个缺点是，这是一个文本编辑器，例如重命名，移动项目之类的简单操作？Visual Studio自动执行的所有操作（我们认为是理所当然的）都在此处手动完成。



骑士


这里的一切都比上面的同志好得多，Rider甚至拿起了我为Blazor WebAssembly安装的模板。他甚至创建了一个应用程序，但是由于某种原因该IDE拒绝启动它。为了公平起见，Blazor Server组装并启动时没有任何问题。Rider 还允许您在创建git项目时添加存储库。但是同时.gitignore却以某种方式为空。 也就是说，再次需要手动干预，为了提醒您，为了防万一，Rider与VS和JetBrains竞争



为他的产品拿钱。好了，通常情况下，通常在Linux上，问题是这些字体都是不好的字体，它们很细，可读性很差。元素也很小，它们仍然需要针对性。同样，在两天的工作中，Rider在加载一个简单的解决方案时挂了系统几次。计算机必须通过重置来重启，这当然是不好的（更新：在撰写本文时，已经发生了五次）。

获奖者在提名最佳C＃IDE对于Linux的：
骑士-尽管所有的缺点，我设法保证这个IDE一贯组装项目的上马，再次，出于某种原因，浏览器并没有默认启动，这必须手动完成。

在屏幕截图的下面，Rider（注意字体），并尝试运行一个由他自己创建的Blazor WebAssembly项目，并且使用MonoDevelop时遇到类似情况。



如果一切都很糟糕，为什么要使用Linux？


让我提醒您，这是一个培训项目，目的是证明您仍然可以在Linux上工作。

另外，Linux开发工具的不完善使我们不得不采取许多手动操作，这使我们可以了解有关.Net如何在幕后工作的更多信息，并了解Visual Studio为我们做了多少工作。

我们想要得到什么？


最后，我们得到了一个不错的应用程序，如下面的示例所示：



现在是这种情况。让我们从安装.Net Core 3.1开始

安装.Net Core 3.1


对.NET核心3.1.1 SDK是对的最新版本的SDK，它是在现有的Ubuntu的存储库。Blazor的更改非常迅速，因此，要与Blazor WebAssembly配合使用，请使用最新的稳定版本3.1.1。

首先，我们需要注册Microsoft密钥及其存储库，这是通过Terminal应用程序中的以下命令完成的（单击Win按钮并输入Term，它应该出现在可用列表中）：



  1. wget -q https://packages.microsoft.com/config/ubuntu/19.10/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
  2. sudo dpkg -i packages-microsoft-prod.deb

现在直接转到.Net Core SDK的安装：

  1. sudo apt-get update
  2. sudo apt-get install apt-transport-https
  3. sudo apt-get update
  4. sudo apt-get install dotnet-sdk-3.1

安装Blazor WebAssembly模板


.Net Core 的安装完成后，现在您需要安装Blazor WebAssembly模板，我将在预览阶段提醒您，该模板将在5月立即发布。就在我开始撰写本文的前一天，更新的版本3.2.0-preview1.20073.1（h）于1月28日发布。

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Git安装


如果您尚未安装Git，那么该了。严格来说，第一个命令根本不是必需的，Ubuntu会要求您输入密码，如果执行该命令需要特权，我们将期望它=）：

  1. sudo su
  2. add-apt-repository ppa:git-core/ppa
  3. apt update; apt install git

不仅如此，Blazor在浏览器中执行时会使用Mono，这意味着我们也需要安装它。

单声道安装


首先，将Mono存储库添加到系统中：

  1. sudo apt install gnupg ca-certificates
  2. sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
  3. echo "deb https://download.mono-project.com/repo/ubuntu stable-bionic main" | sudo tee /etc/apt/sources.list.d/mono-official-stable.list
  4. sudo apt update

现在直接安装Mono本身：

sudo apt install mono-complete

这是一个快速的过程，在装有Core-i5 6200U处理器的笔记本电脑上花费了大约10分钟，因为源代码编译直接在您的计算机上进行。

恭喜你！我们已经安装了开发Blazor WebAssembly项目所需的一切。
现在，您可以直接进入项目本身。

但是在此之前，请先暂停输入命令，然后在内存中刷新Blazor WebAssembly。

Blazor WebAssembly及其与之配合食用


Blazor是一个Web框架，旨在通过WebAssembly技术在浏览器的客户端（使用.Net运行时，或更确切地说是Mono实施，由于开放了.Net源代码，与原始平台几乎没有什么不同）或在服务器端运行。托管在Asp.Net Core应用程序中，并通过SignalR技术（通过创建Circuits连接）交换数据。

从上面的描述中可以看到，Blazor！= .Net WebAssembly实现。
如果将WebAssembly从此捆绑包中剔除，则可以开发Blazor Server应用程序，即使在IE 11中也可以使用谁从没听说过现代技术，并感谢上帝，他将再也听不到。

由于我们正在基于Blazor WebAssembly方法开发应用程序。然后，我们再考虑一下。

  1. index.html app, . blazor.webassembly.js . Blazor , ( AutoMapper, AutoFac) Mono .

    Blazor , .

    Blazor(3.1.0-preview4.19579.2, ) .Net, Blazor, .

    Blazor , , , .
  2. 这种方法的主要缺点可能是复杂的调试，您无法设置断点，也不会陷入断点，尽管我认为这是暂时的，因为可以在工作室中更早地连接到IE和调试JS代码。

    好吧，也许第二个明显的缺点是需要下载所有源代码，我仍然认为还有很多优化的机会。
  3. 实际上，在下载并完成所有准备过程之后，我们的应用程序在浏览器UI流中运行并开始执行。您可以从C＃调用任何JS代码，反之亦然。

很久没有照片了，所以下面是：）



点网工具


此外，我们将积极使用.Net Core SDK-dotnet中的实用程序。

它可以让您做很多有用的事情，我们只对其中一些感兴趣：

dotnet build

上面的命令收集解决方案，如果您从包含解决方案的文件夹开始，则不需要任何参数。

dotnet new blazorwasm -ho -o BlazingPizza

它允许您基于单词new之后的模板创建一个新项目，在我们的例子中是blazorwasm，例如，您可以在此处指定classlib或console。

接下来是模板的特定参数，在本例中为-ho，此参数指示我们的应用程序将托管在ASP.NET Core应用程序的服务器端，.NET还将为我们创建控制器，尤其是我们可以用来创建控制器。Web API，不仅可以从Blazor应用程序中访问它，还可以从其他客户端访问它。

最后一个选项-o表示将在其中放置创建的解决方案的文件夹，默认情况下，这是当前目录。

dotnet run

顾名思义，派上用场的另一个团队启动了我们的应用程序。

项目创建


因此，我们将执行熟悉的团队以生成我们的解决方案。为此，选择一个您知道的位置，例如，Rider IDE创建的RiderProjects文件夹，该文件夹位于路径/ home / {userName}上：

dotnet new blazorwasm -ho -o BlazingPizza


创建完成后，我们将构建项目并最终运行它以享受什么样的结果（第一个命令在BlazingPizza.sln文件级别执行）：

dotnet build


一切都应该顺利通过，转到Server文件夹并执行：

dotnet run


最后，我们看到了珍贵的结果：



太好了，一切正常。现在，让我们不要忘记该网站的外观很长时间，并切换到其内容。

第一个命令（dotnet new）的结果是这样的文件夹结构：



我认为这不是一个好的方案，最好是文件夹带有解决方案名称的前缀，这应该更熟悉（这是VisaulStudio在创建新项目时所做的事情），并明确指出这不是一个好方法。某种扩展服务文件夹。随着时间的推移，该项目可能会成长为许多不包含C＃代码的文件夹，并且如果您转至Explorer，将很难导航到什么地方，此外可能还有一些部署。脚本基于以下事实：这是正常的，因为这是Visual Studio的长期行为，您可以依赖它，因为每个文件夹的名称都以解决方案的名称开头，该项目位于该文件夹中。

因此，我们将重命名包含它们的现有项目和文件夹（到目前为止，我们对IDE一无所知，因为我们在Linux上，并且这第一次没有帮助，因为文件夹和项目的命名不同）：

Client => BlazingPizza.Client
服务器=> BlazingPizza.Server
共享=> BlazingPizza.Shared
必须在解决方案文件BlazingPizza.sln中显示相应的更改。在指示项目“ [Server] \〜”的路径的地方，下面我们将相应地替换为如下面的屏幕快照中的“ BlazingPizza。[Server] \〜”：



让我们在文件BlazingPizza.Server.csproj中进行类似的更改：



最后，BlazingPizza.Client.csproj应该看起来像下面的屏幕快照：



就目前的更改而言，我们已经足够已经积累了足够的钱以至于丢了丢人，因此我们将版本控制系统连接到我们的解决方案。为此，最后打开我们的IDE骑士和解决方案，这里的所有内容都与Visual Studio中的相同，您可以通过选择解决方案文件来打开。

加载完所有内容后，转到菜单VCS =>启用版本控制集成。在这里，我们连接Git。Rider会将解决方案中的服务文件添加到文件夹中，并用红色突出显示所有文件，这意味着这些文件在版本控制系统中未修复。Rider
第一次提供提交项目中所有内容的承诺，包括bin和obj文件夹的内容，我们当然不需要这样做，因为默认情况下添加的.gitignore文件为空。使用BlazingPizza.sln文件将其移至根的一级，然后用kata下面的内容替换其内容。

.gitignore文件的内容
# Default ignored files
/workspace.xml
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
##
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore

# User-specific files
*.suo
*.user
*.userosscache
*.sln.docstates

# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs

# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/

# Visual Studio 2015/2017 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/

# Visual Studio 2017 auto generated files
Generated\ Files/

# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*

# NUNIT
*.VisualState.xml
TestResult.xml

# Build Results of an ATL Project
[Dd]ebugPS/
[Rr]eleasePS/
dlldata.c

# Benchmark Results
BenchmarkDotNet.Artifacts/

# .NET Core
project.lock.json
project.fragment.lock.json
artifacts/
**/Properties/launchSettings.json

# StyleCop
StyleCopReport.xml

# Files built by Visual Studio
*_i.c
*_p.c
*_i.h
*.ilk
*.meta
*.obj
*.iobj
*.pch
*.pdb
*.ipdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*.log
*.vspscc
*.vssscc
.builds
*.pidb
*.svclog
*.scc

# Chutzpah Test files
_Chutzpah*

# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opendb
*.opensdf
*.sdf
*.cachefile
*.VC.db
*.VC.VC.opendb

# Visual Studio profiler
*.psess
*.vsp
*.vspx
*.sap

# Visual Studio Trace Files
*.e2e

# TFS 2012 Local Workspace
$tf/

# Guidance Automation Toolkit
*.gpState

# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
*.DotSettings.user

# JustCode is a .NET coding add-in
.JustCode

# TeamCity is a build add-in
_TeamCity*

# DotCover is a Code Coverage Tool
*.dotCover

# AxoCover is a Code Coverage Tool
.axoCover/*
!.axoCover/settings.json

# Visual Studio code coverage results
*.coverage
*.coveragexml

# NCrunch
_NCrunch_*
.*crunch*.local.xml
nCrunchTemp_*

# MightyMoose
*.mm.*
AutoTest.Net/

# Web workbench (sass)
.sass-cache/

# Installshield output folder
[Ee]xpress/

# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html

# Click-Once directory
publish/

# Publish Web Output
*.[Pp]ublish.xml
*.azurePubxml
# Note: Comment the next line if you want to checkin your web deploy settings,
# but database connection strings (with potential passwords) will be unencrypted
*.pubxml
*.publishproj

# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
PublishScripts/

# NuGet Packages
*.nupkg
# The packages folder can be ignored because of Package Restore
**/[Pp]ackages/*
# except build/, which is used as an MSBuild target.
!**/[Pp]ackages/build/
# Uncomment if necessary however generally it will be regenerated when needed
#!**/[Pp]ackages/repositories.config
# NuGet v3's project.json files produces more ignorable files
*.nuget.props
*.nuget.targets

# Microsoft Azure Build Output
csx/
*.build.csdef

# Microsoft Azure Emulator
ecf/
rcf/

# Windows Store app package directories and files
AppPackages/
BundleArtifacts/
Package.StoreAssociation.xml
_pkginfo.txt
*.appx

# Visual Studio cache files
# files ending in .cache can be ignored
*.[Cc]ache
# but keep track of directories ending in .cache
!*.[Cc]ache/

# Others
ClientBin/
~$*
*~
*.dbmdl
*.dbproj.schemaview
*.jfm
*.pfx
*.publishsettings
orleans.codegen.cs

# Including strong name files can present a security risk 
# (https://github.com/github/gitignore/pull/2483#issue-259490424)
#*.snk

# Since there are multiple workflows, uncomment next line to ignore bower_components
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
#bower_components/

# RIA/Silverlight projects
Generated_Code/

# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm
ServiceFabricBackup/
*.rptproj.bak

# SQL Server files
*.mdf
*.ldf
*.ndf

# Business Intelligence projects
*.rdl.data
*.bim.layout
*.bim_*.settings
*.rptproj.rsuser

# Microsoft Fakes
FakesAssemblies/

# GhostDoc plugin setting file
*.GhostDoc.xml

# Node.js Tools for Visual Studio
.ntvs_analysis.dat
node_modules/

# Visual Studio 6 build log
*.plg

# Visual Studio 6 workspace options file
*.opt

# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
*.vbw

# Visual Studio LightSwitch build output
**/*.HTMLClient/GeneratedArtifacts
**/*.DesktopClient/GeneratedArtifacts
**/*.DesktopClient/ModelManifest.xml
**/*.Server/GeneratedArtifacts
**/*.Server/ModelManifest.xml
_Pvt_Extensions

# Paket dependency manager
.paket/paket.exe
paket-files/

# FAKE - F# Make
.fake/

# JetBrains Rider
.idea/
*.sln.iml

# CodeRush
.cr/

# Python Tools for Visual Studio (PTVS)
__pycache__/
*.pyc

# Cake - Uncomment if you are using it
# tools/**
# !tools/packages.config

# Tabs Studio
*.tss

# Telerik's JustMock configuration file
*.jmconfig

# BizTalk build output
*.btp.cs
*.btm.cs
*.odx.cs
*.xsd.cs

# OpenCover UI analysis results
OpenCover/

# Azure Stream Analytics local run output 
ASALocalRun/

# MSBuild Binary and Structured Log
*.binlog

# NVidia Nsight GPU debugger configuration file
*.nvuser

# MFractors (Xamarin productivity tool) working folder 
.mfractor/

# sqlite
*.db

# Don't ignore server launchSettings.json. We need a specific port number for auth to work.
!**/BlazingPizza.Server/Properties/launchSettings.json


之后，未提交的文件数必须急剧减少到31。

在“存储库”选项卡上创建我们的第一个提交：



在提交描述中输入初始提交，并通过单击“未版本化的文件” => “添加到VCS”，将所有文件包括在提交中：



C基础架构或多或少已经准备就绪，让我们谈谈解决方案的内容。

解决方案内容


BlazingPizza.ClientUI . Startup.cs < pp > . App.razor < pp > index.html .
wwwroot/index.html — , html c < app > .
_framework/blazor.webassembly.js .Net , Mono . .
BlazingPizza.Server
blazorwasm -ho, “Hosted deployment with ASP.NET Core – ASP.NET Core . dotnet -ho , web api. , , , - . Standalone hosting IIS, .
BlazingPizza.Shared( BlazingPizza.DomainModels)
. . , .

: Pizza, , . , - - property. , JavaScript Kotlin.

重命名项目BlazingPizza.Shared到BlazingPizza.DomainModels。在这里必须说，尽管有实验性的标记，骑士还是做得很好。运行项目并确保一切正常，没有任何问题。



创建更改进行提交会很好，如果只是看一下Rider为我们做了多少，我会提醒您，如果它是Visual Studio Code，则您必须使用笔来完成所有操作您自己，点击它们即可查看diff文件。



添加新项目


从BlazingPizza.ViewModels开始，再添加一些项目。它将在客户端上显示显示模型。要添加，请右键单击解决方案，然后选择添加=>新建项目（类库中此部分以及下一部分中的项目类型）


BlazingPizza.DataAccess.Models层中用于从数据库访问数据的模型
BlazingPizza.DataAccess.Infrastructure所有与数据库交互的责任
BlazingPizza.Services.Interfaces服务的接口与实现分开，因此，如果您使用默认以外的其他实现，则无需将它们拖在一起。
BlazingPizza。服务服务的实现，例如PizzaService，它将在执行与业务逻辑相关的某种检查时将比萨饼添加到数据库中。

如果出了点问题，或者只是不想浪费时间在第二课之后就开始学习，那么这里就是参考资料。

哦，是的，我差点忘了:) 链接到原始项目（MIT许可证）。

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles