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

文章目录

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

概要

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

前端讲解

登录组件

利用antd组件库提供的forminputbuttonmessage等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"><Formname="normal_login"labelCol={{span: 8,}}wrapperCol={{span: 16,}}style={{maxWidth: 600,}}className="login-form"initialValues={{ remember: true }}onFinish={onFinish}>{/* 邮箱 */}<Form.Itemname="email"label="邮箱"rules={[{ required: true, message: '请输入邮箱!' }]}><Input placeholder="邮箱" // value={email}// onChange={(e) => setEmail(e.target.value)}/></Form.Item>{/* 密码 */}<Form.Itemname="password"label="密码"rules={[{ required: true, message: '请输入密码!' }]}><Input.Passwordplaceholder="密码"// value={password} // onChange={(e) => setPassword(e.target.value)}/></Form.Item>{/* 登录按钮 */}<Form.ItemwrapperCol={{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组件库提供的formCheckboxinputbuttonmessage等UI组件组成注册的前端界面,输入邮箱、密码和验证密码注册,除了确认密码和同意框,其它和登录组件的代码都是类似的,前端用onFinish函数根据<Form.Item>里的name属性得到前端输入框中得到的数据,将这些数据通过axios发送给后端服务器中,再处理对应的逻辑,再对后端返回的数据做处理,然后用navigate跳转到登录界面,下面我就讲解确认密码和同意框的使用:

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

      <Form.Itemname="confirm1"label="验证密码"dependencies={['password']}hasFeedbackrules={[{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.Itemname="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库中的useStateuseEffect钩子,以及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表的所有数据以列表的形式展示
在这里插入图片描述

小结

通过本篇博客,我们进一步完善了基于React和Express的登录注册系统,实现了用户列表的展示功能,并通过Ant Design组件库对界面进行了优化。这样的改进不仅提升了系统的可用性和用户体验,也为今后的功能扩展和项目开发奠定了基础。

在下一步,我们可以考虑进一步扩展系统的功能,例如添加用户信息的编辑和删除功能,以及加强系统的安全性和稳定性。
希望本文能够帮助读者更好地了解React的使用,如果有任何疑问或者建议,欢迎留言讨论🌹

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/4943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型语言模型:奇迹背后的未知哲学,人类智慧的边界探索

大型语言模型可以做出令人瞠目结舌的事情。但没有人确切知道原因。 这是一个问题。弄清楚它是我们这个时代最大的科学难题之一&#xff0c;也是控制更强大的未来模型的关键一步。 多长时间才能学会加法&#xff1f; 两年前&#xff0c;旧金山 OpenAI 公司的研究人员尤里布尔…

ABAP Visual Code 新建sap系统连接

本文主要介绍如何新建SAP前端系统链接 前提是你已经都扩展完了 1.点击SAP fiori--》点击新建 2.选择 abap on premise 3.输入如下信息 4.这里介绍下URL 如何获取 SMICM-->点击service 明细里面可以看到你的host name 和 port 当然你也可以随便找一个你的odata 服务看下ur…

C++之const

const是C中的关键字&#xff0c;又叫常量限定符&#xff0c;作用是告知编译器const修饰的变量是不可修改的。 1、const修饰常量 1.1、修饰常量 #include <iostream> using namespace std;int main(int argc, char argv[]) {// 在修饰常量时&#xff0c;int const和con…

C++奇迹之旅:类和对象const成员static关键字友元内部类

文章目录 &#x1f4dd;const成员&#x1f320; const 成员函数是什么&#xff1f;&#x1f320; 取地址及const取地址操作符重载 &#x1f309;static成员&#x1f320;概念&#x1f320;static特性&#x1f309;static小题 &#x1f320;友元&#x1f309; 友元函数&#x1f…

标准版/开源版 移动端新增页面使用文档

在标准版开发的实际使用中&#xff0c;随着用户移动端的产品和信息内容不断增多&#xff0c;新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容&#xff0c;可以新增子页面构建多级模块结构&#xff0c;帮助用户快速定位。 下面就如何新增页面做一讲…

掩码讲解,以及生成

掩码生成模块的原理主要基于特定的算法和规则&#xff0c;用于生成一个掩码矩阵&#xff0c;该矩阵与输入序列的长度相同&#xff0c;由0和1组成。这个掩码矩阵的作用是控制模型在处理序列数据时忽略无效部分。 在自注意力机制中&#xff0c;掩码被用来屏蔽无效的位置&#xff…

新一代大数据平台,为什么选择中国移动梧桐数据库?

个人介绍&#xff1a;艺名司镜233&#xff0c;是中国移动梧桐数据库研发团队成员&#xff0c;从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库&#xff0c;而是我们用代码&#xff0c;切实地帮助企业解决数据的困扰&#xff0c;切实地解决社会的问题。 本篇文…

软件工程的介绍

软件工程 这一章的内容其实还是蛮多的,大概一共有10个章节,分别是下面的一些内容,但是呢,这一章的内容其实是比较偏向文科类的,也就是说,记忆的内容其实占有很大的篇幅,在该考试科目当中呢,其实也是主要影响上午题部分的选择题的考察,基本的分值呢,在10分左右,分值占…

windows ubuntu:sed,awk,grep篇:4.执行 sed

目录 23.单行内执行多个 sed 命令 24.sed 脚本文件 25.sed 注释 26.把 sed 当做命令解释器使用 27.直接修改输入文件 23.单行内执行多个 sed 命令 第一章内已经讲过&#xff0c;单行内执行多个 sed 命令有多种方法。 1. 使用多命令选项 –e 多命令选项-e 使用方法如…

Mybatis-Plus自定义dataScpoe拦截器实现数据权限

使用AOP切面&#xff0c;自定义注解&#xff0c;自定义mybatisplus拦截器&#xff0c;使用 JSqlParser 自定拼接where条件。 1、自定义注解DataScope&#xff1b;注解一般用于Service层或者DAO层(Mapper) import java.lang.annotation.*;/*** 数据权限过滤注解**/ Target(Elem…

7-云原生监控体系-PromQL-函数功能和示例

Prometheus支持几个函数来操作数据。 文章目录 1. 函数语法解释2. count(v instant-vector)3. topk(n, v instant-vector)4. bottomk(n, v instant-vector)5. increase(v range-vector)6. rate(v range-vector)7. rate 和 increase8. irate(v range-vector)9. predict_linear(…

Dockerfile: ENTRYPOINT和CMD的区别

CMD&#xff1a;The main purpose of a CMD is to provide defaults for an executing container. CMD的主要用途是为正在执行的容器提供默认值。也就是指定这个容器启动的时候要运行的命令。 ENTRYPOINT&#xff1a;也是指定这个容器启动的时候要运行的命令。 ———————…

docker菜鸟教程

Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用及其依赖打包到一个可移植的容器中&#xff0c;然后发布到任何Linux机器上。以下是Docker的一些基本概念和操作指南&#xff1a; 镜像(Image)&#xff1a;Docker镜像是一个文件系统&#xff0c;它包含了应用程序及…

Golang基础1-基本类型、if、switch、string

基本类型 bool 整数&#xff1a;byte(相当于uint8), rune(相当于int32), int/uint ,int8/uint8 ,int16/uint16 ,int32/uint32 ,int64/uint64 浮点数: float32 ,float64, complex64 ,complex128 array&#xff08;值类型&#xff09;、slice、map、chan&#xff08;引用类型…

【Android】 网络技术

前言 本文用于记录Android网络技术的使用&#xff0c; 包括我们如何发起一条HTTP请求、解析XML、JOSN格式的数据以及最好用的网络库Retrofit。 使用HTTP协议访问网络 关于HTTP协议的工作原理&#xff0c;我们只需要知道客户端向服务器发起一条HTTP请求&#xff0c;服务器接收…

使用VIVE Eye and Facial Tracking SDK 1.3.6.8 开发眼动追踪功能

在虚拟现实&#xff08;VR&#xff09;环境中&#xff0c;眼动追踪技术可以显著增强用户体验和应用的交互性。HTC Vive Focus 3是一款集成了眼动追踪功能的头戴式显示设备。本文详细介绍如何使用VIVE Sense的VIVE Eye and Facial Tracking SDK 1.3.6.8 在 Unity 中实现眼动追踪…

【MySQL 数据宝典】【索引原理】- 001 索引原理分析 (AVL树、B-Tree、B+Tree)

一、索引定义 MySQL官方对索引定义&#xff1a;是存储引擎用于快速查找记录的一种数据结构。需要额外开辟空间和数据维护工作。 索引是物理数据页存储&#xff0c;在数据文件中&#xff08;InnoDB&#xff0c;ibd文件&#xff09;&#xff0c;利用数据页(page)存储。 索引可以…

Rust检查一个Vec<String>是否包含一个特定的子字符串

在Rust中&#xff0c;你可以使用contains方法来检查一个Vec<&str>是否包含特定的字符串。但是&#xff0c;如果你想检查一个Vec是否包含一个特定的子字符串&#xff0c;你需要先将子字符串转换为String。 以下是一个示例代码&#xff0c;展示了如何检查一个Vec是否包…

linux 开机自启 rc.local

rc.local 是启动加载文件 例1. compose启动Harbor 写一个开启自动启动的脚本 [rootharbor harbor]# vim startall.sh #!/bin/bash cd /root/harbor docker-compose stop && docker-compose start给脚本权限 chmod x startall.sh chmod x /etc/rc.d/rc.local #ll 查…

springcloud微服务搭建多数据源(mysql,oracle,postgres,等等)管理模块,支持通过注解方式切换不同类型的数据库

1.背景 同一套微服务管理系统&#xff0c;业务完全一样&#xff0c;但不同的客户可能要求使用自己熟悉的数据库&#xff0c;比如&#xff0c;mysql&#xff0c;oracle&#xff0c;postgres&#xff0c;还有一些国产数据库。如果能够将数据库模块独立出来&#xff0c;兼容各家的…