使用 axios Get 从 MYSQL 获取特定用户

Question

我正处于项目的最后阶段，我正在使用 react js 前端和 express 和 mysql，除了最后一步之外，我的一切正常，我有一个输入字段应该允许用户输入电子邮件或 phone 号码并点击搜索，假设搜索数据库并显示该用户的信息，当你点击搜索时我有它，它显示数据库中的所有数据，我需要它搜索并找到用户请求的数据，我找不到任何文档。这是我的前端代码。

import React, { useState, useEffect } from "react";
import "./Home.css";
import BattleAxe from "./battleaxes.png";
import { Link } from "react-router-dom";
import axios from "axios";

export default function Home() {
  const [searchResults, setSearchResults] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.get("http://localhost:3001/api/get").then((response) => {
      setSearchResults(response.data);
    });
  };

  return (
    <div className="home-container">
      <img src={BattleAxe} alt="" className="axe-image" />
      <div>
        <h2 className="heading"> Welcome to Battle Axes!</h2>
      </div>
      <div className="split">
        <div className="newc">
          <p className="info1">
            <strong>First Timer?</strong>
          </p>
          <p className="info3">
            Click the 'New Customer'
            <br />
            button to get started.
          </p>
          <Link to="/NewCustomer">
            <button className="new-customer">New Customer</button>
          </Link>
        </div>
        <div className="returnc">
          <h3 className="info2">Returning Customer?</h3>
          <p className="info4">
            Enter your Email or Phone
            <br />
            below to find your acount.
          </p>
          <form onSubmit={handleSubmit}>
            <input type="text" className="text-field" />
            <button className="search-btn">Search</button>
          </form>
        </div>
      </div>
      <div className="search-results">
        {searchResults.map((val) => {
          return (
            <p className="srlist">
              {val.firstName} | {val.lastName}
              <br />
              <br />
              {val.email}
              <br />
              <br />
              {val.phone}
              <Link to="/WaiverForm">
                <button className="sel-btn">Select</button>
              </Link>
            </p>
          );
        })}
      </div>
    </div>
  );
}

这是我的后端。

const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const cors = require("cors");
const { response } = require("express");

const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "Killer12!",
  database: "cloneDataBase",
});

app.use(cors());

app.use(express.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res) => {
  const sqlGet = "SELECT * FROM customer_registration";
  db.query(sqlGet, (error, result) => {
    res.send(result);
  });
});

app.post("/api/post", (req, res) => {
  const { firstName, lastName, email, phone, nickName } = req.body;
  const sqlInsert =
    "INSERT INTO customer_registration (firstName, lastName, email, phone, nickName) VALUES (?,?,?,?,?)";
  db.query(
    sqlInsert,
    [firstName, lastName, email, phone, nickName],
    (error, result) => {
      if (error) {
        console.log(error);
        res.send("False");
      }
    }
  );
  res.send("Customer created");
});

app.post("/api/waiver", (req, res) => {
  const userSignature = req.body.userSignature;
  const sqlInsert = "INSERT INTO waiver_signature (userSignature) VALUES (?)";
  db.query(sqlInsert, userSignature, (err, result) => {
    if (err) {
      console.log(err);
    }
  });
  res.send("Signature created");
});

app.listen(3001, () => {
  console.log("running on port 3001");
});

Answer 1

您可以创建一个端点，您可以在其中接收查询参数 email 或 phone number

app.get("/api/get", (req, res) => {
    let email = req.query.email ?? '';
    let phone = req.query.phone ?? '';

  const sqlGet = "SELECT * FROM customer_registration WHERE email = ? OR phone = ?";
  db.query(sqlGet, [email, phone], (error, result) => {
    res.send(result);
  });
});

在您的前端，您可以在 query params 中发送数据，您可以像下面这样插入 email 和 phone

axios.get("http://localhost:3001/api/get", { params: { email: email, phone: phone} })

使用 axios Get 从 MYSQL 获取特定用户

Getting a specific user from MYSQL with axios Get

mysql

get

node.js

reactjs

axios