【React】(推荐项目)一个用 React 构建的 CRUD 应用程序

推荐项目：CRUD 应用示例

在本篇文章中，我想向大家推荐一个非常实用的项目：CRUD 应用示例。这个项目展示了如何使用现代技术栈创建一个基础的增删改查（CRUD）应用，非常适合用于学习和实践后端开发技能。

适用场景

通过这个示例，您可以掌握 CRUD 操作的完整流程，并了解如何将前后端整合在一起构建一个完整的应用。

无论您是后端开发新手，还是希望进一步巩固自己的开发技能，这个项目都可以作为一个很好的参考示例。

项目链接

GitHub 项目地址：https://github.com/SafdarJamal/crud-app

项目截图

• 登录界面
  
• 主页
  
• 编辑界面

部分代码

• 登录

  import React, { useState } from 'react';
  import Swal from 'sweetalert2';

  const Login = ({ setIsAuthenticated }) => {
  const adminEmail = '[email protected]';
  const adminPassword = 'qwerty';

  const [email, setEmail] = useState('[email protected]');
  const [password, setPassword] = useState('qwerty');
  
  const handleLogin = e => {
    e.preventDefault();
  
    if (email === adminEmail && password === adminPassword) {
      Swal.fire({
        timer: 1500,
        showConfirmButton: false,
        willOpen: () => {
          Swal.showLoading();
        },
        willClose: () => {
          localStorage.setItem('is_authenticated', true);
          setIsAuthenticated(true);
  
          Swal.fire({
            icon: 'success',
            title: 'Successfully logged in!',
            showConfirmButton: false,
            timer: 1500,
          });
        },
      });
    } else {
      Swal.fire({
        timer: 1500,
        showConfirmButton: false,
        willOpen: () => {
          Swal.showLoading();
        },
        willClose: () => {
          Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: 'Incorrect email or password.',
            showConfirmButton: true,
          });
        },
      });
    }
  };
  
  return (
    <div className="small-container">
      <form onSubmit={handleLogin}>
        <h1>Admin Login</h1>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          name="email"
          placeholder="[email protected]"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="qwerty"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
        <input style={{ marginTop: '12px' }} type="submit" value="Login" />
      </form>
    </div>
  );

  };

  export default Login;

• 主页

  import React, { useState, useEffect } from 'react';
  import Swal from 'sweetalert2';

  import Header from './Header';
  import Table from './Table';
  import Add from './Add';
  import Edit from './Edit';

  import { employeesData } from '../../data';

  const Dashboard = ({ setIsAuthenticated }) => {
  const [employees, setEmployees] = useState(employeesData);
  const [selectedEmployee, setSelectedEmployee] = useState(null);
  const [isAdding, setIsAdding] = useState(false);
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('employees_data'));
    if (data !== null && Object.keys(data).length !== 0) setEmployees(data);
  }, []);
  
  const handleEdit = id => {
    const [employee] = employees.filter(employee => employee.id === id);
  
    setSelectedEmployee(employee);
    setIsEditing(true);
  };
  
  const handleDelete = id => {
    Swal.fire({
      icon: 'warning',
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel!',
    }).then(result => {
      if (result.value) {
        const [employee] = employees.filter(employee => employee.id === id);
  
        Swal.fire({
          icon: 'success',
          title: 'Deleted!',
          text: `${employee.firstName} ${employee.lastName}'s data has been deleted.`,
          showConfirmButton: false,
          timer: 1500,
        });
  
        const employeesCopy = employees.filter(employee => employee.id !== id);
        localStorage.setItem('employees_data', JSON.stringify(employeesCopy));
        setEmployees(employeesCopy);
      }
    });
  };
  
  return (
    <div className="container">
      {!isAdding && !isEditing && (
        <>
          <Header
            setIsAdding={setIsAdding}
            setIsAuthenticated={setIsAuthenticated}
          />
          <Table
            employees={employees}
            handleEdit={handleEdit}
            handleDelete={handleDelete}
          />
        </>
      )}
      {isAdding && (
        <Add
          employees={employees}
          setEmployees={setEmployees}
          setIsAdding={setIsAdding}
        />
      )}
      {isEditing && (
        <Edit
          employees={employees}
          selectedEmployee={selectedEmployee}
          setEmployees={setEmployees}
          setIsEditing={setIsEditing}
        />
      )}
    </div>
  );

  };

  export default Dashboard;

---

如果你觉得这篇文章对你有帮助，别忘了点赞和关注，更多技术干货敬请期待！