javascript - 如何将数据从 React 模板发送到 Flask API?
问题描述
我想使用登录模板,但我不确定如何将数据从该模板发送到我的 Flask API。我读到状态仅存在于组件中。真的吗?我尝试从另一个具有组件的文件中调用 Render 内部的 Register 函数,但我收到有关无效挂钩的错误。
烧瓶 API
from flask import Blueprint, jsonify
from flask import request, make_response
import sqlite3
from sqlite3 import Error
import os.path
import json
main = Blueprint('main', __name__)
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
db_path = os.path.join(BASE_DIR, "database.db")
def connection():
try:
conn = sqlite3.connect(db_path)
except Error as e:
print(e)
return conn
@main.route('/add_review', methods=['POST'])
def add_review():
conn = connection()
cur = conn.cursor()
req = request.get_json()
busID = req.get('busID')
userID = req.get('userID')
review = req.get('review')
rating = req.get('rating')
sql = "INSERT INTO Review (businessID, userID, review, rating) VALUES (?, ?, ?, ?)"
data = (busID, userID, review, rating)
cur.execute(sql, data)
conn.commit()
cur.close()
return 'Done', 201
@main.route('/reviews')
def reviews():
conn = connection()
cur = conn.cursor()
name = "Halal Guys"
cur.execute("SELECT * FROM Review where businessID = (SELECT id FROM Business where name = \'{}\')".format(name))
reviews = cur.fetchall()
reviews_dict = []
for review in reviews:
content = {"id": review[0], "busID": review[1], "userID": review[2],
"review": review[3], "rating": review[4]}
reviews_dict.append(content)
return json.dumps(reviews_dict)
@main.route('/createUser', methods=['POST', 'OPTIONS'])
def createUser():
# handle option request
if request.method == "OPTIONS":
response = make_response()
response.headers["Access-Control-Allow-Origin"] = "*"
response.headers[
"Access-Control-Allow-Headers"
] = "Origin, Accept, Content-Type"
response.headers["Access-Control-Allow-Methods"] = "POST,OPTIONS"
response.headers["Access-Control-Allow-Credentials"] = "true"
return response
if request.method == "POST":
# do your SQL stuff
conn = connection()
cur = conn.cursor()
req = request.get_json()
first = req.get("FirstName")
last = req.get("LastName")
email = req.get("Email")
pw = req.get("Password")
sql = (
"INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
)
data = (first, last, email, pw)
cur.execute(sql, data)
conn.commit()
cur.close()
# make response
response = make_response("{}") # return empty JSON response
response.headers["Access-Control-Allow-Origin"] = "*"
response.headers[
"Content-Type"
] = "application/json" # set response type to JSON
return response
return "", 405
登录模板
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function Register() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="firstName"
variant="outlined"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="lname"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" />}
label="I want to receive inspiration, marketing promotions and updates via email."
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="/login" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
);
}
解决方案
试着看看 react 是如何处理表单的。https://reactjs.org/docs/forms.html
推荐阅读
- java - 带有 Java 7 和 SSL 的 MQ7 无法正常工作。它在 6 个月前就可以工作
- adempiere - Adempiere Web 服务 createData 调用中允许和不允许的列
- javascript - 无法在同一页面上有多个引导模式
- java - 如何计算数组元素的所有可能总和
- excel - Excel,找到第一个和最后一个单元格条目的列并使用另一行的该列位置
- openwrt - 具有多个远程 IP 地址的 OpenVpn 客户端
- office-ui-fabric - 我可以使用 Fluent UI 创建与任何 Microsoft 应用程序无关的网站吗?
- php - 到底是怎么回事?我从未见过这样的 PHP 语法:${"\x47\x4c\x4fB\x41\x4c\x53"}['v9800']
- python - 从文件列和行标题创建嵌套字典
- javascript - 在处理未安装组件的清理时,这些解决方案之间有什么区别?useRef 与布尔变量