详解对于React结合Antd的Form组件实现登录功能

2024-04-02 19:04:59 635人浏览八月长安

摘要

目录一、React 结合 Antd 实现登录功能二、React 结合 Antd 实现登录功能的实现一、React 结合 Antd 实现登录功能引入所需的 Antd 组件，代码

一、React 结合 Antd 实现登录功能

引入所需的 Antd 组件，代码如下所示：


import { FORM, Icon, Input, Button, message } from 'antd'

在 Login.jsx 中，创建一个 Login 组件。当对外暴露组件时，需要使用 Form 组件进行包装，包装 Form 组件生成一个新的组件 Form(Login)，同时新组件会向 Form 组件传递一个强大的对象属性 form，这样就可以取到 Form 表单的值，这也是高阶组件和高阶函数的体现，代码如下所示：


class Login extends Component {}
const WrapLogin = Form.create()(Login)
export default WrapLogin

在 render 内部去渲染表单时，可以先通过 this.props 去拿到 form 表单，在 form 中取得 getFieldDecorator，用于和表单进行双向绑定。在 getFieldDecorator 中，第一项是表单项对应的 value 值，第二项是配置对象，属性名是特定的一些名称。比如，rules 是验证规则，在 rules 中，可以设置 required 为是否必选，message 为校验文案，pattern 为正则表达式校验，max 为最大长度，min 为最小长度。还比如 initialValue 是表单项的初始值。对于 rules 校验，可以使用声明式验证，也就是直接使用别人定义好的验证规则进行验证，还可以自定义验证 validator，function(rule, value, callback)，必须有 callback 回调函数，代码如下所示：


class Login extends Component {
 validPwd = (rule, value, callback) => {
  if (!value) {
   callback('密码必须输入')
  } else if (value.length < 4) {
   callback('密码长度不能小于4位')
  } else if (value.length > 12) {
   callback('密码长度不能大于12位')
  } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
   callback('密码必须是英文、数字或下划线组成')
  } else {
   callback()
  }
 }

 render () {
  const form = this.props.form
  const { getFieldDecorator } = form

  return (
   <div className="login">
    <header className="login-header">
     <img src={loGo} alt="logo"></img>
     <h1>React 后台管理系统</h1>
    </header>
    <section className="login-content">
     <h2>用户登录</h2>
     <Form>
      <Form.Item>
       {
        getFieldDecorator('username', { 
         rules: [
          { required: true, whitespace: true, message: '用户名必须输入'},
          { min: 4, message: '用户名至少是4位'},
          { max: 12, message: '用户名至少是12位'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成'}
         ],
         // initialValue: 'admin', 
        })(
         <Input
          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
          placeholder="用户名"
         />
        )
       }
      </Form.Item>
      <Form.Item>
       {
        getFieldDecorator('passWord', {
         rules: [
          { validator: this.validPwd }
         ]
        })(
         <Input
          prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
          type="password"
          placeholder="密码"
         />
        )
       }
      </Form.Item>
      <Form.Item>
       <Button type="primary" htmlType="submit" className="login-form-button">
         登陆
       </Button>
      </Form.Item>
     </Form>
    </section>
   </div>
  )
 }
}

const WrapLogin = Form.create()(Login)
export default WrapLogin

我们可以定义两个工具类，用来操作登录对象，memoryUtils 是用来在内存保存一些数据的工具模块，storageUtils 是进行 local 数据存储管理的工具模块，如下所示：

memoryUtils.js，代码如下所示：


export default {
 user: {},
 product: {}
}

storageUtils.js，代码如下所示：


import store from 'store'

const USER_KEY = 'user_key'

export default {
 // 保存 user
 saveUser (user) {
  store.set(USER_KEY, user)
 },

 // 读取 user
 getUser () {
  return store.get(USER_KEY) || {}
 },

 // 删除 user
 removeUser () {
  store.remove(USER_KEY)
 }
}

