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

1、认识

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

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

js 复制代码

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

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

js 复制代码

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

2、安装使用

安装

js 复制代码

yarn add antd

在项目根目录之中引入

js 复制代码

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

使用 Ant Design 组件

js 复制代码

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

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

export default MyButton;

使用效果图如下图所示

3、antd增删改查布局

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

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

js 复制代码

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;

中间是一个表格

js 复制代码

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>

底部是一个分页

js 复制代码

分页自动在表格之中

看一下我们的效果

调整表格布局的方式formLayout这个属性从horizontal => inline

4、查询功能

（1）渲染查询

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

js 复制代码

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的数据，反而第二次再次点击才能拿到。

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

js 复制代码

// 获取用户--优化后
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);
  }
}

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

js 复制代码

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

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

（3）渲染数据

js 复制代码

 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）优化表格

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

js 复制代码

规则：1 男 2 女

js 复制代码

 
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>
      );
  },
},

优化的效果：

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

js 复制代码

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

（4）优化查询

js 复制代码

  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('查询失败，请重试！');
    }
  };

看看查询出来的效果

5、增加功能

导入添加按钮部分

js 复制代码

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


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

添加弹窗部分

js 复制代码

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>

增加的提交部分

js 复制代码

  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('保存失败，请重试！');
    }
  };

增加成功！

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

6、编辑功能

columns下面配置一个修改功能

js 复制代码

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);
};

进行按钮的提交完善

js 复制代码

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

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

修改提交ok

7、删除功能

js 复制代码

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

❤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）优化查询