ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9

主要内容

● 使用ASP.NET Core实现Web API接口，并通过Angular和RxJS Observable来使用接口。

● 使用Entity Framework Core的代码优先方法和迁移支持来创建数据模型。

● 使用本地实例或Azure中的云数据存储来建立和配置SQL数据库服务器。

● 使用Visual Studio 2019执行C#和JavaScript调试。

● 使用xUnit、Jasmine和Karma执行TDD和BDD单元测试。

● 使用ASP.NET Identity、IdentityServer4和Angular API实现身份验证和授权。

● 构建渐进式Web应用，并探索服务工作线程。

Valerio De Sanctis是一名掌握丰富技能的IT专业人员，在使用ASP.NET、PHP和Java进行编程、Web开发和项目管理方面具有超过15年的经验。他在多家金融和保险公司担任过高级职务，近来在一家业界领先的售后服务和IT服务公司担任首席技术官、首席安全官和首席运营官，这家公司为多个顶j的人寿和非人寿保险集团提供服务。

在职业生涯中，Valerio帮助许多私企实现和维护基于.NET的解决方案，与许多IT行业的专家携手工作，并领导过多个前端、后端和UX开发团队。他为多个知名的客户和合作伙伴设计了许多企业级Web应用程序项目的架构，并监管这些项目的开发。这些客户包括London Stock Exchange Group、Zurich Insurance Group、Allianz、Generali、Harmonie Mutuelle、Honda Motor、FCA Group、Luxottica、ANSA、Saipem、ENI、Enel、Terna、Banzai Media、Virgilio.it、Repubblica.it和Corriere.it。

他是Stack Exchange网络上的活跃成员，在StackOverflow、ServerFault和SuperUser社区中提供关于.NET、JavaScript、HTML5和Web主题的建议和提示。他的大部分项目和代码示例在GitHub、BitBucket、NPM、CocoaPods、JQuery Plugin Registry和WordPress Plugin Repository中以开源许可提供。他还是Microsoft开发技术MVP，这是一个年度颁发的奖项，用来表彰全球范围内积极与用户和Microsoft分享高质量的实用专家技能的卓越技术社区领袖。

自2014年以来，他在www.ryadel.com上运营一个面向IT并关注Web的博客，提供业界新闻、评审、代码示例和指导，旨在帮助全球的开发人员和技术爱好者。他撰写了多本关于Web开发的图书，许多都在Amazon上成为畅销图书，在全球范围内销售了数万本。

前　　言

ASP.NET Core是一个免费、开源的模块化Web框架，由Microsoft开发，运行在完整的.NET Framework(Windows)或.NET Core(跨平台)上。它专门为构建高效的HTTP服务设计，使这些服务可被各种类型的客户端访问和使用，包括Web浏览器、移动设备、智能电视、基于Web的智能家居工具等。

Angular是AngularJS的后继产品。AngularJS是世界知名的开发框架，其设计目标为向开发人员提供一个工具箱，使他们能够构建出响应式、跨平台、基于Web的应用，并且能够针对桌面和移动设备优化这些应用。它采用了结构丰富的模板方法，以及自然的、易写易读的语法。

从技术角度看，这两种框架没有太多共同之处：ASP.NET Core主要关注Web开发栈的服务器端部分，而Angular则用于处理Web应用程序的所有客户端部分，如用户界面(User Interface，UI)和用户体验(User Experience，UX)。但是，这两种框架之所以产生，是因为其创建者具有一个共同的构想：HTTP协议不限于提供Web页面；可以把它用作一个平台来构建基于Web的API，以有效地发送和接收数据。这种设想在万维网的前20年间逐渐发展，现在已经成为不可否认的、广泛认同的表述，也是几乎每种现代Web开发方法的基础。

对于这种视角的转变，存在许多很好的理由，其中最重要的理由与HTTP协议的根本特征有关：使用起来很简单，但足够灵活，能够适应万维网不断变化的环境的大部分开发需求。如今，HTTP协议的适用范围也变得很广：我们能够想到的几乎每种平台都有一个HTTP库，因此HTTP服务能够用于各种客户端，包括桌面和移动浏览器、IoT设备、桌面应用程序、视频游戏等。

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》的主要目的是在一个开发栈中，把最新版本的ASP.NET Core和Angular结合起来，以演示如何使用它们来创建高性能的、能够被任何客户端无缝使用的Web应用程序和服务。

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》面向的读者

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》面向有经验的ASP.NET开发人员，你应该已经知道ASP.NET Core和Angular，想学习这两种框架的更多知识，并理解如何结合它们来创建适合生产环境的单页面应用程序(SPA)或渐进式Web应用程序(PWA)。但是，《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》提供了完整的代码示例，并逐个步骤讲解了实现过程，即使是新手或者刚入门的开发人员，理解《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》也不会有太大难度。

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》内容

