民工心事 发表于 2024-7-24 09:16:01

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服务器。 <!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_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)下一篇我将把办理方法发出来遇到相同问题的可以参考参考
我的个人博客

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: HTML、JavaScript连接MySQL数据库以及对数据库的表举行修改