Node.js+EJS连接MySQL实现搜索框报错：data未定义

你遇到的data is not defined错误核心原因是EJS视图渲染时未接收到data变量，结合你用partial嵌入模板的场景，主要问题集中在路由传参逻辑、模板变量继承和初始页面加载的变量处理上，下面是具体修复步骤：

1. 修复路由逻辑：确保GET/POST请求都传递data变量 #

因为你的adcards.ejs是嵌入main.ejs的partial，所有模板变量必须通过渲染main.ejs传递，partial会自动继承父模板的变量。同时要处理初始GET加载页面的情况，避免首次渲染就报错。

修正index.js路由代码：

// 引入必要依赖（如果还没加）
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();

// 解析POST表单数据的中间件（必须放在路由之前）
app.use(bodyParser.urlencoded({ extended: true }));

// 数据库连接（根据你的配置修改）
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_db'
});
db.connect();

// 1. GET路由：初始加载页面，传递空数组避免EJS报错
app.get('/perfil', (req, res) => {
  res.render('main', { data: [] });
});

// 2. POST路由：处理搜索请求，传递查询结果到main模板
app.post('/search', (req, res) => {
  const emailKeyword = req.body.email; // 对应表单input的name属性
  // 使用占位符防止SQL注入
  const query = 'SELECT * FROM your_table WHERE email LIKE ?';
  
  db.query(query, [`%${emailKeyword}%`], (err, results) => {
    if (err) throw err;
    // 把查询结果传给main模板，partial会自动拿到data变量
    res.render('main', { data: results });
  });
});

app.listen(3000);

2. 修正表单提交目标 #

确保perfil.ejs的表单指向正确的POST路由：

<form action="/search" method="POST">
  <input type="text" name="email" placeholder="输入邮箱关键词" required>
  <button type="submit">搜索</button>
</form>

3. 给EJS模板加变量存在判断 #

在adcards.ejs中先判断data是否存在，避免初始加载或无搜索结果时报错：

<% if (data && data.length > 0) { %>
  <% data.forEach(item => { %>
    <div class="ad-card">
      <p>邮箱：<%= item.email %></p>
      <!-- 渲染其他字段，比如姓名、ID等 -->
    </div>
  <% }) %>
<% } else { %>
  <p>暂无匹配的结果</p>
<% } %>

关键注意点 #

• 不要单独渲染adcards.ejs，因为它是partial，必须依赖main.ejs的变量上下文；
• 必须添加body-parser中间件，否则无法解析POST表单的req.body数据；
• 初始GET请求一定要传递空的data数组，否则页面加载时adcards.ejs找不到变量直接报错。

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