Detailed explanation of how to implement login function by combining React with Antd's Form component
1. React combined with Antd to realize login function Import the required Antd components. The code is as follows:
import { Form, Icon, Input, Button, message } from 'antd'
In Login.jsx, create a Login component. When exposing components to the outside, you need to use the Form component to wrap them. Wrapping the Form component generates a new component Form (Login). At the same time, the new component will pass a powerful object property form to the Form component, so that the value of the Form form can be obtained. This is also the embodiment of higher-order components and higher-order functions. The code is as follows:
class Login extends Component {}
const WrapLogin = Form.create()(Login)
export default WrapLogin
When rendering a form inside render, you can first get the form through this.props, and get getFieldDecorator in the form for two-way binding with the form. In getFieldDecorator, the first item is the value corresponding to the form item, and the second item is the configuration object, where the attribute names are some specific names. For example, rules are validation rules. In rules, you can set required to indicate whether it is required, message to indicate the validation text, pattern to indicate the regular expression validation, max to indicate the maximum length, and min to indicate the minimum length. For example, initialValue is the initial value of the form item. For rules validation, you can use declarative validation, that is, directly use validation rules defined by others for validation. You can also customize the validation validator, function (rule, value, callback), which must have a callback function. The code is as follows:
class Login extends Component {
validPwd = (rule, value, callback) => {
if (!value) {
callback('Password must be entered')
} else if (value.length < 4) {
callback('Password length cannot be less than 4 characters')
} else if (value.length > 12) {
callback('Password length cannot be greater than 12 characters')
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
callback('The password must be English, numbers or underscores')
} 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 backend management system</h1>
</header>
<section className="login-content">
<h2>User Login</h2>
<Form>
<Form.Item>
{
getFieldDecorator('username', {
rules:
{ required: true, whitespace: true, message: 'Username is required'},
{ min: 4, message: 'The user name must be at least 4 characters long'},
{ max: 12, message: 'The user name must be at least 12 characters'},
{ pattern: /^[a-zA-Z0-9_]+$/, message: 'Username must be English, numbers or underscores'}
],
// initialValue: 'admin',
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="username"
/>
)
}
</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="password"
/>
)
}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
Login</Button>
</Form.Item>
</Form>
</section>
</div>
)
}
}
const WrapLogin = Form.create()(Login)
export default WrapLogin We can define two tool classes to operate login objects. MemoryUtils is a tool module used to save some data in memory, and storageUtils is a tool module for local data storage management, as shown below: memoryUtils.js, the code is as follows:
export default {
user: {},
product: {}
}
storageUtils.js, the code is as follows:
import store from 'store'
const USER_KEY = 'user_key'
export default {
// Save user
saveUser (user) {
store.set(USER_KEY, user)
},
// Read user
getUser () {
return store.get(USER_KEY) || {}
},
// Delete user
removeUser () {
store.remove(USER_KEY)
}
}
Define the login interface request function, use axios to encapsulate it first, and get response.data, as shown below: ajax.js, the code is as follows:
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('Request error: ' + error.message)
})
})
}
index.js, the code is as follows:
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('Failed to obtain weather information!')
}
})
})
}
Introduce these tool classes and interfaces, the code is as follows:
import { reqLogin } from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils' Bind the onSubmit event to the Form, handleSubmit. In this event, you need to first use event.preventDefault() to prevent the default behavior of the event. If you want to get the input data of the form items, you can use form.getFieldsValue(). However, the form data needs to be pre-validated before submitting the form. Use this.props.form.validateFields for pre-validation. validateFields can obtain the values of all form fields and determine whether the form data is wrong. If everything is correct, it means the pre-verification is passed. Get the username and password values from values, and then initiate a login request through the reqLogin interface combined with async and await. If the response status code is correct, it means the login is successful, the user is saved in memory and locally, and then this.props.history.replace is used to jump to the main management interface. Otherwise, the login fails. In render, if the user is already logged in, you need to use Redirect to automatically jump to the main management interface. The code is as follows:
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('Login successful')
const user = result.data
memoryUtils.user = user
storageUtils.saveUser(user)
this.props.history.replace('/')
} else {
message.error(result.msg)
}
} else {
console.log(err)
}
}) 2. React combined with Antd to realize the login function React combines Ant to implement the login function. The complete code is as follows:
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('Login successful')
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('Password must be entered')
} else if (value.length < 4) {
callback('Password length cannot be less than 4 characters')
} else if (value.length > 12) {
callback('Password length cannot be greater than 12 characters')
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
callback('The password must be English, numbers or underscores')
} 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 backend management system</h1>
</header>
<section className="login-content">
<h2>User Login</h2>
<Form onSubmit={this.handleSubmit}>
<Form.Item>
{
getFieldDecorator('username', {
rules:
{ required: true, whitespace: true, message: 'Username is required'},
{ min: 4, message: 'The user name must be at least 4 characters long'},
{ max: 12, message: 'The user name must be at least 12 characters'},
{ pattern: /^[a-zA-Z0-9_]+$/, message: 'Username must be English, numbers or underscores'}
],
// initialValue: 'admin',
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="username"
/>
)
}
</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="password"
/>
)
}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
Login</Button>
</Form.Item>
</Form>
</section>
</div>
)
}
}
const WrapLogin = Form.create()(Login)
export default WrapLogin login.less, the code is as follows:
.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%;
}
}
}
}
This is the end of this article about how to implement the login function by combining React with Antd's Form component. For more relevant React Antd Form login content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to create an Nginx server with Docker
>>: MySQL gets the current date and time function
Recommend
MySQL tutorial data definition language DDL example detailed explanation
Table of contents 1. Introduction to the basic fu...
Vue+axios sample code for uploading pictures and recognizing faces
Table of contents Axios Request Qs processing dat...
mysql uses stored procedures to implement tree node acquisition method
As shown in the figure: Table Data For such a tre...
HTML table tag tutorial (35): cross-column attribute COLSPAN
In a complex table structure, some cells span mul...
Suggestions on creating business HTML emails
Through permission-based email marketing, not onl...
Summarize several common ranking problems in MySQL
Preface: In some application scenarios, we often ...
A Brief Analysis on the Time Carrying Problem of MySQL
The default time type (datetime and timestamp) in...
JS implementation of Apple calculator
This article example shares the specific code of ...
Analyze the difference between ES5 and ES6 apply
Table of contents Overview Function signature Opt...
Bootstrap+Jquery to achieve calendar effect
This article shares the specific code of Bootstra...
MySQL 5.7.20 Green Edition Installation Detailed Graphic Tutorial
First, let’s understand what MySQL is? MySQL is a...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...
How to configure the My.ini file when installing MySQL5.6.17 database
I recently used the MySql database when developin...
How to solve the front-end cross-domain problem using Nginx proxy
Preface Nginx (pronounced "engine X") i...
WeChat applet to achieve automatic video playback imitating GIF animation effect example
Demand background: Insert GIF dynamic images into...