使用EJS搭建网站遇页面加载异常与CSS失效问题求助

问题1：/posts/:title路由页面持续加载 #

原因 #

使用forEach遍历posts数组时，仅在找到匹配标题的文章时调用res.render，但如果没有任何文章匹配，服务器不会返回任何响应，导致请求一直处于挂起状态；另外即使找到匹配项，forEach仍会遍历剩余元素，造成不必要的性能浪费。

修复方案 #

用Array.find()替代forEach，找到第一个匹配元素后立即终止遍历，同时添加未找到内容的处理逻辑：

app.get("/posts/:title", function(req, res) {
  const requestedTitle = _.lowerCase(req.params.title);
  const matchedPost = posts.find(function(post) {
    return _.lowerCase(post.title) === requestedTitle;
  });

  if (matchedPost) {
    res.render("posts", { title: matchedPost.title, text: matchedPost.text });
  } else {
    res.status(404).send("文章未找到");
  }
});

问题2：页面CSS样式不生效 #

原因 #

header组件中styles.css使用相对路径，访问/posts/:title这类嵌套路由时，浏览器会从/posts/目录请求样式文件，而非网站根目录，导致样式文件无法被找到。另外你的header组件存在HTML结构错误：<nav>标签被放在了<head>内部，不符合规范。

修复方案 #

1. 将样式文件路径改为绝对路径，在href前添加/：

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

2. 修正header组件的HTML结构，将<nav>移到<body>内部：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Daily Journal</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <p class="navbar-brand">DAILY JOURNAL</p>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li id="home"><a href="/">HOME</a></li>
        <li id="about"><a href="/about">ABOUT US</a></li>
        <li id="contact"><a href="/contact">CONTACT US</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">

内容的提问来源于stack exchange，提问作者amar chellihi