❤React体系17-antd的使用（增删改查初）

站长

2024年06月08日 17:50 · 阅读数 56

❤React体系17-antd的使用(本文主要基于最新的5.0以上 -- 我使用的是5.17.0 )（增删改查初）

1、认识

如果说饿了么是vue界的扛把子，那你应该知道谁是React界的，没错，就是antd

官网地址ant-design.antgroup.com/index-cn

https://ant-design.antgroup.com/index-cn

国内镜像地址ant-design.antgroup.com/components/…

https://ant-design.antgroup.com/components/overview-cn/

2、安装使用

安装

yarn add antd

在项目根目录之中引入

import { Button, Space, DatePicker, version } from 'antd';  //antd ui库

使用 Ant Design 组件

import React from 'react';
import { Button } from 'antd';

function MyButton() {
  return (
    <Button type="primary">Click me</Button>
  );
}

export default MyButton;

使用效果图如下图所示

❤React体系17-antd的使用（增删改查初）

3、antd增删改查布局

接下来使用antd 实现一下我们用户部分的增删改查

头部是一个搜索部分和一个按钮

import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Radio, Table, Space, Tag } from 'antd';

type LayoutType = Parameters<typeof Form>[0]['layout'];

const User: React.FC = () => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>('horizontal'); //inline

  const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
    setFormLayout(layout);
  };

  const formItemLayout =
    formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;

  const buttonItemLayout =
    formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;

  return (
    <>
      <div className="pageuser">
        <div className="compage userpage">
          <div className="comback">
            <Form
              {...formItemLayout}
              layout={formLayout}
              form={form}
              initialValues={{ layout: formLayout }}
              onValuesChange={onFormLayoutChange}
              style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
            >
              <Form.Item label="Field A">
                <Input placeholder="input placeholder" />
              </Form.Item>
              <Form.Item label="Field B">
                <Input placeholder="input placeholder" />
              </Form.Item>
              <Form.Item {...buttonItemLayout}>
                <Button type="primary">Submit</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>

    </>

  );
};
export default User;

中间是一个表格


const dataSource = [
{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号',
},
{
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号',
},
];


const columns = [
{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
},
{
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
},
{
  title: '住址',
  dataIndex: 'address',
  key: 'address',
},
];


<div className="comback">
  <Table dataSource={dataSource} columns={columns} />;
</div>

底部是一个分页

分页自动在表格之中

看一下我们的效果

❤React体系17-antd的使用（增删改查初）

调整表格布局的方式formLayout这个属性从horizontal => inline ❤React体系17-antd的使用（增删改查初）

4、查询功能

（1）渲染查询

引入查询接口在点击查询的时候，调用我们的查询接口将接口数据赋值给表单

import { getUser } from '@/api/common/comon';

// 获取用户
 const  getUserList = () =>{
  let api = "http://localhost:8888/api/user";
  getUser().then(res => {
    console.log(res, 'getUser');
    setTables(res.data);
    console.log(tables,'tables');
  })
}

之前我们的写法都是getUser().then(res => {}) 这种的方式，但是我们点击以后会发现第一次点击之后无法拿到table的数据，反而第二次再次点击才能拿到。

❤React体系17-antd的使用（增删改查初）

（2）更改优化一下我们的写法（使用async await）：

