首页
前端开发
Webpack
React 与 Flask 集成开发指南

React 与 Flask 集成开发指南

23 次浏览 0 条评论
zip
zip

本指南介绍如何使用 Create React App 和 Flask 框架构建前后端分离的 Web 应用。

项目初始化

使用 Create React App 工具快速搭建 React 前端项目：

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

Flask 后端搭建

创建一个 Flask 项目，并编写 API 接口：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
  data = {'message': 'Hello from Flask!'}
  return jsonify(data)

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

前后端通信

在 React 组件中使用 fetch API 获取 Flask 后端数据：

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

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

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    

      {data ? 
{data.message}
 : 
Loading...
}
    

  );
}

export default App;

项目部署

分别启动 Flask 后端服务和 React 开发服务器，即可访问应用。

注意： 本指南仅提供基本框架，实际开发中需根据需求进行调整。

zip 文件大小：6.69MB