当前位置：首页 > React

react如何连接MySQL数据库

2026-01-26 01:05:20React

连接MySQL数据库的方法

React本身是一个前端框架，无法直接连接MySQL数据库。通常需要通过后端服务（如Node.js、PHP、Java等）作为中间层来处理数据库操作，React再通过API与后端通信。

使用Node.js作为后端

创建Node.js后端服务，使用Express框架和MySQL驱动：

react如何连接MySQL数据库

// server.js
const express = require('express');
const mysql = require('mysql');
const app = express();

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'your_database'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL');
});

app.get('/api/data', (req, res) => {
  db.query('SELECT * FROM your_table', (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

React中调用API

在React组件中使用fetch或axios调用后端API：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default App;

使用ORM工具

考虑使用Sequelize等ORM工具简化数据库操作：

react如何连接MySQL数据库

// 使用Sequelize
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize('your_database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'
});

const User = sequelize.define('User', {
  name: DataTypes.STRING,
  email: DataTypes.STRING
});

app.get('/api/users', async (req, res) => {
  const users = await User.findAll();
  res.json(users);
});