推荐项目: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;
如果你觉得这篇文章对你有帮助,别忘了点赞和关注,更多技术干货敬请期待!