React 增删查改 快速上手

已于 2024-07-28 14:52:33 修改
阅读量1.1k 收藏 11
点赞数 29
文章标签： react.js 前端 前端框架
于 2024-07-27 21:32:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_Coder2021/article/details/140740287
版权

前言

我将以学生管理作为例子，使用react框架和antd样式来实现增删查改的功能

gitee项目地址： React 增删查改: 使用react完成一个简单的学生管理增删查改项目icon-default.png?t=N7T8https://gitee.com/a-kodak-duck/react-crud.git

环境准备

关于后端

如果同学不会后端的语言，可以直接使用json-server来做

json-server 增删查改 快速上手

后续我将会补充springboot和flask的增删查改快速上手（也会把vue的增删查改写一遍）

关于数据库

json-server 的数据格式如下 gender=0为男，1为女

{
  "student": [
    {
      "id": "1",
      "name": "阿松大",
      "age": 23,
      "major": "软件",
      "gender": 0
    },
    {
      "id": "2",
      "name": "撒旦",
      "age": 23,
      "major": "计算机",
      "gender": 1
    }
  ]
}

新建react项目

npx create-react-app 项目名称

npx create-react-app student-view

然后进入项目文件夹，启动项目(是的，我们不需要npm install)

PS C:\Users\Desktop> cd student-view
PS C:\Users\Desktop\student-view> npm start

出现这个页面，我们就成功了

然后我们，清理一些不相关的文件和代码，清理完后是下面这个样子

我们只需要

App.js（组件，我们直接在这个文件里写学生管理的页面，App只是个名字，你可以直接改为Student.js，改完后不要忘记也要修改在index.js对应的名字噢） 

index.js（项目入口文件）

简化后，页面长这样

react是热部署的，您不需要重启应用和手动刷新 

添加相关依赖

Antd 样式组件 Ant Design of React - Ant Design

为了让我们页面好看些，我们可以引入antd样式组件，antd相比于element而言，更支持react

npm i antd

Axios 异步请求工具 axios中文网|axios API 中文文档 | axios

axios是一个异步请求工具，比起原生的AJAX和Promise更方便，更简洁，我们将使用axios来向后端发起异步请求

npm i axios

前端样式搭建

为了解决大家时间，我直接把样式代码贴到这里

