素材巴巴 > 程序开发 >

ASP.NET Core知多少(6):VS Code联调Angular .NetCore

程序开发 2023-09-11 16:23:07

ASP.NET Core知多少系列:总体介绍及目录

1. 引言

最近在看《程序员的成长课》,讲到程序员如何构建技能树,印象深刻。作为一名后台开发的程序员,深感技能单一,就别说技能树了。作为一名合格的后台程序员,至少要掌握一门静态语言,一门动态语言和一门前端语言。静态语言C#算不上精通,动态语言Python也刚刚入门。但前端却是空白,虽说有了解过jquery、bootstrap,但因为项目无所涉及,早已忘得一干二净。

近几年,前端框架大行其道,Web开发已经是一个不容忽视的大趋势,在这个趋势下对前端框架一无所知,显然是要淘汰的。所以决定拾起前端,选择学习Angular来弥补自己的前端空白。计划使用.Net Core + Angular开发一个任务清单。

2. 环境准备

.Net Core已经支持Angular模板,我们只需要使用dotnet new angular -n YourAppName即可创建angualr项目模板。
依次安装:

  1. Node.js(默认安装,即可安装NPM)
  2. 执行npm install -g @angular/cli,安装angular cli。
  3. 开发工具:Visual Studio Code
  4. 安装最新.Net Core SDK,目前版本V2.1.101。

3. 创建并启动项目

执行dotnet new angular -n Learning.NetCore.Angular,创建项目后,使用VS Code打开文件夹。项目结构如下图所示。其中ClientApp就是Angular所写的前端部分,实现了前后端分离。
项目结构

打开后我们需要安装以下几个VS Code的扩展,以便我们顺利开发调试。
扩展

稍后,右下角会弹窗提示我们是否需要调试项目,如下图所示。
image.png

点击Yes,就会在项目中为我们创建一个.vscode的文件夹。其中包含两个文件,一个是launch.json,一个是tasks.json。其中launch.json用于配置调试相关参数。tasks.json用于配置默认的构建任务。

如果没有弹出上图弹窗,我们也可以按下图步骤添加。
添加调试配置.gif

第一次运行时,我们先执行dotnet build来验证项目能否正确构建, 它会恢复npm依赖,可能会耗时几分钟,npm依赖安装完毕后,以后再次运行就很快了。等构建成功,执行dotnet run运行项目。
1240

浏览器访问http://localhost:5000即可看到下图效果。
demo.gif

然后键盘按Ctrl+C停止运行。

4. 项目调试

因为第三步我们已经创建了默认调试配置。直接F5运行,就可以调试.Net Core代码。但是我们该如何联调Angular代码呢?这就是本节的重点了。我们需要修改下我们的launch.json了。

打开launch.json点击添加配置,然后选择Chrome:Launch,就会添加在配置文件中添加一个节点,如下所示:

{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}"
 },

我们需要做相应修改。因为.Net Core项目默认绑定端口为5000,所以我们要将上面url的端口号改为5000。并映射webRoot到wwwroot目录下。同时我们要启用sourceMaps。修改后如下所示:

{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:5000","webRoot": "${workspaceFolder}/wwwroot","sourceMaps": true
 },

至此我们成功添加一个任务用来启动Chrome,来调试我们的angular。需要简单三步走:

  1. 终端执行dotnet run,运行项目
  2. 切换到debug按钮,选择Launch Chrome配置,F5运行。
  3. 断点ts文件。

步骤如下图所示:
调试.gif

但是这个时候我们仍然无法做到联调。我们需要要先启动项目,再选具体的某个调试配置进行调试。即同时只能调试Angualr和.NetCore中的一个。那如何二者联调???

5. 联调Angualr&&.NetCore

同样我们还是要修改launch.json,添加一个compounds配置节点。这个节点允许我们同时启动多个调试任务。配置如下:

"compounds": [{"name": ".Net Core + Chrome","configurations": [".NET Core Launch (web)","Launch Chrome"]}],
 "configurations": [
 //省略
 ]

最终的配置如下:

"compounds": [{"name": ".NetCore+Chrome","configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]}
 ],
 "configurations": [{ // chrome debugger },{ // .Net Core Launch (web)},
 ]

这个配置很简单,就是把我们刚才配置的调试任务组装在一块即可。

回到调试界面,选择.NetCore+Chrome,F5运行,就可以同时在angular和.net core代码中断点并调试。如下图所示:
联调.gif

细心的你可能会发现,通过这种方式虽然可以完成联调,但还是有点小瑕疵。两个调试任务会分别启动一个网页窗口。那有没有办法解决呢?有的,我们再添加一个.Net Core Launch (console)的调试任务,这个调试任务就不会启动网页窗口。然后再将.Net Core Launch (console)Launch Chrome组装在一起即可。具体配置看下图:

联调2配置.gif

6. 最后

本文仅是VS Code开发调试技巧的讲解,希望对你有所帮助。

转载于:https://www.cnblogs.com/sheng-jie/p/8655434.html


标签:

上一篇: 【转】Angular项目接入Fundebug监控 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。