html创建数据库

HTML与数据库的关系

HTML 是标记语言，用于构建网页结构，本身不具备直接操作数据库的能力，需结合 JavaScript（前端）和 后端语言（如 PHP、Node.js）或 Web API 实现与数据库的交互。

本地存储方案（模拟轻量级数据库）

以下为浏览器提供的本地存储方式，可暂存数据,但非真正意义上的数据库。

示例：使用 localStorage 存储用户信息

<button onclick="saveData()">保存</button>
<script>
function saveData() {
    const user = { name: '张三', age: 25 };
    localStorage.setItem('user', JSON.stringify(user)); // 转换为字符串
}
</script>

连接后端数据库（以 MySQL 为例）

需通过后端语言（如 PHP、Node.js）或 API 接口操作数据库，HTML 负责发送请求并展示结果。

后端示例（Node.js + Express）

// server.js（后端代码）
const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;
// 创建数据库连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'test_db'
});
// 处理前端请求
app.get('/api/users', (req, res) => {
    db.query('SELECT  FROM users', (err, results) => {
        if (err) throw err;
        res.json(results); // 返回 JSON 数据
    });
});
app.listen(port, () => console.log(`Server running at http://localhost:${port}`));

前端示例（Fetch API）

<table id="userTable"></table>
<script>
fetch('http://localhost:3000/api/users')
    .then(response => response.json())
    .then(data => {
        const table = document.getElementById('userTable');
        data.forEach(user => {
            const row = table.insertRow();
            row.insertCell().textContent = user.id;
            row.insertCell().textContent = user.name;
        });
    });
</script>

低代码方案（使用前端框架）

通过框架内置工具操作数据库

• Vue.js + Vuex：结合 axios 发送请求,状态管理数据。
• React + Redux：类似 Vue，通过 redux-thunk 处理异步请求。

示例（Vue.js 调用 API）

<div v-for="user in users" :key="user.id">{{ user.name }}</div>
<script>
new Vue({
    data: { users: [] },
    created() {
        axios.get('/api/users')
            .then(response => this.users = response.data);
    }
});
</script>

相关问题与解答

问题 1：localStorage 和 sessionStorage 的区别是什么？

解答：
| 特性 | localStorage | sessionStorage |
|———————|————————-|————————-|
| 数据持久性 | 永久保存（除非手动清除） | 页面关闭后自动清除 |
| 用途 | 长期存储配置、用户偏好 | 临时存储会话数据 |
| 浏览器支持 | 全部现代浏览器 | 全部现代浏览器 |

问题 2：如何通过 HTML 表单直接提交数据到数据库？

解答：

1. 表单需设置 action 指向后端接口，method 指定提交方式（如 POST）。
2. 后端接收表单数据并写入数据库。
   示例：

   <form action="/api/addUser" method="POST">
    <input name="username" placeholder="用户名" />
    <button type="submit">提交</button>
   </form>

   后端需处理 /api/addUser 路由，提取 username 并插入