如何在MERN项目中使用后端Router与前端Fetch实现CRUD操作

一、后端Express Router配置步骤 #

1. 准备依赖 #

确保后端项目已安装express，如果没有，执行：

npm install express

若需要解决跨域问题，额外安装cors：

npm install cors

2. 编写路由文件 #

在后端目录下新建routes文件夹，创建专属路由文件（比如userRoutes.js）管理用户相关接口：

const express = require('express');
const router = express.Router();

// 获取用户列表的GET接口
router.get('/api/users', (req, res) => {
  // 实际项目中替换为MongoDB查询逻辑，比如User.find()
  const mockUsers = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
  res.status(200).json(mockUsers);
});

// 创建用户的POST接口
router.post('/api/users', (req, res) => {
  const { name } = req.body;
  // 实际项目中这里调用User.create()写入数据库
  res.status(201).json({ message: '用户创建成功', user: { id: Date.now(), name } });
});

module.exports = router;

3. 在主服务器挂载路由 #

打开server.js，引入并挂载路由，同时完成数据库连接和基础配置：

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const userRoutes = require('./routes/userRoutes');

const app = express();

// 解析JSON请求体
app.use(express.json());
// 允许跨域请求
app.use(cors());

// 挂载路由
app.use(userRoutes);

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/your-db-name')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`服务器运行在端口${PORT}`));

二、前端React中使用Fetch调用接口 #

在React组件里实现数据请求和交互：

import { useEffect, useState } from 'react';

function UserManager() {
  const [users, setUsers] = useState([]);
  const [inputName, setInputName] = useState('');

  // 组件加载时获取用户列表
  useEffect(() => {
    fetch('http://localhost:5000/api/users')
      .then(res => {
        // Fetch不会自动抛出HTTP错误，需手动判断状态
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json();
      })
      .then(data => setUsers(data))
      .catch(err => console.error('获取用户失败:', err));
  }, []);

  // 提交新用户
  const handleAddUser = () => {
    if (!inputName.trim()) return;

    fetch('http://localhost:5000/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name: inputName })
    })
      .then(res => {
        if (!res.ok) throw new Error('创建用户失败');
        return res.json();
      })
      .then(data => {
        setUsers(prevUsers => [...prevUsers, data.user]);
        setInputName('');
      })
      .catch(err => console.error('创建用户出错:', err));
  };

  return (
    <div className="user-manager">
      <h3>用户列表</h3>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={inputName}
          onChange={e => setInputName(e.target.value)}
          placeholder="输入用户名"
        />
        <button onClick={handleAddUser}>添加用户</button>
      </div>
    </div>
  );
}

export default UserManager;

关键注意点 #

• 跨域处理：必须启用cors中间件，否则前端会因浏览器跨域政策无法请求后端接口
• Fetch错误处理：只有网络层面的错误才会触发catch，HTTP状态码错误（如404、500）需要通过res.ok判断并手动抛出错误
• 环境变量：实际开发中，后端地址、数据库连接字符串等敏感信息要放在.env文件里，用process.env读取，避免硬编码

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