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><Formlayout='horizontal'footer={<Button block type='submit' color='primary' size='large' style={{ "backgroundColor": sco }} onClick={useVerifyPhoneNum.bind(this)}>提交</Button>}><Form.Itemname='手机号'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>)
}

umi创建简单的登录界面相关推荐

PyQt5制作一个简单的登录界面
最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录一.效果图二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图如下: 二.简 ...
JAVA实现简单的登录界面
我本来是学C++的,然后课程上老师要求做一个登陆界面,用C++实现不限时,然后就选择了JAVA,从零开始自学JAVA.好在网上很多大佬都写了如何用JAVA编写登陆界面的博客,写得很详细,使得我第一次接 ...
java qq登录成功界面_java实现简单QQ登录界面
本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可 ...
【Swing 2】布局管理器与简单的登录界面
很苦逼的是,每次想记录一个小程序,发现,要给别人讲清楚,总是得分很多模块讲解. 所以今天来讲下Swing组件的三大布局管理器. 参考:<Head First Java>第十三章 1. Bo ...
一对一直播源码，实现一个简单的登录界面
一对一直播源码,实现一个简单的登录界面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
Python调用百度AI接口用以实现在线语音合成并创建简单的GUI界面生成可执行应用程序
调用百度AI接口用以实现在线语音合成并创建简单的GUI界面生成可执行应用程序 1. 实验环境 Python3.8.Pycharm.window10 2.实验过程 1.首先登陆百度智能云:https ...
通过LabVIEW设计简单的登录界面
设计思路: 当密码等于所写定的字符串后,显示登录成功:密码错误时,显示用户名或密码错误,请重新输入. 点击登录或取消便可停止循环,通过条件结构实现. 前面板设计: 登录背景可直接将图片复制粘贴,通过重 ...
html简单的登录界面制作
html简单的登录界面制作话不多说,老铁们直接拿代码去用吧. <!DOCTYPE html> <html><head><meta charset=" ...
php简单的登录界面,PHP实现简单用户登录界面
用PHP实现简单的用户登录界面,供大家参考,具体内容如下首先要实现用户登录界面需要一个html登录表单用户名: 密码: 重复密码: 然后开始按照流程图写PHP代码 if(trim($_POST[' ...

umi创建简单的登录界面

umi创建简单的登录界面相关推荐

最新文章

热门文章