HTML、JavaScript连接MySQL数据库以及对数据库的表进行修改

要使用HTML和JavaScript连接到MySQL数据库并进行表的修改，通常需要使用一个后端服务器来处理数据库的连接和操作，因为HTML和JavaScript在浏览器中运行，不适合直接连接数据库。常用的后端服务器语言包括Node.js、PHP、Python等。这里我们将使用Node.js作为后端服务器来实现这一功能。

步骤

1.安装Node.js和相关包：

确保你已经安装了Node.js。
使用npm安装必要的包：mysql和express。
```
npm install express mysql
```
2.设置Node.js服务器：

创建一个server.js文件，用于设置Express服务器并连接到MySQL数据库。


const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
 
app.use(bodyParser.json());
 
// 配置MySQL连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'your_database'
});
 
// 连接到MySQL
db.connect((err) => {
    if (err) {
        throw err;
    }
    console.log('MySQL connected...');
});
 
// 创建一个简单的API来处理数据库操作
app.post('/modify-table', (req, res) => {
    let sql = req.body.query;
    db.query(sql, (err, result) => {
        if (err) {
            res.status(500).send(err);
        }
        res.send(result);
    });
});
 
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server started on port ${PORT}`);
});

3.设置HTML和JavaScript前端：

创建一个简单的HTML文件，并使用JavaScript来发送请求到Node.js服务器。


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modify MySQL Tabletitle>
head>
<body>
    <h1>Modify MySQL Tableh1>
    <form id="query-form">
        <textarea id="query" placeholder="Enter SQL query" rows="4" cols="50">textarea><br>
        <button type="submit">Submitbutton>
    form>
    <div id="result">div>
 
    <script>
        document.getElementById('query-form').addEventListener('submit', function (e) {
            e.preventDefault();
            const query = document.getElementById('query').value;
            fetch('/modify-table', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ query })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('result').textContent = 'Error: ' + error;
            });
        });
    script>
body>
html>

运行步骤

确保MySQL服务器正在运行，并且你有一个可用的数据库。
将your_username、your_password、your_database替换为实际的MySQL凭据。
启动Node.js服务器：

node server.js

打开浏览器并访问http://localhost:3000。
在文本框中输入SQL查询并提交，例如CREATE TABLE test (id INT, name VARCHAR(50))。

这样，你就可以使用HTML和JavaScript通过Node.js服务器连接到MySQL数据库并进行表的修改。请注意，直接在前端输入和执行SQL查询存在安全风险，建议在实际应用中进行适当的安全验证和权限控制。但是这样的步骤会遇到一个问题：已拦截跨源请求：同源策略禁止读取位于 file:///modify-table 的远程资源。（原因：CORS 请求不是 http）下一篇我将把解决方法发出来遇到相同问题的可以参考参考

我的个人博客

相关阅读:
平板用的触控笔什么牌子好？性价比高的触控笔推荐
我劝！这位年轻人不讲MVCC，耗子尾汁！
ZooKeeper核心知识总结！
硬盘读写性能iozone测试方法及下载
DSPE-PEG-TAT，磷脂-聚乙二醇-靶向穿膜肽，脂质体修饰细胞穿膜肽TAT
【C++】类型转换
【Vite 实践】Vite 库模式能满足你吗？或许你需要统一构建
iTOP-3568开发板Android11 proc文件系统查询
docker安装和常用命令
【微信小程序】小程序应用和页面生命周期

原文地址：https://blog.csdn.net/qq_63170044/article/details/139939631

HTML、JavaScript连接MySQL数据库以及对数据库的表进行修改

步骤

1.安装Node.js和相关包：

2.设置Node.js服务器：

3.设置HTML和JavaScript前端：

运行步骤