在 React 前端（使用 Flask）顯示來自 SQL 數據庫的搜索結果

Question

我對 React 和 Flask 很陌生。 我正在嘗試構建一個響應表單，允許用戶使用 Flask 框架在 SQL 數據庫中搜索一個人。 我有不同的部分，但不確定如何讓用戶輸入搜索詞 - 任何幫助將不勝感激！ 先感謝您！

到目前為止，我的 app.py 看起來像這樣：

from flask import Flask, jsonify
import mysql.connector

app = Flask(__name__)
port = 5000

connection = mysql.connector.connect(
    host='localhost',
    database='database',
    user='*****',
    password='*****',
)


@app.get('/person')
def get_person(search_term):
    name_input = search_term
    cursor = connection.cursor(dictionary=True)
    cursor.execute("""SELECT name, date_of_birth, nationality, information FROM person_list WHERE ((SOUNDEX(%s) = SOUNDEX(name)) OR (names LIKE CONCAT('%', %s, '%')));""", (name_input, name_input))
    results = cursor.fetchall()
    cursor.close()
    response = jsonify(results)
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

app.run(port=port)

在我的 React 項目中，我有一個 api.ts 文件來連接到后端：

export async function getPerson() {
    const response = await fetch("http://127.0.0.1:5000/person");
    return await response.json();
}

搜索表單如下所示：

function Search(){
    return(
        <div>
            <div id="search">
            <header>
                <h1>Search Person</h1>
            </header>
            <div className="tab-container">
                    <ul className="tabs">
                        <a className="active">PERSON</a>
                    </ul>
                <div className="tab-content">
                    <div id="tabf0-1">
                            <form>
                                <div>
                                    <label >Name*</label>
                                    <i className="fas fa-user"></i>
                                    <input type="text" name="name" id="name"/>
                                    <i className="fas fa-exclamation-circle failure-icon"></i>
                                    <i className="far fa-check-circle success-icon"></i>
                                    <div className="error"></div>
                                    {/* Add for="dob"*/}
                                    <label>Date of Birth (optional)</label>
                                    <i className="fas fa-calendar"></i>
                                    <input type="dob" name="dob" id="dob" placeholder="YYYY-MM-DD or YYYY"/>
                                    <i className="fas fa-exclamation-circle failure-icon"></i>
                                    <i className="far fa-check-circle success-icon"></i>
                                    <div className="error"></div>
                                </div>
                                <button type="submit" id="submit">Search</button>
                            </form>
                        </div>
                    </div>
                </div>
                </div>
        </div>
    )
}

export default Search

在 PersonCard.tsx 組件中：

import Person from '../models/Person';

function PersonCard({id, name, nationality, information}: Person) {
  return (
  <div className="card mt-3">
    <div className="card-body">
      <p>{name}</p>
      <p>{id}</p>
      <p>{nationality}</p>
      <p>{information}</p>
    </div>
  </div>
  )
}

export default PersonCard;

最后在 People.tsx 中：

import React, { useState, useEffect } from 'react';
import { getPerson } from '../api/api';
import PersonCard from '../components/PersonCard';
import Person from '../models/Person';

function People() {
  const [people, setPeople] = useState<Person[] | null>(null);

  useEffect(function() {
    getPerson().then(data => setPeople(data));
  }, [searchTerm]);

  return (
    <main className="container pt-6 py-4">
      <div className="card">
        <div className="card-body">
          <h1 className="display-4">Users</h1>
          {people === null
            ? 'Loading...'
            : people.map(person => <PersonCard id={person.id} names={person.names} nationality={person.nationality} information={person.information} />)}
        </div>
      </div>
    </main>
  );
}

export default People;

如何從表單獲取用戶輸入到 app.py 以搜索數據庫？

Answer 1

每當您從前端單擊搜索按鈕時，都會獲取在該字段中輸入的值。 然后發出 API 請求。 然后通過 props 將數據傳遞給 PersonCard 組件。