Nodejs 求指导，关于express的静态目录

Nodejs 求指导，关于express的静态目录

使用express把静态指向public目录 public/css/xxx.css

浏览器直接访问/css/xxx.css可以输出内容， 怎么才能让浏览器访问/css这个路径输出目录结构啊

6 回复

当然可以。在Express中，你可以通过配置静态文件中间件来处理静态资源的请求。如果你希望用户在访问 /css 目录时能看到该目录下的文件列表，而不是直接输出某个特定的文件内容，你可以使用 express.static 中间件，并结合一些额外的逻辑来实现。

下面是一个简单的示例代码，展示了如何设置一个静态目录并允许用户浏览目录结构：

const express = require('express');
const path = require('path');
const app = express();

// 设置静态目录为 public
app.use('/css', express.static(path.join(__dirname, 'public', 'css')));

// 如果你希望直接访问 /css 路径时显示目录结构，你需要手动处理这个请求
app.get('/css', (req, res) => {
    // 获取指定目录下的所有文件
    const directoryPath = path.join(__dirname, 'public', 'css');

    // 读取目录内容
    fs.readdir(directoryPath, function (err, files) {
        if (err) {
            return res.status(500).send('Unable to scan directory: ' + err);
        } 

        // 将文件名转换成 HTML 列表
        let fileHTML = '<ul>';
        files.forEach(function (file) {
            fileHTML += `<li><a href="/css/${file}">${file}</a></li>`;
        });
        fileHTML += '</ul>';

        // 发送 HTML 响应
        res.send(fileHTML);
    });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

在这个例子中，我们首先设置了 /css 路径指向 public/css 目录作为静态资源。然后，我们定义了一个路由 /css，当用户访问这个路径时，会列出该目录下的所有文件。这里我们使用了 fs.readdir 方法来读取目录内容，并将结果以 HTML 列表的形式返回给客户端。

请注意，这种做法可能带来一定的安全风险，因为它暴露了服务器上的文件系统信息。在生产环境中，建议不要直接提供这样的功能，而是使用更安全的方式来处理文件访问需求。


app.use(express.static(__dirname + ‘/dist’));

这个是配置静态目录吧。我是想输出静态目录结构，就像apache作为server，访问静态目录下的子目录，会列出该目录下的文件列表那样

i don’t think it has something like that. if you want static listing, you can write an html or ask node to list the file and send back the json.

if you really want that then just use apache or nginx. node or express is not meant to be a static server.

使用directory中间件。

要实现当浏览器访问 /css 路径时显示 public/css 目录的结构，而不是直接输出文件内容，你可以使用第三方中间件 serve-index。这个中间件可以为目录生成一个美观的文件列表页面。

示例代码

首先安装所需的依赖：

npm install express serve-index

然后在你的 Node.js 应用中使用 express 和 serve-index：

const express = require('express');
const serveIndex = require('serve-index');

const app = express();
const port = 3000;

// 静态文件服务
app.use('/css', express.static('public/css'));
app.get('/css', serveIndex('public/css', {'icons': true, 'view': 'details'}));

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

解释

  1. express.static: 这个中间件用于提供静态文件（如图片、CSS 文件等）。在这个例子中，它将 public/css 目录中的文件映射到 /css 路径。

  2. serve-index: 这个中间件可以生成目录列表。当你访问 /css 路径时，如果该目录存在文件，则会显示文件列表，而不是直接下载或显示文件内容。

  3. 参数说明:

    • 'public/css': 要列出的目录。
    • 'icons': true: 启用图标，使列表更美观。
    • 'view': 'details': 显示详细视图，包括文件大小、修改时间等信息。

结果

当你访问 http://localhost:3000/css 时，将会看到 public/css 目录下的文件列表。每个文件旁边会显示图标和一些文件属性信息。这样就实现了你想要的功能。

回到顶部