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数据库。
    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_usernameyour_passwordyour_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)下一篇我将把解决方法发出来遇到相同问题的可以参考参考

我的个人博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/34599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服装连锁企业批发零售一体化解决方案

在现代商业环境中&#xff0c;服装连锁企业面临着市场竞争激烈、消费者需求多样化和供应链复杂化的挑战。为了有效应对这些挑战&#xff0c;建立一体化的批发零售解决方案已成为提升运营效率、优化客户体验的关键举措。这种解决方案不仅整合了进销存管理&#xff0c;还有效整合…

Kotlin设计模式:工厂方法详解

Kotlin设计模式&#xff1a;工厂方法详解 工厂方法模式&#xff08;Factory Method Pattern&#xff09;在Kotlin中是一种常见的设计模式&#xff0c;用于将对象创建的责任委派给单一的方法。本文将详细讲解这一模式的目的、实现方法以及使用场景&#xff0c;并通过具体的示例…

核心原因:如果互联网设计师是青春饭,为何别人的青春那么久?

大家好&#xff0c;我是大千UI工场&#xff0c;从事UI设计和前端开发快10年了&#xff0c;算是老司机&#xff0c;经常看到UI设计师在群里抱怨&#xff0c;说这行是青春饭&#xff0c;干几年就换行&#xff0c;真相是这样吗&#xff1f; 一、互联网设计师相较于传统设计师 互…

ventoy制作PE盘系统镜像安装盘,别再用什么软碟通UltraISO刻录进贼慢的U盘里做系统了。

还用U盘呢&#xff0c;10块钱傲腾读取900MB/sNVMe硬盘盒30多块钱&#xff0c;别再用什么软碟通UltraISO刻录进贼慢的U盘里做系统了。 官方下载地址&#xff1a;https://www.ventoy.net/cn/download.html 下载对应版本 运行Ventory2Disk.exe自动识别你的移动介质&#xff0c;然…

LeetCode 100344. 使二进制数组全部等于 1 的最少操作次数 I

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 100344. 使二进制数组全部等于 1 的最少操作次数 I&#xff0c;难度中等。 暴力 解题思路&#xff1a;因为是任意连续三个元素&#xff…

Kotlin设计模式:深入理解桥接模式

Kotlin设计模式&#xff1a;深入理解桥接模式 在软件开发中&#xff0c;随着系统需求的不断增长和变化&#xff0c;类的职责可能会变得越来越复杂&#xff0c;导致代码难以维护和扩展。桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过…

kubectl 用--patch动态修改k8s的资源

用diff格式修改 在 kubectl 命令中使用 --patch 参数是一种对 Kubernetes 资源进行部分更新的便捷方法。当你想要动态地修改资源&#xff08;例如自定义资源定义 CRD 实例&#xff09;的某些字段而无需获取和编辑整个资源定义时&#xff0c;这个方法尤其有用。 下面是使用 ku…

Elasticsearch 高频面试题

Elasticsearch 初级面试题及解答 1. 什么是 Elasticsearch&#xff1f;它的主要用途是什么&#xff1f; 解答&#xff1a; Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它能够快速存储、搜索和分析大量数据。Elasticsearch 的主要用…

SVN学习(001 svn安装)

尚硅谷SVN高级教程(svn操作详解) 总时长 4:53:00 共72P 此文章包含第1p-第p19的内容 介绍 为什么使用版本控制工具 版本控制工具的功能 版本控制简介 客户端服务器结构 c/s结构 服务端的结构&#xff1a; 服务程序 、版本库(存放我们上传的文件) 客户端的三个基本操作&#…

基于Java少儿编程管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

chatTTS 最强文字转语音模型本地部署!

今天本地部署了下传说中的语音合成大模型chatTTS&#xff0c;合成效果非常不错&#xff0c;比市面上其他工具合成的感情更丰富&#xff0c;语气更自然一些&#xff0c;一起来听听。 英文&#xff1a; React apps are made out of components. A component is a piece of the UI…

Games101 正交投影矩阵推导

目录 正交投影 投影矩阵推导 正交投影 正交投影不管是远处还是近处&#xff0c;都是直接挤在屏幕上就好&#xff0c;它没有近大远小的效果 首先&#xff0c;把相机放在原点上&#xff0c;往-z方向看&#xff0c;上方向是y&#xff1b; 这样摆放相机的好处是&#xff0c;把…

实际中服务器无法访问排查思路

当所有服务器突然无法被用户访问&#xff0c;终端用户也无法ping通服务器&#xff0c;这种情况非常棘手。 1.初步检查 首先&#xff0c;不要急于重启设备。你需要保持冷静&#xff0c;系统性地排查问题。尝试使用同一网段的PC访问服务器。如果可以访问&#xff0c;说明服务器和…

Prometheus问题合集

基础知识 1.什么是Prometheus&#xff1f;它的核心功能是什么&#xff1f; 指标收集&#xff1a;Prometheus通过拉取方式定期从目标系统&#xff08;如服务器、容器、数据库等&#xff09;收集指标数据。这些指标可以是系统的性能指标、应用程序的指标、或者是自定义的业务指…

环境搭建---nginx

nginx离线安装 下载地址&#xff1a;https://nginx.org/download/ 一、安装编译工具及库文件 [rootVM-20-14-centos ~]# yum -y install make zlib zlib-devel gcc-c libtool openssl openssl-devel二、安装 PCRE [rootVM-20-14-centos ~]# tar -zxvf pcre-8.35.tar.gz [r…

操作数据库的SQL语句

这里有一些测试操作MySQL数据库的SQL语句&#xff0c;可以用来创建表、插入数据、查询数据、更新数据和删除数据: 1. 创建表 创建一个名为test_table的表&#xff0c;包含id、name和age三个字段。 CREATE TABLE test_table (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR…

GPT-5:人工智能的新篇章,未来已来

目录 GPT-5&#xff1a;人工智能的新篇章&#xff0c;未来已来 引言 1.人工智能的快速发展和对现代社会的影响 2.OpenAI首席技术官米拉穆拉蒂关于GPT-5发布的消息 3.GPT-5对AI领域的潜在影响和期待 4.迎接GPT-5时代的准备 方向一&#xff1a;GPT-5技术突破预测 1.1 GPT-…

java中的循环

for-each循环 import java.util.ArrayList;public class RunoobTest {public static void main(String[] args) {ArrayList<String> sites new ArrayList<String>();sites.add("Google");sites.add("Runoob");sites.add("Taobao")…

小抄 20240621

1 多说自己的好&#xff0c;多用积极的词汇&#xff0c;可以增强自信。 同时&#xff0c;不要说别人的不好&#xff0c;这会给自己增加一些不必要的仇人。 优秀是自己的事&#xff0c;不用建立在贬低别人的基础上。 2 你如何理解生命&#xff0c;你的生活就会是什么样的状…

YashanDB为新质生产力赋能 灌注合肥区域转型源动力

当前&#xff0c;数据要素已成为我国数字经济的“核心引擎”与“关键生产要素”&#xff0c;为全面激发数据要素的价值&#xff0c;各地区正积极探索数据要素交易平台的可行模式&#xff0c;加快在数据要素领域的布局。近日&#xff0c;深圳计算科学研究院崖山数据库系列产品受…