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

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

步骤

1.安装Node.js和相关包

  • 确保你已经安装了Node.js。

  • 使用npm安装必要的包:mysqlexpress

    npm install express mysql
    

    2.设置Node.js服务器

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

    javascript 复制代码
    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 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Modify MySQL Table</title>
    </head>
    <body>
        <h1>Modify MySQL Table</h1>
        <form id="query-form">
            <textarea id="query" placeholder="Enter SQL query" rows="4" cols="50"></textarea><br>
            <button type="submit">Submit</button>
        </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_usernameyour_passwordyour_database替换为实际的MySQL凭据。

  • 启动Node.js服务器:

html 复制代码
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)下一篇我将把解决方法发出来遇到相同问题的可以参考参考

我的个人博客

相关推荐
-XWB-3 分钟前
【MySQL】数据目录迁移
数据库·mysql
老华带你飞9 分钟前
公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·课程设计
我明天再来学Web渗透20 分钟前
【hot100-java】【二叉树的层序遍历】
java·开发语言·数据库·sql·算法·排序算法
Data 31725 分钟前
Hive数仓操作(十一)
大数据·数据库·数据仓库·hive·hadoop
qbbmnnnnnn39 分钟前
【WebGis开发 - Cesium】如何确保Cesium场景加载完毕
前端·javascript·vue.js·gis·cesium·webgis·三维可视化开发
吱吱鼠叔1 小时前
MATLAB数据文件读写:2.矩阵数据读取
数据库·matlab·矩阵
掘根1 小时前
【MySQL】Ubuntu环境下MySQL的安装与卸载
数据库·mysql·centos
f8979070702 小时前
layui动态表格出现 横竖间隔线
前端·javascript·layui
知识分享小能手2 小时前
mysql学习教程,从入门到精通,SQL 修改表(ALTER TABLE 语句)(29)
大数据·开发语言·数据库·sql·学习·mysql·数据分析