Node.js使用EJS无法渲染MySQL查询结果页面问题求助

Alright, let's figure out why your EJS page is getting stuck and throwing repeated errors. I've gone through your code and spotted a few critical issues that are causing these problems:

1. Infinite Recursion Causing Rendering Crash #

The biggest issue is in your EJS template: you're including graph4.ejs inside itself with this line:

<%- include("graph4.ejs",{"title": title , "today": today }) %>

This creates an infinite loop—EJS keeps trying to render the same template over and over, which leads to the page freezing and repeated error messages. You should either remove this line entirely, or extract any shared header content into a separate template (like header.ejs) and include that instead.

2. Node.js Configuration & Syntax Errors #

• Wrong template engine setup: You wrote app.set('views engine','ejs');—the correct key is view engine (no extra "s"). Without fixing this, Express won't recognize EJS as your template renderer.
• Missing semicolon: The line var rows = [] fetchData(sql , function (rows) { is missing a semicolon after var rows = [];, which triggers a JavaScript syntax error that breaks your server logic.

Fixed Code Examples #

Corrected Node.js (app.js) #

var express = require("express");
var app = express();
var ejs = require("ejs");

// Fix template engine configuration
app.set('views', './views');
app.set('view engine', 'ejs');

app.get('/graph4', function (req, res, next) {
    var sql = `select A.card_id, A.state_id state,A.city_id city,A.mail,DATE_FORMAT(A.first_active_month,'%M %Y') first_active_month,B.score loyalty from users A left outer join loyalty B on A.card_id = B.card_id where B.score between -10 and -9 limit 1`;
    var rows = []; // Added missing semicolon
    fetchData(sql , function (rows) {
        var now = new Date();
        var today = now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate();
        console.log(rows);
        res.render("graph4.ejs", { 
            "title": "TEST", 
            "today": today, 
            "rows": rows 
        });
        console.log("ejs end");
    });
});

// Make sure your fetchData function properly handles MySQL queries (example skeleton)
function fetchData(sql, callback) {
    // Add your actual MySQL connection logic here
    // const mysql = require('mysql');
    // const connection = mysql.createConnection({ /* your db config */ });
    // connection.query(sql, (error, results) => {
    //     if (error) throw error;
    //     callback(results);
    //     connection.end();
    // });
}

// Start the server (add this if you haven't already)
app.listen(3000, () => console.log('Server running on port 3000'));

Corrected EJS (graph4.ejs) #

Removed the recursive include and added a fallback for empty data:

<div style="text-align: center">
    <h2><%= title %></h2>
    <p>Today: <%= today %></p>
</div>
<table class="table table-bordered table-striped table-hover table-heading table-datatable" id="ordersTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>State</th>
            <th>City</th>
            <th>Email</th>
            <th>Activate_Day</th>
            <th>loyalty</th>
        </tr>
    </thead>
    <tbody>
        <% if (rows && rows.length > 0) { %>
            <% rows.forEach(function(row) {%>
                <tr>
                    <td><%= row.card_id %></td>
                    <td><%= row.state %></td>
                    <td><%= row.city %></td>
                    <td><%= row.mail %></td>
                    <td><%= row.first_active_month %></td>
                    <td><%= row.loyalty %></td>
                </tr>
            <%});%>
        <% } else { %>
            <tr>
                <td colspan="6">No data found</td>
            </tr>
        <% } %>
    </tbody>
</table>

Quick Extra Tips #

• Double-check your fetchData function to ensure it's properly connecting to MySQL, running the query, and passing results to the callback. If this function hangs, your request will too.
• Add error handling to your route (e.g., catch database errors and send an error response) to avoid leaving requests in a hanging state.

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