脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Antd Form登录

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

 更新时间：2021年04月06日 11:33:28   作者：浮生离梦  
这篇文章主要介绍了详解对于React结合Antd的Form组件实现登录功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、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 = `http://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=IOXimfoqOUVq2KcYCiQU9cMF7hyN5kFB`
  jsonp(url, {}, (err, data) => {
   console.log('jsonp()', err, data)
   if (!err && data.status==='success') {
    const {dayPictureUrl, weather} = data.results[0].weather_data[0]
    resolve({dayPictureUrl, weather})
   } else {
    message.error('获取天气信息失败!')
   }

  })
 })
}

引入这些工具类和接口，代码如下所示：

import { reqLogin } from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'

给 Form 表单绑定 onSubmit 事件，handleSubmit。在这个事件中，需要先使用 event.preventDefault() 阻止事件的默认行为。如果想要获取表单项的输入数据，可以使用 form.getFieldsValue()。但是，在提交表单前需要对表单数据进行预校验，使用 this.props.form.validateFields 进行预校验，validateFields 可以获取所有表单字段的值，并且可以判断表单数据是否有错。如有 没错，说明预校验通过，从 values 中获取 username 和 password 的值，然后通过 reqLogin 这个接口结合 async 和 await 发起登录请求。如果响应的状态码正确，说明登录成功，保存 user，保存在内存和本地中，然后使用 this.props.history.replace 跳转到主管理界面中，反之则登录失败。在 render 中，如果用户已经登陆, 需要使用 Redirect 自动跳转到主管理界面中，代码如下所示：

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

二、React 结合 Antd 实现登录功能的实现

React 结合 Antd 实现登录功能的实现，完整代码如下所示：
login.jsx，代码如下所示：

import React, { Component } from 'react'
import { Form, Icon, Input, Button, message } from 'antd'
import { Redirect } from 'react-router-dom'
import './login.less'
import logo from '../../assets/images/logo.png'
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.less，代码如下所示：

.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登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解React setState数据更新机制

    详解React setState数据更新机制

    这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04
  • 快速创建React项目并配置webpack

    快速创建React项目并配置webpack

    这篇文章主要介绍了创建React项目并配置webpack,在这里需要注意，Create React App requires Node 14 or higher.需要安装高版本的node，本文给大家介绍的非常详细，需要的朋友参考下吧
    2022-01-01
  • React在组件中如何监听redux中state状态的改变

    React在组件中如何监听redux中state状态的改变

    这篇文章主要介绍了React在组件中如何监听redux中state状态的改变，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Redux Toolkit的基本使用示例详解(Redux工具包)

    Redux Toolkit的基本使用示例详解(Redux工具包)

    这篇文章主要介绍了Redux Toolkit的基本使用,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • 使用React Router v6 添加身份验证的方法

    使用React Router v6 添加身份验证的方法

    这篇文章主要介绍了使用React Router v6 进行身份验证完全指南,本文将演示如何使用React Router v6创建受保护的路由以及如何添加身份验证，需要的朋友可以参考下
    2022-05-05
  • 详解React中组件之间通信的方式

    详解React中组件之间通信的方式

    这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-07-07
  • React18 useState何时执行更新及微任务理解

    React18 useState何时执行更新及微任务理解

    这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 解决react中useState状态异步更新的问题

    解决react中useState状态异步更新的问题

    本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React改变元素样式的操作代码

    React改变元素样式的操作代码

    这篇文章主要介绍了React技巧之改变元素样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • Redux DevTools不能显示数据问题

    Redux DevTools不能显示数据问题

    这篇文章主要介绍了Redux DevTools不能显示数据问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论