【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><inputid="email"type="email"name="email"placeholder="admin@example.com"value={email}onChange={e => setEmail(e.target.value)}/><label htmlFor="password">Password</label><inputid="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 && (<><HeadersetIsAdding={setIsAdding}setIsAuthenticated={setIsAuthenticated}/><Tableemployees={employees}handleEdit={handleEdit}handleDelete={handleDelete}/></>)}{isAdding && (<Addemployees={employees}setEmployees={setEmployees}setIsAdding={setIsAdding}/>)}{isEditing && (<Editemployees={employees}selectedEmployee={selectedEmployee}setEmployees={setEmployees}setIsEditing={setIsEditing}/>)}</div>);
};export default Dashboard;

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