第1章介绍《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》将使用的两个框架的一些基本概念，以及可以创建的各种类型的Web应用程序，如SPA、PWA、原生Web应用程序等。

第2章详细介绍Visual Studio 2019提供的.NET Core and Angular模板的各种后端和前端元素，并且从高层面上解释了如何在典型的HTTP请求-响应周期中结合使用它们。

第3章全面介绍如何构建一个示例ASP.NET Core和Angular应用，该应用通过使用基于Bootstrap的Angular客户端来查询健康检查中间件，为最终用户提供诊断信息。

第4章介绍Entity Framework Core及其作为对象关系映射(Object-Relational Mapping，ORM)框架的能力，从SQL数据库部署(基于云和/或本地实例)一直讲解到数据模型设计，还包括在后端控制器中读写数据的各种技术。

第5章介绍如何使用ASP.NET Core后端Web API来公开Entity Framework Core数据，使用Angular消费该数据，然后使用前端UI向最终用户展示数据。

第6章详细介绍如何在后端Web API中实现HTTP PUT和POST方法，以使用Angular执行插入和更新操作，还介绍服务器端和客户端数据验证。

第7章探讨一些有用的调整和改进，以增强应用程序的源代码，并深入分析Angular的数据服务，以理解为什么以及如何使用它们。

第8章介绍如何充分利用Visual Studio提供的各种调试工具，调试一个典型Web应用程序的后端和前端栈。

第9章详细介绍测试驱动开发(Test-Driven Development，TDD)和行为驱动开发(Behavior-Driven Development，BDD)，并展示了如何使用xUnit、Jasmine和Karma来定义、实现和执行后端和前端单元测试。

第10章从高层面上介绍身份验证和授权的概念，并展示了如何使用一些技术和方法来恰当地实现专有的或第三方的用户身份系统。本章给出一个基于ASP.NET Identity和IdentityServer4的、可以工作的ASP.NET Core和Angular身份验证机制的实际例子。

第11章详细介绍如何使用服务工作线程、清单文件和离线缓存功能，将一个现有的SPA转换成为一个PWA。

第12章介绍如何部署前面章节中创建的ASP.NET Core和Angular应用，以及如何使用Windows Server 2019或Linux CentOS虚拟机把它们发布到云环境中。

最大限度利用《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》

下面列出撰写《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》及测试源代码时使用的软件包及相关版本号：

● Visual Studio 2019社区版16.4.3

● Microsoft .NET Core SDK 3.1.1

● TypeScript 3.7.5

● NuGet Package Manager 5.1.0

● Node.js 13.7.0[强烈建议使用Node Version Manager(NVM)，来安装Node.js]

● Angular 9.0.0最终版

对于在Windows上部署：

● ASP.NET Core 3.1 Runtime for Windows

● .NET Core 3.1 CLR for Windows

对于在Linux上部署：

● ASP.NET Core 3.1 Runtime for Linux(YUM包管理器)

● .NET Core 3.1 CLR for Linux(YUM包管理器)

● Nginx HTTP Server(YUM包管理器)

提示 如果你使用的是Windows平台，强烈建议使用NVM for Windows来安装Node.js，这是适用于Windows系统的一个非常出色的Node.js版本管理器。从下面的URL可以下载NVM for Windows。

https://github.com/coreybutler/nvm-windows/releases

强烈建议你使用与《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》相同的版本。如果你选择使用一个不同的版本，也没有问题，但你可能需要对源代码做一些修改和调整。

下载示例代码文件

可以在www.tup.com.cn/downpage，输入《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》中文书名或ISBN，下载《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》的示例代码文件以及参考资料。

也可扫描封底二维码下载示例代码文件以及参考资料。

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》采用的约定

《ASP.NET Core 3全栈Web开发（第3版） 使用.NET Core 3.1 和 Angular 9》采用了一些排版约定。

代码块的格式如下所示：

placeholder="Filter by name (or part of it)...">

当我们希望你注意代码块中的特定部分时，将用粗体显示相关的代码行：

import { FormGroup, FormControl } from '@angular/forms';