新建一个app.css文件

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.App {
  padding: 5px;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header {
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
}
main {
  width: 100%;
  height: 90vh;
}
/* .ant-table-body {
  min-height: 72.5vh;
} */

App.js

import { Button, Input, Table, Tag } from 'antd';
import { useState } from 'react';
import './app.css';

function App() {
  // 表格参数的控制
  const columns = [
    {
      title: '学生姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '专业',
      dataIndex: 'major',
      key: 'major',
    },
    {
      title: '性别',
      key: 'gender',
      dataIndex: 'gender',
      render: (_,{ gender }) => (
        <span>{gender === 0 ? <Tag color='blue'>男</Tag>:<Tag color='orange'>女</Tag>}</span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (record)=>(
        <span>
          <Button style={{'backgroundColor':'orange','color':'white', 'marginRight':'5px'}}>编辑</Button>
          <Button type='primary' danger>删除</Button>
        </span>
      )
    },
  ];
  //假数据
  const data = [
    {
      id: '1',
      name: '张三',
      age: 32,
      major: '计算机',
      gender:0
    },
    {
      id: '2',
      name: '李四',
      age: 42,
      major: '软件工程',
      gender:0
    },
    {
      id: '3',
      name: '王五',
      age: 32,
      major: 'Sydney No. 1 Lake Park',
      gender:1
    },
  ];
  //批量选中行的id
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  //批量选中事件
  const rowSelection = {
    onChange: (newSelectedRowKeys) => {
      setSelectedRowKeys(newSelectedRowKeys);
    }
  };
  return (
    <div className="App">
      {/* 头部:操作栏 */}
      <header>
        <Button type="primary" danger disabled={selectedRowKeys.length === 0}>批量删除</Button>
        <Button type='primary' style={{'backgroundColor':'green','margin':'0 5px'}}>新增学生</Button>
        <Input.Search style={{'width':'200px'}} allowClear  placeholder="搜索学生姓名" enterButton />
      </header>
      {/* 主体:学生表格 */}
      <main>
        <Table 
        rowKey={(record)=>record.id} 
        pagination={{
          current: 1,
          pageSize: 10,
          total: 100
        }}
        rowSelection={rowSelection}  
        columns={columns} 
        dataSource={data} 
        scroll={{y:1000}}/>
      </main>
    </div>
  );
}

export default App;

 最终长这个样子（样式大家凑合着看哈，按需改）

统一封装请求接口

我们可以先把所有的api接口封装到一个文件里面，再在页面中调用方法，这样能方便管理

新建一个api.js

import axios from "axios";

const Server_Url = 'http://localhost:8080/student'

/**
 * 获取-学生列表信息
 * @param {*} params 带条件的分页查询参数
 * @returns 学生列表
 */
export const getStudentList = (params)=>axios.get(Server_Url,{
  params
})

/**
 * 获取-满足查询条件的所有学生列表信息（主要是为了分页查询的count数据）
 * @returns 学生列表
 */
export const getTotalStudent = (name)=>axios.get(Server_Url,name)

/**
 * 获取-学生个人信息
 * @param {*} id 学生id 
 * @returns 学生个人信息
 */
export const getStudent = (id) => axios.get(Server_Url+'/'+id)

/**
 * 删除-学生
 * @param {*} id 学生id
 * @returns 
 */
export const deleteStudent = (id) => axios.delete(Server_Url+'/'+id)

/**
 * 更新-学生信息
 * @param {*} id 学生id
 * @param {*} data 更新的学生信息
 * @returns 更新后的学生信息
 */
export const updateStudent = (id,data) => axios.put(Server_Url+'/'+id,data)

/**
 * 新建-学生信息
 * @param {*} data 学生信息
 * @returns 
 */
export const createStudent = (data) => axios.post(Server_Url,data)

好了，启动后端接口，我们正式开始

增删查改

带条件分页查询

首先，我们先在页面上获取数据

  //获取学生列表
  useEffect(()=>{
    async function handleGetStudentList(){
      const res = await getStudentList()
      console.log(res.data)
    }
    handleGetStudentList()
  },[])

获取成功

我们再来完善这块的代码，将请求参数携带进去，并把相应的数据绑定到页面上，还有分页器的分页动作绑定

//带条件的分页搜索参数
  const [params, setParams] = useState({
    _page:1,//第一页
    _per_page:2,//每页展示2页数据(json-server超过0.17就需要使用_per_page替换_limit)
    name:''//学生姓名
  })
  //获取学生列表
  const [studentList, setStudentList] = useState([])
  const [total, setTotal] = useState(0)
  useEffect(()=>{
    async function handleGetStudentList(){
      const res = await getStudentList(params)
      setTotal(res.data.items)
      setStudentList(res.data.data)
    }
    handleGetStudentList()
  },[params])//监听搜索参数的变化，如果变化了，就重新获取数据
  //分页器发生变化
  function handlePaginationChange(newPageNum,newPageSize){
    setParams({
      ...params,
      _page:newPageNum,
      _per_page:newPageSize
    })
  }
  return (
    <div className="App">
      {/* 头部:操作栏 */}
      <header>
        <Button type="primary" danger disabled={selectedRowKeys.length === 0}>批量删除</Button>
        <Button type='primary' style={{'backgroundColor':'green','margin':'0 5px'}}>新增学生</Button>
        <Input.Search 
          value={params.name}
          onChange={(e)=>setParams({...params, name:e.target.value})}
          style={{'width':'200px'}} 
          allowClear  
          placeholder="搜索学生姓名" 
          enterButton />
      </header>
      {/* 主体:学生表格 */}
      <main>
        <Table 
        rowKey={(record)=>record.id} 
        pagination={{
          current: params._page,
          pageSize: params._per_page,
          total:total,
          onChange:handlePaginationChange
        }}
        rowSelection={rowSelection}  
        columns={columns} 
        dataSource={studentList} 
        scroll={{y:1000}}/>
      </main>
    </div>
  );

注意：

name:'' //此处需要输入完整的学生姓名，很遗憾，即使我使用了name_like也无法实现模糊查询，因此只能特定查询完整的学生姓名了，如果有知道了，请告诉我一下，谢谢

添加学生

我们来新建一个弹窗，里面存一个学生数据表单

//控制窗口打开的函数
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [form] = Form.useForm();
  //打开新增窗口
  const handleOpenAddModal = ()=>{
    form.resetFields();//每次打开新增窗口时都要清空数据
    setIsModalOpen(true)
  }
  // 关闭弹窗
  const handleCancel = ()=>{
    setIsModalOpen(false)
  }
  // 提交表单
  const onFinish = async (val)=>{
    await createStudent(val)
    setParams({
      ...params
    })//重新获取数据
    message.success('新增学生成功')
    setIsModalOpen(false)
  }



{/* 新建/更新学生 */}
      <Modal 
        title="新增学生" 
        open={isModalOpen} 
        onCancel={handleCancel} 
        footer={[]}// 设置footer为空，去掉 取消 确定默认按钮
        >
        <Form
          form={form}//使用 Form 组件的 form 属性将 form 对象与 Form 组件进行关联
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 400 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="学生姓名"
            name="name"
            rules={[{ required: true, message: '请输入学生姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            rules={[{ required: true, message: '请输入年龄' }]}
          >
            <InputNumber  />
          </Form.Item>
          <Form.Item
            label="专业"
            name="major"
            rules={[{ required: true, message: '请输入专业' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="性别" name='gender' rules={[{required:true,message:'请选择性别'}]}>
            <Radio.Group>
              <Radio value={0}> 男 </Radio>
              <Radio value={1}> 女 </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确认提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>

效果图

更新学生

我们与新增学生同一个表单

首先设置操作列 record 是当前行的数据对象

    {
      title: '操作',
      key: 'action',
      render: (record)=>(
        <span>
          <Button 
            style={{'backgroundColor':'orange','color':'white', 'marginRight':'5px'}} 
            onClick={()=>handleOpenUpdateModal(record)}>
              编辑
          </Button>
          <Button type='primary' danger>删除</Button>
        </span>
      )
    },

然后在打开弹窗后，编辑更新表单数据

 //用一个变量来记录，当前是否是更新状态
  const [isUpdate,setIsUpdate] = useState(false)
  //打开编辑弹窗
  const handleOpenUpdateModal = (value) => {
    form.setFieldsValue(value)//将当前行的数据赋值给表单
    setIsUpdate(true)
    setIsModalOpen(true)
  }
  //编辑学生
  const handleUpdateStudent = async (value) => {
    await updateStudent(value.id,value)
    message.success('编辑成功')
    setIsModalOpen(false)
    setParams({
      ...params
    })
  }

 优化弹窗和表单，注意我添加了一个隐藏Form.Item来存储学生id

{/* 新建/更新学生 */}
      <Modal 
        title={isUpdate?'编辑学生':'新增学生'}
        open={isModalOpen} 
        onCancel={handleCancel} 
        footer={[]}// 设置footer为空，去掉 取消 确定默认按钮
        >
        <Form
          form={form}//使用 Form 组件的 form 属性将 form 对象与 Form 组件进行关联
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 400 }}
          initialValues={{ remember: true }}
          onFinish={isUpdate? handleUpdateStudent : handleCreateStudent}
          autoComplete="off"
        >
          <Form.Item name='id' hidden>
            <Input/>
          </Form.Item>
          <Form.Item
            label="学生姓名"
            name="name"
            rules={[{ required: true, message: '请输入学生姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            rules={[{ required: true, message: '请输入年龄' }]}
          >
            <InputNumber  />
          </Form.Item>
          <Form.Item
            label="专业"
            name="major"
            rules={[{ required: true, message: '请输入专业' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="性别" name='gender' rules={[{required:true,message:'请选择性别'}]}>
            <Radio.Group>
              <Radio value={0}> 男 </Radio>
              <Radio value={1}> 女 </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确认提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>

效果图

删除学生

单个删除

首先，为了避免用户手滑误删，我们用个popover包裹一下删除按钮，进行二次确认

{
      title: '操作',
      key: 'action',
      render: (record)=>(
        <span>
          <Button 
            style={{'backgroundColor':'orange','color':'white', 'marginRight':'5px'}} 
            onClick={()=>handleOpenUpdateModal(record)}>
              编辑
          </Button>
          <Popover 
            title='警告！您确定要删除吗？' 
            content={
                <Button
                  onClick={() => handleDeleteStudent(record.id)}
                  type='primary' danger
                  >
                  确定
                </Button>
              }>
            <Button type='primary' danger>删除</Button>
          </Popover>
        </span>
      )
    },

然后就可以编写删除的逻辑了

  //删除学生
  const handleDeleteStudent = async (id) => {
    await deleteStudent(id)
    message.success('删除成功')
    setParams({
      ...params
    })
  }

效果如图

批量删除 

还记得最开始写的批量选中事件吗，我们可以直接这些得到的id数组使用fori遍历循环，每个都调用一次删除方法就可以了

首先我们还是需要对批量删除按钮进行二次确认警告的设置

<Popover 
   trigger="click" //注意要改为点击模式，默认为hover，但是如果是hover的话，批量按钮即使是disable也会弹出来确认框
   title='警告！您确定要删除这些学生吗？' 
   content={
     <Button
     onClick={handleBatchDelete}
     type='primary' danger
      >
      确定
      </Button>
   }>
     <Button type="primary" danger disabled={selectedRowKeys.length === 0} >批量删除</Button>
</Popover>

 然后就是逻辑处理

  //批量删除
  const handleBatchDelete = ()=>{
    for(let i = 0; i < selectedRowKeys.length; i++){
      deleteStudent(selectedRowKeys[i])
    }
    setParams({
      ...params
    })
  }

效果图

完结

以上所有的增删查改就做完了

gitee代码也做了同步更新

React 增删查改: 使用react完成一个简单的学生管理增删查改项目icon-default.png?t=N7T8https://gitee.com/a-kodak-duck/react-crud.git

前端开发洋洋
关注
从零开始：打造功能齐全的留言板——HTML+CSS+JavaScript 完整增删查改实例|新手必看！一步步实现留言板应用，附完整源码|快速上手：用 Vue 构建你的第一个留言板应用，完整代码教程
南北极之间
09-22 484
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
新手必看：从零开始构建实用的表单增删查改（CRUD）系统超全源码！手把手教你实现炫酷的登录注册页面大学生期末大作业指南：HTML/CSS/JavaScript 表单实例轻松实现表单 CRUD：完
最新发布
南北极之间
10-01 821
新手必看：从零开始构建实用的表单增删查改（CRUD）系统 超全源码！手把手教你实现炫酷的登录注册页面 大学生期末大作业指南：HTML/CSS/JavaScript 表单实例 轻松实现表单 CRUD：完整项目源码与教程 前端新手友好：打造渐变背景的登录注册界面 一步步带你实现登录、注册、找回密码全流程 实用教程：无需框架，实现表单的增删查改功能 完整代码分享：适合新手的前端表单项目 从零搭建前端 CRUD 系统，附详细解释与源码 打造美观实用的登录注册页面，新手也能轻松上手
react完整版Todolist，增删改查
qq_38980678的博客
05-30 374
应用代码如下 import React from "react"; class Todolist extends React.Component { constructor(props) { super(props) this.state = { list: [{ id: 11, context: 'aaa', ischecked: false,
react实例-增删改查 人员管理系统
01-09
react实例-增删改查 人员管理系统 有编译后的可直接运行的html文件，也有react组件后的js文件
【React】单纯使用React实现增删改查
qq_46105844的博客
08-04 4641
这篇文章适合初学者，简单利用 table 实现了增删改查功能。 这次的代码直接导入即可使用，简单上手，加油~~~~~~今天的内容就到这里啦，之后学到的会继续分享。
react增删改查
Cupid
12-17 2757
react增删改查 import React, { Component } from 'react' import axios from 'axios' export default class List extends Component { constructor() { super() this.state = { l...
react实现列表增删改查的小demo(class组件版)
m0_54741495的博客
10-30 629
react的语法上就是比vue麻烦不少,既然要开手动挡,那就开吧,一个基础的demo。
React第一个示例（简单增删改查的实现）
lqiqil的博客
02-02 466
.
Vue.js + Element UI 打造图书管理系统：完整源码与实用教程|新手友好：用 Vue.js 和 Element UI 构建图书管理系统，详细教程分享|快速上手|大学生期末大作业|crud
南北极之间
09-28 559
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
一步步搭建会员积分系统：前端新手的必学项目。用 Vue 实现完整的积分管理页面，轻松上手，包含 HTML、CSS 和 JavaScript 源码，适合所有前端开发新手，带你打造一个实用的积分兑换系统，
南北极之间
09-25 1225
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
React DVA+Asp.net Web API+EF6实现增删改查
08-29
React DVA+Asp.net Web API+EF6实现增删改查 　
react-使用antd实现表格增删编辑分别基于react162和react163实现两种方式
08-15
使用antd实现表格增、删、编辑，分别基于react16.2和react16.3实现两种方式
umi+react+antd 增删改查
10-20
umi+react+antd 增删改查
基于React实现表单数据的添加和删除详解
08-31
主要给大家介绍了基于React实现表单数据的添加和删除的方法，文中给出了详细的示例供大家参考，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
「Vue + Element UI 业主表单实例」：新手也能上手的完整源代码教程「从零开始」用 Vue.js 和 Element UI 实现超实用的表单管理系统「全程演示」如何用 Vue.js 构建
南北极之间
09-26 1224
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
react的TodoList增删改
weixin_30553065的博客
10-31 406
这几天需要用react写一个TodoList完成增、删、改、查，到菜鸟教程看了下，又到慕课网上学了下基础内容，本来打算通过实战视频学一下的，结果发现，里边也是用到好多前端基础， 慕课网这样要求的：1.需要有一定的JS，CSS前端基础。 2.熟悉Sass和Compass 3.了解Yeoman、Grunt、Webpack 4.了解CommonJS、NodeJS。看完这几点的时候，...
前端增删改查（react+ant-d）
xyfwang的博客
12-20 292
当我点击这个搜素的时候我会运用一个 from表单，将这个from表单填充到一个对象中，当我点击搜素，我会向后端传递一个对象，然后我们就会向后端发送一个请求，但是我们需要点击的时候将这个数据刷新页面，当我们点击这个重置按钮的时候我们会向后端发送请求并且把这个搜素的问题重置。函数，在这个函数中，我们根据是否有选中的用户判断是新增还是编辑，然后更新用户列表并关闭模态框。里边的数据会获取到当前这行的全部数据，x.id就会发送给后端，这样的话就实现单个删除的操作。中，用户可以输入姓名和邮箱，并点击提交按钮。
入门react简易TodoList实现增删改查
weixin_46031235的博客
12-24 953
TODOList，数据增删改查的操作 操作思路 UI界面怎么实现；UI（User Interface） 功能代码实现： （1）添加数据 （2）查询数据，展示 （3）删除数据 （4）修改数据 数据持久化操作 localStorage.setItem(‘key’,value) var value = localStorage.getItem(‘key’) 修改state属性 this....
react 增删查改
12-07
React 是一个流行的 JavaScript 库，用于构建用户界面。虽然 React 本身只关注 UI 的展示，但它可以与其他库或框架搭配使用来实现增删查改的功能。 首先是增加数据的功能。在 React 中，我们可以使用状态（state）来存储和管理数据。通过创建一个初始状态（initial state），我们可以使用 this.setState() 方法来更新状态。例如，当用户点击“添加”按钮时，我们可以通过在状态中添加一个新的数据项来实现数据的增加。 其次是删除数据的功能。同样，我们可以使用状态来存储数据，并通过 this.setState() 方法来更新状态。当用户点击“删除”按钮时，我们可以通过过滤状态中的数据项来实现数据的删除。可以使用 Array.filter() 方法来实现过滤。 第三是查找数据的功能。在 React 中，我们可以使用状态来存储数据，并通过 this.setState() 方法来更新状态。当用户输入相应的查询条件时，我们可以使用 Array.filter() 方法来过滤状态中的数据项，并根据查询条件来显示相应的数据。 最后是修改数据的功能。与增加和删除数据类似，我们可以使用状态来存储数据，并通过 this.setState() 方法来更新状态。当用户点击“编辑”按钮时，我们可以根据相应的索引或唯一标识符找到需要修改的数据项，并将其更新为用户输入的新数据。 总之，React 提供了一种简单而强大的方式来实现增删查改功能。通过利用状态管理数据并使用相应的方法来更新状态，我们可以轻松地实现这些功能，从而提供一个交互式的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值