Visual Studio 单页应用程序集成

Posted 2023-02-22

【中文标题】Visual Studio 单页应用程序集成

【英文标题】：Visual Studio Single Page Application Integration

【发布时间】：2017-07-14 16:28:22

【问题描述】：

技术：

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 归还它？

重要提示：基本上，目标问题是如何强制返回索引，以便我们的客户端框架的路由器处理更改，而后端返回特定的视图状态。

【问题讨论】：

他的名字是“Jeffrey”，文章在：blogs.msdn.microsoft.com/webdev/2017/02/14/…

【参考方案1】：

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

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

我可以推测，如果有人决定为多页 SPA 应用程序（oxy-moron）合并更多的控制器/动作/视图，我可能会推测 mvc 路由也存在；还是开始使用后端 wep api...？

我对@9​​87654330@ 不太熟悉，但它可以作为 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();

【讨论】：

但是如果你存储一个静态索引，或者默认它会搜索它并返回。根据文档，它是异常，静态，授权，mvc。如果更早遇到，中间件可以检测并爆发。这不是真的吗？但是您不需要使用 .net core 托管在 IIS 中。

将手动创建 index.html 以返回。静态页面。

您可能会在刷新页面时遇到问题（即深度链接）；如果没有到 index.html 页面的某种路由机制，您可能会收到 404 错误

如果它是静态的，但是 vue.js 路由器和 vuex 数据存储应该保留它。

您也可以在没有 web.config 的情况下托管 Angular 2，您使用 URL 重写，因此对于这个问题，一些概念概念似乎被歪曲了。

【参考方案2】：

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

    // 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" );
    );

根据 cmets ...

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

【讨论】：

我喜欢你的回答，所以从本质上讲，如果静态文件不存在，它确实是一个后备。但是，如果它确实在 wwwroot 中包含index.htm，那么它在技术上永远不会执行该路由，除非传递了特定的标头信息。请您修改以反映这一点吗？

好的，我们开始吧:)

谢谢。可悲的是，你下面的答案有很多错误信息。