增删改查

import React, { useState } from "react";
import axios from "axios";
import './App.css';

function App() {
  // 存储后端返回的学生列表
  const [studentList, setStudentList] = useState([])
  // 存储后端返回的学生数据
  const [student, setStudent] = useState({
    id: '',
    sn: '',
    username: '',
    clazzId: '',
    sex: '',
    mobile: '',
    qq: '',
    photo: ''
  })
  // 控制表格显示
  const [showDateFlag, setShowDateFlag] = useState(true)
  // 控制更新表单显示
  const [showUpdateFormFlag, setShowUpdateFormFlag] = useState(false)
  // 控制新增表单显示
  const [showPostFormFlag,setShowPostFormFlag] = useState(false)
  // 存储搜索框输入的学生姓名
  const [username, setUsername] = useState('')
  // 存储搜索框输入的班级Id
  const [clazzId, setClazzId] = useState('')
  
  // 处理姓名输入框变化
  const handleInputChange = (event) => {
    // 更新姓名的输入框值
    setUsername(event.target.value)
  }

  // 处理班级id输入框变化
  const handleClazzIdChange = (event) => {
    setClazzId(event.target.value)
  }

  // 点击检索按钮 从后端获取数据  
  const getStudentList = async () => {
    let url = 'http://localhost:8080/student/select?'
    // 根据输入的查询条件生成查询的url
    if (username) {
      url += `username=${username}&`
    }
    if (clazzId) {
      url += `clazzId=${clazzId}&`
    }
    if (!username && !clazzId) {
      url = 'http://localhost:8080/student/select'
    }
    try {
      const response = await axios.get(url);
      // 更新学生列表数据
      setStudentList(response.data)
      // 显示数据
      setShowDateFlag(true)
    } catch (error) {
      console.error("获取数据失败", error)
      alert("获取数据失败，请稍后重试")
    }
  }

  // 
  const postStudent =() =>{
    setStudent({
      id: '',
      sn: '',
      username: '',
      clazzId: '',
      sex: '',
      mobile: '',
      qq: '',
      photo: ''
    });
    setShowPostFormFlag(true);
  }

  // 删除数据
  const handleDelete = async (id) => {
    try {
      // 发送DELETE请求，将id放入路径中
      const response = await axios.delete(`http://localhost:8080/student/deleteById/${id}`);
      if (response.status === 200) {
        // 删除成功后，更新前端列表
        setStudentList(studentList.filter(student => student.id !== id));
        alert("删除成功");
      }
    } catch (error) {
      console.error("删除失败", error);
      alert("删除失败，请稍后重试");
    }
  }

  // 
  const handleUpdate = async (id) => {
    setShowUpdateFormFlag(true)
    try {
      const response = await axios.get(`http://localhost:8080/student/selectById/${id}`)
      console.log(response)
      setStudent(response.data)
    } catch (error) {
      console.error("删除失败", error);
      alert("删除失败，请稍后重试");
    }
  }

  const handleCancleUpdate = () => {
    setShowUpdateFormFlag(false)
  }

  const handleCanclePost = () =>{
    setShowPostFormFlag(false)
  }

  const handleSave = async () => {
    try {
      axios.put(`http://localhost:8080/student/update`, student)
      setShowUpdateFormFlag(false)
      alert("更新が成功した")

      // 直接展示更新后的数据
      getStudentList()
    } catch (error) {
      console.error("更新失败", error);
      alert("更新失败，请稍后重试");
    }
  }

  // 新增
  const handlePostSave = async() =>{
      try{
        await axios.post(`http://localhost:8080/student/insert`, student);
        setShowPostFormFlag(false);
        alert("追加が成功した")
        getStudentList()
      }catch(error){
        console.error("追加失败",error);
        alert("追加失败，请稍后重试");
      }
  }

  // 
  const handleOnChange = (e) => {
    const elementName = e.target.name;
    if (elementName == "username") {
      setStudent({
        ...student,
        username: e.target.value
      })
    } else if (elementName == "clazzId") {
      setStudent({
        ...student,
        clazzId: e.target.value
      })
    } else if (elementName == "sex") {
      setStudent({
        ...student,
        sex: e.target.value
      })
    } else if (elementName == "phone") {
      setStudent({
        ...student,
        mobile: e.target.value
      })
    } else if (elementName == "qq") {
      setStudent({
        ...student,
        qq: e.target.value
      })
    } else if (elementName == "photo") {
      setStudent({
        ...student,
        photo: e.target.value
      })
    }
  }

  const handlePostOnChange = (e) => {
    const elementName = e.target.name;
    if(elementName == "id"){
      setStudent({
        ...student,
        id: e.target.value
      })
    }else if(elementName == "sn"){
      setStudent({
        ...student,
        sn: e.target.value
      })
    }else if (elementName == "username") {
      setStudent({
        ...student,
        username: e.target.value
      })
    } else if (elementName == "clazzId") {
      setStudent({
        ...student,
        clazzId: e.target.value
      })
    } else if (elementName == "sex") {
      setStudent({
        ...student,
        sex: e.target.value
      })
    } else if (elementName == "phone") {
      setStudent({
        ...student,
        mobile: e.target.value
      })
    } else if (elementName == "qq") {
      setStudent({
        ...student,
        qq: e.target.value
      })
    } else if (elementName == "photo") {
      setStudent({
        ...student,
        photo: e.target.value
      })
    }
  }
  
  // 点击重置按钮，清空表格
  const handleReset = () => {
    setStudentList([]);
    setShowDateFlag(false);
    // 清空输入框
    setUsername('')
    setClazzId('')
  }

  // 姓名输入框绑定输入值和事件 绑定输入框的值 输入框变化时更新username
  return (
    <div className="App">

      名前:<input style={{ marginRight: '10px' }} type="text" value={username} onChange={handleInputChange} placeholder="名前を入力してください"></input>
      クラス：<input style={{ marginRight: '10px' }} type="text" value={clazzId} onChange={handleClazzIdChange} placeholder="クラスIDを入力してください"></input>
      <button style={{ marginRight: '10px' }} onClick={getStudentList}>検索</button>
      <button style={{ marginRight: '10px' }} onClick={postStudent}>追加</button>
      <button style={{ marginRight: '10px' }} onClick={handleReset}>リセット</button>

      {showDateFlag && (
        <table border="1px" cellSpacing="0" width="800px">
          <thead>
            <tr>
              <th>ID</th>
              <th>学生番号</th>
              <th>ユーザーネーム</th>
              <th>クラスID</th>
              <th>性別</th>
              <th>電話番号</th>
              <th>QQ</th>
              <th>写真</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>

            {studentList.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.sn}</td>
                <td>{item.username}</td>
                <td>{item.clazzId}</td>
                <td>{item.sex}</td>
                <td>{item.mobile}</td>
                <td>{item.qq}</td>
                <td>{item.photo}</td>
                <td>
                  <button style={{ marginRight: '10px' }} onClick={() => handleDelete(item.id)}>削除</button>
                  <button onClick={() => handleUpdate(item.id)}>更新</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
      {showUpdateFormFlag && (
        <div>
          ID:<input type="text" value={student.id} readOnly></input> <br></br>
          学生番号:<input type="text" value={student.sn} readOnly></input> <br></br>
          ユーザーネーム:<input name="username" type="text" value={student.username} onChange={handleOnChange}></input> <br></br>
          クラスID:<input name="clazzId" type="text" value={student.clazzId} onChange={handleOnChange}></input> <br></br>
          性別:<input name="sex" type="text" value={student.sex} onChange={handleOnChange}></input> <br></br>
          電話番号:<input name="phone" type="text" value={student.mobile} onChange={handleOnChange}></input> <br></br>
          QQ:<input name="qq" type="text" value={student.qq} onChange={handleOnChange}></input> <br></br>
          写真:<input name="photo" type="text" value={student.photo} onChange={handleOnChange}></input> <br></br>
          <button onClick={handleCancleUpdate}>キャンセル</button>
          <button onClick={handleSave}>保存</button>
        </div>)}
      {showPostFormFlag && (
         <div>
          ID:<input name="id"  type="text" value={student.id} onChange={handlePostOnChange}></input> <br></br>
          学生番号:<input name="sn" type="text" value={student.sn} onChange={handlePostOnChange}></input> <br></br>
          ユーザーネーム:<input name="username"  type="text" value={student.username} onChange={handlePostOnChange}></input> <br></br>
          クラスID:<input name="clazzId" type="text" value={student.clazzId} onChange={handlePostOnChange}></input> <br></br>
          性別:<input name="sex"  type="text" value={student.sex} onChange={handlePostOnChange}></input> <br></br>
          電話番号:<input name="phone" type="text" value={student.mobile} onChange={handlePostOnChange}></input> <br></br>
          QQ:<input name="qq"  type="text" value={student.qq} onChange={handlePostOnChange}></input> <br></br>
          写真:<input name="photo"  type="text" value={student.photo} onChange={handlePostOnChange}></input> <br></br>
          <button onClick={handleCanclePost}>キャンセル</button>
          <button onClick={handlePostSave}>保存</button>
         </div>
      )}
    </div>
  );
}
export default App;