当前位置：首页 > news >正文

React与Docker中的MySQL进行交互

news 来源：原创 2025/6/27 10:13:25

完整结构

在这里插入图片描述

1. 项目结构设置

首先创建项目：

npm create vite@latest . --template react
cd .
npm install

2. 设置Docker中的MySQL

创建docker-compose.yml文件（与之前相同）：

version: '3.8'
services:mysql:image: mysql:8.0container_name: mysql_containerenvironment:MYSQL_ROOT_PASSWORD: yourpasswordMYSQL_DATABASE: testdbMYSQL_USER: userMYSQL_PASSWORD: passwordports:- "3306:3306"volumes:- mysql_data:/var/lib/mysqlvolumes:mysql_data:

启动MySQL容器：

docker-compose up -d

在这里插入图片描述

3. 创建后端API

在项目根目录下创建backend文件夹并初始化：

mkdir backend
cd backend
npm init -y
npm install express mysql2 cors

创建后端服务器文件：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');const app = express();
app.use(cors());
app.use(express.json());// 创建数据库连接
const connection = mysql.createConnection({host: 'localhost',user: 'user',password: 'password',database: 'testdb'
});// 测试数据库连接
connection.connect((err) => {if (err) {console.error('数据库连接失败: ' + err.stack);return;}console.log('数据库连接成功');
});// 创建测试表
connection.query(`CREATE TABLE IF NOT EXISTS users (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL,email VARCHAR(255) NOT NULL)
`, (err) => {if (err) throw err;console.log('用户表创建成功');
});// API端点
app.get('/api/users', (req, res) => {connection.query('SELECT * FROM users', (err, results) => {if (err) {res.status(500).json({ error: err.message });return;}res.json(results);});
});app.post('/api/users', (req, res) => {const { name, email } = req.body;connection.query('INSERT INTO users (name, email) VALUES (?, ?)', [name, email], (err, results) => {if (err) {res.status(500).json({ error: err.message });return;}res.json({ id: results.insertId, name, email });});
});const PORT = 5000;
app.listen(PORT, () => {console.log(`服务器运行在端口 ${PORT}`);
});

4. 修改React前端代码

安装必要的依赖：

npm install axios

修改src/App.jsx文件：

import { useState, useEffect } from 'react'
import axios from 'axios'
import './App.css'function App() {const [users, setUsers] = useState([])const [newUser, setNewUser] = useState({ name: '', email: '' })useEffect(() => {fetchUsers()}, [])const fetchUsers = async () => {try {const response = await axios.get('http://localhost:5000/api/users')setUsers(response.data)} catch (error) {console.error('获取用户失败:', error)}}const handleSubmit = async (e) => {e.preventDefault()try {await axios.post('http://localhost:5000/api/users', newUser)setNewUser({ name: '', email: '' })fetchUsers()} catch (error) {console.error('添加用户失败:', error)}}return (<div className="container"><h1>用户管理系统</h1><form onSubmit={handleSubmit} className="form"><inputtype="text"placeholder="姓名"value={newUser.name}onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}/><inputtype="email"placeholder="邮箱"value={newUser.email}onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}/><button type="submit">添加用户</button></form><h2>用户列表</h2><ul className="user-list">{users.map(user => (<li key={user.id}>{user.name} - {user.email}</li>))}</ul></div>)
}export default App

更新src/App.css添加一些基本样式：

.container {max-width: 800px;margin: 0 auto;padding: 20px;
}.form {display: flex;gap: 10px;margin-bottom: 20px;
}input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;
}button {padding: 8px 16px;background-color: #646cff;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #747bff;
}.user-list {list-style: none;padding: 0;
}.user-list li {padding: 10px;border-bottom: 1px solid #eee;
}

5. 运行应用

启动后端服务器：

cd backend
node server.js

在这里插入图片描述

在新的终端中启动Vite开发服务器：

npm run dev

在这里插入图片描述

