umi创建简单的登录界面

首先我们先创建一个项目
yarn create @umijs/umi-app或或者是npm create @umijs/umi-app
然后我们需要在pages文件夹中创建一个Login的文件夹，在文件夹下创建login.tsx和index.less两个文件

然后接着我们就要实现一个登录之后能够有css样式的登录鉴权功能，这里我们参照
https://blog.csdn.net/qq_53509791/article/details/129068969?spm=1001.2014.3001.5501
然后我们的路由文件当中就是这样的形式

接下来我们就要编写登录界面了，这里声明我们需要用到antd-mobile
注意：umi框架当中拥有的是2.x版本的antd-mobile，如果你使用的不是2.x版本的antd-mobile，则需要进行下载相应的版本就可以了。
接下来我们要完成的一个功能就是实现切换主题。

<NavBar backArrow={false} right={right} style={{ "backgroundColor": sco, color: "white" }}>用户登录</NavBar>

好了，接下来请大家欣赏代码

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