专栏首页圣杰的专栏ASP.NET Core知多少(6):VS Code联调Angular + .NetCore

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

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的扩展,以便我们顺利开发调试。

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

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

如果没有弹出上图弹窗,我们也可以按下图步骤添加。

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

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

然后键盘按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文件。

步骤如下图所示:

但是这个时候我们仍然无法做到联调。我们需要要先启动项目,再选具体的某个调试配置进行调试。即同时只能调试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代码中断点并调试。如下图所示:

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

6. 最后

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • eShopOnContainers 知多少[10]:部署到 K8S | AKS

    断断续续,感觉这个系列又要半途而废了。趁着假期,赶紧再更一篇,介绍下如何将eShopOnContainers部署到K8S上,进而实现大家常说的微服务上云。

    圣杰
  • .NET 反编译调试神器:dnSpy了解一下

    可前往dnSpy官网下载或直接从我的分享链接下载(内置包含.NET Framework 4.7.1,若运行提示需要安装,可解压找到.NET Framework ...

    圣杰
  • UnitOfWork知多少

    Unit Of Work模式,由马丁大叔提出,是一种数据访问模式。UOW模式的作用是在业务用例的操作中跟踪对象的所有更改(增加、删除和更新),并将所有更改的对象...

    圣杰
  • package debug

    Package debug contains facilities for programs to debug themselves while they ar...

    李海彬
  • 手把手教你,嘴对嘴传达------Tomcat部署和优化以及虚拟主机配置

    Host 是 Engine 的字容器,一个 Host 在 Engine 中代表一个虚拟主机,这个虚拟主机的作用就是运行多个应用,它负责安装和展开这些应用,并且标...

    不吃小白菜
  • go语言的匿名函数

    1-声明一个匿名函数 func(参数列表) 返回值列表 { 函数体… } 2-匿名函数的调用

    李海彬
  • CentOS7利用DNS和Nginx代理做内网域名解析

    1,为了将生产环境和开发区分开,方便开发,将利用DNS和Nginx代理做内网域名解析。

    拓荒者
  • springboot+jpa+shiro+layui实现权限管理

    在上一篇文章中主要简单说明了如何使用springboot与shiro进行整合,同时简单的说明了下shiro相关核心模块,当然关于shiro的说明其实网上已经有了...

    sucl
  • vim插件——rainbow 转

        $vim ~/.vimrc     在call vundle#begin()和call vundle#end()之间添加Plugin 'luochen...

    双面人
  • 一起来学 SpringBoot 2.x | 第十篇:使用 Spring Cache 集成 Redis

    1. 特点2. 使用前后3. 添加依赖4. 属性配置5. 具体编码5.1 实体类5.2 定义接口5.3 主函数5.4 测试5.5 根据条件操作缓存5.6 注解介...

    芋道源码

扫码关注云+社区

领取腾讯云代金券