class ModelFormComponent implements OnInit {

form: FormGroup;

ngOnInit() {

this.form = new FormGroup({

title: new FormControl()

});

}

}

命令行输入或输出的格式如下所示：

> dotnet new angular -o HealthCheck

注意 警告或重要的注意事项将采用这种格式。

提示 提示和技巧将采用这种格式。

目　　录

第1章 准备工作 1

1.1 技术需求 1

1.2 两个框架，一个目标 2

1.2.1 ASP.NET Core的变革 2

1.2.2 Angular有哪些新变化？ 5

1.2.3 选择.NET Core和Angular的理由 11

1.3 全栈方法 12

1.4 SPA、NWA和PWA 12

1.4.1 单页面应用程序 13

1.4.2 原生Web应用程序 13

1.4.3 渐进式Web应用程序 13

1.4.4 产品负责人的期望 15

1.5 SPA项目示例 16

1.6 准备工作空间 16

1.6.1 免责声明 17

1.6.2 创建项目 18

1.7 小结 22

1.8 推荐主题 22

第2章 探索项目 23

2.1 技术需求 23

2.2 解决方案概述 23

2.3 .NET Core后端 24

2.3.1 Razor页面 24

2.3.2 控制器 25

2.3.3 配置文件 26

2.4 Angular前端 32

2.4.1 工作空间 32

2.4.2 /ClientApp/src/文件夹 38

2.4.3 测试应用 40

2.5 开始工作 44

2.5.1 静态文件缓存 44

2.5.2 清理客户端应用 48

2.6 小结 53

2.7 推荐主题 53

第3章 前端与后端的交互 55

3.1 技术需求 55

3.2 .NET Core健康检查简介 55

3.2.1 添加HealthCheck中间件 56

3.2.2 添加网际控制报文协议检查 57

3.2.3 改进ICMPHealthCheck类 59

3.3 Angular中的健康检查 64

3.3.1 创建Angular组件 64

3.3.2 将组件添加到Angular应用 73

3.4 小结 75

3.5 推荐主题 75

第4章 使用Entity Framework Core 创建数据模型 77

4.1 技术需求 77

4.2 WorldCities Web应用 78

4.3 数据源 80

4.4 数据模型 81

4.4.1 Entity Framework Core简介 81

4.4.2 安装Entity Framework Core 82

4.4.3 SQL Server数据提供者 83

4.4.4 数据建模方法 84

4.5 创建实体 88

4.5.1 定义实体 88

4.5.2 定义关系 92

4.6 获取SQL Server 94

4.6.1 安装SQL Server 2019 95

4.6.2 在Azure上创建数据库 97

4.6.3 配置数据库 102

4.7 使用代码优先方法创建数据库 104

4.7.1 设置DbContext 105

4.7.2 数据库初始化策略 106

4.7.3 更新appsettings.json文件 106

4.7.4 创建数据库 107

4.7.5 添加初始迁移 107

4.8 填充数据库 111

4.9 实体控制器 117

4.9.1 CitiesController 117

4.9.2 CountriesController 120

4.10 小结 120

4.11 推荐主题 121

第5章 获取和显示数据 123

5.1 技术需求 123

5.2 获取数据 123

5.2.1 请求和响应 123

5.2.2 一个长列表 125

5.3 使用Angular Material提供数据 129

5.3.1 MatTableModule 131

5.3.2 MatPaginatorModule 134

5.3.3 MatSortModule 144

5.3.4 添加过滤功能 156

5.4 更新国家/地区 165

5.4.1 .NET Core 165

5.4.2 Angular 168

5.5 小结 173

5.6 推荐主题 174

第6章 表单和数据验证 175

6.1 技术需求 175

6.2 探索Angular表单 176

6.2.1 Angular中的表单 176

6.2.2 使用表单的理由 177

6.2.3 模板驱动的表单 178

6.2.4 模型驱动的/响应式表单 179

6.3 构建第一个响应式表单 181

6.3.1 ReactiveFormsModule 181

6.3.2 CityEditComponent 182

6.3.3 添加导航链接 187

6.4 添加一个新城市 190

6.4.1 扩展CityEditComponent 190

6.4.2 添加Create a new City按钮 193

6.4.3 HTML select 195

6.4.4 Angular Material select(MatSelectModule) 199

6.5 理解数据验证 201

6.5.1 模板驱动的验证 202

6.5.2 模型驱动的验证 203

6.5.3 服务器端验证 207

