Flask前后端分离开发

### Flask 前后端分离开发教程

#### 使用Flask构建API服务

为了实现前后端分离架构，通常的做法是利用Flask作为后端服务器来提供RESTful API接口给前端调用。这样可以使得前端和后端各自独立发展而不互相干扰。

定义简单的路由处理函数用于返回JSON数据：

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {"message": "Hello from backend!"}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

此段代码展示了如何通过`jsonify()`方法将Python字典转换成JSON响应发送给客户端[^1]。

#### 配置跨域资源共享(CORS)

由于前后端运行于不同域名或端口上，默认情况下浏览器的安全策略会阻止这种请求。为此可以在Flask应用中安装并配置CORS扩展解决该问题:

pip install -U flask-cors

接着在应用程序里引入cors模块，并允许特定源访问资源：

from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有来源的请求
# 或者指定某些URL模式
# CORS(app, resources={r"/api/*": {"origins": "*"}})

这一步骤确保了即使是在不同的主机之间也能正常通信。

#### 构建React前端界面并与后端交互

对于现代Web应用来说，采用像React这样的库可以帮助快速搭建用户友好的单页面应用(SPA)，并通过AJAX异步加载来自Flask的数据。

下面是一个简易的例子展示怎样发起HTTP GET 请求获取由Flask提供的信息：

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then(response => response.json())
      .then(setData);
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

这段JSX语法编写的应用组件会在首次渲染时自动向后台发出请求读取消息内容[^2]。