【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 = 'admin@example.com';
const adminPassword = 'qwerty';

复制代码

const [email, setEmail] = useState('admin@example.com');
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="admin@example.com"
        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;

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