隨著技術(shù)的發(fā)展，ASP.NET Core MVC也推出了好長時(shí)間，經(jīng)過不斷的版本更新迭代，已經(jīng)越來越完善，本系列文章主要講解ASP.NET Core MVC開發(fā)B/S系統(tǒng)過程中所涉及到的相關(guān)內(nèi)容，適用于初學(xué)者，在校畢業(yè)生，或其他想從事ASP.NET Core MVC 系統(tǒng)開發(fā)的人員。經(jīng)過前幾篇文章的講解，初步了解ASP.NET Core MVC項(xiàng)目創(chuàng)建，啟動(dòng)運(yùn)行，以及命名約定，創(chuàng)建控制器，視圖，模型，接收參數(shù)，傳遞數(shù)據(jù)，路由，頁面布局等內(nèi)容，今天繼續(xù)講解ASP.NET Core MVC wwwroot和客戶端庫等相關(guān)內(nèi)容，僅供學(xué)習(xí)分享使用。

(相關(guān)資料圖)

wwwroot文件夾概述

通過模板創(chuàng)建的ASP.NET Core MVC項(xiàng)目，會(huì)在程序根目錄創(chuàng)建一個(gè)wwwroot文件夾。此文件夾又稱為webroot文件夾，主要用于存放靜態(tài)資源文件，如：html，JavaScript，css樣式等內(nèi)容。默認(rèn)情況下，存在wwwroot文件夾下的所有靜態(tài)資源都可以通過Http請求提供服務(wù)。在新的框架中，且只有存放于wwwroot目錄下的靜態(tài)資源可以直接通過Http訪問，其他目錄下的靜態(tài)資源都將阻止。

靜態(tài)資源中間件

為了使wwwroot目錄下的靜態(tài)資源能夠被Http直接訪問，需要在程序啟動(dòng)時(shí)【Program.cs】加載靜態(tài)資源中間件。如下所示：

1 var builder = WebApplication.CreateBuilder(args); 2  3 // Add services to the container. 4 builder.Services.AddControllersWithViews(); 5  6 var app = builder.Build(); 7  8 // Configure the HTTP request pipeline. 9 if (!app.Environment.IsDevelopment())10 {11     app.UseExceptionHandler("/Home/Error");12     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.13     app.UseHsts();14 }15 16 app.UseHttpsRedirection();17 18 //1. 啟動(dòng)靜態(tài)資源服務(wù)中間件19 app.UseStaticFiles();20 21 app.UseRouting();22 23 app.UseAuthorization();24 25 app.MapControllerRoute(26     name: "default",27     pattern: "{controller=Home}/{action=Index}/{id?}");28 29 app.Run();

靜態(tài)資源示例

創(chuàng)建程序后，直接運(yùn)行，會(huì)通過路由設(shè)置，默認(rèn)加載Home/Index頁面，如下所示：

在wwwroot目錄下，創(chuàng)建index.html，內(nèi)容如下所示：

1  2  3  4      5      6  7  8     
公子小六
 9     
這是靜態(tài)首頁
10 11 

在Program.cs啟動(dòng)文件中，添加默認(rèn)文件中間件【app.UseDefaultFiles();】，如下所示：

1 var builder = WebApplication.CreateBuilder(args); 2 // Add services to the container. 3 builder.Services.AddControllersWithViews(); 4 var app = builder.Build(); 5 // Configure the HTTP request pipeline. 6 if (!app.Environment.IsDevelopment()) 7 { 8     app.UseExceptionHandler("/Home/Error"); 9     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.10     app.UseHsts();11 }12 app.UseHttpsRedirection();13 14 15 //0. 允許默認(rèn)文件映射16 app.UseDefaultFiles();17 //1. 啟動(dòng)靜態(tài)資源服務(wù)中間件18 app.UseStaticFiles();19 20 21 app.UseRouting();22 app.UseAuthorization();23 app.MapControllerRoute(24     name: "default",25     pattern: "{controller=Home}/{action=Index}/{id?}");26 27 app.Run();

