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

html连接本地数据库

admin
行业动态
2025-04-30
2

html连接本地数据库第1张

HTML无法直接连接数据库，需通过后端脚本（如PHP/Node.js）调用数据库驱动（PDO/mysqli）实现本地数据库交互，注意配置权限及

技术原理与实现方式

HTML 作为前端标记语言，无法直接操作数据库，需通过以下技术组合实现：

前端：HTML + CSS + JavaScript（负责界面展示与交互）
后端：Node.js/PHP/Python等（充当中间层，处理数据库操作）
数据库：MySQL/SQLite/PostgreSQL等（存储数据）

实现步骤（以 Node.js + MySQL 为例）

环境准备

组件	安装方式
Node.js	官网下载 https://nodejs.org
MySQL 数据库	官网下载 https://dev.mysql.com 或通过 `brew install mysql`（Mac）
npm 包管理器	随 Node.js 自动安装

创建本地数据库

-登录 MySQL
mysql -u root -p
-创建数据库
CREATE DATABASE my_local_db;
-创建表
USE my_local_db;
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(100)
);

后端代码（Node.js 示例）

// 安装依赖：npm install express mysql2 cors
const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
// 创建连接池
const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '你的密码',
    database: 'my_local_db'
});
const app = express();
app.use(cors()); // 允许跨域请求
app.use(express.json());
// 查询数据接口
app.get('/users', (req, res) => {
    db.query('SELECT  FROM users', (err, results) => {
        if (err) return res.status(500).send(err);
        res.json(results);
    });
});
// 添加数据接口
app.post('/users', (req, res) => {
    const { name, email } = req.body;
    db.query('INSERT INTO users (name, email) VALUES (?, ?)', [name, email], (err, results) => {
        if (err) return res.status(500).send(err);
        res.json({ id: results.insertId });
    });
});
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

前端代码（HTML + JS）

<!DOCTYPE html>
<html>
<head>本地数据库连接</title>
</head>
<body>
    <h1>用户列表</h1>
    <button id="load">加载数据</button>
    <ul id="userList"></ul>
    <script>
        document.getElementById('load').addEventListener('click', async () => {
            const response = await fetch('http://localhost:3000/users');
            const users = await response.json();
            const list = document.getElementById('userList');
            list.innerHTML = ''; // 清空列表
            users.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.name} (${user.email})`;
                list.appendChild(li);
            });
        });
    </script>
</body>
</html>

技术对比与选择建议

特性	Node.js + MySQL	PHP + SQLite	Python + PostgreSQL
适用场景	中型项目	小型项目	复杂业务处理
学习成本	中等	低	中等
性能	高并发支持	低并发	高并发支持
部署难度	需配置 Node环境	开箱即用（LAMP）	需虚拟环境