大家好呀，枫幽幽又来跟大家聊聊前后端分离开发这个香饽饽了！最近有不少小伙伴问我怎么用Python+React搭建一个前后端分离的项目，今天我们就来一步步实操一下，保证你看完就能上手！
前后端分离开发现在可是真火啊，特别是Python后端配上React前端，这组合简直就是开发界的“天生一对”。后端负责提供API接口，前端专注页面交互，各司其职，不仅开发效率高，维护起来也轻松很多。
PART01 环境准备和项目结构
首先我们要搭建开发环境，后端用Flask框架，前端当然是React啦！来看看具体怎么配置：
后端环境：
pip install flask flask-cors python-dotenv
前端环境：
npx create-react-app frontend
cd frontend
npm install axios
项目结构是这样的：
project/
├── backend/
│ ├── app.py
│ ├── .env
│ └── requirements.txt
└── frontend/
├── src/
├── public/
└── package.json
PART02 后端API开发
来看看后端怎么写，很简单，Flask几行代码就搞定：
from flask import Flask， jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/api/hello')
def hello()：
return jsonify({“message”： “Hello from Flask！”})
if __name__ == '__main__'：
app.run(debug=True)
PART03 前端React组件
前端这边，我们用React Hooks来写个简单的组件：
import React， { useState， useEffect } from 'react'；
import axios from 'axios'；
function App() {
const [message， setMessage] = useState('')；
useEffect(() => {
axios.get('http：//localhost：5000/api/hello')
.then(response => {
setMessage(response.data.message)；
})
.catch(error => {
console.error('Error：'， error)；
})；
}， [])；
return (
React + Flask Demo
{message}
)；
}
export default App；
PART04 数据交互和状态管理
数据交互这块，咱们用axios来处理API请求，代码这么写：
// api.js
import axios from 'axios'；
const API_URL = 'http：//localhost：5000/api'；
export const fetchData = async () => {
try {
const response = await axios.get(`${API_URL}/hello`)；
return response.data；
} catch (error) {
console.error('API调用出错啦！'， error)；
throw error；
}
}；
PART05 实用小技巧
最后枫幽幽再给大家几个实用小技巧：
后端要记得配置CORS，不然跨域请求会被浏览器拦截：
from flask_cors import CORS
CORS(app， resources={r“/api/*”： {“origins”： “*”}})
前端开发时配置代理，避免跨域问题：
{
“proxy”： “http：//localhost：5000”
}
环境变量管理：
# backend/.env
FLASK_APP=app.py
FLASK_ENV=development
小伙伴们，有了这些基础，你就可以开始玩转前后端分离开发啦！遇到问题不要慌，评论区随时问我。下期我们聊聊怎么给这个架构加上用户认证，记得关注枫幽幽哦！