// 获取用户--优化后
const getUserList = async () => {
  try {
    const res = await getUser(); // 假设getUser函数能够正确返回Promise对象
    console.log(res, 'getUser');
    setTables(res.data);
    console.log(res.data, 'tables'); // 更新后的数据通过res.data获取
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

在刚刚开始加载的时候就调用一次

import React, { useState, useRef,useEffect } from 'react';
useEffect(() => {
    getUserList(); // 在组件挂载时调用获取数据的方法
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

❤React体系17-antd的使用（增删改查初）

可以看出我们已经在这里拿到了相应的数据

（3）渲染数据


 const [tables, setTables] = useState([]);
 
  // 获取用户--优化后
  const getUserList = async () => {
    try {
      const res = await getUser(); // 假设getUser函数能够正确返回Promise对象
      // console.log(res, 'getUser');
      setTables(res.data);
      console.log(res.data, 'tables'); // 更新后的数据通过res.data获取
    } catch (error) {
      // console.error('Error fetching data:', error);
    }
}

<Table dataSource={tables} columns={columns} />

（4）优化表格

优化一下我们的性别，改成不同状态渲染不同性别

规则：1 男 2 女

 
javascriptCopy Code
{
  title: '性别',
  dataIndex: 'sex',
  key: 'sex',
  render: (text) => {
    return text === 1 ? '男' : '女';
  },
}
 
//优化一下
{
  title: '性别',
  dataIndex: 'sex',
  key: 'sex',
  render: (text) => {
    return text === 1 ? (
        <Tag color='green' key={text}>
          {text==1?'男':'女'}
        </Tag>
      ): (
        <Tag color='red' key={text}>
          {text==1?'男':'女'}
        </Tag>
      );
  },
},

优化的效果： ❤React体系17-antd的使用（增删改查初）

然后优化一下我们人员的账号状态

{
      title: '用户状态',
      dataIndex: 'state',
      key: 'state',
      render: (state) => {
        return state == 1 ? (
            <Tag color='green' key={state}>
              正常使用
            </Tag>
          ): (
            <Tag color='red' key={state}>
              异常 
            </Tag>
          );
      },
},

❤React体系17-antd的使用（增删改查初）

（4）优化查询

  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [phone, setPhone] = useState('');
  
  
  
  const handleSearch = async () => {
    let params={
      name: name,
      age: age,
    };
    try {
      const response = await getUser(params);
      setResult(response.data);
    } catch (error) {
       console.log('查询失败，请重试！');
    }
  };

看看查询出来的效果

❤React体系17-antd的使用（增删改查初）

5、增加功能

导入添加按钮部分

import {  Button,Form, Input, Radio, Table, Space, Tag, message, Modal, Popconfirm } from 'antd';


const handleAdd = () => {
    setModalVisible(true);
};

添加弹窗部分

const [modalVisible, setModalVisible] = useState(false);

<Modal
        visible={modalVisible}
        title="编辑信息"
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setModalVisible(false)}>
            取消
          </Button>,
          <Button key="save" type="primary" onClick={() => form.submit()}>
            保存
          </Button>,
        ]}
      >
        <Form form={form} onFinish={handleSave}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item name="name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item name="age" label="年龄">
            <Input />
          </Form.Item>
        </Form>
</Modal>

增加的提交部分

  const handleSave = async (values) => {
    try {
        await axios.post(apiurl,values).then(res => {
            console.log(res, '增加');
            if (res.status == 200) {
                console.log(res, 'res');
                message.success('添加成功');
            }
        })
      setModalVisible(false);
      form.resetFields();
      handleSearch();  // 刷新数据
    } catch (error) {
      message.error('保存失败，请重试！');
    }
  };

❤React体系17-antd的使用（增删改查初）

增加成功！

❤React体系17-antd的使用（增删改查初）

可以看到数据库之中已经添加进来

❤React体系17-antd的使用（增删改查初）

6、编辑功能

columns下面配置一个修改功能

const  handleEdit = async (row) => {
  try {
    setLoading(true);
    const response = await axios.get(`http://localhost:8888/api/user/${row.id}`);
    const data = response.data.data;
    console.log(data,'data');
    form.setFieldsValue(data); // 填充数据到表单中
  } catch (error) {
    message.error('获取数据详情失败，请重试！');
  } finally {
    setLoading(false);
  }
setModalVisible(true);
};

❤React体系17-antd的使用（增删改查初）

进行按钮的提交完善


 {
  title: '操作',
  key: 'action',
  render: (_,row) => {
    return (
      <Flex gap="middle" wrap>
        <Button type="dashed" 
        // onClick={() => handleEdit(record)} 
        onClick={() =>handleEdit(row)}
        autoInsertSpace={false}>
          编辑
        </Button>
      </Flex>
    ) 
  },
},

查看我们的提交修改部分效果

❤React体系17-antd的使用（增删改查初）

修改提交ok

7、删除功能


<Popconfirm
  title="确定要删除吗？"
  onConfirm={() => handleDelete(row)}
  okText="确定"
  cancelText="取消"
>
  <Button style={{marginLeft: 8}} type="dashed" autoInsertSpace>
    删除
</Button>
</Popconfirm>

完善删除接口

const handleDelete = async (record) => {
    try {
      await axios.delete(`http://localhost:8888/api/user/${record.id}`);
      message.success('删除成功');
      handleSearch();
    } catch (error) {
      message.error('删除失败，请重试！');
    }
  };

删除直接成功，毫无问题，接下来就进入我们的优化篇章和接口的抽离了，在这之前我们可以先做一下接口权限！ ❤React体系17-antd的使用（增删改查初）

转载自:https://juejin.cn/post/7369413136225157172

❤React体系17-antd的使用（增删改查初）

❤React体系17-antd的使用(本文主要基于最新的5.0以上 -- 我使用的是5.17.0 )（增删改查初）

1、认识

2、安装使用

安装

在项目根目录之中引入

使用 Ant Design 组件

3、antd增删改查布局

头部是一个搜索部分和一个按钮

中间是一个表格

底部是一个分页

4、查询功能

（1） 渲染查询

（2） 更改优化一下我们的写法（使用async await）：

（3） 渲染数据

（4） 优化表格

（4） 优化查询

5、增加功能

6、编辑功能

7、删除功能

（1）渲染查询

（2）更改优化一下我们的写法（使用async await）：

（3）渲染数据

（4）优化表格

（4）优化查询