React与Docker中的MySQL进行交互

完整结构 1. 项目结构设置首先创建项目： npm create vitelatest . --template react cd . npm install2. 设置Docker中的MySQL 创建docker-compose.yml文件（与之前相同）： version: 3.8 services:mysql:image: mysql:8.0conta…...

编程日记 2025/6/27 10:13:25

量子隧穿：PROFINET到Ethernet ip的无损耗协议转换方案转

在本季度的生产工作中，我们成功实现了仓储物流自动化分拣系统中的关键技术突破。我们面临的主要挑战是将采用EtherNet/IP协议的输送带控制器与PROFINET协议的上位系统进行有效通信。通过引入ethernet IP转PROFINET网关倍讯科技BX-606-EIP，我们实现了输送…...

编程日记 2025/6/22 19:53:06

W1R3S: 1.0.1靶场

W1R3S: 1.0.1 来自 <W1R3S: 1.0.1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.249 3，对靶机进行端口…...

编程日记 2025/6/21 18:31:25

pycharm中qthread中的run函数debug不上的问题

先说结论在风和日丽的一天，我尝试把我mac上的代码拿到windows修改。突然遇到了个bug，然后想着对几个线程内部的run函数逐一debug。结果一开线程，整个线程仍然继续报错，run函数的第一行都不停断点。甚至，我加了个pr…...

编程日记 2025/6/26 10:41:23

深度解析IP静态的工作原理，IP静态的应用场景又哪些？

一、什么是IP静态？ 当我们谈到“IP静态”时，大家可能首先想到的是与“动态IP”相对的概念。确实如此，静态IP是一种固定分配的IP地址，也就是说，在特定时间内，分配给你的IP地址不会有所更改——无论你完成多…...

编程日记 2025/6/23 6:33:22

Electron 应用的升级机制详解

在产品分发给用户之后，进入迭代周期是不可避免的过程。开发者需要为产品增加新功能、修复Bug，并推出新版本。如何将这些更新有效地分发给用户，是产品经理和开发人员共同关注的问题。本节将从开发者的角度出发，详细介绍Electron应用的两种常见升级方式：全量升级与增量升级。…...

编程日记 2025/6/24 18:21:30

Java 开源报表系统全解析：免费工具、企业案例与集成实践

在企业级数据可视化与报表开发中，选择一款功能强大且完全免费的开源报表系统至关重要。本文深度剖析 5 款经过权威验证的免费开源 Java 报表工具，涵盖图表展示、定制化及第三方集成能力，附企业级案例与技术实践，助您高效选型。一…...

编程日记 2025/6/21 15:37:59

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 注意“回车换行“的跨平台使用.

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/6/25 4:00:35

分类预测 | Matlab实现ABC-Transformer人工蜂群算法优化编码器多特征分类预测/故障诊断Matlab实现

分类预测 | Matlab实现ABC-Transformer人工蜂群算法优化编码器多特征分类预测/故障诊断Matlab实现目录分类预测 | Matlab实现ABC-Transformer人工蜂群算法优化编码器多特征分类预测/故障诊断Matlab实现分类效果基本描述程序设计参考资料分类效果基本描述 1.Matlab实现ABC-…...

编程日记 2025/6/26 4:24:50

Java中的设计模式

一、工厂方法模式 1.1 简单工厂模式 1.1.1 案例引入比方说我们要设计一个披萨店的点单程序，披萨店有水果披萨，有芝士披萨，两种类型，选择哪个披萨，只需要创建那个类型的披萨对象即可。 package org.example;import…...

编程日记 2025/6/23 21:41:20

NSSCTF [GFCTF 2021]where_is_shell

889.[GFCTF 2021]where_is_shell(system($0)64位) [GFCTF 2021]where_is_shell (1) 1.准备 motalymotaly-VMware-Virtual-Platform:~$ file shell shell: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.s…...

编程日记 2025/6/27 9:09:12

