它是使用express.static的唯一方法吗？

Posted 2021-04-26

我正在开发如下网站

webpage
    -app
        -routers
            -photo.js
    -public
        -css
            -photo.css
        -views
            -photo.ejs
    -server.js

当我连接到localhost：3000 /照片我没有问题。但是，当我连接到localhost：3000 / photo / hero时我无法获得css，我添加了这三行

app.use('/photo/4din2d',express.static(__dirname + '/public'));
app.use('/photo/tree',express.static(__dirname + '/public'));
app.use('/photo/hero',express.static(__dirname + '/public'));

这是问题，我将添加更多类别，如'英雄，树，4din2d'，我认为每次添加express.static不是一个好方法。请给我正确的方法。

photo.js

router.get('/', (req,res)=>{ res.render('photo'); }); router.get('/:id',(req,res)=>{ var category = req.params.id; res.render('photo'); });

photo.ejs

    <link rel="stylesheet" href="./css/photo.css">

server.js

    app.use(express.static(__dirname + '/public'));
    app.use('/photo',express.static(__dirname + '/public'));
    app.use('/photo/4din2d',express.static(__dirname + '/public'));
    app.use('/photo/tree',express.static(__dirname + '/public'));
    app.use('/photo/hero',express.static(__dirname + '/public'));

    var photo = require('./app/routers/photo.js');
    app.use('/photo',photo);

答案

在server.js中，您只需要一个静态目录public：

app.use(express.static(__dirname + '/public'))

然后在photo.ejs中，您应该相对于根（/）而不是相对于当前路由（./）引用您的资产：

<link rel="stylesheet" href="/css/photo.css">

我希望这有帮助。