6.6 FormBuilder简介 213

6.6.1 创建CountryEditComponent 213

6.6.2 测试CountryEditComponent 223

6.7 小结 226

6.8 推荐主题 226

第7章 代码调整和数据服务 227

7.1 技术需求 227

7.2 优化和调整 227

7.2.1 模板改进 228

7.2.2 类继承 229

7.3 Bug修复和改进 232

7.3.1 验证lat和lon 232

7.3.2 添加城市个数 235

7.3.3 DTO类——真的应该使用它们吗？ 240

7.3.4 添加国家/地区名称 244

7.4 数据服务 247

7.4.1 对比XMLHttpRequest与fetch(和HttpClient) 248

7.4.2 构建数据服务 251

7.5 小结 267

7.6 推荐主题 267

第8章 后端和前端调试 269

8.1 技术需求 269

8.2 后端调试 269

8.2.1 Windows还是Linux？ 270

8.2.2 基础知识 270

8.2.3 条件断点 270

8.2.4 Output窗口 273

8.2.5 调试EF Core 274

8.3 前端调试 280

8.3.1 Visual Studio中的JavaScript调试 280

8.3.2 浏览器开发者工具 282

8.3.3 调试Angular表单 284

8.3.4 客户端调试 289

8.4 小结 290

8.5 推荐主题 290

第9章 ASP.NET Core和Angular单元测试 291

9.1 技术需求 291

9.2 .NET Core单元测试 292

9.2.1 创建WorldCities.Tests项目 292

9.2.2 第一个测试 294

9.2.3 测试驱动的开发 300

9.2.4 行为驱动的开发 301

9.3 Angular单元测试 302

9.3.1 一般概念 303

9.3.2 第一个Angular测试套件 304

9.4 小结 313

9.5 推荐主题 314

第10章 身份验证和授权 315

10.1 技术需求 315

10.2 是否进行身份验证和授权 316

10.2.1 身份验证 316

10.2.2 授权 318

10.2.3 专有与第三方 318

10.3 使用.NET Core进行专有身份验证和授权 319

10.3.1 ASP.NET Core Identity Model 320

10.3.2 设置ASP.NET Core Identity 321

10.4 更新数据库 337

10.4.1 添加身份迁移 337

10.4.2 应用迁移 337

10.4.3 对数据执行seed操作 339

10.5 身份验证方法 341

10.5.1 会话 341

10.5.2 令牌 342

10.5.3 签名 343

10.5.4 双因子 343

10.5.5 结论 343

10.6 在Angular中实现身份验证 343

10.6.1 创建AuthSample项目 344

10.6.2 探索Angular授权API 346

10.7 在WorldCities应用中实现授权API 359

10.7.1 导入前端授权API 359

10.7.2 调整后端代码 361

10.7.3 测试登录和注册 364

10.8 小结 365

10.9 推荐主题 365

第11章 渐进式Web应用 367

11.1 技术需求 367

11.2 PWA的特征 367

11.2.1 安全源 368

11.2.2 离线加载和Web应用清单 369

11.3 实现PWA需求 370

11.3.1 手动安装 370

11.3.2 自动安装 377

11.4 处理离线状态 379

11.4.1 选项1：窗口的isonline/isoffline事件 379

11.4.2 选项2：Navigator.onLine属性 379

11.4.3 选项3：ng-connection-service npm包 380

11.4.4 跨请求资源共享 384

11.5 测试PWA能力 385

11.5.1 使用Visual Studio和IIS Express 385

11.5.2 其他测试方法 390

11.6 小结 391

11.7 推荐主题 392

第12章 Windows和Linux部署 393

12.1 技术需求 393

12.2 为生产环境做好准备 393

12.2.1 .NET Core部署提示 394

12.2.2 Angular部署提示 399

12.3 Windows部署 402

12.3.1 在MS Azure上创建一个Windows Server VM 402

12.3.2 配置VM 406

12.3.3 发布和部署HealthCheck应用 408

12.3.4 配置IIS 410

12.3.5 测试HealthCheck Web应用 414

12.4 Linux部署 415

12.4.1 在MS Azure中创建一个Linux CentOS VM 416

12.4.2 配置Linux VM 417

12.4.3 调整WorldCities应用 421

12.4.4 发布和部署WorldCities应用 423

12.4.5 配置Kestrel和Nginx 425

12.4.6 测试WorldCities应用 430

12.5 小结 432

12.6 推荐主题 433