Ant Design助力：实现用户列表的优雅展示与管理

news2024/11/26 10:24:21

文章目录

概要
前端讲解
- 登录组件
- 注册组件
- 用户列表组件
后端讲解
- 连接数据库db.js
- 路由routes.js
- express应用app.js
启动项目
小结

概要

在上一篇博客🚪中，我们已经成功实现了登录注册系统的基本功能。现在，我们将进一步完善系统，实现查看用户列表的功能，并通过Ant Design组件库对界面进行优化。并讲解上一篇博客里详细的代码解释
在这里插入图片描述

前端讲解

登录组件

利用antd组件库提供的form，input，button，message等UI组件组成登录的前端界面，输入邮箱和密码登录，前端用onFinish函数根据<Form.Item>里的name属性得到前端输入框中得到的数据，将这些数据通过axios发送给后端服务器中，再处理对应的逻辑，再对后端返回的数据做处理，然后导入react-router-dom里面的useNavigate属性进行跳转界面，实例化一个函数，再用navigate跳转到用户列表界面

import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Input, Button,message } from 'antd';
// import { LockOutlined } from '@ant-design/icons';
import axios from 'axios';


const Login = () => {
  // const [email, setEmail] = useState('');
  // const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const onFinish = (n) => {
    console.log(n.email);
    console.log(n.password);
    axios({
      method: 'post',
      url: 'http://localhost:2531/login',
      data: {
        email: n.email,
        password: n.password
      }
    }).then((res) => {
      if (res.data.success) {
        message.success('登陆成功');
        // console.log(`Object ${res.data}`);
        console.log(res.data);
        navigate('/users')
      } else {
        message.success('用户名或密码不正确');
        console.log(res.data);
      }
    }).catch(() => {
      console.log("Something went wrong. Plase try again later");
    });
  };

  return (
    <div className="login1">
    <Form
      name="normal_login"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        maxWidth: 600,
      }}
      className="login-form"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >

      {/* 邮箱 */}
      <Form.Item
        name="email"
        label="邮箱"
        rules={[{ required: true, message: '请输入邮箱！' }]}
      >
        <Input placeholder="邮箱" 
                // value={email}
                // onChange={(e) => setEmail(e.target.value)}
        />
      </Form.Item>

      {/* 密码 */}
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入密码！' }]}
      >
        <Input.Password
          placeholder="密码"
          // value={password} 
          // onChange={(e) => setPassword(e.target.value)}
        />
      </Form.Item>

      {/* 登录按钮 */}
      <Form.Item
       wrapperCol={{
        offset: 8,
        span: 16,
       }}
      >
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
        <span className="zhuce">
            <Link to="/register">没有账号？去注册吧！</Link>
        </span>
      </Form.Item>
      
    </Form>
    </div>
  );
};

export default Login;

注册组件

利用antd组件库提供的form，Checkbox，input，button，message等UI组件组成注册的前端界面，输入邮箱、密码和验证密码注册，除了确认密码和同意框，其它和登录组件的代码都是类似的，前端用onFinish函数根据<Form.Item>里的name属性得到前端输入框中得到的数据，将这些数据通过axios发送给后端服务器中，再处理对应的逻辑，再对后端返回的数据做处理，然后用navigate跳转到登录界面,下面我就讲解确认密码和同意框的使用：

dependencies={['password']}依赖password字段，即确认密码的验证规则依赖于密码字段，比较两次输入的密码是否相等

      <Form.Item
          name="confirm1"
          label="验证密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请再一次填入密码!',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次密码不符!'));
              },
            }),
          ]}
        >
          <Input.Password 
          placeholder="重新输入密码"
          />
      </Form.Item>

接受协议通过验证value的值如果 value 的值为真（即用户勾选了协议），则返回一个 resolved 状态的 Promise，表示验证通过。如果 value 的值为假（即用户未勾选协议），则返回一个 rejected 状态的 Promise，其中包含了一个错误对象，错误消息为 Should accept agreement，表示用户应该接受协议。

      <Form.Item
          name="agreement"
          valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
            },
          ]}
          {...tailFormItemLayout}
        >
          <Checkbox>
            I have read the <span>agreement</span>
          </Checkbox>
      </Form.Item>

在这里插入图片描述

用户列表组件

导入React库中的useState和useEffect钩子，以及axios库，用于发送HTTP请求，使用useState钩子来声明了一个名为users的状态变量，并初始化为一个空数组，setUsers 是用来更新 users 状态的函数，使用 useEffect 钩子来执行副作用操作，即发送 HTTP 请求获取用户数据。在组件挂载时（空依赖数组 []），执行传入的回调函数。在回调函数中，定义了一个名为 fetchData 的异步函数，用于发送 GET 请求到指定的 URL 获取用户数据。获取数据后，通过 setUsers 更新 users 状态为获取到的用户数据，返回部分包含了从状态变量 users 中映射出的用户数据

优化界面：使用Ant Design的组件库，我们可以很容易地优化用户列表页面的界面，使其更加美观和易用。在UserList组件中，我们将使用 Ant Design 的 Table 组件来展示用户数据。
首先定义用户表单字段对应表中什么字段值，例如用户id对应users表里的id，邮箱对应users表里的email等等
在这里插入图片描述
再把原先的ul列表改为Table组件，设置columns属性值和dataSource数据，其中数据是来自之前useState里面的users状态变量

后端讲解

连接数据库db.js

用mysql2连接数据库，使用nodejs数据库里的users(id,email,password)表进行操作
在这里插入图片描述

路由routes.js

在routes.js里根据路由管理不同的请求，根据前端axios获取的数据发送到后端req.body，通过结构赋值得到传入的邮箱和密码信息，再调用控制器写好的函数，然后返回给前端信息是否成功和message信息
在这里插入图片描述

express应用app.js

在app.js里，创建一个Express应用实例app，导入cors和bodyParser中间件，用来处理跨域请求和解析URL编码格式和JSON格式的HTTP请求体，再导入routes.js，挂载路由到根路径上，最后启动应用并监听2531端口
在这里插入图片描述

启动项目

启动前端npm start，启动后端node server/app.js，就可以访问到根路径的一个界面
在这里插入图片描述
点击登录，输入数据库里已经注册了的邮箱和密码，显示登录成功

点击注册，输入数据库里没有的邮箱和密码，显示注册成功，数据库里就多出一条数据

点击用户列表，可以查看到数据库里user表的所有数据以列表的形式展示
在这里插入图片描述