【React】AntD组件的使用--极客园--02.登录模块

基本结构搭建

在这里插入图片描述

实现步骤

  1. 在 Login/index.js 中创建登录页面基本结构
  2. 在 Login 目录中创建 index.scss 文件，指定组件样式
  3. 将 logo.png 和 login.png 拷贝到 assets 目录中

代码实现
pages/Login/index.js

import './index.scss'
import { Card, Form, Input, Button } from 'antd'
import logo from '@/assets/logo.png'

const Login = () => {
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form>
          <Form.Item>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login

pages/Login/index.scss

.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: center/cover url('~@/assets/login.png');

  .login-logo {
    width: 200px;
    height: 60px;
    display: block;
    margin: 0 auto 20px;
  }

  .login-container {
    width: 440px;
    height: 360px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgb(0 0 0 / 10%);
  }

  .login-checkbox-label {
    color: #1890ff;
  }
}

表单校验实现

在这里插入图片描述

实现步骤

  1. 为 Form 组件添加 validateTrigger 属性，指定校验触发时机的集合
  2. 为 Form.Item 组件添加 name 属性
  3. 为 Form.Item 组件添加 rules 属性，用来添加表单校验规则对象
    在这里插入图片描述

代码实现
page/Login/index.js

import './index.scss'
import { Card, Form, Input, Button, message } from 'antd'
import logo from '@/assets/logo.png'
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async (values) => {
    console.log(values)
    // 触发异步action fetchLogin
    await dispatch(fetchLogin(values))
    // 1. 跳转到首页
    navigate('/')
    // 2. 提示一下用户
    message.success('登录成功')
  }
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form onFinish={onFinish} validateTrigger="onBlur">
          <Form.Item
            name="mobile" //指定校验字段名
            // 多条校验逻辑 先校验第一条 第一条通过之后再校验第二条
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号格式'
              }
            ]}>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
            ]}>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login

获取登录表单数据

实现步骤

  1. 为 Form 组件添加 onFinish 属性，该事件会在点击登录按钮时触发
  2. 创建 onFinish 函数，通过函数参数 values 拿到表单值
  3. Form 组件添加 initialValues 属性，来初始化表单值
    在这里插入图片描述

代码实现
pages/Login/index.js

// 点击登录按钮时触发 参数values即是表单输入数据
const onFinish = formValue => {
  console.log(formValue)
}

<Form
  onFinish={ onFinish }
>...</Form>

在这里插入图片描述

封装request工具模块

业务背景: 前端需要和后端拉取接口数据，axios是使用最广的工具插件，针对于项目中的使用，我们需要做一些简单的封装

实现步骤

  1. 安装 axios 到项目
  2. 创建 utils/request.js 文件
  3. 创建 axios 实例，配置 baseURL，请求拦截器，响应拦截器
  4. 在 utils/index.js 中，统一导出request
    在这里插入图片描述
npm i axios

// axios的封装处理
import axios from "axios"
import { getToken, removeToken } from "./token"
import router from "@/router"
// 1. 根域名配置
// 2. 超时时间
// 3. 请求拦截器 / 响应拦截器

const request = axios.create({
  baseURL: 'http://geek.itheima.net/v1_0',
  timeout: 5000
})

// 添加请求拦截器
// 在请求发送之前 做拦截 插入一些自定义的配置 [参数的处理]
request.interceptors.request.use((config) => {
  // 操作这个config 注入token数据
  // 1. 获取到token
  // 2. 按照后端的格式要求做token拼接
  const token = getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 添加响应拦截器
// 在响应返回到客户端之前 做拦截 重点处理返回的数据
request.interceptors.response.use((response) => {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data
}, (error) => {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  // 监控401 token失效
  console.dir(error)
  if (error.response.status === 401) {
    removeToken()
    router.navigate('/login')
    window.location.reload()
  }
  return Promise.reject(error)
})

export { request }

Axios

使用Redux管理token

安装Redux相关工具包

npm i react-redux @reduxjs/toolkit

配置Redux

import { createSlice } from '@reduxjs/toolkit'
import { http } from '@/utils'
const userStore = createSlice({
  name: 'user',
  // 数据状态
  initialState: {
    token:''
  },
  // 同步修改方法
  reducers: {
    setUserInfo (state, action) {
      state.userInfo = action.payload
    }
  }
})

// 解构出actionCreater
const { setUserInfo } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer

// 异步方法封装
const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    const res = await http.post('/authorizations', loginForm)
    dispatch(setUserInfo(res.data.token))
  }
}

