為什么我的 python 服務器將 post 請求數據保存到數據庫中為“0”？

Question

我正在開發一個全棧應用程序（react/flask）。 我正在嘗試通過來自客戶端的 POST 請求發送表單數據，但數據在數據庫中保存為“0”。 反應代碼工作正常，但發送的數據保存為“0”。 你們能幫我嗎？

這是 flask 代碼：

from flask import Flask, jsonify, request
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import Column, String
import os
from flask_marshmallow import Marshmallow



app = Flask(__name__)
basedir = os.path.abspath(os.path.dirname(__file__))
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'hi.db')
app.config['JWT_SECRET_KEY'] = 'super-secret'  # change this IRL


db = SQLAlchemy(app)
ma = Marshmallow(app)


@app.route('/', methods=['GET','POST'])
def welcome():
    email = request.form.get('email', False)
    test = List.query.filter_by(email=email).first()
    if test and request.method =="POST":
        return jsonify(message='This email already exists. Please enter a different email.'), 409
    else:
        name = request.form.get('name', False)
        user = List(name=name, email=email)
        db.session.add(user)
        db.session.commit()
        return jsonify(message="Thank you for Joining my app waiting list. we promise we won't spam your email!"), 201


# database models
class List(db.Model):
    id = Column(db.Integer, primary_key=True)
    email = Column(String(120), unique=True, nullable=False)
    name = Column(String(50), nullable=False)


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

這是反應代碼：

import React, { useState } from "react";
import { Form, Button } from 'react-bootstrap'

export default function Users() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  return (
    <div>
      <Form>
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control 
            type="email"
            // name= "email" 
            placeholder="Enter email"
            value={email}
            onChange={e => setEmail(e.target.value)} />
          <Form.Text className="text-muted">
            We'll never share your email with anyone else.
          </Form.Text>
        </Form.Group>

        <Form.Group controlId="formBasicPassword">
          <Form.Label>Name</Form.Label>
          <Form.Control 
            type="text"
            // name="name" 
            placeholder="Enter Your Name"
            value={name}
            onChange={e => setName(e.target.value)} 
            />
        </Form.Group>
      </Form>
      <Button 
        variant="primary" 
        type="submit"
        onClick={async () => {
          const credential = { email, name };
          const response = await fetch("/", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            body: credential
          });

          if (response.ok) {
            console.log("response worked!");
            console.log("body", credential)
          }
        }}>
          Submit
      </Button>
    </div>
  )
}

這是來自 Db 客戶端的屏幕截圖

Answer 1

您的請求正文類型為 JSON 但您的 Content-Type header 設置為“application/x-www-form-urlencoded”，因此您的請求正文應為 FormData: Z5E056C500A1C4Borg6A7110/BADEmo0d8文檔/Web/API/FormData