定义登录的接口请求函数，使用 axiOS 可以先进行封装，得到 response.data，如下所示：

ajax.js，代码如下所示：


import axios from 'axios'
import {message} from 'antd'

export default function ajax(url, data={}, type='GET') {

 return new Promise((resolve, reject) => {
  let promise
  if(type==='GET') { 
   promise = axios.get(url, {
    params: data 
   })
  } else { 
   promise = axios.post(url, data)
  }
  promise.then(response => {
   resolve(response.data)
  }).catch(error => {
   message.error('请求出错了: ' + error.message)
  })
 })

}

index.js，代码如下所示：


import JSONp from 'jsonp'
import ajax from './ajax'
import { message } from 'antd'

const BASE = ''

export const reqLogin = (username, password) => ajax(BASE + '/login', { username, password}, 'POST')

export const reqCategories = (parentId) => ajax(BASE + '/manage/category/list', {parentId})

export const reqAddCategories = ({parentId, categoryName}) => ajax(BASE + '/manage/category/add', {parentId, categoryName}, 'POST')

export const reqUpdateCategories = ({categoryId, categoryName}) => ajax(BASE + '/manage/category/update', {categoryId, categoryName}, 'POST')

export const reqCategory = (categoryId) => ajax(BASE + '/manage/category/info', { categoryId })

export const reqProducts = ({pageNum, pageSize}) => ajax(BASE + '/manage/product/list', { pageNum, pageSize})

export const reqUpdateStatus = ({productId, status}) => ajax(BASE + '/manage/product/updateStatus', {productId, status}, 'POST')

export const reqSearchProducts = ({ pageNum, pageSize, searchName, searchType}) => ajax(BASE + '/manage/product/search', {
 pageNum,
 pageSize,
 [searchType]: searchName
})

export const reqDeleteImg = (name) => ajax(BASE + '/manage/img/delete', {name}, 'POST')

export const reqAddUpdateProduct = (product) => ajax(BASE + '/manage/product/' + (product._id ? 'update' : 'add'), product, 'POST')

export const reqRoles = () => ajax(BASE + '/manage/role/list')

export const reqAddRole = (roleName) => ajax(BASE + '/manage/role/add', {roleName}, 'POST')

export const reqUpdateRole = (role) => ajax(BASE + '/manage/role/update', role, 'POST')

export const reqUsers = () => ajax(BASE + '/manage/user/list')

export const reqDeleteUser = (userId) => ajax(BASE + '/manage/user/delete', {userId}, 'POST')

export const reqAddOrUpdateUser = (user) => ajax(BASE + '/manage/user/'+(user._id ? 'update': 'add'), user, 'POST')

