初试React——巧用Ant Design携手React构建【个人中心-信息修改】页面

2023-12-14 21:21:29

步入React世界，挥洒创意代码

在踏上React之旅之前，您需要做好必要的准备工作。首先，确保已安装Node.js和npm，这是React开发的基础工具。接着，创建一个新的React项目，您可以使用create-react-app命令，它将为您生成一个包含所有必要文件的项目模板。

携手Ant Design，点亮UI世界

Ant Design是蚂蚁金服出品的一款React UI库，以其丰富的组件、美观的样式和强大的扩展性而闻名。在我们的“个人中心-信息修改”页面中，我们将使用Ant Design提供的组件来构建用户界面。

在项目中安装Ant Design，只需运行npm install antd命令。然后，在代码中导入所需的组件，例如：

import { Form, Input, Button } from 'antd';

搭建页面骨架，勾勒整体布局

页面骨架是整个页面的结构基础，它决定了页面元素的摆放位置和相互关系。在我们的项目中，我们将使用Flexbox布局来构建页面骨架，它可以轻松实现元素的水平和垂直排列。

<div className="container">
  <div className="form-wrapper">
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
        rules={[{ required: true, message: '请输入邮箱' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </Form>
  </div>
</div>

注入数据活力，赋予页面生机

在页面骨架搭建完成后，我们需要为其注入数据，让页面变得鲜活起来。我们将使用REST API来获取和保存用户信息。在项目中，我们需要安装axios库来发送HTTP请求。

import axios from 'axios';

获取用户信息的请求：

const getUserInfo = () => {
  axios.get('/api/user/info').then(res => {
    if (res.data.code === 0) {
      const { data } = res.data;
      form.setFieldsValue(data);
    }
  });
};

保存用户信息的请求：

const saveUserInfo = (values) => {
  axios.post('/api/user/info', values).then(res => {
    if (res.data.code === 0) {
      message.success('信息修改成功');
    }
  });
};

添加表单验证，确保数据准确无误

为了确保用户输入的数据准确无误，我们需要对表单进行验证。Ant Design提供了强大的表单验证功能，我们可以轻松实现数据的校验。

const [form] = Form.useForm();

const onFinish = (values) => {
  saveUserInfo(values);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};