IT技术 - react前端连接到flask后端 Howto - 吾爱随笔录

react前端连接到flask后端 Howto

IT技术 javascript python reactjs flask flask-restful

2021-05-17 05:05:26

我有一个 ReactJS 前端和一个 Flask 后端，我很难让两者相互交谈，特别是从前端向 Flask 发送表单变量。

下面给出的是我在 127.0.0.1:3000 上运行的前端代码

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
class Form1 extends Component{
  render(){
    return(
        <div class="form">
            <form action="/result" method="get">
                <input type="text" name="place" />
                <input type="submit" />
            </form>
        </div>
    );
  }
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);

我的后端flask代码如下所示，运行在 127.0.0.1:5000

from flask import Flask, render_template, request
import requests
import json
app = Flask(__name__)
@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'GET':
      result = request.form
      print (result['place'])

1个回答

我已经稍微调整了你的代码。我所做的更改：

http://localhost:5000/result在前端添加后端路径作为表单操作路径。
使用的request.args.get方法来获取提交的值。

前端运行在3000端口，后端运行在5000端口；都在localhost.

前端代码：

import ReactDOM from 'react-dom';
import React, {Component} from 'react';
class Form1 extends Component{
    render(){
        return (
            <div class="form">
                <form action="http://localhost:5000/result" method="get">
                    Place: <input type="text" name="place"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}
ReactDOM.render(
    <Form1/>,
    document.getElementById('root')
);

后端代码：

from flask import Flask, request

app = Flask(__name__)

@app.route('/result', methods = ['GET', 'POST'])
def result():
    if request.method == 'GET':
        place = request.args.get('place', None)
        if place:
            return place
        return "No place information is given"

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

下面是运行程序的截图：

参考：

Flask 文档：请求对象

其它你可能感兴趣的问题

上一篇商店的更改侦听器未在 componentWillUnmount 上删除？下一篇如何防止喷嘴卡在打印件上？