Node.js/Express项目EJS出现articles未定义的ReferenceError求助

核心错误点 #

1. 文件命名完全搞反：你把Express路由文件命名成了author.ejs（应该是.js后缀），把EJS模板文件命名成了author.js（应该是.ejs后缀），这直接导致模板渲染逻辑混乱。
2. 变量传递不匹配：路由里渲染模板时传的是{author: articles}，但模板里用的是articles，变量名对不上，模板自然找不到articles。
3. 变量作用域问题：articles原本定义在/home路由的回调函数内部，/draft路由根本访问不到这个变量。
4. 路由文件越权配置：app.set('view engine', 'ejs')应该放在主入口文件（比如app.js）里，路由文件只负责处理路由逻辑。

修正后的代码 #

第一步：修正文件命名 #

• 把原来的author.ejs重命名为authorRouter.js（路由文件）
• 把原来的author.js重命名为author.ejs（EJS模板文件）

修正后的路由文件（authorRouter.js） #

const express = require('express');
const router = express.Router();

// 把articles提升到路由外层，让两个路由都能访问
const articles = [{
    title: 'test article',
    subtitle: 'test subtitle',
    createdAt: new Date(),
    lastModified: new Date(),
    description: '测试文章的描述内容' // 补上模板里用到的description字段
}];

router.get('/home', (req, res) => {
    // 传递的变量名和模板里的articles对应
    res.render('author', { articles });
});

router.get('/draft', (req, res) => {
    // 按需传递数据，这里暂时传articles，也可以传空数组
    res.render('draft', { articles });
});

module.exports = router;

修正后的EJS模板文件（author.ejs） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Blog</title>
</head>
<body>
  <div class="container">
    <h1 class="mb-4">Blog Articles</h1>
    <a href="/author/draft" class="btn btn-success">New Draft</a>

    <!-- 先判断articles是否存在，避免空值报错 -->
    <% if (articles && articles.length > 0) { %>
      <% articles.forEach(article => { %>
        <div class="card mt-4">
          <div class="card-body">
            <h4 class="card-title"><%= article.title %></h4>
            <div class="card-subtitle text-muted mb-2">
              <%= article.createdAt.toLocaleDateString() %>
            </div>
            <div class="card-text mb-2"><%= article.description %></div>
            <!-- 注释部分可按需恢复 -->
            <!-- <a href="author/<%= article.slug %>" class="btn btn-primary">Read More</a>
            <a href="author/edit/<%= article.id %>" class="btn btn-info">Edit</a>
            <form action="/author/<%= article.id %>?_method=DELETE" method="POST" class="d-inline"> -->
              <button type="submit" class="btn btn-danger">Delete</button>
            <!-- </form> -->
          </div>
        </div>
      <% }) %>
    <% } else { %>
      <p class="mt-4">暂无文章</p>
    <% } %>
  </div>
</body>
</html>

主入口文件（app.js）配置示例 #

const express = require('express');
const app = express();
const authorRouter = require('./authorRouter'); // 根据你的文件路径调整

// 在主文件里设置视图引擎
app.set('view engine', 'ejs');
// 挂载路由
app.use('/author', authorRouter);

app.listen(3000, () => {
    console.log('服务器运行在http://localhost:3000');
});

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