【HTML+CSS】使用HTML与后端技术连接数据库

一、概述

1.1 HTML前端

1.2 后端技术

1.3 数据库

二、HTML表单示例

三、PHP后端示例

3.1 连接数据库

3.2 接收数据并插入数据库

四、安全性

4.1 防止SQL注入

4.2 数据验证与清洗

五、优化

5.1 索引优化

5.2 查询优化

六、现代Web开发中的最佳实践

6.1 使用ORM（对象关系映射）

6.2 前后端分离

6.3 异步通信（AJAX/Fetch API）

七、结论

在Web开发中，经常需要从前端（HTML/CSS/JavaScript）向后端发送请求，并由后端处理这些请求，包括与数据库的交互。虽然HTML本身无法直接连接数据库，但可以通过表单提交、AJAX请求等方式与后端服务器进行通信，再由后端脚本执行数据库操作。本文将简要介绍这一过程，并以PHP和MySQL为例进行说明。

一、概述

1.1 HTML前端

HTML负责构建网页的骨架，提供用户交互的表单等元素。用户通过表单输入数据，并通过表单的提交（submit）事件将数据发送到后端。

1.2 后端技术

后端技术（如PHP、Node.js等）负责接收前端发送的请求，执行相应的业务逻辑（如数据库查询、数据验证等），并将结果返回给前端。

1.3 数据库

数据库（如MySQL、MongoDB等）用于存储和管理数据。后端脚本通过数据库查询语言（如SQL）与数据库进行交互，获取或更新数据。

二、HTML表单示例

首先，我们创建一个简单的HTML表单，用于收集用户信息。

<!DOCTYPE html>  
<html>  
<head>  <title>用户注册</title>  
</head>  
<body>  <form action="register.php" method="post">  用户名: <input type="text" name="username" required><br>  密码: <input type="password" name="password" required><br>  <input type="submit" value="注册">  </form>  
</body>  
</html>

在这个例子中，表单的action属性指定了处理表单数据的PHP脚本（register.php），而method属性指定了数据提交的方式（POST）。

三、PHP后端示例

接下来，我们编写register.php脚本，用于接收表单数据，并与MySQL数据库进行交互。

3.1 连接数据库

首先，我们需要连接到MySQL数据库。

<?php  
$servername = "localhost";  
$username = "your_username";  
$password = "your_password";  
$dbname = "your_dbname";  // 创建连接  
$conn = new mysqli($servername, $username, $password, $dbname);  // 检查连接  
if ($conn->connect_error) {  die("连接失败: " . $conn->connect_error);  
}  
?>

3.2 接收数据并插入数据库

然后，我们接收表单提交的数据，并将其插入到数据库中。

<?php  
// 假设前面的数据库连接代码已经存在  // 接收数据  
$username = $_POST['username'];  
$password = $_POST['password']; // 注意：实际应用中需要对密码进行加密处理  // 插入数据  
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";  if ($conn->query($sql) === TRUE) {  echo "新记录插入成功";  
} else {  echo "Error: " . $sql . "<br>" . $conn->error;  
}  $conn->close();  
?>

四、安全性

4.1 防止SQL注入

在上面的PHP示例中，直接将用户输入插入到SQL查询中是非常危险的，因为这可能导致SQL注入攻击。为了防止这种情况，应该使用预处理语句（prepared statements）和参数化查询。

<?php  
// ... 数据库连接代码 ...  // 准备和绑定  
$stmt = $conn->prepare("INSERT INTO users (username, password) VALUES (?, ?)");  
$stmt->bind_param("ss", $username, $hashedPassword);  // 设置参数并执行  
$username = $_POST['username'];  
$password = $_POST['password'];  
$hashedPassword = password_hash($password, PASSWORD_DEFAULT); // 加密密码  $stmt->execute();  if ($stmt->affected_rows > 0) {  echo "新记录插入成功";  
} else {  echo "插入失败";  
}  $stmt->close();  
$conn->close();  
?>