export { fetchLogin }

export default userReducer

import { configureStore } from '@reduxjs/toolkit'

import userReducer from './modules/user'

export default configureStore({
  reducer: {
    // 注册子模块
    user: userReducer
  }
})

实现登录逻辑

业务逻辑：

  1. 跳转到首页
  2. 提示用户登录成功
import { message } from 'antd'
import useStore from '@/store'
import { fetchLogin } from '@/store/modules/user'
import { useDispatch } from 'react-redux'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async formValue => {
    await dispatch(fetchLogin(formValue))
    navigate('/')
    message.success('登录成功')
  }
  return (
    <div className="login">
     <!-- 省略... -->
    </div>
  )
}

export default Login

token持久化

业务背景: Token数据具有一定的时效时间，通常在几个小时，有效时间内无需重新获取，而基于Redux的存储方式又是基于内存的，刷新就会丢失，为了保持持久化，我们需要单独做处理

封装存取方法

// 封装存取方法

const TOKENKEY = 'token_key'

function setToken (token) {
  return localStorage.setItem(TOKENKEY, token)
}

function getToken () {
  return localStorage.getItem(TOKENKEY)
}

function clearToken () {
  return localStorage.removeItem(TOKENKEY)
}

export {
  setToken,
  getToken,
  clearToken
}

实现持久化逻辑

import { getToken, setToken } from '@/utils'
const userStore = createSlice({
  name: 'user',
  // 数据
  initialState: {
    token: getToken() || ''
  },
  // 同步修改方法
  reducers: {
    setUserInfo (state, action) {
      state.token = action.payload
      // 存入本地
      setToken(state.token)
    }
  }
})

刷新浏览器，通过Redux调试工具查看token数据

在这里插入图片描述

请求拦截器注入token

业务背景: Token作为用户的数据标识，在接口层面起到了接口权限控制的作用，也就是说后端有很多接口都需要通过查看当前请求头信息中是否含有token数据，来决定是否正常返回数据
在这里插入图片描述

拼接方式：config.headers.Authorization = Bearer ${token}}

utils/request.js

