一、ASP.NET Core 和 Vue.js 入门

首先，我想感谢你能买到这本书。 本书旨在教导繁忙的开发人员如何构建一个真实世界的全栈 web 应用，从开发到部署。 这本书是根据我多年来从我的工作室开发的一步一步的过程量身定制的。 所以，让我们开始旅程吧。

本章简要概述了 ASP 的现状.NET Core 和 Vue.js 让你对 ASP 的 web 开发有一个大致的了解.NET Core 和 Vue.js。 您还将看到 Vue.js 作为一个应用是多么的稳定和可靠，并了解编写和维护 Vue.js 框架背后的团队。

在本章中，我们将涵盖以下主题:

  • 介绍 ASP.NET Core
  • .NET 有什么新特性?
  • 什么是新的 ASP.NET Core?
  • 引入 Vue.js

技术要求

您将在这个 URL:https://github.com/PacktPublishing/ASP.NET-Core-and-Vue.js找到我们将构建的应用的存储库。

每个章节都有自己的目录，每个目录有一个名为start的文件夹和一个名为finish的文件夹。

start文件夹是存储库在写入任何代码之前的状态。 finish文件夹是每一章结束时存储库的状态。

介绍 ASP.NET Core

【参考译文】 NET Core 是一个开放的源代码的 web 应用框架，来自微软，旨在快速、高性能，并可在 Windows、macOS 和 Linux 等平台上工作，用于构建现代云服务和互联网连接应用。 你可以使用跨平台的 VS Code 来构建你的应用，而不需要安装 Parallels 或 VMware 等虚拟化软件。 你只需要在另一个操作系统git clone上安装另一个 VS Code 实例，安装。net Core SDK，然后继续编写代码。

开发人员可以从 ASP 带来的较小的应用表面区域中获得好处.NET Core 的框架结构具有更强的安全性、更好的性能和更少的服务。

然而，在我们讨论 ASP 的新特性之前.NET Core 5，我们必须首先知道。NET 5 是什么。

.NET 有什么新内容?

. net 是一个开放的源代码开发平台，由 Microsoft 创建，用于构建许多不同类型的应用。

微软现在使用一个单一的框架来统一所有的。net 平台，从网页应用，移动，云，到桌面。net 5 包括 Xamarin 和它的网页组装平台，为了使它更好， 微软还能够将对Windows Presentation Foundation(WPF)和 Windows Forms 的支持转移到框架中。

请看图 1.1，它显示了新的。net 5 平台提供了一组公共的 api 来支持不同的运行时实现:

Figure 1.1 – .NET: A unified platform

图 1.1 - .NET:统一平台

您可以使用。net 5 的相同的 api，针对不同的操作系统、应用类型和芯片架构。 加上,你可以配置或编辑您的构建配置使用您喜欢的集成开发环境(IDE)和文本编辑器可以使用 Visual Studio 等流行的 IDE, Visual Studio Mac,或骑士, 或文本编辑器(如 Visual Studio Code)或普通的旧命令行来构建应用。****

**.NET 5 的亮点是，如下:

  • 它包括新的 c# 9 和 f# 5。
  • 一个新的单文件发布类型，在一个二进制文件中执行你的应用。
  • 在 Windows ARM64 上运行。net。
  • 在 JIT 和 BCL 库中提高了 ARM64 (Linux 和 Windows)的性能。
  • 减少容器映像大小，并实现新的容器 api，使。net 能够跟上容器运行时的变化。
  • 它可以更容易地从Newtonsoft.Json迁移到System.Text.Json。

现在我们可以看看 ASP 的新特性.NET Core 5。

ASP 的新特性 NET Core?

