前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >.NET Core开发实战(第23课:静态文件中间件:前后端分离开发合并部署骚操作)--学习笔记(上)

.NET Core开发实战(第23课:静态文件中间件:前后端分离开发合并部署骚操作)--学习笔记(上)

作者头像
郑子铭
发布2021-01-13 15:28:57
3980
发布2021-01-13 15:28:57
举报

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

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

1、支持指定相对路径

2、支持目录的浏览

3、支持设置默认文档

4、支持多目录映射

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

首先使用静态文件中间件

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

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

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

a/index.html

代码语言:javascript
复制
<!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

代码语言:javascript
复制
<!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 执行

代码语言:javascript
复制
https://localhost:5001/index.html

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

代码语言:javascript
复制
https://localhost:5001/a/index.html

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

代码语言:javascript
复制
app.UseDefaultFiles();

这个方法还有一个重载

代码语言:javascript
复制
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

代码语言:javascript
复制
namespace Microsoft.AspNetCore.Builder
{
  public class DefaultFilesOptions : SharedOptionsBase
  {
    public DefaultFilesOptions();

    public DefaultFilesOptions(SharedOptions sharedOptions);

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

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

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

代码语言:javascript
复制
https://localhost:5001/

访问 a 目录会输出 a 的 index

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

在 ConfigureServices 注册 AddDirectoryBrowser

代码语言:javascript
复制
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddDirectoryBrowser();
}

然后在 Configure 里面启用

代码语言:javascript
复制
app.UseDirectoryBrowser();

启动程序,访问根目录

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

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

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

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
</head>
<body>
    <h1>page</h1>
</body>
</html>

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

代码语言:javascript
复制
app.UseStaticFiles();

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

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

代码语言:javascript
复制
https://localhost:5001/page.html

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

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

代码语言:javascript
复制
app.UseStaticFiles();

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

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

代码语言:javascript
复制
https://localhost:5001/files/page.html

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-03-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DotNet NB 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 23 | 静态文件中间件:前后端分离开发合并部署骚操作
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档