有关知名分析品牌默克Supelco®的前世今生

因在仪器设备和实验室产品方面的卓越贡献，Supelco品牌的创立者Nicholas Pelick与Walter Supina获颁2019年匹兹堡文化遗产奖（2019 Heritage Award），入选匹兹堡名人堂（Pittcon Hall of Fame）。目前&#xff…...

编程日记 2025/6/24 9:08:36

钉钉数据与金蝶云星空的无缝集成解决方案

钉钉数据与金蝶云星空的无缝集成解决方案钉钉数据集成到金蝶云星空的技术案例分享在企业信息化建设中，数据的高效流动和准确对接是业务成功的关键。本文将分享一个具体的系统对接集成案例：如何通过transfer-新转账单（银行转账）…...

编程日记 2025/6/26 21:39:36

商业架构 2.0 时代：ZKmall开源商城前瞻性设计如何让 B2B2C 平台领先同行 10 年？

在数字化转型加速的今天，传统 B2B2C 平台面临用户体验割裂、数据孤岛严重、业务扩展困难等挑战。ZKmall 开源商城通过 “业务中台数据中台技术中台”的三位一体架构设计，结合“插件化扩展分布式服务智能决策”*三大核心能力，构建起具…...

编程日记 2025/6/25 20:34:58

Android开发-使用内容组件获取通讯信息

在Android开发中，访问和处理用户的通讯信息（如联系人、通话记录等）是一项常见的需求。通过使用Android的内容提供者（ContentProvider），开发者可以方便地查询这些数据，并将其集成到自己的应用中。…...

编程日记 2025/6/20 2:02:22

Elasticsearch 分片机制高频面试题（含参考答案）

🧠 Elasticsearch 分片机制高频面试题（含参考答案） 本篇聚焦分片机制（Shard），涵盖基础概念、实践经验、问题排查与场景设计，适合中高级开发工程师及架构师面试复习使用。 📚 目录 …...

编程日记 2025/6/20 22:13:15

从代码学习深度学习 - 风格迁移 PyTorch版

文章目录前言方法 (Methodology)阅读内容和风格图像预处理和后处理抽取图像特征定义损失函数内容损失 (Content Loss)风格损失 (Style Loss)全变分损失 (Total Variation Loss)总损失函数初始化合成图像训练模型总结前言大家好！欢迎来到我们的深度学习代码学习系列。今天，…...

编程日记 2025/6/22 17:16:33

模糊综合评价模型建立

模糊综合评价模型建立一、整体流程二、代码实现(含大量注释) #程序文件ex14_4.py import numpy as npa np.loadtxt(data14_4.txt) # 使用定义匿名函数的形式来定义各个评价指标的隶属函数 f1 lambda x: x/8800 f2 lambda x: 1-x/8000 f3 lambda x: (x<5.5)(8-x)/(8-…...

编程日记 2025/6/23 14:05:55

WooCommerce短代码Shortcodes使用方法

什么是简码? 你可能以前听说过这个词，但可能认为它只是一个技术概念，一般的WordPress用户不需要了解。或者，也许你以前也用过一两个短码，但并不完全掌握它们在更深层次上是如何工作的。无论怎样，如果你想释放WooC…...

编程日记 2025/6/26 15:08:27

讯联云库项目开发日志（二）AOP参数拦截

目录利用AOP实现参数拦截: 一、HTTP请求进入Controller（发送邮件验证码） 二、AOP切面触发 1. 切面拦截（GlobalOperactionAspect.class） method.getAnnotation() null interceptor 判断 2.参数校验注解 3. 参…...

编程日记 2025/6/26 19:15:29

自学嵌入式 day 18 - 数据结构 1

数据结构相互之间存在一种或多种特定关系的数据元素的集合 1.特定关系： （1）逻辑结构： ①集合：所有在同一个集合中，关系平等。 ②线性关系：数据和数据之间是一对一的关系。（数组…...

