[英]react frontend connecting to flask backend Howto
我有一個 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')
);
我的后端燒瓶代碼如下所示,運行在 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'])
我已經稍微調整了你的代碼。 我所做的更改:
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)
下面是運行程序的截圖:
參考:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.