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

html5连接mysql

admin
行业动态
2025-05-11
4

HTML5作为前端技术无法直接连接MySQL，需通过服务器端脚本（如PHP/Node.js）建立连接，采用AJAX或Fetch API进行异步数据交互，遵循前后

HTML5与MySQL连接实现方案

前后端协作流程

HTML5作为前端技术无法直接操作MySQL数据库，需通过后端程序（如PHP、Node.js）作为中间层,典型流程如下：

步骤	前端（HTML5）	后端（如PHP/Node.js）
1	创建表单收集数据	接收POST/GET请求
2	发送AJAX请求	解析请求参数
3	执行SQL查询	返回查询结果
4	渲染JSON数据	将结果转换为API响应

常见后端技术实现示例

PHP实现连接（面向过程）

// db_config.php
$host = 'localhost';
$user = 'root';
$password = '123456';
$database = 'test_db';
$conn = mysqli_connect($host, $user, $password, $database);
if (!$conn) {
    die('连接失败: ' . mysqli_connect_error());
}

// api.php
include 'db_config.php';
$sql = "SELECT  FROM users WHERE id=?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, 'i', $_GET['id']); // 防止SQL注入
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
echo json_encode(mysqli_fetch_all($result, MYSQLI_ASSOC));

Node.js实现连接（异步操作）

// 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('MySQL connected');
});
module.exports = connection;

// server.js
const express = require('express');
const connection = require('./db');
const app = express();
app.get('/api/users', (req, res) => {
  const sql = 'SELECT  FROM users WHERE id=?';
  connection.query(sql, [req.query.id], (err, results) => {
    if (err) return res.status(500).send(err);
    res.json(results);
  });
});
app.listen(3000, () => console.log('Server running on port 3000'));

关键注意事项

安全性防护：
- 永远使用参数化查询（如占位符）
- 限制数据库用户权限（仅开放必要权限）
- 开启HTTPS传输敏感数据

跨域配置：

// PHP设置CORS头
header("Access-Control-Allow-Origin: ");
header("Content-Type: application/json; charset=UTF-8");

// Node.js设置CORS中间件
const cors = require('cors');
app.use(cors());

连接池管理：

// Node.js连接池示例
const pool = mysql.createPool({
  connectionLimit: 10, // 最大并发连接数
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'test_db'
});