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

html的数据怎么写入数据库中

解析HTML提取数据，通过后端语言连接数据库，执行INSERT

获取HTML中的数据

要从HTML中提取数据,通常需要通过以下方式：

  1. 前端表单提交：用户通过表单输入数据,提交到后端。
  2. JavaScript抓取：用JS获取页面中的DOM元素值。
  3. 爬虫解析：通过工具（如BeautifulSoup、Puppeteer）解析HTML并提取数据。

示例：通过JavaScript获取表单数据

<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">提交</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log(data); // {username: "张三", email: "zhangsan@example.com"}
  });
</script>

选择数据库类型

根据需求选择合适的数据库：
| 数据库类型 | 适用场景 | 特点 |
|————|———-|——|
| 关系型数据库（MySQL、PostgreSQL） | 结构化数据存储 | 支持SQL，事务性强 |
| 轻量级数据库（SQLite） | 小型项目/本地存储 | 文件型数据库，无需安装服务器 |
| 非关系型数据库（MongoDB） | 灵活数据结构 | 文档型存储，易扩展 |

建立数据库连接

以Python为例,不同数据库的连接方式：

连接MySQL

import pymysql
# 建立连接
conn = pymysql.connect(
    host="localhost",
    user="root",
    password="123456",
    database="test_db"
)
cursor = conn.cursor()

连接SQLite

import sqlite3
# 建立连接（自动创建数据库文件）
conn = sqlite3.connect('test.db')
cursor = conn.cursor()

连接MongoDB

from pymongo import MongoClient
# 建立连接
client = MongoClient("mongodb://localhost:27017/")
db = client["test_db"]
collection = db["users"]

数据处理与写入

关系型数据库（MySQL/SQLite）

步骤：

  1. 创建表结构（若不存在）
  2. 插入数据（需防止SQL注入）

示例：

# 创建表（SQLite）
cursor.execute('''
    CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT,
        email TEXT
    )
''')
# 插入数据（使用参数化查询防注入）
data = {"username": "张三", "email": "zhangsan@example.com"}
cursor.execute('''
    INSERT INTO users (username, email) VALUES (?, ?)
''', (data['username'], data['email']))
conn.commit()  # 提交事务

非关系型数据库（MongoDB）

步骤：

直接插入JSON格式数据

示例：

# 插入数据（MongoDB）
user_data = {
    "username": "李四",
    "email": "lisi@example.com",
    "created_at": datetime.datetime.now()
}
collection.insert_one(user_data)

完整流程示例（前端→后端→数据库）

前端（HTML + JavaScript）

<form id="userForm">
  <input type="text" name="username" placeholder="用户名" required />
  <input type="email" name="email" placeholder="邮箱" required />
  <button type="submit">提交</button>
</form>
<script>
  document.getElementById('userForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    // 发送到后端API
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
    const result = await response.json();
    alert(result.message);
  });
</script>

后端（Python Flask + SQLite）

from flask import Flask, request, jsonify
import sqlite3
app = Flask(__name__)
@app.route('/api/submit', methods=['POST'])
def submit_data():
    data = request.json  # 获取JSON数据
    conn = sqlite3.connect('test.db')
    cursor = conn.cursor()
    # 插入数据
    cursor.execute('''
        INSERT INTO users (username, email) VALUES (?, ?)
    ''', (data.get('username'), data.get('email')))
    conn.commit()
    conn.close()
    return jsonify({'message': '数据保存成功'})
if __name__ == '__main__':
    app.run(debug=True)

相关问题与解答

问题1：如何处理大量HTML数据写入？

解答：

  • 批量插入：将多条数据合并为一条SQL语句（如INSERT INTO table VALUES (...), (...), ...）。
  • 事务控制：开启事务后一次性提交（如conn.autocommit = False），减少IO次数。
  • 异步处理：使用消息队列（如RabbitMQ）将数据写入操作异步化。

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

解答：

  • 参数化查询：使用占位符（如或%s）代替直接拼接SQL。
  • ORM框架：通过Object-Relational Mapping工具（如Django ORM、SQLAlchemy）自动处理。
  • 数据校验：后端对输入数据进行类型、长度、格式的严格
HTML数据解析数据库连接
0

相关文章