如何连接Cloud SQL并在HTML网页展示数据表查询结果？

首先你的代码存在多处语法错误和异步逻辑问题，先修正这些问题，再实现将查询结果转为HTML展示的功能，以下是修复并优化后的完整代码：

const mysql = require('mysql');

// 数据库连接函数，添加错误处理
function connectToDatabase() {
  const connection = mysql.createConnection({
    host: '10.60.33.4',
    user: 'root',
    password: 'admin@1222',
    database: 'portal'
  });

  return new Promise((resolve, reject) => {
    connection.connect((err) => {
      if (err) {
        reject(err);
        return;
      }
      resolve(connection);
    });
  });
}

// 查询数据库函数，添加错误处理
function queryDatabase(connection) {
  return new Promise((resolve, reject) => {
    connection.query('SELECT * FROM job_description', (error, results) => {
      if (error) {
        reject(error);
        return;
      }
      resolve(results);
    });
  });
}

async function handleSql() {
  let connection;
  try {
    connection = await connectToDatabase();
    const results = await queryDatabase(connection);
    return results;
  } catch (err) {
    console.error('数据库操作出错:', err);
    throw err;
  } finally {
    if (connection) {
      connection.end(); // 确保连接关闭
    }
  }
}

exports.helloWorld = async (req, res) => {
  try {
    const jobData = await handleSql();
    // 将查询结果转为HTML表格
    let html = '<html><head><title>职位描述列表</title></head><body>';
    html += '<h1>职位描述</h1>';
    if (jobData.length === 0) {
      html += '<p>暂无数据</p>';
    } else {
      html += '<table border="1"><tr>';
      // 生成表头
      const columns = Object.keys(jobData[0]);
      columns.forEach(col => {
        html += `<th>${col}</th>`;
      });
      html += '</tr>';
      // 生成表格行
      jobData.forEach(row => {
        html += '<tr>';
        columns.forEach(col => {
          html += `<td>${row[col]}</td>`;
        });
        html += '</tr>';
      });
      html += '</table>';
    }
    html += '</body></html>';
    res.status(200).send(html);
  } catch (err) {
    res.status(500).send(`数据库查询失败: ${err.message}`);
  }
};

关键修改点说明 #

• 修正原代码语法错误：cost改为const，补全缺失的逗号、括号，修复Promise的错误处理逻辑
• 用async/await替代嵌套then，让异步逻辑更清晰易读
• 添加完整错误捕获：连接失败或查询出错时，会将错误信息返回至网页，方便排查
• 将查询结果转为HTML表格，在网页上结构化展示数据，替代原始变量或JSON输出
• 确保数据库连接在操作完成后关闭，避免资源泄漏

验证方式 #

部署修改后的代码后，访问helloWorld对应的接口地址，就能直接在网页上看到job_description表中的数据表格；如果出现错误，网页也会显示具体的错误信息。

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