23：静态文件中间件：前后端分离开发合并部署骚操作(上)-开发实战

.NET Core开发实战前文传送门：

23 | 静态文件中间件：前后端分离开发合并部署骚操作

我们先来看一下静态文件中间件有哪些能力

1、支持指定相对路径

2、支持目录的浏览

3、支持设置默认文档

4、支持多目录映射

源码链接：
https://github.com/witskeeper/geektime/tree/master/samples/StaticFilesDemo

首先使用静态文件中间件

// 通过这一行代码就可以访问到静态配置文件app.UseStaticFiles();

这样就可以将 wwwroot 目录映射出来，这是一个默认的配置，也就是说，当我们需要使用中间件静态文件输出的时候，首选就是应该把静态文件放在 wwwroot 下面

我们在这个目录下面放了几个文件：index.html，app.js，a 目录下面也有一个 index.html 和一个 a.js，这两个 index.html 的内容是不一样的

a/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>/a/index</title>
    <script src="a.js"></script>
</head>
<body>
    <h1>这是/a/index</h1>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>静态首页</title>
    <script src="app.js"></script>
</head>
<body>
    <h1>这是静态首页</h1>
</body>
</html>

启动程序，由于我们没有指定相对路径，所以说我们的根目录是/，就代表访问到了 wwwroot，输入 index.html，可以看到 javaScript 执行

https://localhost:5001/index.html

如果把地址换一下，会得到另一个页面

https://localhost:5001/a/index.html

如果默认情况下都是访问 index.html，怎么做呢？

app.UseDefaultFiles();

这个方法还有一个重载

namespace Microsoft.AspNetCore.Builder
{
  public static class DefaultFilesExtensions
  {
    public static IApplicationBuilder UseDefaultFiles(
      this IApplicationBuilder app);

    public static IApplicationBuilder UseDefaultFiles(
      this IApplicationBuilder app,
      DefaultFilesOptions options);

    public static IApplicationBuilder UseDefaultFiles(
      this IApplicationBuilder app,
      string requestPath);
  }
}

DefaultFilesOptions

namespace Microsoft.AspNetCore.Builder
{
  public class DefaultFilesOptions : SharedOptionsBase
  {
    public DefaultFilesOptions();

    public DefaultFilesOptions(SharedOptions sharedOptions);

    public IList<string> DefaultFileNames { get; set; }
  }
}

可以设置 DefaultFileNames，默认 index.html 是在里面的，所以这里可以不输入任何参数

启动程序，访问根目录的时候，应该输出首页的 index

https://localhost:5001/

访问 a 目录会输出 a 的 index

还有一种场景就是我们需要浏览我们的目录

在 ConfigureServices 注册 AddDirectoryBrowser

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

然后在 Configure 里面启用

app.UseDirectoryBrowser();

启动程序，访问根目录

可以看到浏览器上面显示了目录的文件，当我们点击其中的一个文件的时候，实际上是访问这个文件，我们还可以浏览它的子目录

这是我们在使用 wwwroot 的情况下，实际上我们还可以使用其他的目录，把其他的目录也注册进来

我们在应用程序的 file 目录下面另外添加了一个 page.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
</head>
<body>
    <h1>page</h1>
</body>
</html>

我们也期望可以访问到这个文件，我们就可以这样去做

app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions
{
    // 注入我们的物理文件提供程序，把我们的当前目录加 file，就是 file 目录，赋值给我们的提供程序
    // 这样子的效果就是我们的 wwwroot 会优先去寻找我们的文件，如果没有的话就会执行下一个中间件
    // 然后在这个中间件里面再找我们的文件是否存在，如果没有的话，它会去执行后面的路由和 MVC 的 Web API 的 Controller
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "file"))
});

因为这里我们入参并没有设置相对路径，也就是说我们根目录对应的也是 file 这个目录，我们这里可以输出 page.html

https://localhost:5001/page.html

我们的 page.html 就可以访问到了

还有一种情况是我们希望把我们的静态目录映射为某一个特定的 URL 地址目录下面，我们可以这样去做

app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions
{
    // 我们希望把我们的静态目录映射为某一个特定的 URL 地址目录下面
    RequestPath = "/files",
    // 注入我们的物理文件提供程序，把我们的当前目录加 file，就是 file 目录，赋值给我们的提供程序
    // 这样子的效果就是我们的 wwwroot 会优先去寻找我们的文件，如果没有的话就会执行下一个中间件
    // 然后在这个中间件里面再找我们的文件是否存在，如果没有的话，它会去执行后面的路由和 MVC 的 Web API 的 Controller
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "file"))
});

访问以下路径就可以看到我们的静态文件页面