当前位置：首页 > 行业动态 > 正文

html中调用数据库数据库连接

admin
行业动态
2025-05-07
3634

HTML无法直接调用数据库，需通过后端语言（如PHP、ASP.NET）或Node.js建立数据库连接，使用对应驱动库执行SQL语句，注意配置连接字符串及安全防护（

数据库连接基础概念

在HTML页面中无法直接操作数据库,需通过后端语言（如PHP/Python/Node.js）建立连接，典型流程为：前端发起请求 → 后端接收请求 → 后端连接数据库 → 执行SQL语句 → 返回数据给前端。

html中调用数据库数据库连接第1张

环境准备

组件	说明
数据库服务器	MySQL/PostgreSQL/SQL Server等
后端语言	PHP/Python/Node.js等
数据库驱动	对应语言的数据库扩展（如PHP的PDO、Python的pymysql、Node.js的mysql模块）
Web服务器	Apache/Nginx/Node.js等

后端数据库连接示例

PHP连接MySQL（PDO方式）

// config.php
$host = 'localhost';
$dbname = 'test_db';
$username = 'root';
$password = '123456';
$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8";
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
];
try {
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (Exception $e) {
    die('数据库连接失败: ' . $e->getMessage());
}

Node.js连接MySQL

// db.js
const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'test_db'
});
connection.connect((err) => {
  if (err) throw err;
  console.log('数据库连接成功');
});
module.exports = connection;

Python连接MySQL（Flask框架）

# app.py
from flask import Flask, jsonify
import pymysql
app = Flask(__name__)
def get_db_connection():
    return pymysql.connect(
        host='localhost',
        user='root',
        password='123456',
        db='test_db',
        charset='utf8mb4',
        cursorclass=pymysql.cursors.DictCursor
    )
@app.route('/api/users')
def get_users():
    conn = get_db_connection()
    cursor = conn.cursor()
    cursor.execute('SELECT  FROM users')
    result = cursor.fetchall()
    conn.close()
    return jsonify(result)

前端调用后端接口

HTML + JavaScript示例（Fetch API）

<!DOCTYPE html>
<html>
<head>数据库数据展示</title>
</head>
<body>
    <button id="loadData">加载数据</button>
    <div id="result"></div>
    <script>
        document.getElementById('loadData').addEventListener('click', () => {
            fetch('/api/users') // 对应后端接口地址
                .then(response => response.json())
                .then(data => {
                    let html = '<ul>';
                    data.forEach(item => {
                        html += `<li>${item.id} ${item.name}</li>`;
                    });
                    html += '</ul>';
                    document.getElementById('result').innerHTML = html;
                })
                .catch(error => console.error('错误:', error));
        });
    </script>
</body>
</html>

安全注意事项

风险点	解决方案
SQL注入攻击	使用参数化查询（如PDO的prepare/execute）
密码明文存储	数据库密码应存储在环境变量中，避免硬编码在代码里
跨域请求限制	后端设置CORS头（如Access-Control-Allow-Origin）
敏感信息泄露	生产环境禁用详细错误提示，日志记录敏感操作