Реакция отправки в метод Flask POST без записи в базу данных (с использованием Axios) - PullRequest
Новая
       29

Реакция отправки в метод Flask POST без записи в базу данных (с использованием Axios)

0 голосов
/ 19 февраля 2019

Я использую очень простое приложение 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()

Это не проблема чтения / записи и не проблема подключения;похоже, это ошибка кодирования.

Я получаю это сообщение, когда нажимаю кнопку Submit: 

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 выдает 500 кодов во Flask: 

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

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Проблема заключалась в том, что я получаю сообщение об ошибке сети.Мне пришлось включить CORS, чтобы заставить мои транзакции работать. 

handleSubmit(event){
    event.preventDefault();
    const name = {
        name: this.state.name
    };
    axios.post(`http://127.0.0.1:5000/signup`, {name})
    .then(res => {
        console.log(res);
        console.log(res.data);
    })
    .catch(err => {
        console.log(err);
        alert(err); //See this error
    });
}

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


app = Flask(__name__)
CORS(app)
0 голосов
/ 19 февраля 2019

Axios отправляет данные по умолчанию как json .Таким образом, вам нужно получить данные в Flask из тела запроса в виде объекта JSON . 

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()
...