【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;


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

相关推荐
小曲曲41 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript