Primero, creamos un proyecto
hilo crear @umijs/umi-app o npm crear @umijs/umi-app.
Luego necesitamos crear una carpeta de inicio de sesión en la carpeta de páginas y crear login.tsx e indexar debajo de la carpeta. .less dos archivos
. Luego, después de iniciar sesión, debemos implementar una función de autenticación de inicio de sesión con estilo CSS. Aquí nos referimos a
https://blog.csdn.net/qq_53509791/article/details/129068969?spm=1001.2014.3001.5501
Luego, nuestro archivo de enrutamiento tiene este formulario.
A continuación tenemos que escribir la interfaz de inicio de sesión. Aquí declaramos que necesitamos usar antd-mobile. Nota
: El marco umi tiene la versión 2.x de antd-mobile. Si usa Si no es la 2 .x de antd-mobile, es necesario descargar la versión correspondiente.
La siguiente función que debemos completar es cambiar de tema.
<NavBar backArrow={
false} right={
right} style={
{
"backgroundColor": sco, color: "white" }}>用户登录</NavBar>
Bien, disfrutemos del código.
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>
)
}