NodeJS连接MySQL后，如何将查询结果显示在HTML的H1标签中？

问题描述 #

我是NodeJS和MySQL新手，已完成以下操作：

• 建立NodeJS与MySQL的连接，成功在控制台打印目标查询数据
• 在3000端口启动本地服务器，能为HTML添加H1元素

但无法将数据库中的查询结果嵌入H1标签，尝试直接引用result时出现“result未定义”的错误。

原JS代码 #

var mysql = require('mysql');

var con = mysql.createConnection({
host: "*****",
user: "root",
password: "*****",
database: "mydb"
});

var http = require('http');  
var url = require('url');  
var fs = require('fs');  

var server = http.createServer(function(request, response) {  
  con.connect(function(err) {
    if (err) console.log(err);
    con.query("SELECT * FROM customers", function (err, result, fields) {
      if (err) console.log(err);
      console.log(result[1].name);
    })
  });
  
    var path = url.parse(request.url).pathname;  
    switch (path) {  
      case '/':  
      response.writeHead(200, {  
        'Content-Type': 'text/plain'  
      });  
      response.write("This is a Test Message.");  
      response.end();  
      break;  
      case '/index.html':  
      fs.readFile(__dirname + path, function(error, data) {  
        if (error) {  
          response.writeHead(404);  
          response.write(error);  
          response.end();  
        } else {  
          response.writeHead(200, {  
            'Content-Type': 'text/html'  
          });
          response.write(data);
          response.write("<html>")
          response.write("<h1>Added this with NodeJS!</h1>")
          response.write("</html>")
          response.end();  
        }  
      });  
      break;  
      default:  
      response.writeHead(404);  
      response.write("opps this doesn't exist - 404");  
      response.end();  
      break;  
    }  
});  

  server.listen(3000);

错误尝试代码 #

response.write("<html>")
response.write("<h1>")
response.write("His name is:" + result[1].name)
response.write("</h1>")
response.write("</html>")

问题原因与解决方案 #

核心问题：变量作用域 #

result是con.query回调函数的局部变量，只能在该回调内部访问。原代码中数据库查询和HTTP响应处理是分开执行的，响应处理时result还未定义，因此报错。

修改后的代码 #

var mysql = require('mysql');
var http = require('http');  
var url = require('url');  
var fs = require('fs');  

// 创建数据库连接
var con = mysql.createConnection({
  host: "*****",
  user: "root",
  password: "*****",
  database: "mydb"
});

// 提前连接数据库，避免每次请求重复连接
con.connect(function(err) {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已连接到数据库');
});

var server = http.createServer(function(request, response) {  
  var path = url.parse(request.url).pathname;  

  switch (path) {  
    case '/':  
      response.writeHead(200, { 'Content-Type': 'text/plain' });  
      response.write("This is a Test Message.");  
      response.end();  
      break;  

    case '/index.html':  
      // 在请求index.html时执行数据库查询
      con.query("SELECT * FROM customers", function (err, result, fields) {
        if (err) {
          console.error('查询错误:', err);
          response.writeHead(500);
          response.write('数据库查询失败');
          response.end();
          return;
        }

        // 读取HTML文件并嵌入数据库数据
        fs.readFile(__dirname + path, function(error, data) {  
          if (error) {  
            response.writeHead(404);  
            response.write('文件不存在: ' + error);  
            response.end();  
          } else {  
            response.writeHead(200, { 'Content-Type': 'text/html' });
            // 先写入原HTML内容，再添加带数据的H1标签
            response.write(data);
            response.write(`<h1>His name is: ${result[1].name}</h1>`);
            response.end();  
          }  
        });
      });
      break;  

    default:  
      response.writeHead(404);  
      response.write("opps this doesn't exist - 404");  
      response.end();  
      break;  
  }  
});  

server.listen(3000, () => {
  console.log('服务器在3000端口启动');
});

关键修改说明 #

• 将数据库查询逻辑移到/index.html的请求处理分支内，确保result在响应处理时已被定义
• 提前建立数据库连接，避免每次请求重复调用con.connect
• 使用ES6模板字符串（${}）简化HTML与数据的拼接
• 增加了错误处理逻辑，比如数据库查询失败、文件不存在时的友好响应

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