html访问数据库

HTML与数据库交互的基本原理

HTML 是前端标记语言，无法直接操作数据库,需通过以下流程实现数据交互：

1. 前端采集数据

   • 使用 <form> 标签创建表单，通过 input/select/textarea 收集用户输入。
   • 示例表单结构：

     <form action="/submit" method="POST">
       <input name="username" placeholder="用户名"><br>
       <input name="password" type="password" placeholder="密码"><br>
       <button type="submit">提交</button>
     </form>

2. 后端接收并处理请求

   • 通过服务器端语言（如 PHP、Node.js、Python）接收表单数据。
   • 示例（PHP）：

     <?php
     $username = $_POST['username'];
     $password = $_POST['password'];
     // 后续连接数据库操作
     ?>

3. 数据库操作

   • 使用数据库驱动（如 MySQLi、PDO、MongoDB Driver）执行 SQL 语句。
   • 核心操作类型：
     | 操作类型 | 示例场景 | SQL 语句 |
     |———-|————————–|——————————|
     | 插入 | 用户注册存储信息 | INSERT INTO users (name) VALUES ('John') |
     | 查询 | 登录时验证用户名密码 | SELECT FROM users WHERE name='John' |
     | 更新 | 修改用户资料 | UPDATE users SET email='a@b.com' WHERE id=1 |
     | 删除 | 注销账户 | DELETE FROM users WHERE id=1 |

典型技术栈实现方案

PHP + MySQL 示例

步骤分解：

• 前端表单提交数据至 process.php
• 后端连接数据库并插入数据：

  <?php
  $conn = new mysqli('localhost', 'root', 'password', 'dbname');
  if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
  }
  $stmt = $conn->prepare("INSERT INTO users (name) VALUES (?)");
  $stmt->bind_param("s", $_POST['username']);
  $stmt->execute();
  $stmt->close();
  $conn->close();
  ?>

Node.js + MongoDB 示例

异步操作流程：

const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.urlencoded({ extended: true }));
mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true });
app.post('/submit', (req, res) => {
  const User = mongoose.model('User', { name: String });
  const user = new User({ name: req.body.username });
  user.save().then(() => res.send('保存成功'));
});
app.listen(3000);

安全实践与优化

相关问题与解答

问题1：为什么HTML不能直接操作数据库？

解答：
浏览器为保证安全性，禁止网页直接操作服务器资源，HTML 表单提交后，需由服务器端程序（如 PHP、Node.js）解析数据并执行数据库操作，遵循「同源策略」和「最小权限原则」。

问题2：如何防止SQL注入攻击？

解答：

1. 参数化查询：使用占位符代替直接拼接 SQL，

   cursor.execute("SELECT  FROM users WHERE id=%s", (user_id,))

2. ORM框架：如 Laravel 的 Eloquent、Django 的 Models,自动转义危险字符。
3. 输入过滤：对特殊字符（如 、）进行转义或拒绝