mysql - React 提交到 Flask POST 方法不写入数据库(使用 Axios)

Question

我正在运行一个非常简单的 React 应用程序，与 Flask 应用程序通信，读取和写入 MySQL 数据库。我尝试从一个简单的网页开始，您可以在文本框中输入文本，单击按钮，然后将一个新条目写入数据库。

问题是，我无法将文本从 React 应用程序传递到数据库中。

这是我的 Flask 应用程序:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask import request
from flask_cors import CORS


app = Flask(__name__)
CORS(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:password@localhost/testdb'

db = SQLAlchemy(app)

class Person(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(80), unique=False, nullable=False)

@app.route('/signup', methods = ['GET', 'POST'])
def signup():
    if request.method == 'POST':
        json_data = request.get_json()
        addData = Person(name=json_data.get('name'))
        db.session.add(addData)
        db.session.commit()

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

这是迄今为止我的signup.jsx 文件:

import React, { Component } from 'react';
import './signup.css';
import axios from 'axios';

class Signup extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        this.setState({ name: event.target.value });
    }

    handleSubmit(event){
        alert('test');
        event.preventDefault(); //What is this?
        const name = {
            name: this.state.name
        };
        alert(JSON.stringify(name));
        axios.post(`http://127.0.0.1:5000/signup`, {name})
        .then(res => {
            console.log(res);
            console.log(res.data);
            alert(this.state.name);
        })
        .catch(err => {
            console.log(err);
            alert(err);
        });
    }

    render(){
        return (
            <div className='signup'>
                <form onSubmit={this.handleSubmit}>
                    <input type='text' name='name' onChange={this.handleChange}/><br/>
                    <input type='submit' value='Submit'/>
                </form>
            </div>
        );
    }
}

export default Signup;

我已经运行了这个，它有效:

eg = Person(name='what')
db.session.add(eg)
db.session.commit()

这不是读/写问题，也不是连接问题；看来是编码错误。

当我点击“提交”时，我收到此消息:

127.0.0.1 - - [19/Feb/2019 00:22:26] "OPTIONS /signup HTTP/1.1" 200 -

但是，当我在MySQL Workbench中查询该表时，没有新数据。

React 应用程序在 localhost:3000 上运行，Flask 应用程序在 http://127.0.0.1:5000/ 上运行

我哪里出错了？

编辑 我编辑了代码并添加了一些警报和打印。当我从 signup() 方法打印时，什么也没有打印。 在handleSubmit函数中，我总是收到错误警报，提示存在“错误:网络错误”

编辑 我将 CORS 添加到 Flask 应用程序中。数据写入了，但是Axios在Flask中给出了500的代码:

127.0.0.1 - - [19/Feb/2019 20:59:31] "POST /signup HTTP/1.1" 500 -

Answer 1

Axios 默认发送数据为 json 。所以你需要从请求体中获取Flask中的数据，如 JSON object .

from flask import request

@app.route('/signup', methods = ['GET', 'POST'])
def signup():
    if request.method == 'POST':
        json_data = request.get_json()
        addData = Person(name=json_data.get('name'))
        db.session.add(addData)
        db.session.commit()