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


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

相关推荐
熊的猫33 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull5 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山10 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js