// 添加请求拦截器
request.interceptors.request.use(config => {
  // if not login add token
  const token = getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

路由鉴权实现

业务背景：封装 AuthRoute 路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面
实现思路：判断本地是否有token，如果有，就返回子组件，否则就重定向到登录Login

实现步骤

  1. 在 components 目录中，创建 AuthRoute/index.jsx 文件
  2. 登录时，直接渲染相应页面组件
  3. 未登录时，重定向到登录页面
  4. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

代码实现
components/AuthRoute/index.jsx

import { getToken } from '@/utils'
import { Navigate } from 'react-router-dom'

const AuthRoute = ({ children }) => {
  const isToken = getToken()
  if (isToken) {
    return <>{children}</>
  } else {
    return <Navigate to="/login" replace />
  }
}

export default AuthRoute

src/router/index.jsx

import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import AuthRoute from '@/components/Auth'


const router = createBrowserRouter([
  {
    path: '/',
    element: <AuthRoute><Layout /></AuthRoute>,
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/734217.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue elementui table给表格中满足条件的每一条记录添加计时器

vue elementui table给表格中满足条件的每一条记录添加计时器

需求&#xff1a; 在前端给表格中给满足条件的每一条记录增加一个计时器&#xff0c;用于计算工作时长。 1.数据库中存储的有每条记录的作业开始时间&#xff0c;将当前时间和作业开始时间计算一个差值&#xff0c;作为作业时长的初始值&#xff1b; 2.把满足条件的每条记录绑…
阅读更多...
手写docker:你先玩转namespace再来吧

手写docker:你先玩转namespace再来吧

哈喽&#xff0c;我是子牙老师。今天咱们聊聊Linux namespace 瓦特&#xff1f;你没听过namespace&#xff1f;那有必要科普一下了&#xff1a;namespace是Linux内核提供的一种软件性质的资源隔离机制。容器化技术&#xff0c;比如docker&#xff0c;就是基于这样的机制实现的…
阅读更多...
北方银行 - HDFS 现代化快速案例研究

北方银行 - HDFS 现代化快速案例研究

故事很重要&#xff0c;客户故事是最好的。他们提供令人瞠目结舌的统计数据或克服巨大障碍的那些是获得最佳头条新闻的那些。它们也是最难发表的。我们知道&#xff0c;因为我们将与您分享一些我们正在孜孜不倦地努力出版的内容 - 但现在它们将保持匿名。话虽如此&#xff0c;如…
阅读更多...
软件工程学系统设计

软件工程学系统设计

一、概述 软件设计阶段用比较抽象概括的方式确定目标系统如何完成预定的任务&#xff0c;即确定系统的物理模型。 回答系统 “做什么”。 软件设计是将需求转化为最终产品的唯一途径&#xff0c;是后续开发和维护工作的基础。 1、软件设计过程 从工程管理角度&#xff0c;…
阅读更多...
【Research】Model Stealing

【Research】Model Stealing

What is Model Stealing？ Extract an approximation that of the target model that “closely matches” the original Accuracy？ Fidelity？ Funtional equivalence？ Threat Models API Access Model extraction using： Prediction Vectors Labels Only Model Access …
阅读更多...
基于SpringBoot+Vue大学生网络教学平台设计和实现(源码+LW+调试文档+讲解等)

基于SpringBoot+Vue大学生网络教学平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…
阅读更多...
Bootloader -- U-Boot 介绍

Bootloader -- U-Boot 介绍

Bootloader -- U-Boot 介绍 1 介绍1.1 概述1.2 知名 BootloaderLILO (Linux Loader)GRUB (GNU GRand Unified Bootloader)LoadlinROLO (Rockbox Loader)EtherbootLinuxBIOS (现在叫 coreboot)BLOBU-BootRedBoot 1.3 BootLoader 和 Monitor 区别1.4 U-Boot 的源码结构1.5 U-Boot…
阅读更多...
SSRF(2)

SSRF(2)

Gopher协议的利用 gopher协议是ssrf利用中最强大的协议 gopher协议支持发出GET、POST请求&#xff1a; 可以先截获get请求包和post请求包&#xff0c;再构成符合gopher协议的请求。 默认端口为70,一般需发送到80端口 如果发起post请求&#xff0c;回车换行需要使用%0D%0A&…
阅读更多...
Docker：centos79-docker-compose安装记录

Docker：centos79-docker-compose安装记录

1.安装环境&#xff1a;centos7.9 x86 2.安装最新版&#xff1a; [rootlocalhost ~]# curl -fsSL get.docker.com -o get-docker.sh [rootlocalhost ~]# sh get-docker.sh # Executing docker install script, commit: e5543d473431b782227f8908005543bb4389b8desh -c yum in…
阅读更多...
PHPMailer发送的中文内容乱码如何解决

PHPMailer发送的中文内容乱码如何解决

一&#xff1a; PHPMailer sdk 文件中有个设置默认编码的位置&#xff1a; vendor/phpmailer/phpmailer/src/PHPMailer.php 二&#xff1a; 实际业务代码中&#xff1a; require /sdk/PHPMailer/vendor/autoload.php;$mail new PHPMailer(true);try {//Server settings$mai…
阅读更多...
基于Spring Boot+VUE职称评审管理系统

基于Spring Boot+VUE职称评审管理系统

1管理员功能模块 管理员登录&#xff0c;通过填写注册时输入的用户名、密码、角色进行登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员登录进入职称评审管理系统可以查看首页、个人中心、用户管理、评审员管理、省份管理、评审条件管理、职称申请管理、结果公布管理、…
阅读更多...
containerd手动配置容器网络

containerd手动配置容器网络

containerd手动配置容器网络 机器详情nerdctl启动一个不带网络的容器获取容器ID、PID与network namespace路径准备bridge插件的执行配置文件通过下面的命令调用bridge插件准备tuning插件文件执行下面的命令调用tuning插件准备portmap插件文件执行下面的命令调用portmap插件删除…
阅读更多...
Android记录9--实现转盘效果

Android记录9--实现转盘效果

自定义View /2013.10.16_TurnPlate_Demo/src/com/wwj/turnplate/TurnPlateView.java package com.wwj.turnplate; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; im…
阅读更多...
日本新入管法通过：2027年起实施[育成就劳]制度，新制度更适合外国劳工在日本工作和生活！

日本新入管法通过：2027年起实施[育成就劳]制度，新制度更适合外国劳工在日本工作和生活！

最近&#xff0c;日本新入管法&#xff1a;新的育成就业制度预计将在2027年开始实施&#xff0c;而1993年开始的旧的技能实习制度将被废除。 新制度的主要内容 新制度的目的是解决日本国内的劳动力不足问题&#xff0c;确保有足够的劳动者。表示&#xff1a;“为了让日本成为…
阅读更多...
上手微服务框架go-zero

上手微服务框架go-zero

文章目录 微服务框架与web框架的区别点在哪儿&#xff1f;为什么还要有微服务框架微服务框架与web框架的对比小结 为什么选go-zero&#xff1f;框架对比 下载并认识go-zero认识go-zero环境要求组成下载 实践go-zero基础功能案例apirpc服务功能说明准备构建rpc服务构建api服务服…
阅读更多...
头歌资源库（14）残缺棋盘

头歌资源库（14）残缺棋盘

一、 问题描述 二、算法思想 首先&#xff0c;将2^k 2^k的棋盘划分为四个相等大小的子棋盘&#xff0c;定义为左上、左下、右上和右下四个子棋盘。 然后&#xff0c;根据残缺格的坐标&#xff0c;确定其中一个子棋盘是不完整的&#xff0c;即残缺子棋盘。假设残缺子棋盘是左…
阅读更多...
导入别人的net文件报红问题

导入别人的net文件报红问题

1. 使用cmd命令 dotnet --info 查看自己使用的SDK版本 2.直接找到项目中的 global.json 文件&#xff0c;右键打开&#xff0c;直接修改版本为本机的SDK版本&#xff0c;就可以用了
阅读更多...
区块链媒体发布推广秘籍大揭秘-华媒舍

区块链媒体发布推广秘籍大揭秘-华媒舍

区块链技术迅猛发展&#xff0c;成为全球瞩目的热门领域。随之而来的是区块链媒体的兴起&#xff0c;成为传播和推广区块链知识、项目和应用的重要平台。本文将揭示区块链媒体发布推广的秘籍&#xff0c;为读者深入了解该领域提供详尽科普介绍。 一、什么是区块链媒体&#xff…
阅读更多...
Python爬虫学习 | Scrapy框架详解

Python爬虫学习 | Scrapy框架详解

一.Scrapy框架简介 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总共有四大部分&am…
阅读更多...
C语言| 数组的折半查找

C语言| 数组的折半查找

数组的折半查找 折半查找&#xff1a;在已经排好序的一组数据中快速查找数据。 先排序&#xff0c;再使用折半查找。 【折半查找的运行过程】 1 存储数组下标 low最小的下标&#xff0c;mid中间的下标&#xff0c; high最大的下标 2 key存放查找的值&#xff0c;每一次对比后…
阅读更多...
最新文章

Copyright @ 2022~2023