再次運(yùn)行程序，會(huì)發(fā)現(xiàn)靜態(tài)默認(rèn)首頁Index.html會(huì)替換之前默認(rèn)的Home/Index路由視圖，如下所示：

通過以上示例得出在結(jié)論：默認(rèn)靜態(tài)資源首頁優(yōu)先級高于默認(rèn)路由。

修改默認(rèn)資源名稱

默認(rèn)啟動(dòng)靜態(tài)資源名稱為Index.html，可以通過DefaultFilesOptions指定默認(rèn)的首頁加載順序和名稱。如下所示：

1 var builder = WebApplication.CreateBuilder(args); 2 // Add services to the container. 3 builder.Services.AddControllersWithViews(); 4 var app = builder.Build(); 5 // Configure the HTTP request pipeline. 6 if (!app.Environment.IsDevelopment()) 7 { 8     app.UseExceptionHandler("/Home/Error"); 9     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.10     app.UseHsts();11 }12 app.UseHttpsRedirection();13 14 //默認(rèn)文件啟動(dòng)項(xiàng)15 DefaultFilesOptions options = new DefaultFilesOptions();16 options.DefaultFileNames.Add("Hello.html");17 //0. 允許默認(rèn)文件映射18 app.UseDefaultFiles(options);19 20 //1. 啟動(dòng)靜態(tài)資源服務(wù)中間件21 app.UseStaticFiles();22 23 app.UseRouting();24 app.UseAuthorization();25 app.MapControllerRoute(26     name: "default",27     pattern: "{controller=Home}/{action=Index}/{id?}");28 29 app.Run();

修改后再次啟動(dòng)，發(fā)現(xiàn)加載的依然是Index.html，而不是Hello.html。經(jīng)過調(diào)試發(fā)現(xiàn)，DefaultFilesOptions的默認(rèn)加載頁面，會(huì)自動(dòng)填充4個(gè)默認(rèn)頁面名稱。后面添加的頁面名稱會(huì)在原有默認(rèn)頁面之后。如下所示：

經(jīng)過以上分析，刪除默認(rèn)的index.html頁面，重新啟動(dòng)，默認(rèn)首頁變成了Hello.html頁面，如下所示：

靜態(tài)資源文件除了可以通過靜態(tài)資源中間件來實(shí)現(xiàn)【app.UseStaticFiles()】，還可以通過文件服務(wù)中間件來實(shí)現(xiàn)，如下所示：

1 FileServerOptions options = new FileServerOptions();2 options.DefaultFilesOptions.DefaultFileNames.Add("Hello.html");3 app.UseFileServer(options);

修改靜態(tài)資源目錄

默認(rèn)的靜態(tài)資源目錄為wwwroot，一般也是通用的webroot文件夾名稱，如果需要修改成其他目錄 ，可以通過WebApplication.CreateBuilder(options)中的選項(xiàng)進(jìn)行修改，接線所示：

1 WebApplicationOptions weboptions = new WebApplicationOptions() { WebRootPath="wwwroot2" };2 var builder = WebApplication.CreateBuilder(weboptions);

修改后，重新運(yùn)行程序，如下所示：

注意：為了讓wwwroot2生效，必須修改原有的wwwrooot文件名稱或者刪除wwwroot文件夾，否則wwwroot2將不生效。

客戶端庫

客戶端庫主要是指JavaScript，CSS等第三方庫，在ASP.NET Core MVC項(xiàng)目中，安裝客戶端庫如下所示：

在項(xiàng)目名稱處右鍵，選擇添加，客戶端庫，如下所示：

在打開的客戶端庫添加窗口，可以選擇需要的庫名稱，進(jìn)行搜索，然后進(jìn)行安裝即可，如下所示：

安裝成功后，在目標(biāo)位置即可進(jìn)行查看，如下所示：

以上就是關(guān)于ASP.NET Core MVC項(xiàng)目中wwwroot和客戶端庫相關(guān)內(nèi)容。關(guān)于客戶端庫在安裝成功后，如何在頁面中引用，將在后續(xù)章節(jié)中進(jìn)行介紹。

標(biāo)簽：