Express.js 中的静态文件服务:使用 Express.static

阅读时长 5 min read

Express.js 是一个流行的 Node.js web 应用框架,通过提供众多的中间件和函数,Express 让开发者更容易地创建、配置、管理和调试复杂的服务器端应用。其中一个非常重要的功能就是静态文件服务。

在 Web 开发中,静态文件通常是指 HTML、CSS、JavaScript、图片、音频、视频等资源,它们不需要服务器处理或查询数据库,直接通过 URL 地址访问即可。Express.js 提供了一个方便的中间件函数 Express.static,可以让我们轻松地将静态文件托管到服务器端,实现快速、可靠、可缓存的静态文件服务。

Express.static 的基本用法

Express.static 函数是一个 Express 应用程序级别的中间件函数,可以将包含静态文件的目录作为参数传递,并返回一个真正的中间件函数。这个中间件函数能够处理 HTTP 的 GET 请求,并自动为请求文档匹配文件系统上的文件,如果找到了对应的文件,就将其发送到客户端。如果没有找到,Express.static 通常会将请求转发给下一个中间件处理。

Express.static 函数的基本用法非常简单,只需要在应用程序中使用 app.use 调用即可:

上面的代码首先创建了一个 Express 应用程序实例,并使用 app.use 调用将当前目录下的 public 目录作为静态文件目录。然后启动服务器监听在 3000 端口上。现在,我们可以在浏览器中访问 public 下的任何文件了。例如,如果 public 目录下有一个名为 index.html 的文件,我们可以通过访问 http://localhost:3000/index.html 来访问该文件。

需要注意的是,这里使用了相对目录 public,这意味着我们必须将静态资源文件放置在当前目录下的 public 目录中,或者使用绝对路径或其他相对路径指定目录。

Express.static 的高级用法

除了基本用法之外,Express.static 还支持许多高级配置选项,可以进一步细化静态文件服务的行为。以下是一些常用的选项:

  • 选择 MIME 类型

    默认情况下,Express.static 会试图根据文件扩展名自动选择正确的 MIME 类型。如果需要手动指定 MIME 类型,可以通过以下方式:

  • 指定缓存控制

    静态文件通常可以进行缓存,这样可以减少服务器和客户端之间的通信次数。Express.static 提供了 cacheControl 选项,可以指定客户端缓存的策略。例如,下面的代码将缓存资源1年,并使用最新的版本:

  • 自定义文件查找算法

    默认情况下,Express.static 将为每个静态文件请求依次查找目录中的文件,如果找到了就会发送它。如果你需要自定义查找算法,例如忽略某些文件、处理文件别名等,可以提供一个自定义的查找函数。例如,下面的代码将在查找文件之前,将样式文件路径中的 ~ 替换为根目录:

    -- -------------------- ---- -------
    -------------------------------- -
        ----------- ----- ----- -- -
            ----------------------------- ------------
        --
        -- -------
        ------ ------------- -- ----
        ----- ------ -- -- ------ ---------
        ------------- ----- -- -- ------------- --
        ---------- ----- -- -------------
        ------- ------------ -- ---- - -
        --------- ----- -- -----
    ----

总结

本文介绍了如何使用 Express.static 快速并方便地为 Express.js 应用程序提供静态文件服务。我们讨论了 Express.static 的基本用法和高级用法,包括 MIME 类型选择、缓存控制、自定义查找算法等。希望本文能够帮助读者更好地理解和应用 Express.js 中的静态文件服务,以提高 Web 开发的效率和质量。

示例代码

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------

-- ------- ------ ----------
----------------------------------

-- -------
-------------------------------- -
    ----------- ----- ----- -- -
        ----------------------------- ------------
    --
    -- -------
    ------ ------------- -- ----
    ----- ------ -- -- ------ ---------
    ------------- ----- -- -- ------------- --
    ---------- ----- -- -------------
    ------- ------------ -- ---- - -
    --------- ----- -- -----
----

-- -----
---------------- -- -- ------------------- -----------

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64c858795ad90b6d0413511b

Feed
back