1. Dotnet9首页
  2. .NET
  3. ASP.NET Core

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
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"

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

https://localhost:5001/a/index.html
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"

如果默认情况下都是访问 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();

启动程序,访问根目录

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

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

这是我们在使用 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
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"

我们的 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"))
});

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

https://localhost:5001/files/page.html

也就是说我们可以把任意的文件目录映射为任意的 URL 地址

3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"
△扫码免费试看课程
3:静态文件中间件:前后端分离开发合并部署骚操作(上)-开发实战"

原文出处:微信公众号【郑子铭 DotNet NB】

原文链接:https://mp.weixin.qq.com/s/mw81PStYd-7qdbwbIaT1lA

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论