POST请求传递多变量问题：博客项目表单提交无显示求助

我正在开发一个博客网站作为毕业设计项目，想实现点击提交按钮后渲染三个不同变量，但测试时页面只加载却没有显示预期内容。试过多次调用res.render、合并IF语句、用多个POST请求，要么弹出“Cannot set headers after they are sent to the client”错误，要么页面无限加载。

原代码 #

Node.js（Express）处理逻辑 #

app.post("/submit", (req, res) => {

    const clientName = req.body["fName"] + req.body["lName"]
    const bloggName = req.body["bName"]
    const blogBody = req.body["bEnter"]

    res.render("blog.ejs", { bloggerName: clientName}, { blogTitle: bloggName }, { blogContent : blogBody })
})

EJS模板代码 #

<% if (locals.bloggerName) { %>
      <h1>
        <%= bloggerName %>
      </h1>
      <% } else { %>
        <h1>
          User Name
        </h1>
      <% } %>

      <% if (locals.blogTitle) { %>
        <h2>
          <%= blogTitle %>
        </h2>
      <% } else { %>
        <h2>
          Blog Title
        </h2>
      <% } %>

      <% if (locals.blogContent) { %>
        <h2>
          <%= blogContent%>
        </h2>
      <% } else { %>
        <p>
          Blog Content
        </p>
      <% } %>

核心错误点 #

1. res.render参数使用错误：第二个参数必须是单个对象，用来传递所有模板变量。你现在传了三个独立对象，导致只有第一个对象里的bloggerName能被模板读取，blogTitle和blogContent根本没传到EJS中，所以页面显示的都是默认内容。
2. 多次调用res.render会触发多次响应发送，一个请求只能对应一个响应，这就是“Cannot set headers after they are sent to the client”错误的根源。

修正后的代码 #

Node.js（Express）部分 #

把所有变量合并到同一个对象里传递：

app.post("/submit", (req, res) => {
    const clientName = req.body["fName"] + req.body["lName"]
    const bloggName = req.body["bName"]
    const blogBody = req.body["bEnter"]

    // 所有模板变量放在同一个对象中传递
    res.render("blog.ejs", { 
        bloggerName: clientName,
        blogTitle: bloggName,
        blogContent: blogBody 
    })
})

EJS模板简化（可选） #

可以用变量默认值语法替代繁琐的if-else判断，代码更简洁：

<h1><%= bloggerName || 'User Name' %></h1>
<h2><%= blogTitle || 'Blog Title' %></h2>
<h2><%= blogContent || 'Blog Content' %></h2>

内容的提问来源于stack exchange，提问作者Abdul-Jalil