在ReactJs中从MySQL数据库获取JSON格式数据

一、搭建后端服务（Node.js + Express） #

因为React是前端框架，无法直接连接MySQL，需要通过后端接口中转数据，这里用Node.js+Express实现最简单的后端服务。

1. 初始化项目并安装依赖 #

创建后端文件夹，执行以下命令初始化项目并安装所需依赖：

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

2. 编写后端代码连接MySQL并提供接口 #

创建server.js文件，填入以下代码，记得替换成你自己的MySQL配置：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

const app = express();
// 允许跨域请求（解决前后端域名不同的跨域问题）
app.use(cors());
// 解析JSON格式请求体
app.use(express.json());

// 配置MySQL连接信息
const db = mysql.createConnection({
  host: 'localhost', // 你的MySQL主机地址，本地一般是localhost
  user: 'root', // 你的MySQL用户名
  password: 'your-mysql-password', // 你的MySQL密码
  database: 'your-database-name' // 要连接的数据库名称
});

// 测试数据库连接
db.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已成功连接到MySQL数据库');
});

// 编写获取数据的API接口
app.get('/api/data', (req, res) => {
  // 替换成你要查询的表名
  const query = 'SELECT * FROM your-table-name';
  db.query(query, (err, results) => {
    if (err) {
      console.error('数据查询出错:', err);
      res.status(500).json({ error: '获取数据失败' });
      return;
    }
    // 将查询结果以JSON格式返回给前端
    res.json(results);
  });
});

// 启动后端服务
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`后端服务运行在 http://localhost:${PORT}`);
});

3. 启动后端服务 #

在后端文件夹下执行：

node server.js

看到已成功连接到MySQL数据库和服务运行地址的提示，说明后端没问题了。

二、React前端获取并使用数据 #

1. 创建React项目（如果还没有） #

执行以下命令创建React项目：

npx create-react-app mysql-react-frontend
cd mysql-react-frontend

2. 在组件中请求数据并展示 #

修改src/App.js文件，替换成以下代码：

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 组件挂载时请求后端数据
  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('数据请求失败');
        }
        return response.json();
      })
      .then(fetchedData => {
        setData(fetchedData);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  // 处理加载中和错误状态
  if (loading) return <div>加载数据中...</div>;
  if (error) return <div>出错了：{error}</div>;

  return (
    <div className="App">
      <h1>从MySQL获取的数据</h1>
      <ul>
        {data.map(item => (
          // 这里假设你的表有id字段作为唯一key，替换成你表中的字段名展示
          <li key={item.id}>
            {item.name} - {item.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. 启动前端服务 #

在前端项目文件夹下执行：

npm start

前端启动后，就能看到从MySQL获取并展示的数据了。

额外说明 #

• 如果你习惯用axios代替fetch，可以先安装axios：npm install axios，然后把fetch部分替换成：

import axios from 'axios';

// 在useEffect中：
axios.get('http://localhost:5000/api/data')
  .then(response => {
    setData(response.data);
    setLoading(false);
  })
  .catch(err => {
    setError(err.message);
    setLoading(false);
  });

• 确保你的MySQL服务处于运行状态，并且后端配置的用户名、密码、数据库名、表名都是正确的。

内容的提问来源于stack exchange，提问作者Om Nigam