2017-02-24 55 views
11

技術:Visual Studio的單頁應用集成

  • 的Visual Studio 2017年
  • Asp.Net核心工具1.1
  • .Net框架4.6.2

單頁應用的和他們融合Visual Studio中的所有新支持都變得更加容易。但在本週早些時候,傑弗裏T.弗裏茨發佈了集成了一個非常好的文章,並實現與以下軟件包:

  • 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返回它?

重要:基本上,問題的目標是如何強制索引返回,以便我們的客戶端框架的路由器正在處理變化與後端返回特定的視圖狀態。

+0

他的第一個名字是「傑弗裏」和文章是:HTTPS:/ /blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/ –

回答

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的,它在技術上永遠 除非特定的頭信息被傳遞執行該航線

+0

我喜歡你的答案,所以從本質上講,如果一個靜態文件不存在,它確實是一個回退。但是,如果它包含* wwwroot *中的'index.htm',那麼在技術上從不執行該路線,除非傳遞了特定的標頭信息。你能否修改以反映這一點呢? – Greg

+0

好的,我們去:) – War

+0

謝謝。可悲的是,你下面的答案有很多錯誤信息。 – Greg

4

這些SPA模板都使用最小的ASP.NET Core MVC服務器基礎。我們需要MVC的默認路由從Index.cshtml生成html標記。

我看不到任何在模板的wwwroot/dist文件夾中生成的純html文件。所以app.UserDefaultFiles()沒有Index.html去。

我可以推測,如果有人決定爲多頁SPA應用程序(oxy-moron)合併更多控制器/操作/視圖,我可能會推測mvc路線也存在。或者開始使用後端wep api ...?

我不熟悉MapSpaFallbackRoute,但它作爲一個包羅萬象的,或catch一些,對於未涉及的SPA某些航線。見源代碼: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Routing/SpaRouteExtensions.cs

只要是整體性的,我們提到,如果我們想成爲服務器少,靜態文件只,成爲-IT-從-A-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();

+0

但是,如果你存儲一個靜態指標,或默認情況下它會搜索並返回。根據文檔,它會出現異常,靜態,授權,mvc。如果遇到問題,中間件可以檢測並分解。這是不是真的?但是您不需要使用.net核心在IIS中託管。 – Greg

+0

index.html將被手動創建,以返回。靜態頁面。 – Greg

+0

您可能會遇到刷新頁面的問題(即深度鏈接);而不出某種路由機制來index.html頁面,你可能會得到404錯誤 –