Res.Render 停止运行

Question

抱歉，如果我分享太多（或太少！），我不确定当代码包含在这样的多个文件中时如何提供代码。

在这个小项目中，我有一个使用express和ejs的app.js服务器。我有一个“/compose”路线，它创建一个带有“标题”和“内容”的博客文章。然后它将其推送到名为“posts”的全局数组中。

在“/posts”路由中，我的意图是服务器应该循环包含帖子的“posts”数组，并将正确的帖子标题与 URL 中给出的“postName”参数相匹配。 （我试图使用字符串上的 .toLowerCase() 方法使标题不区分大小写。）

但是，当我这样做时，页面只是停止运行并且实际上没有加载。不过，一个奇怪的错误是，如果我通过对 app.js 代码进行一些小的更改（例如更改逗号或注释掉一行）来“重新加载”服务器（我正在运行 nodemon），从而使 nodemon 重新加载，页面将显示所请求的信息。

// This is my app.js code
const express = require("express");
const ejs = require("ejs");
const app = express();

app.set('view engine', 'ejs');

app.use(express.urlencoded({
  extended: true
}));
app.use(express.static(__dirname + "/public"));

const posts = [];

app.get("/posts/:postName", (req, res) => {
  const requestedTitle = req.params.postName.toLowerCase();
  posts.forEach(post => {
    const storedTitle = post.title.toLowerCase();
    if (requestedTitle === storedTitle) {
      res.render("post", {
        post: post
      });
    }
  });
});

app.post("/compose", (req, res) => {
  const post = {
    title: req.body.postTitle,
    content: req.body.postBody
  };
  posts.push(post);
  res.redirect("/")
})

<!-- This is my "Post" route HTML code (a partial called post.ejs) -->
<h1>This is
  <%= post.title%>
</h1>

<!-- This is my "Compose" route HTML Code (a partial called compose.ejs) -->
<h1>Compose</h1>
<form action="/compose" method="POST">
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input class="form-control" type="text" name="postTitle" autofocus>
    <label for="postBody">Post</label>
    <textarea class="form-control" name="postBody" id="" cols="30" rows="5"></textarea>
  </div>
  <button class="btn btn-primary" type="submit" name="button">Publish</button>
</form>

Answer 1

我看到的主要问题是您的 app.get("/posts/:postName", ...) 路由需要始终发送一个且仅一个 http 响应。按照现在的编码方式，如果找不到匹配的帖子，它将不发送任何响应；如果找到多个响应，它将尝试发送多个响应。这两个条件都是一个问题。

这是解决该问题的一种方法：

app.get("/posts/:postName", (req, res) => {
    const requestedTitle = req.params.postName.toLowerCase();
    for (let post of posts) {
        const storedTitle = post.title.toLowerCase();
        if (requestedTitle === storedTitle) {
            res.render("post", {
                post: post
            });
            return;
        }
    }
    // send some sort of response here with a 404 status
    res.sendStatus(404);
});

作为对您所看到的服务器行为的可能解释，浏览器只会同时向同一主机发送如此多的请求。因此，如果使用原始代码，您正在使用没有匹配帖子的 URL，则这些 URL 不会从服务器发送回浏览器，并且这些请求仍将等待响应。最终，浏览器将达到发送到主机的最大请求数，直到其中一些请求完成。因此，您的服务器似乎不再响应新请求，而实际上它只是在等待先前的请求完成。您必须始终从服务器向每个传入的 http 请求发送一个且仅一个响应。

---

我认为这个 posts 数组可能只是一个临时存储机制，但如果用一个以小写标题为键的 Map 对象替换该数组，效率会高得多。然后，您可以通过一个 map.get() 操作直接在 Map 对象上查找匹配的标题，而不是循环遍历整个数组。

Answer 2

对于从安吉拉博士的教程/课程中遇到此问题的任何人来说，我遇到了此问题并通过从我的文件中删除 来解决它“header.ejs”文件。

如果您已经在项目的终端中使用了npm install lodash，则不需要两者，因为这似乎会导致页面渲染速度严重减慢。

一旦删除，页面立即加载。