编程日记 2025/6/24 21:40:06

使用WebSocket实现跨多个服务器传输音频及实时语音识别

下面我的项目信息： 项目架构： A项目（Websocket客户端 / React前端） > B项目（Websocket客户端 / Java后端）》C项目（Websocket服务端 / Node.js 后端） 项目功能： A项目…...

编程日记 2025/6/22 21:53:55

C++ QT图片查看器

private:QList<QString> fs;int i;void MainWindow::on_btnSlt_clicked() {QStringList files QFileDialog::getOpenFileNames(this,"选择图片",".","Images(*.png *.jpg *.bmp)");qDebug()<<files;ui->picList->clear();ui-…...

编程日记 2025/6/23 4:13:20

从AlphaGo到ChatGPT：AI技术如何一步步改变世界？

从AlphaGo到ChatGPT：AI技术如何一步步改变世界？ 这里给大家分享一个人工智能学习网站。点击跳转到网站。 https://www.captainbed.cn/ccc 前言在科技发展的历史长河中，人工智能（AI）技术无疑是最为璀璨的明珠之一。从…...

编程日记 2025/6/26 7:51:22

跨系统数据烟囱如何破局？豪森智源HSMES重构制造协同新范式‌

‌行业困局：万亿级数据资产沉睡在孤岛中‌ IDC最新报告显示，中国86%的制造企业存在5套以上独立信息系统，设备联网率不足42%的工厂每年因数据断点损失超千万利润。某新能源龙头企业CTO坦言："ERP、MES、WMS系统各自为政&#…...

编程日记 2025/6/25 9:17:48

MySQL DBA数据运维管理经验分享：新手入门快速提升效率的新工具与技巧

MySQL DBA数据运维管理经验分享：新手入门快速提升效率的新工具与技巧前言作为一名数据库管理员(DBA)，MySQL的运维管理是我们日常工作的核心。随着技术的不断发展，MySQL运维工具和最佳实践也在不断演进。本文将分享一些实用的MySQL DBA运维经验，并对比分析当前流行的运维…...

编程日记 2025/6/22 7:14:43

通义千问-langchain使用构建（二）

目录序言xinference应用构建构建过程简单概述成效 chatchat应用构建过程成效总结序言在昨天的使用langchain的基础上。又尝试了构建智能问答应用。使用langchain chatchat这个开源包，构建了一下智能问答系统。前置项，是使用了一下xinference框架&…...

编程日记 2025/6/25 6:07:11

无人机动力系统全解析：核心组件、工作原理与实用指南

无人机想要实现稳定飞行与灵活操控，离不开一套高效协同的动力系统。该系统以电机、电子调速器（电调）、电池和螺旋桨四大核心组件为基础，各部分精密配合，共同驱动无人机翱翔蓝天。接下来，本文将从基础原理入…...

编程日记 2025/6/22 8:15:50

【系统架构师】2025论文《WEB系统性能优化技术》

😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本文分享【系统架构师】2025论文《系统可靠性设计》，期待与你一同探索、学习、进步，一起卷起来叭！ 目录项目介绍背景介绍系统模块技术栈性能…...

编程日记 2025/6/25 21:09:24

华为Watch的ECG功能技术分析

华为Watch的ECG（心电图）功能通过硬件传感器、算法优化和医疗认证的结合，实现了对心脏电活动的监测和房颤（AFib）等心律失常的预警。以下是其技术实现方案的详细解析： 1. 硬件设计：单导联ECG传感…...

编程日记 2025/6/21 14:33:56

2025.05.14华为机考笔试题-第二题-200分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 探险家的最佳路径问题描述 A先生是一位探险家，他需要穿越一片危险的山地区域。这个区域可以用一个 k k k \times k...

编程日记 2025/6/25 23:45:49

FTP 工具 vs. 命令行 SCP/RSYNC

🔹 FTP 工具 vs. 命令行 SCP/RSYNC 对比场景FTP/SFTP 工具（如 Cyberduck、FileZilla）命令行（scp/rsync）适用人群新手、喜欢图形化操作习惯命令行、需要自动化脚本传输少量文件✅ 拖拽即可上传下载⚠️ 需手动输入命令…...

编程日记 2025/6/23 20:52:18

工业HMI触摸屏技术方案：基于EFISH-SCB-RK3588/SAIL-RK3588的国产化替代赛扬N100/N150全场景技术解析

一、核心硬件选型与国产化替代优势‌ ‌1. 算力与架构突破‌ ‌异构八核CPU‌：采用4Cortex-A76（2.4GHz）4Cortex-A55（1.8GHz）架构，支持实时控制逻辑、高帧率UI渲染、协议解析多任务并行处理，相…...

编程日记 2025/6/24 14:33:40

MySQL主从复制与读写分离

一、MySQL主从复制（Replication） 1. 核心原理主库（Master）：处理写操作，并将数据变更记录到二进制日志（Binary Log, binlog）。从库（Slave）：通过…...

编程日记 2025/6/20 23:00:53

VMware虚拟机安装 CentOS 7

原文链接: VMware虚拟机安装 CentOS 7 安装准备软件: VMware Workstation Pro 17.6.3 镜像: CentOS-7.0-1406-x86_64-DVD.iso 我打包好放这了，VMware 和 CentOS7 ，下载即可。关于VMware Workstation Pro 17.6.3，傻瓜式安装即可。 CentO…...

编程日记 2025/6/19 23:58:01

.NET 8 kestrel 配置PEM，实现内网https

一、生成证书 mkcert 是一个简单的工具，用于制作本地信任的开发证书。它不需要配置。 mkcert官方仓库地址：GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names youd like. 简…...

编程日记 2025/6/26 10:54:45

ERP系统如何做好工厂生产管理？4种ERP先进生产管理模式分享！

现代企业先进的生产管理方式有哪些？相信很多被生产效率问题困扰、谋求转型的企业都思考过这个问题。放在以前，工厂靠老师傅经验、主管“凭感觉”安排生产，材料、设备、交期全靠人盯。那是因为20年前市场稳定，这套办法还行得通。…...

编程日记 2025/6/26 6:15:06

HttpServletRequest常用功能简介-笔记

javax.servlet.http.HttpServletRequest 是 ServletRequest 接口的子接口，专用于处理 HTTP 协议相关的请求。它提供了访问请求行、请求头、请求参数以及请求属性等方法。 1.请求行（Request Line） ✅ 功能说明请求行包含客户端发送的 HTTP …...

编程日记 2025/6/23 12:15:10

基于面向对象设计的C++日期推算引擎：精准高效的时间运算实现与运算重载工程化实践

前引： 在软件开发中，时间与日期的处理是基础但极具挑战性的任务。传统的手工日期运算逻辑往往面临闰年规则、月份天数动态变化、时区转换等复杂场景的容错难题，且代码冗余度高、可维护性差。本文将深入探讨如何利用C的面向对象特性与成员函数…...

编程日记 2025/6/1 0:55:00

记一次bug排查(.exe链接mysql失败)-每天学习一点点

哎! 从来没有接手过的项目, .exe项目, 链接服务器失败报错:"unable to connect to any of the specified mySQL hosts" 虽然不懂c的代码, 也没法反编译.exe项目, 还是像挑战尝试一下解决这个问题. 明面看就是链接mysql失败. 但是mysql对应的服务器地址是啥呢? …...

编程日记 2025/6/22 13:57:04

U盘启动CentOS安装与网卡驱动修复指南

遇到CentOS安装找不到盘符如何解决 1、进入安装页面，点击e进入修改 2、找到自己的U盘，修改完成后按下"ctrlx"执行继续后续安装 vmlinuz initrdinitrd.imginst.stage2hd:LABEL... quiet 改为（具体的U盘启动需要根据实际情况进行查找…...

编程日记 2025/5/16 6:40:38

【物联网】基于树莓派的物联网开发【3】——最新镜像下载和烧录

使用场景程序猫将带领大家全面了解树莓派，包括从0到1组装，散热片、外壳、风扇安装，官网最新镜像下载及烧录等一系列操作！ 树莓派必备配件 1、TF卡（SD内存卡）品牌闪迪：16G以上 2、type-c充电…...

编程日记 2025/6/23 16:58:40

K8S Gateway API 快速开始、胎教级教程

假设有如下三个节点的 K8S 集群： k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点容器运行时是 containerd 一、Gateway 是什么背景和目的入口（Ingress）目前已停止更新。新的功能正在集成至网关 API 中。在 Kubernetes …...

编程日记 2025/6/22 9:20:41

js关于number类型的计算问题

js中关于number类型的计算因：在js中，number类型是用于表示数值的基本类型，它遵循 IEEE 754 双精度浮点数（64 位）标准。这导致在某些计算中可能出现精度问题。例：console.log(0.1 0.2); // 0.300000000…...

编程日记 2025/6/25 10:32:54

GPT-4o 遇强敌？英伟达 Eagle 2.5 视觉 AI 王者登场

前言： 在人工智能领域，视觉语言模型的竞争愈发激烈。GPT-4o 一直是该领域的佼佼者，但英伟达的 Eagle 2.5 横空出世，凭借其 80 亿参数的精简架构，在长上下文多模态任务中表现出色，尤其是在视频和高分辨率图像…...

编程日记 2025/6/24 9:41:20

2025最新ChatGPT Plus令牌(Token)限制完全指南：每日/每月用量详解与突破方法

2025最新ChatGPT Plus令牌(Token)限制完全解析：真相、误区与突破方案对于支付$20/月订阅费的ChatGPT Plus用户来说，"我的ChatGPT Plus每月有多少token限制？"是一个普遍关心却常被误解的问题。随着越来越多人依赖AI工作和学习&…...

编程日记 2025/6/26 19:48:03

二叉树深搜：在算法森林中寻找路径

专栏：算法的魔法世界个人主页：手握风云目录一、搜索算法二、回溯算法三、例题讲解 3.1. 计算布尔二叉树的值 3.2. 求根节点到叶节点数字之和 3.3. 二叉树剪枝 3.4. 验证二叉搜索树 3.5. 二叉搜索树中第 K 小的元素 3.6. 二叉树的所有路径 …...

编程日记 2025/6/25 11:19:52

力扣310.最小高度树(拓扑排序，无向图)，力扣.加油站力扣.矩阵置零力扣.二叉树中的最大路径和

目录力扣310.最小高度树(拓扑排序，无向图) 力扣.加油站力扣.矩阵置零力扣.二叉树中的最大路径和力扣310.最小高度树(拓扑排序，无向图) 当他是最小高度树时候，树根必定是中心节点，且中心节点一定一两个，且…...

编程日记 2025/6/23 1:34:13

Java并发编程：CAS操作

1. 简介 CAS 全称是 Compare-and-Swap，即比较加交换，假设我们要对内存中的某个地址进行 CAS 操作，该地址当前值是 V，我们给定预期值 A 和新值 B，如果 V A，那么就将该地址的值更新为 B 并返回 true&#xf…...

编程日记 2025/6/25 19:36:33

InforSuite RDS 与django结合

InforSuite RDS（关系型数据库服务）是浪潮提供的托管式数据库服务，通常支持 MySQL、PostgreSQL、SQL Server 等主流数据库。将 Django 与 InforSuite RDS 结合使用，主要涉及数据库配置、连接优化、安全策略等环节。以下是详细的整合…...

编程日记 2025/6/25 19:22:30

完整结构

1. 项目结构设置

2. 设置Docker中的MySQL

3. 创建后端API

4. 修改React前端代码

5. 运行应用

相关文章：