歡迎光臨
每天分享高質量文章

Asp.Net Core中的靜態檔案-12

目錄

本文出自《從零開始學 ASP.NET CORE MVC》目錄 
推薦文章:配置 ASP.NET Core 請求(Request)處理管道

Asp.Net Core 中的靜態檔案

在這個視頻中我們將討論如何使 ASP.NET Core 應用程式,支持靜態檔案,如 HTML,圖像,CSS 和 JavaScript 檔案。

靜態檔案

  • 預設情況下,Asp.Net Core 應用程式不會提供靜態檔案。
  • 靜態檔案的預設目錄是wwwroot,此目錄必須位於專案檔案夾的根目錄中。

將圖片複製並粘貼到 wwwroot 檔案夾中。我們假設檔案的名稱是 banner.jpg。為了能夠從瀏覽器訪問此檔案,路徑為:http://{{serverName}}/banner.jpg在我們的示例中,我們在本地計算機上運行, 因此 URL 將如下所示。您的計算機上的端口號可能不同。http://localhost:3290/banner.jpg

從我的電腦,然後導航到上面的 Url 的時候,
我們仍然是通過Run()方法的中間件,傳迴響應的結果,。我沒有看到圖片banner.jpg
這是因為,目前我們的應用程式請求處理管道,沒有可以提供靜態檔案的所需中間件。我們需要使用的中間件UseStaticFiles()

修改Configure()方法中的代碼,將UseStaticFiles()中間件添加到我們的應用程式的請求處理管道中,如下所示。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    //添加靜態檔案中間件
    app.UseStaticFiles();

    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World!");
    });
}

wwwroot檔案夾中沒有像 vs 提供的預設模板一樣把圖片、CSS 和 JavaScript 檔案進行分類,我們建議將不同的檔案型別進行檔案夾區分,參考下圖檔案夾層次結構 :

image.png

為了能夠從瀏覽器訪問image1.jpg我們輸入地址為 http://localhost:49119/images/image1.jpg 得到結果。

提供 wwwroot 檔案夾之外的靜態檔案

預設情況下,UseStaticFiles()中間件僅提供 wwwroot 檔案夾中的靜態檔案。如果您願意,我們還可以在wwwroot檔案夾之外提供靜態檔案。

提供預設文件

大多數 Web 程式都有一個預設文件,它是用戶訪問程式地址時顯示的文件內容。例如,您有一個名為default.html的檔案,並且您希望在用戶訪問應用程式的根 URL 時提供它,即http://localhost:3290

此時,我們來訪問這個地址看看,我看到我使用Run()方法註冊的中間件產生的回呼。但是我沒有看到預設文件default.html的內容。為了能夠提供預設頁面,我們必須在應用程式的請求處理管道中插入UseDefaultFiles()中間件

//添加預設檔案中間件
app.UseDefaultFiles();
//添加靜態檔案中間件
app.UseStaticFiles();

請註意:必須在UseStaticFiles之前,註冊UseDefaultFiles來提供預設檔案。UseDefaultFiles是一個 URL 重寫器,實際上並沒有提供檔案。它只是將URL重寫定位到預設文件,然後還是由靜態檔案中間件提供。地址欄中顯示的 URL 仍然是根節點的 URL,而不是重寫的 URL。

以下是UseDefaultFiles中間件預設會去查找的地址信息

- index.htm 的預設檔案
- index.html
- default.htm
- default.html

如果要使用其他文件,如 52abp.html 例如,作為您的預設文件,您可以使用以下代碼執行此操作。

//將52abp.html指定為預設文件
DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
defaultFilesOptions.DefaultFileNames.Clear();
defaultFilesOptions.DefaultFileNames.Add(“52abp.html”);
//添加預設檔案中間件
app.UseDefaultFiles(defaultFilesOptions);
//添加靜態檔案中間件
app.UseStaticFiles();

UseFileServer 中間件

UseFileServer結合了UseStaticFiles,UseDefaultFiles和UseDirectoryBrowser中間件的功能。DirectoryBrowser中間件,支持目錄瀏覽,並允許用戶查看指定目錄中的檔案。
我們可以用UseFileServer 中間件替換UseStaticFiles 和 UseDefaultFiles中間件。

/使用UseFileServer而不是UseDefaultFiles和UseStaticFiles
FileServerOptions fileServerOptions = new FileServerOptions();
fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear();
fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add(“52abp.html”);
app.UseFileServer(fileServerOptions);

這裡要註意的知識點:是我們應該使用添加中間件的方式,添加到應用程式的請求處理管道的方法。
在大多數情況下,我們使用以 USE 開頭的擴展方法添加中間件。例如:

UseDeveloperExceptionPage()
UseDefaultFiles()
UseStaticFiles()
UseFileServer()

如果要自定義這些中間件組件,他有對應的可配置選項卡。參考下表:

中間件 選項物件
UseDeveloperExceptionPage DeveloperExceptionPageOptions
UseDefaultFiles DefaultFilesOptions
UseStaticFiles StaticFileOptions
UseFileServer FileServerOptions

小結

我希望這篇文章可以幫助您滿足您的需求。我想收到你的反饋意見。請發佈您對本文的反饋,問題或意見。

    已同步到看一看
    赞(0)

    分享創造快樂