重新整理 .net core 實踐篇—————靜態中介軟體[二十一]

不問前世發表於2021-06-16

前言

簡單整理一下靜態中介軟體。

正文

我們使用靜態檔案呼叫：

app.UseStaticFiles();

那麼這個預設會將我們根目錄下的wwwroot作為靜態目錄。

這個就比較值得注意的，可能剛開始學.net core 的小夥伴，會直接把指令碼寫在更目錄script這樣是訪問不到的。

當然了，你可以配置引數。可以給UseStaticFiles傳遞引數。不過建議不要這麼幹，因為這是一種預設的約定。

在wwwroot下建立一個index.html,那麼訪問http://localhost/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    靜態檔案
</body>
</html>

效果:

如果還有一些其他目錄需要註冊的話，那麼可以這樣:

app.UseStaticFiles(new StaticFileOptions
{
	RequestPath="/files",
	FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"files"))
});

在根目錄建立files：

然後呢，訪問就是http://localhost:5000/files/index.html

接下來介紹一下UseDefaultFiles，這個是設定預設的檔案。

這個不是說404，然後跳轉到這個檔案這裡哈。

直接看下它的中介軟體間吧。
DefaultFilesMiddleware:

public Task Invoke(HttpContext context)
{
	if (context.GetEndpoint() == null &&
		Helpers.IsGetOrHeadMethod(context.Request.Method)
		&& Helpers.TryMatchPath(context, _matchUrl, forDirectory: true, subpath: out var subpath))
	{
		var dirContents = _fileProvider.GetDirectoryContents(subpath.Value);
		if (dirContents.Exists)
		{
			// Check if any of our default files exist.
			for (int matchIndex = 0; matchIndex < _options.DefaultFileNames.Count; matchIndex++)
			{
				string defaultFile = _options.DefaultFileNames[matchIndex];
				var file = _fileProvider.GetFileInfo(subpath.Value + defaultFile);
				// TryMatchPath will make sure subpath always ends with a "/" by adding it if needed.
				if (file.Exists)
				{
					// If the path matches a directory but does not end in a slash, redirect to add the slash.
					// This prevents relative links from breaking.
					if (!Helpers.PathEndsInSlash(context.Request.Path))
					{
						context.Response.StatusCode = StatusCodes.Status301MovedPermanently;
						var request = context.Request;
						var redirect = UriHelper.BuildAbsolute(request.Scheme, request.Host, request.PathBase, request.Path + "/", request.QueryString);
						context.Response.Headers[HeaderNames.Location] = redirect;
						return Task.CompletedTask;
					}

					// Match found, re-write the url. A later middleware will actually serve the file.
					context.Request.Path = new PathString(context.Request.Path.Value + defaultFile);
					break;
				}
			}
		}
	}

	return _next(context);
}

裡面做的事情其實很簡單，將請求轉換為檔案路徑。分為末尾是/和末尾不是/的。

比如http://localhost/a/,那麼轉換為wwwroot/a/路徑。然後判斷context.Request.Path末尾是否是/，如果是那麼給檔案路徑加上index.html或者其他預設檔案。如果判斷存在的話，那麼返回檔案。

比如http://localhost/a,那麼轉換為wwwroot/a/路徑。然後判斷context.Request.Path末尾是不是/，如果是那麼給檔案路徑加上index.html或者其他預設檔案。如果判斷存在的話，那麼給路徑加上/，然後返回301重新請求。

預設的在DefaultFilesOptions：

/// <summary>
/// Options for selecting default file names.
/// </summary>
public class DefaultFilesOptions : SharedOptionsBase
{
	/// <summary>
	/// Configuration for the DefaultFilesMiddleware.
	/// </summary>
	public DefaultFilesOptions()
		: this(new SharedOptions())
	{
	}

	/// <summary>
	/// Configuration for the DefaultFilesMiddleware.
	/// </summary>
	/// <param name="sharedOptions"></param>
	public DefaultFilesOptions(SharedOptions sharedOptions)
		: base(sharedOptions)
	{
		// Prioritized list
		DefaultFileNames = new List<string>
		{
			"default.htm",
			"default.html",
			"index.htm",
			"index.html",
		};
	}

	/// <summary>
	/// An ordered list of file names to select by default. List length and ordering may affect performance.
	/// </summary>
	public IList<string> DefaultFileNames { get; set; }
}

有上面這幾個預設的，以此按照順序，當然你也可以傳進去修改，看下引數就好。

a目錄建立了一個index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    這是a下面的index.html
</body>
</html>

那麼訪問http://localhost:5000/a 就好。

效果:

經過了一次301哈。

那麼介紹一下目錄預覽:

增加服務:

services.AddDirectoryBrowser();

增加中介軟體:

app.UseDirectoryBrowser();

這樣就可以了。

如果我們前後端像這種不完全分離的情況有一個問題。

比如說，現在一般3大框架，vue和 angular，react這種的話。你會發現一個問題，那就是他們有自己的路由。

這個時候可能就會和我們的路由衝突。

比如說http://localhost/pay 需要訪問的是index.html。因為index.html有自己的路由，顯示pay頁面。

那麼配置路由的時候應該加一條。

app.MapWhen(context =>
{
	return !context.Request.Path.Value.StartsWith("/api");
}, builder =>
{
	var option = new RewriteOptions();
	option.AddRewrite(".*","/index.html",true);
	app.UseRewriter(option);
	app.UseStaticFiles();
});

就是如果不是/api開頭的，統一定位到index.html，然後再經過UseStaticFiles處理，就直接到了index.html。

RewriteOptions這些轉換在細節篇中介紹。當然你也可以直接去給HttpContext body注入index.html流，然後返回,但是這樣用不到一些其他特性，就不介紹了。

結

下一節 檔案系統。

相關文章