Question

我是节点，表达等新手。我已经制作了一个博客应用程序，我遇到了一个问题。我正在使用mongoose，node，express和ejs。

当我打电话

router.get('/posts', function(req, res){   Post.find({}, function(err, posts){
    res.render('viewpost.ejs', {
      posts
    });   }); });

一切都很完美。我得到了我的帖子，css也在工作。问题是我打电话

router.get('/posts/:posts_id', function(req, res){
  Post.find({_id: req.params.posts_id}, function(err, posts){
      res.render('viewpost.ejs',{
         posts
    });
  });
});

Post似乎有效，但在控制台中我得到了

GET /posts/posts.css 304 1.854 ms 而且viewpost.ejs看起来好像没有使用css。

服务器文件server.js

app.use(express.static('public'))
app.use(express.static(path.join(__dirname, 'public/css/')));
app.use(express.static(path.join(__dirname, 'public/img/')));

viewpost.ejs

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="style.css">
    <script src="/bower_components/jquery/dist/jquery.js"></script>
  </head>
  <body class="cyc">
  <% include ./partials/navbar.ejs %>

<%= posts %>
</body>
</html>

所以当我使用没有req.params的路线时，一切似乎都在起作用好。当我用任何参数调用它时，我的css文件无效。

Answer 1

<link rel="stylesheet" href="style.css">尝试从HTML页面所在的同一路径加载style.css。因此，对于/posts，它会尝试加载/style.css，对于/posts/1，它会尝试加载/posts/style.css。但后者与您的/posts/:posts_id端点匹配，因此使用posts_id == 'style.css'进行调用，这是无意义的。

解决方案很简单就是使链接绝对：

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

Answer 2

我面临着同样的问题，但最终我解决了。执行以下操作：在您的HTML或EJS文件中输入： <link rel="stylesheet" href="../style.css">

在头部，它将同时适用于/ post和/ post：id

Css没有加载req.params或其他东西

2 个答案: