如何使用快递服务目录？

Question

I would like to create a simple express server that sends a directory like the image following: Browser directory picture

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

app.use(express.static(path.join(__dirname, 'shaders')));

app.use('*', (req, res) => {
  res.sendFile((path.join(__dirname, 'shaders')));
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log('listening on port ', PORT);
});

This code displays Cannot GET / in the browser window.

Answer 1

您可以使用静态文件夹通过 GET 请求共享或获取文件。

app.use(express.static(path.join(__dirname, 'shaders')));

Answer 2

This code displays Cannot GET / in the browser window.

Sending a GET to / will fallback to your app.use * as you don't have a route defined. It's not clear what this should do as you're returning a directory instead of a file, which isn't going to work.

If you'd like to access a specific file, you need to request it directly as localhost:3000/shaders/xxx , etc. The use of express.static appears to be correct.

Answer 3

Using a library

There are libraries that already do this for you, for example serve-index .

Doing it yourself

This is a modified version of your code to show file content or list the files/directories in a directory. I've added some comments to explain what's happening, but feel free to ask more questions if something is not clear.

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

const listingPath = path.join(__dirname, "shaders");

app.get("*", (req, res) => {
    // Build the path of the file using the URL pathname of the request.
    const filePath = path.join(listingPath, req.path);

    // If the path does not exist, return a 404.
    if (!fs.existsSync(filePath)) {
        return res.status(404).end();
    }

    // Check if the existing item is a directory or a file.
    if (fs.statSync(filePath).isDirectory()) {
        const filesInDir = fs.readdirSync(filePath);
        // If the item is a directory: show all the items inside that directory.
        return res.send(filesInDir);
    } else {
        const fileContent = fs.readFileSync(filePath, 'utf8');
        // If the item is a file: show the content of that file.
        return res.send(fileContent);
    }
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log("listening on port ", PORT);
});

You can use this as a base to make a template that includes links to the files/directories, to include a link to the parent directory, to show more meta data ...