React新手实现客户端通过Axios调用服务端数据库查询接口的问题

兄弟，我刚学React的时候也踩过一模一样的坑！先给你理清楚核心问题：React是纯客户端框架，你的Database.jsx如果要处理数据库连接这种服务端逻辑，根本不能放在React项目里直接导入——浏览器环境没法直接连数据库，还会暴露数据库凭证，超级不安全！

你需要把数据库逻辑放到独立的服务端项目里（用Node.js+Express最方便，和React生态适配），然后客户端通过Axios请求服务端的接口来拿数据。下面给你一步步拆解：

第一步：搭建服务端（处理数据库连接和接口） #

1. 在你的React项目外面新建一个文件夹（比如叫backend），进去初始化项目：

   npm init -y
   npm install express cors mysql2 # 这里mysql2换成你用的数据库包，比如mongoose如果是MongoDB
   

2. 在backend里创建server.js（别用jsx后缀，服务端不需要React的JSX语法），写服务端逻辑：

   const express = require('express');
   const cors = require('cors');
   const mysql = require('mysql2'); // 以MySQL为例，换成你的数据库驱动
   
   const app = express();
   const PORT = 3001; // 别和React的3000端口冲突！
   
   // 解决跨域问题，允许React客户端请求
   app.use(cors());
   app.use(express.json());
   
   // 数据库连接配置
   const db = mysql.createConnection({
     host: 'localhost',
     user: '你的数据库用户名',
     password: '你的数据库密码',
     database: '你的数据库名'
   });
   
   // 测试数据库连接
   db.connect((err) => {
     if (err) {
       console.error('数据库连接失败:', err);
       return;
     }
     console.log('数据库连接成功！');
   });
   
   // 定义/getData接口，就是客户端要请求的地址
   app.get('/getData', (req, res) => {
     // 这里写你的数据库查询逻辑，比如查某个表
     const query = 'SELECT * FROM 你的表名';
     db.query(query, (err, results) => {
       if (err) {
         res.status(500).send('查询失败');
         return;
       }
       res.json(results); // 把查询结果返回给客户端
     });
   });
   
   // 启动服务端
   app.listen(PORT, () => {
     console.log(`服务端运行在 http://localhost:${PORT}`);
   });
   

3. 启动服务端：

   node server.js
   

第二步：修改React客户端的App.js #

现在你的客户端可以通过Axios请求服务端的http://localhost:3001/getData接口了，修改你的App.js：

import { Button } from "react-bootstrap";
import axios from "axios";

function App() {  
  const getData = async () => {
    try {
      // 注意这里的端口是服务端的3001，不是React的3000！
      const response = await axios.get('http://localhost:3001/getData');
      console.log('从数据库拿到的数据:', response.data);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <div className="App">
      <Button onClick={() => getData()}>Show</Button>
    </div>
  );
}

export default App;

第三步：启动客户端测试 #

启动你的React项目：

npm start

点击按钮，就能在控制台看到从数据库返回的数据啦！

关键提醒 #

• 服务端和客户端要分别启动，端口不能重复（React默认3000，服务端我用了3001，你可以自己改）
• 数据库的账号密码一定要放在服务端，绝对不能写在客户端代码里，不然会泄露！
• 如果用的是MongoDB或者其他数据库，只需要把服务端里的数据库驱动和查询逻辑换成对应的就行。

备注：内容来源于stack exchange，提问作者user1960836