在Express中提供静态文件的实现方法

在Express中提供静态文件可通过以下步骤实现：

步骤一：安装Express依赖

在项目根目录下执行如下命令进行安装：

npm install express --save

步骤二：创建Express应用

创建一个名为app.js的文件，并添加以下代码：

const express = require("express");
const app = express();

步骤三：设置静态文件夹路径

在Express应用中，通过设置静态文件夹路径来指定存放静态文件的目录，这样Express就能够直接获取静态文件并呈现在浏览器中。

例如，我们将静态文件存放在public文件夹中，可以通过以下方式设置静态文件夹路径：

app.use(express.static("public"));

步骤四：运行Express应用

运行应用时，需要监听特定的端口，以便Express能够在该端口上接收HTTP请求并返回响应。

例如，将应用运行在端口号为3000的端口上，可以通过以下代码实现：

app.listen(3000, function () {
  console.log(`Express app listening on port 3000`);
});

示例一：提供一张图片

在public文件夹中创建名为hello.jpg的图片文件，然后通过以下代码来在浏览器中呈现该图片：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Express static file example</title>
  </head>
  <body>
    <img src="/hello.jpg" alt="hello" />
  </body>
</html>

注意，img标签中的src属性设置为“/hello.jpg”，而不是“public/hello.jpg”，因为通过设置静态文件夹路径，Express已经知道 hello.jpg 文件在哪个文件夹中。

示例二：提供一篇Markdown文档

在public文件夹中创建名为hello.md的Markdown文件，然后通过以下代码来在浏览器中呈现该Markdown文件的内容（需要安装marked依赖）：

const fs = require("fs");
const marked = require("marked");

app.get("/hello", function (req, res) {
  const filePath = `${__dirname}/public/hello.md`;

  fs.readFile(filePath, "utf8", function (error, data) {
    if (error) {
      res.status(500).send("Error reading file");
    } else {
      const html = marked(data);
      res.send(html);
    }
  });
});

上述代码中，根据请求的路径“/hello”，通过读取public文件夹中的hello.md文件，将其转换为HTML格式并返回给浏览器。

需要注意的是，在文件读取过程中，需要处理错误情况和设置响应头。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在Express中提供静态文件的实现方法 - Python技术站