如何实现点击HTML Button后后台执行PostgreSQL SQL语句？

前端无法直接连接PostgreSQL执行SQL，必须通过后端接口中转。以下是完整实现步骤：

1. 前端代码 #

HTML按钮 #

<button id="executeSqlBtn">执行SQL语句</button>
<div id="result"></div> <!-- 用于展示执行结果 -->

JavaScript 请求逻辑 #

监听按钮点击事件，通过fetch发送POST请求到后端接口：

document.getElementById('executeSqlBtn').addEventListener('click', async () => {
  const resultElement = document.getElementById('result');
  try {
    const response = await fetch('/run-sql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      // 若需传递SQL参数，可在此发送JSON数据
      body: JSON.stringify({ param1: 'demo_value' })
    });

    const data = await response.json();
    resultElement.textContent = data.success ? 
      `SQL执行成功：${data.message}` : 
      `执行失败：${data.error}`;
  } catch (error) {
    resultElement.textContent = `请求出错：${error.message}`;
  }
});

2. 后端实现（两种常用方案） #

方案一：Node.js + Express #

依赖安装

npm install express pg

后端代码

const express = require('express');
const { Pool } = require('pg');
const app = express();
app.use(express.json());

// PostgreSQL连接配置（替换为你的实际信息）
const pool = new Pool({
  user: 'your_db_user',
  host: 'localhost',
  database: 'your_db_name',
  password: 'your_db_password',
  port: 5432,
});

// 处理SQL执行的接口
app.post('/run-sql', async (req, res) => {
  try {
    // 示例SQL：使用参数化查询防止SQL注入
    const sql = 'INSERT INTO your_table (column1) VALUES ($1)';
    const values = [req.body.param1]; // 从请求体获取参数
    const result = await pool.query(sql, values);

    res.json({
      success: true,
      message: `影响行数：${result.rowCount}`
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      error: error.message
    });
  }
});

// 启动服务
app.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
});

方案二：Python + Flask #

依赖安装

pip install flask psycopg2-binary

后端代码

from flask import Flask, request, jsonify
import psycopg2

app = Flask(__name__)

# 获取数据库连接
def get_db_connection():
    conn = psycopg2.connect(
        user='your_db_user',
        host='localhost',
        database='your_db_name',
        password='your_db_password',
        port=5432
    )
    return conn

@app.route('/run-sql', methods=['POST'])
def run_sql():
    try:
        data = request.get_json()
        conn = get_db_connection()
        cur = conn.cursor()
        
        # 参数化查询，避免SQL注入
        cur.execute('INSERT INTO your_table (column1) VALUES (%s)', (data['param1'],))
        conn.commit()
        
        row_count = cur.rowcount
        cur.close()
        conn.close()
        
        return jsonify({
            'success': True,
            'message': f'影响行数：{row_count}'
        })
    except Exception as e:
        return jsonify({
            'success': False,
            'error': str(e)
        }), 500

if __name__ == '__main__':
    app.run(debug=True, port=3000)

关键注意事项 #

• 禁止前端直接操作数据库：前端代码暴露在浏览器中，直接连接会泄露凭证，且极易被SQL注入攻击。
• 强制使用参数化查询：永远不要通过字符串拼接构造SQL语句，否则会引发严重的安全漏洞。
• 优化数据库连接：使用连接池复用连接，避免频繁创建/销毁连接影响性能。
• 完善错误处理：后端捕获并处理数据库异常，返回友好的错误信息，同时避免泄露敏感的数据库细节。

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