react如何创建前后端分离

创建前后端分离的React项目

前端使用React，后端可以使用Node.js、Python、Java等。以下以Node.js作为后端示例。

前端部分

使用Create React App初始化项目：

npx create-react-app my-app
cd my-app

安装axios用于HTTP请求：

npm install axios

配置代理解决跨域问题，在package.json中添加：

"proxy": "http://localhost:5000"

示例API调用代码：

import axios from 'axios';

function App() {
  const fetchData = async () => {
    try {
      const response = await axios.get('/api/data');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <button onClick={fetchData}>获取数据</button>
  );
}

后端部分

初始化Node.js项目：

mkdir server
cd server
npm init -y
npm install express cors

创建基础服务器代码：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: '来自后端的数据' });
});

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

项目结构组织

推荐的项目目录结构：

project-root/
├── client/          # React前端
│   ├── public/
│   ├── src/
│   └── package.json
└── server/          # Node后端
    ├── routes/
    ├── models/
    └── package.json

开发环境配置

前端开发服务器：

cd client
npm start

后端开发服务器：

cd server
node server.js

生产环境部署

前端构建：

cd client
npm run build

后端需要处理静态文件，添加以下代码：

app.use(express.static(path.join(__dirname, '../client/build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

前后端通信规范

建议的API设计原则：

• 使用RESTful风格
• 统一响应格式：

  {
  "success": true,
  "data": {},
  "message": ""
  }

错误处理中间件示例：

app.use((err, req, res, next) => {
  res.status(500).json({
    success: false,
    message: err.message
  });
});

安全注意事项

后端应配置CORS限制：

app.use(cors({
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST']
}));

前端敏感信息处理：

• 使用环境变量存储API密钥
• 创建.env文件：

  REACT_APP_API_KEY=your_key