まず、プロジェクト
yarn create @umijs/umi-appまたはnpm create @umijs/umi-appを作成し、
次にpagesフォルダーにLoginフォルダーを作成し、そのフォルダーの下にlogin.tsxとindexを作成する必要があります。ここではhttps://blog.csdn.net/qq_53509791/article/details/129068969?spm=1001.2014.3001.5501を参照します。次に
、ログイン後に CSS スタイルでログイン認証機能を実装する必要があります。この形式があります。次に、ログイン インターフェイスを作成する必要があります。ここで、antd-mobile を使用する必要があることを宣言します。注: umi フレームワークには、antd-mobile バージョン 2.x があります。2 でない場合は、 を使用します。 antd-mobile の .x バージョンの場合は、対応するバージョンをダウンロードする必要があります。次に完了する必要がある機能は、テーマを切り替えることです。
<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>
)
}