以下是添加到新 ASP 的内容的粗略列表。 核心 web 框架:

  • HTTP/2 的性能改进:. net 5 通过在 Kestrel 中添加支持 HPack 动态压缩 HTTP/2 响应头来提高 HTTP/2 的性能。
  • 减少容器图像的大小:在两个图像之间共享图层将显著减少你所获取的聚合图像的大小。 这种减少是通过在 ASP 上重新镀 SDK 图像来实现的。 网络运行时的形象。
  • 通过配置 Kestrel 的可重新加载端点:Kestrel 现在可以观察到传递给KestrelServerOptions.Configure的配置的更改。 然后，它可以应用于任何新的端点，而无需重新启动应用。
  • HttpRequest 和 HttpResponse 的JSON 扩展方法:使用新的ReadFromJsonAsync和WriteAsJsonAsync扩展方法，您现在可以轻松地使用来自HttpRequest和HttpResponse的 JSON 数据。 JSON 扩展方法也可以通过端点路由来编写，以创建 JSON api，如下所示:
  • 扩展方法允许匿名访问端点:AllowAnonymous扩展在使用端点路由时允许匿名访问端点。 在下面的代码中，在调用MapGet方法后，扩展方法AllowAnonymous()被链结:
  • 授权失败的自定义处理:通过AuthorizationMiddleware调用新的IAuthorizationMiddlewareResultHandler接口，授权失败的自定义处理现在比以前更容易。 现在，您可以在依赖注入容器中注册一个自定义处理程序，它允许开发人员定制 HTTP 响应。
  • SignalR 集线器过滤器:类似于中间件如何让您在 HTTP 请求之前和之后运行代码，ASP 中的集线器管道.NET SignalR 是允许您在调用 Hub 方法之前和之后运行代码的特性。
  • 更新了 Blazor WebAssembly 的调试:开发 Blazor WebAssembly 应用不需要 VS Code JS 调试器扩展。
  • Blazor 可访问性改进:来自InputBase的输入组件现在在验证失败时自动呈现aria-invalid(一个 HTML 验证属性)。
  • Blazor 性能改进:这包括优化的。net 运行时执行、JSON 序列化、JavaScript 互操作和组件渲染。
  • Kestrel 套接字传输支持其他端点类型:Kestrel 中的System.Net.Sockets传输现在允许您绑定到 Unix 域套接字和现有的文件句柄。
  • Azure Active Directory 认证与 Microsoft.Identity.Web NET Core 项目模板现在可以很容易地与Microsoft.Identity.Web集成，以处理 Azure AD 的认证。

  • 发送 HTTP/2 PING 帧:微软增加了在 Kestrel 中发送周期性 PING 帧的能力，通过设置限制KestrelServerOptions，即Limits.Http2.KeepAlivePingInterval和Limits.Http2.KeepAlivePingTimeout，如下代码所示:

    public static IHostBuilder CreateHostBuilder(string[] args) =>     Host.CreateDefaultBuilder(args)         .ConfigureWebHostDefaults(webBuilder =>         {             webBuilder.ConfigureKestrel(options =>             {                 options.Limits.Http2.                KeepAlivePingInterval = TimeSpan                 .FromSeconds(10);                 options.Limits.Http2.                KeepAlivePingTimeout = TimeSpan                 .FromSeconds(1);             });             webBuilder.UseStartup<Startup>();         });

  • Kestrel 自定义报头解码:微软还增加了指定哪个System.Text.Encoding用于根据报头名称来解释传入的报头，而不是默认为 UTF-8，如下所示:

  • Blazor 组件的 CSS 隔离:Blazor 现在支持在组件中有范围的 CSS 样式。
  • 在 Blazor WebAssembly 中延迟加载:使用Router组件上的OnNavigateAsunc事件为特定页面延迟加载程序集。
  • Set UI focus on Blazor apps:使用ElementReference的FocusAsync方法将 UI 焦点设置在一个元素上。
  • 控制 Blazor 组件实例化:IComponentActivator可以用来控制 Blazor 组件的实例化方式。
  • 影响 Blazor 应用的 HTML 头部:使用 Blazor 应用的head标签中内置的Title、Link、Meta组件添加动态链接和元标签。
  • 受保护的浏览器存储:ProtectedLocalStorage和ProtectedSessionStorage可用于在本地或会话存储中创建安全的持久应用状态。

  • Model binding and validation with C#9 record types: You can use Record types to model data transmitted over the network like so:

    public record Person([Required] string Name,                      [Range(0, 150)] int Age); public class PersonController {    public IActionResult Index() => View();    [HttpPost]    public IActionResult Index(Person person)    {           // ...    } }

    您可以在公共访问修饰符之后看到record类型。

  • 对 DynamicRouteValueTransformer的改进:您现在可以将状态传递给DynamicRouteValueTransformer并过滤选择的端点集。

  • dotnet 手表自动刷新 当您在运行dotnet``watch时更改代码时，NET Core 项目现在将启动默认浏览器并自动刷新它。
  • 控制台记录器格式化器:控制台记录器格式化器让开发人员完全控制控制台输出的格式化和着色。
  • JSON控制台日志记录器:微软增加了一个内置的 JSON 格式化器，将结构化的 JSON 日志发送到控制台。

这就是 ASP 的新特性列表.NET Core 5。 那么破坏更改呢? 在 ASP 中有什么突破性的变化吗? NET Core 5 ? 是的，让我们在下一节中检查一下。

打破从 ASP 迁移的更改。 从 asp.net Core 3.1 到 asp.net。 5.0 NET Core

如果你正计划将现有的应用或正在开发的项目从。net Core 3.1 迁移到 Core 5，你可能需要暂停一下，并阅读下面的快速更改列表。

认证

在集成 Azure 和 ASP 中有一个新行为.NET Core 来确定用户的身份。 AzureAD.UI和AzureADB2C.UIapi 和包现在在框架中已经过时了。 AzureAD.UI和AzureADB2C.UI迁移到Microsoft Authentication Library(或MSAL)，该库位于Microsoft.Identity.Web下。

授权

ASP 的端点路由有一点的变化。 净的核心。 传递给授权端点的资源现在保证为HttpContext类型。 新的更改将允许开发人员从非端点路由中使用HttpContext的功能。

Azure

Azure 前缀取代了集成包中的 Microsoft 前缀。 这些软件包如下:

  • Microsoft.Extensions.Configuration.AzureKeyVault，开发人员使用它将 Azure Key Vault 连接到配置系统。
  • Microsoft.AspNetCore.DataProtection.AzureKeyVault，它将 Azure Key Vault 连接到 ASP.NET Core 数据保护系统。
  • Microsoft.AspNetCore.DataProtection.AzureStorage，它允许开发人员将 Azure Blob 存储移植到 ASP.NET Core 数据保护系统。

Blazor

微软基于浏览器的。net 应用的新框架最近有一些变化:

  • 编译器将在编译期间修剪 Blazor 组件中的任何空白。 调整编译器可以提高呈现和 DOM 差异的性能，这是将虚拟 DOM 的前一个版本与虚拟 DOM 的新版本进行比较。
  • ProtectedBrowserStorage特性现在是 ASP 的一部分.NET Core 共享框架，为开发人员提供更好的体验。 共享框架为Microsoft.NETCore.App、Microsoft.AspNetCore.App和Microsoft.AspNetCore.All。
  • . net 5.0 是 Blazor Server 和 Blazor WebAssembly 项目的新目标框架，以更好地符合. net 目标框架的需求。

HTTP

在如何处理错误的 HTTP 请求异常和记录 HTTP 请求和响应方面有一些变化:

  • Microsoft.AspNetCore.Http.BadHttpRequestException是Microsoft.AspNetCore.Server.Kestrel.BadHttpRequestException和Microsoft.AspNetCore.Server.IIS.BadHttpRequestException的新派生类。 这些包被标记为过时的，并被设置为在未来的版本中删除，以合并重复的类型并统一跨服务器实现的包。
  • 代码作为整数现在是IHttpClientFactory到日志 HTTP 的接口所使用的状态代码，而不是名称，这为开发人员查询值范围提供了更大的灵活性。

红隼

这是对 Kestrel (ASP 的跨平台 web 服务器)的的修改.NET Core:

  • SslProtocols.None现在是HttpsConnectionAdapterOptions.SslProtocols的默认 TLS 协议版本，而不是SslProtocols.Tls12 | SslProtocols.Tls11，默认支持 TLS 1.3 和未来版本。
  • 由于基于套接字的传输是 Kestrel 的默认传输方式，libuv api 现在被标记为过时的，并将在下一个版本中删除。

中间件

中间件，是处理请求和响应的管道，有一个新的行为。 DatabaseErrorPageMiddleware及其相关扩展被标记为已过时，并被DatabaseDeveloperPageExceptionFilter所取代。

SignalR

SignalR库，在应用中使用实时 web 功能，有几个变化:

  • ASP.NET Core 5.0 将MessagePack集线器协议的包版本从 1 升级。 x 2。 X，有最新的改进。
  • UseSignalR和UseConnections方法不再可用，因为它们的自定义逻辑不能与 ASP 中的其他路由组件交互。 净的核心。

静态文件

将静态文件text/csv直接提供给客户机应用有一个新的头值。 为了符合 RFC 7111 标准，text/csv替换application/octet-stream作为.csv文件的 Static File Middleware 的 Content-Type 头值。 您可以在https://tools.ietf.org/html/rfc7111#section-5.1找到 RFC 7111 标准的完整细节。

何时使用 ASP.NET Core

因为 ASP.NET Core 提供了一个 web 框架，可以在不同的用例场景中使用，您可以使用该框架来构建动态 web 应用。 这包括 web 应用的在线商店等企业内部应用,内容,多租户应用,内容管理系统(cms),软件即服务(SaaS【显示】),或者与 ASP 的 rest 式服务。 净的核心。 我们将专注于在 ASP 中构建 RESTful 服务.NET Core，因为这是后端，我们将在本书的第三部分中集成 Vue.js 应用。****

**ASP.NET Core 还包含管理认证、授权、数据保护、HTTPS 实施、应用秘密、XSRF/CSRF 预防、CORS 管理的功能，并使开发人员能够构建健壮而安全的 ASP.NET Core 应用。

为什么要学习 ASP ? NET Core?

除了 ASP。 asp.netCore 的性能; NET Core 是企业、保险、银行和其他类型企业的流行选择。 使用 IT JobsWatch(https://www.itjobswatch.co.uk/)，您可以按 2020 年日期搜索工作。 根据 ZipRecruiter 的数据(https://www.ziprecruiter.co.uk/)，自 2019 年以来，. NET Core 职位空缺趋势一直在增加，平均收入为 95,657 美元/年。

基于 Stackoverflow 的 2020 调研(https://insights.stackoverflow.com/survey/2020) NET Core 是他们最喜爱和最想要的 web 框架的赢家。 它获得了最高的票数，达到了 70.7%，这意味着这些是使用特定语言或技术进行开发并表示有兴趣继续使用它进行创建的开发人员，其次是 React、Vue 和 Express。 这些都是尝试使用 ASP 的原因。 asp.NET Core，因为工作的巨大可用性，和 ASP.NET Core 将在未来几年继续存在。

至此完成了对 ASP 的快速概述.NET Core 和什么是新的 ASP.NET Core 5。 你已经了解了 ASP 的当前状态.NET Core 以及它如何是构建高性能 RESTful 服务的正确选择。 现在是时候见见 Vue.js 了。

让我们看看为什么 Vue.js 突然成为最热门的 JavaScript 框架之一。

Vue.js 简介

Vue.js 是一个用于构建用户界面的 JavaScript 框架。 简而言之，Vue.js 为前端开发人员提供了他们想要的一切。 Vue.js 具有良好的性能、高效的大小、渐进的、对开发者友好的特点，并且如果您是前端开发新手，那么您进入 Vue.js 的障碍是最小的。

如今，Vue.js 拥有超过 130 万周活跃用户(基于 Vue.js Devtool 扩展的统计数据)，每月的npm下载量超过 800 万次。

今天，Vue.js 被世界上一些最具标志性和影响力的组织使用，如苹果，IBM，微软，谷歌，耐克，维基媒体，美国宇航局，皮克斯，路易威登，L'Oréal，以及成千上万的各种规模的企业。

在本章接下来的几个章节中，我们将检查 Vue.js 核心团队在新的 Vue.js 3 中添加了什么，以及学习 Vue.js 是否值得你投入时间。

让我们找出答案。

Vue.js 有什么新内容?

经过 2 年的开发，Vue.js 核心团队终于发布了最新的 Vue.js 版本 3，代号为 One Piece。 这些改变列在这里:

  • 更具可维护性:Vue.js 的代码库已经用 TypeScript 重新编写，以提高可维护性，内部也更加模块化。
  • Faster:Vue.js 3 比 Vue.js 2 更快，性能更好。 新版本有一个新的基于代理的反应系统。
  • small:Vue.js 有摇树功能; 摇树是一种从项目中自动删除未使用的库的方法。 这个功能对于使文件大小比以前的版本更小至关重要。 Vue.js 3 也有一些编译时标志，允许你删除不能自动摇树的内容。
  • 扩展性更好:Vue.js 现在提供了 Composition API，这是一种更容易重用 Vue.js 组件逻辑片段的方法。 复合 API 是一个令人兴奋的新特性，它解决了复杂的用例，例如在组件之间共享业务逻辑。
  • 更好的开发体验:对我来说，Vue.js 已经提供了无与伦比的开发体验，但是 Vue.js 在 Vue.js 3 中改进了它(通过引入新的单文件组件改进、模板表达式的类型检查和子组件的道具)。

为什么学习 Vue.js 是正确的选择?

与 Angular 和 React 一起，Vue.js 是构建现代 web 应用的三大 JavaScript 工具之一。 Vue.js 不支持技术公司，如微软或Facebook、亚马逊、苹果、Netflix、和Alphabet(FAANG)公司。 然而，通过多年的优秀工具和 Vue.js 提供的出色文档，它已经获得了全球范围内的众多赞助商(您可以在https://github.com/vuejs/vue上查看赞助商列表)。 拥有多个赞助商是件好事，因为这样 Vue.js 就可以不断地进行维护和改进。

第三方库，如 UI 库、路由库、表单、状态管理、静态站点生成器，正在变得越来越好。 因此，使 Vue.js 成为一个可靠的、值得信赖的、可靠的、稳定的、可靠的、开发者友好的构建企业应用的框架。 更不用说 Vue.js 现在有 100 多个贡献者，他们增加了新的功能，改进了，并修复了 GitHub Vue.js 上出现的所有问题。

这就结束了我们对 Vue.js 和 Vue.js 3 新特性的快速概述。 你已经了解了 Vue.js 的当前状态，以及为什么考虑 Vue.js 3 作为你的前端应用最适合开发当今的现代 web 应用。

总结

总结一下你从第一章中学到的东西，你已经学习了 ASP.NET Core 是一个开源的、跨平台的 web 框架，因其安全性和性能而受到全球企业的信任。 最重要的是，你已经学会了 ASP.NET Core 是一个经过实战测试的 web 框架，它可以让你在未来的不同业务逻辑场景中安心。

另一方面，Vue.js 是开源的，易于使用和学习，易于集成，有优秀的文档，快速，小，性能，稳定，适合任何 web 应用。 如果您为您的应用选择 Vue.js 3，那么您将永远不会出错，无论它们是大是小。

在下一章中，您将逐步学习在计算机上安装和设置开发环境所需的软件。****

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/30296.html