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

html5显示mysql数据库

admin
行业动态
2025-05-12
10

通过后端语言（如PHP/Node.js）连接MySQL数据库，将数据转换为JSON格式，利用HTML5结合AJAX/Fetch API动态加载并渲染到网页表格中，需注意SQL注入

环境准备与技术选型

技术组件	用途说明
HTML5/CSS3	前端页面结构与样式设计
JavaScript	实现数据动态渲染和交互逻辑
PHP/Node.js	后端服务器语言（连接数据库与前端通信）
MySQL	存储和管理数据
JSON	前后端数据传输格式

核心实现步骤

数据库准备

CREATE DATABASE user_db;
USE user_db;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(100),
    age INT
);
INSERT INTO users (name, email, age) VALUES 
('张三', 'zhangsan@example.com', 25),
('李四', 'lisi@example.com', 30);

后端接口开发（以PHP为例）

<?php
header('Content-Type: application/json');
$servername = "localhost";
$username = "root";
$password = "your_password";
$dbname = "user_db";
// 创建连接并处理错误
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die(json_encode(['error' => '数据库连接失败']));
}
// 执行SQL查询
$sql = "SELECT id, name, email, age FROM users";
$result = $conn->query($sql);
$data = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
echo json_encode($data);
$conn->close();
?>

前端数据渲染

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">数据库展示</title>
    <style>
        table { width: 80%; margin: 20px auto; border-collapse: collapse; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    </style>
</head>
<body>
    <h2>用户信息列表</h2>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        fetch('api.php') // 后端接口地址
        .then(response => response.json())
        .then(data => {
            const tableBody = document.querySelector('#userTable tbody');
            data.forEach(user => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.email}</td>
                    <td>${user.age}</td>
                `;
                tableBody.appendChild(row);
            });
        })
        .catch(error => console.error('数据加载失败:', error));
    </script>
</body>
</html>

功能扩展建议

扩展方向	实现方式
实时数据更新	使用WebSocket或定时轮询(`setInterval`)重新请求数据
搜索过滤功能	添加输入框，通过JavaScript筛选渲染后的数据
分页显示	后端增加`LIMIT`和`OFFSET`参数，前端添加分页控件
数据可视化	引入ECharts/Chart.js，将表格数据转换为图表展示