Asp.Net Core入門之靜態檔案

跳躍的鍵盤手發表於2020-06-20
ASP.NET

靜態檔案(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 結合了 UseStaticFiles、UseDefaultFiles 和 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/訪問時，由於目錄下不存在預設檔案，所以會開啟檔案目錄。

 

 

 

相關文章