数据库准备
首先需要创建一个数据库和数据表,并插入示例数据,以下以MySQL为例:
CREATE DATABASE my_database;
sql<br>USE my_database;<br>CREATE TABLE users (<br> id INT AUTO_INCREMENT PRIMARY KEY,<br> name VARCHAR(50),<br> email VARCHAR(100)<br>);
sql<br>INSERT INTO users (name, email) VALUES<br> ('张三', 'zhangsan@example.com'),<br> ('李四', 'lisi@example.com');
后端代码(PHP示例)
通过PHP连接数据库并提取数据:
步骤 | 代码说明 |
---|---|
连接数据库 | php<br>$host = 'localhost';<br>$user = 'root';<br>$password = '密码';<br>$db = 'my_database';<br>$conn = new mysqli($host, $user, $password, $db);<br>if ($conn->connect_error) {<br> die("连接失败: " . $conn->connect_error);<br>} |
查询数据 | php<br>$sql = "SELECT FROM users";<br>$result = $conn->query($sql); |
关闭连接 | $conn->close(); |
前端HTML展示
将数据库查询结果渲染为HTML表格:
HTML结构 | 说明 |
---|---|
基本表格 | html<br><table border="1"><tr><th>ID</th><th>姓名</th><th>邮箱</th></tr></table> |
动态填充数据 | php<br>if ($result->num_rows > 0) {<br> while($row = $result->fetch_assoc()) {<br;  echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['email']}</td></tr>";<br> }<br>} else {<br> echo "<tr><td colspan='3'>暂无数据</td></tr>";<br>} |
完整示例代码
以下是整合后的PHP+HTML代码:
<?php
$host = 'localhost';
$user = 'root';
$password = '密码';
$db = 'my_database';
$conn = new mysqli($host, $user, $password, $db);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT FROM users";
$result = $conn->query($sql);
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>数据库内容展示</title>
<style>
table { width: 50%; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
</style>
</head>
<body>
<h2>用户信息列表</h2>
<table>
<tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['email']}</td></tr>";
}
} else {
echo "<tr><td colspan='3'>暂无数据</td></tr>";
}
?>
</table>
</body>
</html>
安全注意事项
风险点 | 解决方案 |
---|---|
SQL注入攻击 | 使用预处理语句(Prepared Statements)$stmt = $conn->prepare("SELECT FROM users WHERE id=?"); $stmt->bind_param("i", $id); |
敏感信息泄露 | 隐藏数据库错误详情,例如将die($conn->error) 改为die("数据库错误") |
相关问题与解答
问题1:如何实现分页显示?
解答:
在SQL查询中添加LIMIT
和OFFSET
,
SELECT FROM users LIMIT 5 OFFSET 0; -显示第1页(每页5条)
后端需计算总页数,并在HTML中添加“上一页/下一页”按钮,通过GET参数传递当前页码。
问题2:如何实时更新数据库内容?
解答:
- 定时刷新:使用JavaScript的
setInterval
定期发送AJAX请求重新加载数据。 - WebSocket:建立长连接,当数据库内容变化时主动推送更新。
- 前端框架:使用Vue/React等框架的响应式特性,结合后端API实现自动