首先我们先创建一个项目
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>
)
}