ASP.NET Core与Angular的前后端集成开发(详解流程)

最开始学习Asp .Net Core的时候，在VS的创建项目中发现可以自己创建基于angular与ASP.Net结合的项目，相当于将前后端集成在一起了，所以稍微研究了下这个模板启动的过程和原理。

首先我们在VS中找到这个启动的模板

 这样完成了第一步，创建好 我们这个集成的前后端项目。它的目录结构如下所示

再转到Startup.cs文件，让我们看看它配置了一些什么中间件和服务。

这里首先添加了一个mvc的中间件服务，随后添加单页面应用服务，并且配置了路由路径为“ClientApp/dist”，很明显这就是angular文件打包后的目录了。

 然后在看到具体的Configure

首先是引入页面异常报错的中间件，这样当出现异常时，页面会生成报错的详情，这里写了一个if判断，表示在开发者模式时才会有这个报错详情出现。

随后是引用HTTPS 重定向中间件（ UseHttpsRedirection ），用于将 HTTP 请求重定向到 HTTPS。

然后是静态页面的引用，这里有两个静态页面，app.UsestaticFiles是指的wwwroot下的静态页面，而后面的UseSpaStaticFiles则是指的我们的angular页面。

再而继续配置了MVC，并且写入一个路由模板

最后使用Spa，这里指定了路径，然后后面这个应该是在开发者环境下，使用angular的npm渲染。(这里有待修改，需要进一步看源码)

到这里整个启动项完成了，然后可以看下iis的配置

看完上述配置后，接下来就是angular项目的配置了，打开angular项目(ClientApp)

默认创建的angular还没有安装npm，这里打开这个目录所在的文件夹，进入CMD使用命令

npm install

安装angular 所以来的所有模块，这里的依赖模块配置可以在package.json文件中找到。

安装完成后，使用如下命令对angular 项目进行打包

ng build

此时文件夹会多出一个dist文件，这个文件也就是前文提到定位到的静态页面

到这里我们就可以在VS2019中点击iis启动项目了。项目启动后页面如下所示

既然看到了这个前后端集成的页面显示，那么我们再深入源码看看这个前后端是如何进行交互的

首先定位到angular 项目中

 可以看到在这个fetch-data模块的构造器中直接定义了HttpClient(顺带吐槽这个官方模板都不额外写个service的，真是粗糙且省略啊！哈哈哈)，在这里使用http的方法对后台服务器发起请求，url就表示了请求的路由目录。这里我们再定位到后端项目文件，那肯定就是再Controller中了，找到这个叫做SampleDataController的家伙

如上图所示，它返回了一些数据，而这些数据正是显示在我们的页面中的数据，到这里就完成了前后端的一个简单的交互了。