Visual Studio单页应用程序集成

时间:2017-02-24 00:02:44

标签: javascript c# asp.net asp.net-core single-page-application

技术:

  • Visual Studio 2017
  • Asp.Net Core Tooling 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/IndexUseDefaultFiles() / UseStaticFiles()的概念。我错过了什么,为什么我们被告知迫使MVC返回它?

重要:基本上针对的问题是如何强制返回索引,以便我们的客户端框架的路由器处理更改而后端返回特定的视图状态。 < / p>

2 个答案:

答案 0 :(得分:4)

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

我没有在模板的wwwroot/dist文件夹中看到任何普通的html文件。因此app.UserDefaultFiles()没有Index.html

我可以推测,如果有人决定为多页SPA应用程序(oxy-moron)合并更多的控制器/动作/视图,那么也许mvc路由也存在;或者开始使用后端wep api ...?

我对MapSpaFallbackRoute并不熟悉,但对于SPA未涵盖的某些路线而言,它可以作为一个包罗万象的东西。看源代码: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Routing/SpaRouteExtensions.cs

为了全面,让我们提一下,如果我们想要无服务器,仅静态文件,从CDN服务 - 有启动器模板和角度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

修改

另一个原因可能是许多人会在这些项目中使用网络API,为此我们仍然需要app.UseMvc();

答案 1 :(得分:3)

这似乎是我们之前看到的所有东西,包装得更好。

    // allow returning of physical files on the file system of the web root and it's sub dirs
    app.UseDefaultFiles();
    app.UseStaticFiles();

    // map MVC routes to controller actions when a static file cannot be found
    app.UseMvc(routes =>
    {
       // default routing convention for mapping "most situations"
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

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

根据评论......

  

如果静态文件不存在,它确实是一个后备。但是,如果它   在wwwroot中确实包含一个index.htm,从技术上讲它永远不会   除非传递特定的标题信息,否则执行该路由