Node.js（Express）中如何将MySQL数据展示到HTML页面

嘿，作为Node.js初学者能走到这一步已经很棒了！要把MySQL的数据展示到页面上，咱们需要用模板引擎来动态渲染HTML，而不是直接发送静态的HTML文件。我给你一步步拆解怎么做：

第一步：安装EJS模板引擎 #

EJS是最贴近HTML的模板引擎之一，非常适合初学者。在项目根目录运行以下命令安装：

npm install ejs --save

第二步：配置Express使用EJS #

在你的config.js里添加模板引擎配置，告诉Express用EJS来渲染页面：

// 配置模板引擎
app.set('view engine', 'ejs');
// 绑定你的views目录路径（你之前已经定义了path变量，直接复用即可）
app.set('views', path);

第三步：修改HTML模板为EJS格式 #

把你的index.html重命名为index.ejs，然后修正模板里的循环语法（EJS用JavaScript风格的逻辑语法）：

<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
    <!-- 保留你原来的头部样式、字体等配置 -->
</head>
<body>
    <!-- 遍历数据库返回的书籍数据 -->
    <% if (results.length > 0) { %>
        <% results.forEach(book => { %>
            <div class="post-header font-alt">
                <div class="post-meta">&nbsp;<p><%= book.Bookname %></p></div>
            </div>
            <div class='caption'>
                <p><span class="fa fa-bookmark"></span><%= book.price %></p>
            </div>
            <div class="fa fa-bar-chart"><p><%= book.quantity %></p></div>
        <% }) %>
    <% } else { %>
        <p>暂无书籍数据</p>
    <% } %>
</body>
</html>

小提示：<% %>用来写JavaScript逻辑（比如循环、判断），<%= %>用来把变量值输出到页面上。

第四步：修改路由，查询数据库并传递数据给模板 #

原来的路由是发送静态HTML文件，现在要改成渲染EJS模板，并且把数据库查询结果传进去。同时要把数据库查询逻辑放到路由处理函数内部，这样每次用户访问首页时都会实时查询数据：

router.get("/", function(req, res) {
    // 在路由内部执行MySQL查询
    connection.query("SELECT * FROM books_store", function (err, result, fields) {
        if (err) {
            console.error('查询出错：', err);
            return res.send('数据查询失败，请检查数据库连接');
        }
        // 渲染index.ejs，把查询结果以results变量名传给模板
        res.render('index', { results: result });
    });
});

记得删掉原来写在路由外面的connection.query代码，避免不必要的重复查询。

第五步：确认MySQL连接配置 #

确保你的config.js里已经正确创建并连接了MySQL（你可能已经写了这段，但还是确认下）：

// 补充MySQL连接配置
var connection = mysql.createConnection({
    host: 'localhost',       // 你的MySQL主机地址
    user: '你的MySQL用户名',   // 替换成你的用户名
    password: '你的MySQL密码', // 替换成你的密码
    database: '你的数据库名'   // 替换成你的数据库名称
});

// 连接MySQL
connection.connect(function(err) {
    if (err) {
        console.error('MySQL连接失败：', err.stack);
        return;
    }
    console.log('已成功连接MySQL，连接ID：', connection.threadId);
});

最后测试 #

重启你的Node.js服务，访问localhost:1000，就能看到数据库里的书籍数据动态展示在页面上啦！

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