React与Docker中的MySQL进行交互

完整结构

1. 项目结构设置

首先创建项目:

bash 复制代码
npm create vite@latest . --template react
cd .
npm install

2. 设置Docker中的MySQL

创建docker-compose.yml文件(与之前相同):

yaml:docker-compose.yml 复制代码
version: '3.8'
services:
  mysql:
    image: mysql:8.0
    container_name: mysql_container
    environment:
      MYSQL_ROOT_PASSWORD: yourpassword
      MYSQL_DATABASE: testdb
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

启动MySQL容器:

bash 复制代码
docker-compose up -d

3. 创建后端API

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

bash 复制代码
mkdir backend
cd backend
npm init -y
npm install express mysql2 cors

创建后端服务器文件:

javascript:backend/server.js 复制代码
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前端代码

安装必要的依赖:

bash 复制代码
npm install axios

修改src/App.jsx文件:

javascript: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">
        <input
          type="text"
          placeholder="姓名"
          value={newUser.name}
          onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
        />
        <input
          type="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添加一些基本样式:

css: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. 运行应用

  1. 启动后端服务器:
bash 复制代码
cd backend
node server.js
  1. 在新的终端中启动Vite开发服务器:
bash 复制代码
npm run dev
相关推荐
烟雨书信1 分钟前
Docker文件操作、数据卷、挂载
运维·docker·容器
IT成长日记4 分钟前
【Docker基础】Docker数据卷管理:docker volume prune及其参数详解
运维·docker·容器·volume·prune
这儿有一堆花10 分钟前
Docker编译环境搭建与开发实战指南
运维·docker·容器
LuckyLay10 分钟前
Compose 高级用法详解——AI教你学Docker
运维·docker·容器
Uluoyu19 分钟前
redisSearch docker安装
运维·redis·docker·容器
IT成长日记4 小时前
【Docker基础】Docker数据持久化与卷(Volume)介绍
运维·docker·容器·数据持久化·volume·
热爱生活的猴子4 小时前
阿里云服务器正确配置 Docker 国内镜像的方法
服务器·阿里云·docker
程序员岳焱8 小时前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
FrankYoou8 小时前
Jenkins 与 GitLab CI/CD 的核心对比
java·docker
隆里卡那唔9 小时前
在dify中通过http请求neo4j时为什么需要将localhost变为host.docker.internal
http·docker·neo4j