Tout d'abord, nous créons un projet
fil créer @umijs/umi-app ou npm créer @umijs/umi-app.
Ensuite, nous devons créer un dossier de connexion dans le dossier pages, et créer login.tsx et index sous le dossier. .less deux fichiers
. Ensuite, nous devons implémenter une fonction d'authentification de connexion avec le style CSS après la connexion. Ici, nous nous référons à
https://blog.csdn.net/qq_53509791/article/details/129068969?spm=1001.2014.3001.5501
Ensuite, notre fichier de routage se présente sous cette forme.
Nous allons ensuite écrire l'interface de connexion. Ici, nous déclarons que nous devons utiliser antd-mobile. Remarque
: Le framework umi a la version 2.x d'antd-mobile. Si vous utilisez Si ce n'est pas la 2. .x d'antd-mobile, vous devez télécharger la version correspondante.
La prochaine fonction que nous devons remplir est de changer de thème.
<NavBar backArrow={
false} right={
right} style={
{
"backgroundColor": sco, color: "white" }}>用户登录</NavBar>
Ok, maintenant profitons du code
import React, {
useState,useEffect } from 'react'
import {
NavBar, AutoCenter, Form, Input, Button, TextArea, Space, Toast } from 'antd-mobile/es'
import {
CheckCircleFill, CloseCircleFill } from 'antd-mobile-icons'
import {
useHistory } from 'umi'
export default function login() {
const history =useHistory()
const [password, setpassword] = useState("")
const [password1, setpassword1] = useState(false)
const [phone, setphone] = useState("")
const [phone1, setphone1] = useState(false)
const [sco, setSco] = useState("#123456")
const [inp, setinp] = useState(["pink", "black", "red", "yellow"])
let left = () => {
let ids = Math.floor(Math.random() * inp.length)
setSco(inp[ids])
}
const right = (
<div style={
{
fonstSize: 20 }}>
<Space>
<Button onClick={
left} fill="none" style={
{
color: "white" }}>切换主题</Button>
</Space>
</div>
)
function useVerifyPhoneNum() {
let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
let pwdPattern = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,16}$/;
if (!phoneReg.test(phone)) {
Toast.show({
icon: "fail",
content: "手机号错误"
})
}
if (!pwdPattern.test(password)) {
Toast.show({
icon: "fail",
content: "密码错误"
})
} else {
Toast.show({
icon: "success",
content: "登录成功"
})
history.push("/home")
localStorage.setItem("token","这是一个token")
}
}
useEffect(() => {
let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!phoneReg.test(phone)) {
setphone1(false)
} else {
setphone1(true)
}
}, [phone])
useEffect(() => {
let pwdPattern = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,16}$/;
if (!pwdPattern.test(password)) {
setpassword1(false)
} else {
setpassword1(true)
}
}, [password])
return (
<div>
<NavBar backArrow={
false} right={
right} style={
{
"backgroundColor": sco, color: "white" }}>用户登录</NavBar>
<AutoCenter>
<Form
layout='horizontal'
footer={
<Button block type='submit' color='primary' size='large' style={
{
"backgroundColor": sco }} onClick={
useVerifyPhoneNum.bind(this)}>
提交
</Button>
}
>
<Form.Item
name='手机号'
label='手机号'
rules={
[{
required: true, message: '手机号不能为空' }]}
extra={
phone ? phone1 ? <CheckCircleFill color="76c6b8" /> : <CloseCircleFill color="var(--adm-color-danger)" /> : ""}
>
<Input onChange={
val => {
setphone(val)
}} placeholder='手机号' value={
phone} />
</Form.Item>
<Form.Item rules={
[{
required: true, message: '密码不能为空' }]} name='submit' label='密码' extra={
password ? password1 ? <CheckCircleFill color="76c6b8" /> : <CloseCircleFill color="var(--adm-color-danger)" /> : ""}>
<Input placeholder='请输入密码' value={
password} onChange={
val => {
setpassword(val)
}} />
</Form.Item>
</Form>
</AutoCenter>
</div>
)
}