ToB企服应用市场:ToB评测及商务社交产业平台

标题: HTML、JavaScript连接MySQL数据库以及对数据库的表举行修改 [打印本页]

作者: 民工心事 时间: 2024-7-24 09:16
标题: HTML、JavaScript连接MySQL数据库以及对数据库的表举行修改
要利用HTML和JavaScript连接到MySQL数据库并举行表的修改，通常需要利用一个后端服务器来处理数据库的连接和操作，因为HTML和JavaScript在欣赏器中运行，不适合直接连接数据库。常用的后端服务器语言包罗Node.js、PHP、Python等。这里我们将利用Node.js作为后端服务器来实现这一功能。
步调

1.安装Node.js和干系包：

确保你已经安装了Node.js。
利用npm安装必要的包：mysql和express。
1. npm install express mysql
复制代码
2.设置Node.js服务器：
创建一个server.js文件，用于设置Express服务器并连接到MySQL数据库。
1. const express = require('express');
2. const mysql = require('mysql');
3. const bodyParser = require('body-parser');
4. const app = express();
6. app.use(bodyParser.json());
8. // 配置MySQL连接
9. const db = mysql.createConnection({
10. host: 'localhost',
11. user: 'your_username',
12. password: 'your_password',
13. database: 'your_database'
14. });
16. // 连接到MySQL
17. db.connect((err) => {
18. if (err) {
19. throw err;
20. }
21. console.log('MySQL connected...');
22. });
24. // 创建一个简单的API来处理数据库操作
25. app.post('/modify-table', (req, res) => {
26. let sql = req.body.query;
27. db.query(sql, (err, result) => {
28. if (err) {
29. res.status(500).send(err);
30. }
31. res.send(result);
32. });
33. });
35. // 启动服务器
36. const PORT = process.env.PORT || 3000;
37. app.listen(PORT, () => {
38. console.log(`Server started on port ${PORT}`);
39. });
复制代码
3.设置HTML和JavaScript前端：
创建一个简单的HTML文件，并利用JavaScript来发送请求到Node.js服务器。
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Modify MySQL Table</title>
7. </head>
8. <body>
9. <h1>Modify MySQL Table</h1>
10. <form id="query-form">
11. <textarea id="query" placeholder="Enter SQL query" rows="4" cols="50"></textarea><br>
12. <button type="submit">Submit</button>
13. </form>
14. <div id="result"></div>
16. <script>
17. document.getElementById('query-form').addEventListener('submit', function (e) {
18. e.preventDefault();
19. const query = document.getElementById('query').value;
20. fetch('/modify-table', {
21. method: 'POST',
22. headers: {
23. 'Content-Type': 'application/json'
24. },
25. body: JSON.stringify({ query })
26. })
27. .then(response => response.json())
28. .then(data => {
29. document.getElementById('result').textContent = JSON.stringify(data, null, 2);
30. })
31. .catch(error => {
32. document.getElementById('result').textContent = 'Error: ' + error;
33. });
34. });
35. </script>
36. </body>
37. </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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4