ReactJS中点击按钮能否执行Python文件并调用其API获取数据？

前提说明 #

你没办法直接在React前端点击按钮时执行Python文件启动API，必须先独立启动Flask后端服务，前端只负责发起请求获取数据。

1. 调整React的App.js代码 #

修改按钮的事件绑定，添加onClick事件处理器，并在里面用fetch请求Flask API：

import { useState } from 'react';

function App() {
  const [responseData, setResponseData] = useState(null);

  const onClickHandler = async () => {
    try {
      // Flask默认本地地址是http://localhost:5000，对应/data接口
      const res = await fetch('http://localhost:5000/data', {
        method: 'GET' // 也可以用POST，和Flask接口配置保持一致
      });
      const data = await res.json();
      setResponseData(data);
      console.log('获取到的数据:', data);
    } catch (err) {
      console.error('请求失败:', err);
    }
  };

  return (
    <div>
      <button onClick={onClickHandler}>Click Me</button>
      {/* 展示返回的数据 */}
      {responseData && (
        <div className="data-display">
          <p>用户名: {responseData.name}</p>
          <p>密码: {responseData.password}</p>
        </div>
      )}
    </div>
  );
}

export default App;

2. 运行Flask后端服务 #

你的Test.py代码基础逻辑没问题，先安装依赖：

pip install flask

然后启动服务：

python Test.py

启动后控制台会输出类似Running on http://127.0.0.1:5000的信息，说明服务在本地5000端口运行。

3. 解决跨域问题（必做） #

React默认运行在3000端口，Flask在5000端口，直接请求会触发跨域错误，需要给Flask添加跨域支持：

• 安装跨域依赖：

pip install flask-cors

• 修改Test.py代码：

from flask import Flask, render_template
from flask_cors import CORS  # 导入CORS模块

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求

@app.route('/data',methods=['GET', 'POST'])
def my_link():
  print("I got Clicked")
  return {'name': "geek", "password": "This is PWD"}

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

4. 启动React应用 #

在React项目根目录执行：

npm start

点击页面中的按钮后，就能在控制台看到Flask返回的数据，页面也会同步展示内容。

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