基于Express实现HTML按钮触发服务端MySQL查询功能求助

嘿，我来帮你搞定这个需求！要实现点击前端按钮触发服务端的MySQL查询，咱们一步步来：

1. 完善后端Express服务（server.js） #

首先得把Express服务搭完整，配置好静态资源访问，再写一个API接口来接收前端的请求，调用数据库查询逻辑。

var express = require('express');
var app = express();
const dbFunctions = require('./dbFunctions');

// 配置静态文件目录，让前端的html、css能被正常访问
app.use(express.static('public'));
// 解析JSON格式的请求体，方便接收前端传参
app.use(express.json());

// 写一个POST接口，专门处理前端的数据库查询请求
app.post('/trigger-db-query', async (req, res) => {
  try {
    // 调用dbFunctions里的查询函数
    const queryResult = await dbFunctions.runMySqlQuery();
    // 把查询结果返回给前端
    res.status(200).json({ success: true, data: queryResult });
  } catch (error) {
    console.error('数据库查询出错:', error);
    res.status(500).json({ success: false, message: '查询失败，请稍后重试' });
  }
});

// 启动服务，监听3000端口（你也可以换成其他端口）
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器已启动，访问地址：http://localhost:${PORT}`);
});

2. 编写数据库查询函数（dbFunctions.js） #

这里要实现MySQL的连接和具体查询逻辑，记得先安装mysql2包（支持异步操作更方便）。

const mysql = require('mysql2/promise');

// 替换成你自己的数据库配置信息
const dbConfig = {
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '要操作的数据库名'
};

// 定义具体的查询函数
async function runMySqlQuery() {
  // 创建数据库连接
  const connection = await mysql.createConnection(dbConfig);
  try {
    // 这里写你的SQL查询语句，比如查询某个表的所有数据
    const [rows] = await connection.execute('SELECT * FROM 你的表名');
    return rows;
  } finally {
    // 不管查询成功还是失败，都要关闭连接
    await connection.end();
  }
}

// 导出函数给server.js调用
module.exports = { runMySqlQuery };

3. 前端页面（index.html）添加交互逻辑 #

在HTML里加个按钮，然后用JavaScript写点击事件，发送请求到后端接口，再把结果展示出来。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>触发数据库查询</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="queryBtn">点击查询数据库</button>
  <div id="resultBox"></div>

  <script>
    const queryBtn = document.getElementById('queryBtn');
    const resultBox = document.getElementById('resultBox');

    queryBtn.addEventListener('click', async () => {
      try {
        // 发送POST请求到后端的接口
        const response = await fetch('/trigger-db-query', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        });

        const data = await response.json();
        if (data.success) {
          // 把查询结果格式化后展示在页面上
          resultBox.innerHTML = `<pre>${JSON.stringify(data.data, null, 2)}</pre>`;
        } else {
          resultBox.innerHTML = `<p style="color: red;">${data.message}</p>`;
        }
      } catch (error) {
        console.error('请求出错:', error);
        resultBox.innerHTML = '<p style="color: red;">请求失败，请检查服务器是否正常运行</p>';
      }
    });
  </script>
</body>
</html>

4. 安装依赖并启动服务 #

在page目录下执行以下命令：

# 初始化项目（如果还没初始化的话）
npm init -y
# 安装Express和mysql2依赖
npm install express mysql2
# 启动服务器
node server.js

之后打开浏览器访问http://localhost:3000，点击按钮就能触发数据库查询啦！

额外提醒 #

• 一定要把dbConfig里的数据库信息换成你自己的，不然连不上数据库哦
• 如果需要根据前端输入动态查询，可以在POST请求的body里传参数，后端通过req.body接收，然后用参数化查询（避免SQL注入）
• 生产环境下别把数据库密码硬编码在代码里，用环境变量管理更安全

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