1. 程式人生 > >Asp.Net Core入門之靜態檔案

Asp.Net Core入門之靜態檔案

靜態檔案(css,js,html等型別檔案)通常位於 web根目錄下,而ASP.Net Core框架預設內容根目錄下的wwwroot資料夾為web根目錄。這裡簡單解釋下內容根目錄:實際就是指包含可執行程式exe,程式集dll,配置檔案json,xml等的檔案目錄.

1.訪問web根目錄靜態檔案

正常情況下,靜態檔案是無法直接訪問的,需要我們新增如下靜態檔案的中介軟體,這是框架內建自帶的。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles(); 
}

然後我們就可通過web根目錄的相關路徑訪問靜態檔案。例如,Web 應用程式專案模板包含 wwwroot 資料夾中的多個資料夾 :

  • wwwroot
    • css
    • images
    • js

然後就可以通過如下格式的URL:https://localhost:5001/images/123.jpg 來訪問靜態檔案。

2.訪問web根目錄之外的靜態檔案

有些時候,可能有些靜態檔案我們並不是放在web根目錄下面的。例如如下一個目錄層次結構,其中要提供的靜態檔案位於 Web 根目錄之外:

  • wwwroot
    • css
    • images
    • js
  • Content
    • images
      • img.jpg

如果通過URL:https://localhost:5001/Content/images/img.jpg是無法訪問的,這個時候我們就需要額外的指定靜態檔案路徑:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
           //wwroot目錄下靜態檔案
            app.UseStaticFiles();
            //wwwroot之外的靜態檔案
            app.UseStaticFiles(new StaticFileOptions
            {
                //指定實際物理路徑
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Content/images")),
                //設定URL請求的檔案路徑
                RequestPath = new Microsoft.AspNetCore.Http.PathString("/MyStaticFiles")
            });
}

然後就可以通過如下格式的URL:https://localhost:5001/MyStaticFiles/img.jpg 來訪問靜態檔案。

3.提供預設檔案

UseDefaultFiles中介軟體用於啟用預設檔案的功能,例如我們開啟一個網站只輸入網站地址,就會自動跳出網站首頁。這裡的網站首頁實際就相當於一個預設檔案。

ASP.Net Core為我們簡化了預設檔案的搜尋功能,我們只需要新增中介軟體即可。

public void Configure(IApplicationBuilder app)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

要提供預設檔案,必須在 UseStaticFiles 前呼叫 UseDefaultFiles。 UseDefaultFiles 實際上用於重寫 URL,不提供檔案。 通過 UseStaticFiles 啟用靜態檔案中介軟體來提供檔案。

 UseDefaultFiles 預設支援以下幾種型別檔案:

  • default.htm
  • default.html
  • index.htm
  • index.html

當然,框架也支援自定義預設檔案,感興趣的同學可以研究一下。

例如如下一個目錄層次結構:

  • wwwroot
    • Index.html
    • css
    • images
    • js
  • 通過URL:https://localhost:5001/訪問時,會自動跳轉到並開啟Index.html頁面

4.啟用目錄瀏覽功能

出於安全考慮,目錄瀏覽預設處於禁用狀態,需通過新增UseDirectoryBrowser中介軟體的方式開啟。

public void Configure(IApplicationBuilder app)
{
    //預設檔案
    app.UseDefaultFiles();
    //靜態檔案
    app.UseStaticFiles();
   //目錄瀏覽
   app.UseDirectoryBrowser();
}

另外,需要註冊目錄瀏覽的服務

public void ConfigureServices(IServiceCollection services)
{
    services.AddDirectoryBrowser();
}

例如如下一個目錄層次結構:

   wwwroot

  • 123.jpg
  • 234.jpg

通過URL:https://localhost:5001/訪問時,由於wwwroot根目錄下不存在預設檔案,所以會開啟檔案目錄。

 

 5.UseFileServer

UseFileServer 結合了 UseStaticFilesUseDefaultFiles 和 UseDirectoryBrowser(可選)的功能。

例如以下目錄層次結構:

  • wwwroot
    • 123.jpg
    • 234.jpg
  • Content
    • images
      • 234.jpg

以下程式碼啟用靜態檔案、預設檔案和及 MyStaticFiles 的目錄瀏覽:

public void Configure(IApplicationBuilder app)
{
//靜態檔案 app.UseStaticFiles(); app.UseFileServer(new FileServerOptions { FileProvider = new PhysicalFileProvider( Path.Combine(Directory.GetCurrentDirectory(), "Content")), RequestPath = "/MyStaticFiles",
//啟用目錄 EnableDirectoryBrowsing = true }); }

EnableDirectoryBrowsing 屬性值為 true 時必須註冊服務 AddDirectoryBrowser

public void ConfigureServices(IServiceCollection services)
{
    services.AddDirectoryBrowser();
}

 

通過URL:https://localhost:5001/MyStaticFiles/訪問時,由於目錄下不存在預設檔案,所以會開啟檔案目錄。

 

 

&n