Node.js/Express项目EJS模板ReferenceError（infos未定义）求助

问题 #

我是Web开发新手，用Node.js+Express搭项目时碰到了前后端交互的问题。前端EJS模板里要访问infos变量，但服务器渲染页面的时候没把这个变量传过去，结果报了infos is not defined的ReferenceError。

前端EJS代码 #

<div class="blog content">
        <h2>所有博客</h2>

        <% if (infos.length > 0) { %>
            <% infos.forEach((info)=>{ %>
                <div class="post-content">
                    <div>
                        <a href="">
                             <h3 class="title"><%=info.title %>  </h3>
                            <p class="snippet"><%= info.snippet %></p>
                            <br> <br>
                         </a>
                    </div>
                 </div>
          <%  }) %> 
           <%  } else {%>
            <p>今日暂无文章</p>
         <%  } %> 
    </div> 

服务器端代码 #

const express = require("express")
const app = express();

app.set("views engine", "ejs")

app.use(express.static("public"))
app.use(express.urlencoded())

app.get("/",  (req, res) => {
    const infos = [
        {
            title : "利物浦签下多明戈斯",
            snippet : "多明戈斯正式成为利物浦球员"
        },
        {
            title : "阿森纳签下赖斯",
            snippet : "赖斯和哈弗茨一同加盟阿森纳"
        },
     ]

    res.render("index.ejs", {title:"首页"})
})

报错信息 #

ReferenceError: C:\Users\go\Desktop\aid\views\index.ejs:8
    6|         <h2>所有博客</h2>
    7|
 >> 8|         <% if (infos.length > 0) { %>
    9|             <% infos.forEach((info)=>{ %>
    10|                 <div class="post-content">
    11|                     <div>

infos is not defined
    at eval ("C:\Users\go\Desktop\aid\views\index.ejs":16:8)
    at index (C:\Users\go\Desktop\aid\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (C:\Users\go\Desktop\aid\node_modules\ejs\lib\ejs.js:274:36)
    at View.exports.renderFile [as engine] (C:\Users\go\Desktop\aid\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (C:\Users\go\Desktop\aid\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\go\Desktop\aid\node_modules\express\lib\application.js:657:10)
    at Function.render (C:\Users\go\Desktop\aid\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (C:\Users\go\Desktop\aid\node_modules\express\lib\response.js:1039:7)
    at C:\Users\go\Desktop\aid\app.js:32:9
    at Layer.handle [as handle_request] (C:\Users\go\Desktop\aid\node_modules\express\lib\router\layer.js:95:5)

解决步骤 #

1. 传递infos变量到模板 #

服务器里res.render的第二个参数是给模板传数据的对象，你已经定义了infos数组，但没加到这个对象里。修改这一行：

// ES6简写方式，更简洁
res.render("index.ejs", { title: "首页", infos })
// 或者完整写法
res.render("index.ejs", { title: "首页", infos: infos })

2. 修复EJS引擎配置的拼写错误 #

原服务器代码里app.set("views engine", "ejs")是拼写错误，正确配置应该是view engine（去掉s）：

app.set("view engine", "ejs")

3. 可选：模板增加容错判断 #

为了避免以后再出现类似未传变量的报错，可以在模板里先判断infos是否存在，再检查长度：

<% if (infos && infos.length > 0) { %>

这样就算服务器没传infos，页面也只会显示“今日暂无文章”，不会抛出错误。

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