export const reqWeather = (city) => {

 return new Promise((resolve, reject) => {
  const url = `/file/imgs/upload/202211/12/5fqa2vj4d3x.html'
import { reqLogin } from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'

class Login extends Component {

 handleSubmit = (event) => {
  event.preventDefault()

  this.props.form.validateFields(async (err, values) => {
   if (!err) {
    const { username, password } = values
    const result = await reqLogin(username, password)
    if (result.status === 0) { 
     message.success('登录成功')
     const user = result.data
     memoryUtils.user = user
     storageUtils.saveUser(user)

     this.props.history.replace('/')
    } else { 
     message.error(result.msg)
    }
   } else {
    console.log(err)
   }
  })

 }

 validPwd = (rule, value, callback) => {
  if (!value) {
   callback('密码必须输入')
  } else if (value.length < 4) {
   callback('密码长度不能小于4位')
  } else if (value.length > 12) {
   callback('密码长度不能大于12位')
  } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
   callback('密码必须是英文、数字或下划线组成')
  } else {
   callback()
  }
 }


 render () {

  const user = memoryUtils.user
  if (user && user._id) {
   return <Redirect to="/"></Redirect>
  }

  const form = this.props.form
  const { getFieldDecorator } = form

  return (
   <div className="login">
    <header className="login-header">
     <img src={logo} alt="logo"></img>
     <h1>React 后台管理系统</h1>
    </header>
    <section className="login-content">
     <h2>用户登录</h2>
     <Form onSubmit={this.handleSubmit}>
      <Form.Item>
       {
        getFieldDecorator('username', { 
         rules: [
          { required: true, whitespace: true, message: '用户名必须输入'},
          { min: 4, message: '用户名至少是4位'},
          { max: 12, message: '用户名至少是12位'},
          { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成'}
         ],
         // initialValue: 'admin',
        })(
         <Input
          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
          placeholder="用户名"
         />
        )
       }
      </Form.Item>
      <Form.Item>
       {
        getFieldDecorator('password', {
         rules: [
          { validator: this.validPwd }
         ]
        })(
         <Input
          prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
          type="password"
          placeholder="密码"
         />
        )
       }
      </Form.Item>
      <Form.Item>
       <Button type="primary" htmlType="submit" className="login-form-button">
         登陆
       </Button>
      </Form.Item>
     </Form>
    </section>
   </div>
  )
 }
}

const WrapLogin = Form.create()(Login)
export default WrapLogin


.login {
 width: 100%;
 height: 100%;
 background-image: url('./images/bg.jpg');
 background-size: 100% 100%;
 .login-header {
  display: flex;
  align-items: center;
  height: 80px;
  background-color: rgba(21, 20, 13, 0.5);
  img {
   width: 40px;
   height: 40px;
   margin: 0 15px 0 50px;
  }
  h1 {
   font-size: 30px;
   color: white;
  }
 }

 .login-content {
  width: 400px;
  height: 300px;
  background-color: #fff;
  margin: 50px auto;
  padding: 20px 40px;
  h2 {
   text-align: center;
   font-size: 30px;
   font-weight:bold;
   margin-bottom: 20px;
  }
  .login-form {
   .login-form-button {
    width: 100%;
   }
  }
 }
}

到此这篇关于详解对于React结合Antd的Form组件实现登录功能的文章就介绍到这了,更多相关React Antd Form登录内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 详解对于React结合Antd的Form组件实现登录功能

本文链接: https://www.lsjlt.com/news/122926.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

详解对于React结合Antd的Form组件实现登录功能

目录一、React 结合 Antd 实现登录功能二、React 结合 Antd 实现登录功能的实现一、React 结合 Antd 实现登录功能引入所需的 Antd 组件，代码...

99+

2024-04-02
React如何利用Antd的Form组件实现表单功能详解

一、构造组件 1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。这里先引用了封装的表单域 <Form.Item /> 2、使用For...

99+

2024-04-02
怎么在React中利用Form组件实现一个登录功能

本篇文章给大家分享的是有关怎么在React中利用Form组件实现一个登录功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。引入所需的 Antd 组件，代码如下所示：import...

99+

2023-06-14
React实现基于Antd密码强度校验组件示例详解

目录引言效果预览组件思想组件开发引言最近在开发 Nest 和 Umi 技术栈的个人项目，在用户管理模块需要用到一个密码强度校验组件，在网上寻找一方资料，没有找到自己想要的，特此自...

99+

2023-01-17

React Antd密码强度校验 React Antd
react使用antd的上传组件实现文件表单一起提交功能

本篇内容主要讲解“react使用antd的上传组件实现文件表单一起提交功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react使用antd的上传组件实现文件表单一起提交功能”吧!项目中需要实...

99+

2023-06-20
Vue登录功能的实现流程详解

目录Vue项目中实现登录大致思路安装插件创建store封装axiosqs vue 插件api.js的作用路由拦截登录页面实际使用Vue项目中实现登录大致思路 1、第一次登录的时候，前...

99+

2024-04-02
react使用antd的上传组件实现文件表单一起提交功能(完整代码)

最近在刚刚开始使用react做项目，非常不熟练，非常小白。小白同学可以阅读了，因为我会写的非常简单，直白。项目中需要实现表单中带附件提交，上传文件不单独保存调接口。 impor...

99+

2024-04-02
antd Vue实现Login登录页面布局案例详解附带验证码验证功能

效果 Login页面 <!-- * @Author: Jackie * @Date: 2022-05-07 14:34:06 * @LastEditTime: 2022...

99+

2024-04-02
Spring整合SpringMVC与Mybatis(SSM)实现完整登录功能流程详解

目录项目演示1 创建工程完成配置2 表设计3 实体类4 mapper5 serviceImpl 实现类异常6 controller7 工具类MD5统一返回对象8 前端页面总结项目演示...

99+

2024-04-02
基于Redis无序集合实现禁止多端登录功能的方法

这篇文章给大家分享的是有关基于Redis无序集合实现禁止多端登录功能的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言一个集合类型可以存储最多2^32 -1 个字符串集合类...

99+

2024-04-02
Spring Boot实现登录验证码功能的案例详解

目录验证码的作用案例要求前端页面准备准备login.html页面随机验证码工具类后端控制器验证码的作用验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式...

99+

2022-11-13

springboot登录验证码 springboot验证码
微信小程序登录与注册功能的实现详解

目录小程序中的登录用户注册用户信息修改总结小程序中的登录在小程序中有一个概念叫openid，这个相当于登录小程序用户的唯一标识，每个微信用户都不同。那要如何拿到用户的唯一标识呢？在...

99+

2022-11-13

微信小程序登录微信小程序注册
详解使用php来实现简单的用户登录功能

PHP是一种广泛使用的服务器端脚本语言，被广泛应用于开发Web应用程序，其中实现用户登录功能是一项基础要求。在这篇文章中，我们将介绍如何使用PHP实现简单的用户登录功能。首先，我们需要一个登录页面。下面是一个非常简单的HTML登录页面：&l...

99+

2023-05-14
SpringBoot实现点餐系统的登录与退出功能流程详解

目录一.登录功能前置二.登录流程设计三.退出登录功能一.登录功能前置首先，我们需要在数据库中建立对应的表… 基于人员登录功能，OOP的模式告诉我们要创建员工对应的实...

99+

2022-11-13

SpringBoot点餐系统登陆 SpringBoot点餐系统退出
Vue2.5 结合Element UI之Table和Pagination组件实现分页功能的示例分析

这篇文章主要介绍Vue2.5 结合Element UI之Table和Pagination组件实现分页功能的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！实现思路Element...

99+

2024-04-02
Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能详解

本文实例讲述了Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能。分享给大家供大家参考，具体如下：android SDK中带有这样类似的例子，但是那个还是静态数据，没有实际应用价值，参考意义不大...

99+

2023-05-30

android baseexpandablelistadapter 通话记录
【Servlet】规范项目结构|基于Mysql+JDBC+Servlet 制作简易网页|实现登录、添加、删除、显示的功能

✅作者简介：热爱后端语言的大学生，CSDN内容合伙人 ✨精品专栏：C++面向对象 🔥系列专栏：javaweb 文章目录 1、需要导入的jar包以及项目结构速览2、工具类放...

99+

2023-09-07

servlet mysql java
蓝牙聊天App设计3：Android Studio制作蓝牙聊天通讯软件（完结，蓝牙连接聊天，结合生活情景进行蓝牙通信的通俗讲解，以及代码功能实现，内容详细，讲解通俗易懂）

前言：蓝牙聊天App设计全部有三篇文章（一、UI界面设计，二、蓝牙搜索配对连接实现，三、蓝牙连接聊天），这篇文章是：三、蓝牙连接聊天。课程1：Android Studio小白安装教程，以及第一个An...

99+

2023-10-22

android studio 生活 android java wechat