Возникли проблемы при отправке данных создания учетной записи из React на конечную точку Flask - PullRequest
0 голосов
/ 16 марта 2020

Я пытаюсь работать с моим компонентом Register в моем проекте веб-приложения. До сих пор мне удавалось отобразить эту страницу, но сейчас самая большая проблема, с которой я сталкиваюсь, - это попытка отправить форму для отправки данных в мой Flask бэкэнд. Я не уверен, почему это не работает, и я полностью озадачен. Я новичок в React, поэтому выясняю, все это ново для меня.

Одна вещь, которую я заметил, это то, что у меня Flask работает на порту 5000, но когда я запускаю React, он работает на порту 3000. Может ли это быть проблемой? Если так, как бы я это исправить?

 ***React***
import React, {Component, useState} from "react";


function Register () {

    const [inputF_name, setInputF_name] = useState("");
    const [inputL_name, setInputL_name] = useState("");
    const [inputUsername, setInputUsername] = useState("");
    const [inputEmail, setInputEmail] = useState("");
    const [inputPassword, setInputPassword] = useState("");
    const [url, setUrl] = useState("http://localhost:5000/register")
    const [response, setResponse] = useState("")

    const registerAccount = async () => {
      const output = document.getElementById("flaskResponse");
      const configs = {
        method : "POST",
        mode : "cors",
        headers : {"Content-Type" : "application/json"},
        body : JSON.stringify({
          f_name : inputF_name,
          l_name : inputL_name,
          username : inputUsername,
          email : inputEmail,
          password : inputPassword
        })
      }
      try {
        JSON.parse(configs);
        const response = await fetch(url, configs);
        const flaskResponse = await response.json();
        setResponse(flaskResponse["response"]);
      } catch (error) {
        console.log(error);
      }
      output.innerHTML += "<p>" + response + "</p>";
    }
    return (
      <div className="Register">

        <h2>Register Account</h2>
        <div id="flaskResponse"/>
       <center><form className = "registerForm">
        <input
          type = "text" 
          id="f_name" 
          onChange={e => setInputF_name(e.target.value)}
          placeholder="First Name">
        </input>
        <br></br>
        <input
          type = "text"  
          id="l_name" 
          onChange={e => setInputL_name(e.target.value)}
          placeholder="Last Name">
        </input>
        <br></br>
        <input 
          type = "text"
          id="username" 
          onChange={e => setInputUsername(e.target.value)}
          placeholder="Username">
        </input>
        <br></br>
        <input 
          type = "password"
          id="password" 
          onChange={e => setInputPassword(e.target.value)}
          placeholder="Password">
        </input>
        <br></br>
        <input 
          type = "text"
          id="email" 
          onChange={e => setInputEmail(e.target.value)}
          placeholder="Email">
        </input>

      </form></center> 
        <br></br>
        <center>
        <button onClick={() => registerAccount()} id="registerButton">Register</button>
        </center>
      </div>
    )
  }

  export default Register;


 ***FLASK***
from flask import Flask, render_template, request, redirect, session, jsonify, flash, url_for
from backend_app.user import User
from flask_cors import CORS

dbpath = "./data/transit.db"

app = Flask(name)
CORS(app)

@app.route('/register', methods = ["POST"])
def register():

    error_message = "There was an error creating your account! Please try again."
    data = request.get_json()

    f_name = data['f_name']
    l_name = data['l_name']
    username = data['username']
    password = data['password']
    email = data['email']

    encrypted_password = encrypt_password(password)

    new_user = User(pk = None, username = username, encrypted_password = encrypted_password, f_name = f_name, l_name = l_name, balance = balance)

    try:
        new_user.save()
        print("Thanks for joining Transit Buddy!", new_user.username)
    except:
        time.sleep(5)
        return jsonify({"error": error_message})
    finally: 
        #should return user to loggedin screen
        return redirect("/homepage")
if name == "main":
    app.run(debug=True, port = 5000)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...