javascript - Visual Studio 单页应用程序集成

Question

技术:

• Visual Studio 2017
• Asp.Net 核心工具 1.1
• .Net Framework 4.6.2

有了 Visual Studio 内置的所有新支持，单页应用程序及其与 Visual Studio 的集成变得更加容易。但在本周早些时候，Jeffery T. Fritz 发布了一篇关于使用以下包进行集成和实现的非常好的文章:

• Microsoft.AspNetCore.SpaServices
• Microsoft.AspNetCore.NodeServices

在浏览甚至分析几个模板后，您会注意到在解决方案资源管理器中有一个名为 ClientApp 的目录。这是通过 Webpack 配置和路由的。

在 Startup.cs 中，问题就暴露出来了。

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });
    }

在我们的请求中，我们有一些路由到我们的 MVC 框架。

问题是，为什么我们需要指定这个路由？如果我们简单地使用 app.UseDefaultFiles() 和 app.UseStaticFiles() 并在我们的 wwwroot 中指定我们的索引。我们的客户端路由器将始终返回。那么我们为什么不这样做:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseDefaultFiles();
        app.UseStaticFiles();
    }

我知道直接在我们的 wwwroot 中的项目没有被压缩，也可能会泄露安全性，但除了这两个缺点之外，为什么不使用此路由来确保您的索引和客户端路由器不会总是返回？

我特别询问强制 MVC 始终返回 Home/Index 或 UseDefaultFiles()/UseStaticFiles()< 的概念。我错过了什么，为什么我们被告知强制 MVC 返回它？

重要:主要针对的问题是如何强制返回索引，以便我们的客户端框架的路由器处理更改，而不是后端返回特定的 View 状态。

Answer 1

这些 SPA 模板都使用最小的 ASP.NET Core MVC 服务器基础。我们需要 MVC 的默认路由来从 Index.cshtml 生成 html 标记。

我没有看到在模板的 wwwroot/dist 文件夹中生成任何纯 html 文件。所以 app.UserDefaultFiles() 没有可访问的 Index.html。

我可以推测，也许 mvc 路由也在那里，以防有人决定为多页面 SPA 应用程序(oxy-moron)合并更多的 Controller /操作/ View ；或者开始使用后端 wep api...？

我对 MapSpaFallbackRoute 不是很熟悉，但它可以作为 SPA 未涵盖的某些路线的包罗万象或包罗万象。查看源代码: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Routing/SpaRouteExtensions.cs

为了全面起见，让我们提一下，如果我们想要无服务器、仅静态文件、从 CDN 提供服务，则可以使用入门模板和 angular cli 来启动:

https://github.com/AngularClass/angular2-webpack-starter

https://github.com/angular/angular2-seed

https://cli.angular.io/

但是，如果这些静态/无 mvc 的 Javascript 应用托管在 IIS 中，则它们将需要具有最少路由设置的 web.config。见:

https://github.com/angular/angular/issues/11046

编辑:

另一个原因可能是很多人会在这些项目中使用 web api，为此我们仍然需要 app.UseMvc();