基于React.js的后台管理系统开发全过程(三)

简介: 基于React.js的后台管理系统开发全过程(三)

夏天好热啊~本文章推荐开放空调阅读😊👉便携式迷你小空调


由于采用了黑科技,手机听筒放在脸庞可以有微风吹过,电脑端暂时没有实现,后续会继续优化~.

tips:这个空调我的文章中也有哦~

image.png

开始记录过程的时候切记不要着急马上动手敲代码,稍微回顾一下之前使用到的知识,可以让你的思路越发的清晰。

回顾一下,上一篇所用到的知识。

基于React.js的后台管理系统开发全过程(二)

1.如何解决跨域问题

2.路由表的配置

3.window对象下的,localStorage.getItem/setItem/removeItem方法的使用

接下来是正文:


一.优化用户体验


前面我们已经完成了,对主页面的刷新,不会丢失用户登录信息的功能。接下来让我们思考下面一个场景,我关闭浏览器,输入localhost:3000该页面还是会直接进入到login,但是用户有可能是手抖,或者某些原因,并不是想真正关闭网页,那么我们就需要设计当用户再次登陆localhost:3000的时候,直接进入主页面而不是登陆页面。

1.思路清晰首先来到登陆页面


image.png

我们都知道react函数组件必须有一个返回值也就是必须return一些组件来渲染页面,但是你是否忽略了它本身就是一个函数呢?如果它和react毫无关系的话,你肯定可以想到if语句来判断,但是正因为它是react的语法,所以对于初学者来说常常把它想的太过于高深,误认为这就是react的固定写法,然而却忽略了react只是JS的语法库而已,故在学习的过程中一定要带入自己的思考,不要为了实现效果而去做这件事,一定要清楚,结果不是目的,过程才是我们成长的重中之重。

理清楚组件本身就是一个函数,那么我们就可以在它的return里做文章

image.png

这里主要的思路就是,在loginIn这个界面做一个重定向,如果当前localStorage.getItem有值,那么我们就可以重定向路由到<Dashboard>这个组件。在这里我们还有一个小bug需要解决,当我们进入<Dashboard>页面时,

image.png

2.思考主页面的效果


我们把Local Storage里的信息清楚以后,刷新页面,页面并不会跳转到组件,并且·你好${userName}也会变成undefined,原因就在于,我们当前所处的页面其实是<Dashboard>这个页面,浏览器会缓存这个页面信息,但其实我们真正希望的是页面可以返回到<Login>,同理,我们需要在这个组件里做同样的判断:

image.png

这时候我们清楚localStorage里的用户信息后,就会跳转到<Login>了。

二.实现退出登录的效果


image.png

前置工作都准备好了,接下来只需要想办法实现点击按钮把localStorage里的用户信息清楚就可以了,so easily,给按钮调用我们已经封装好的localStorageremoveItem()方法即可。

image.png

这里可能会让人产生疑问,我不是已经在做过逻辑判断了吗?

image.png

为什么还要重写navigate(‘/login’)呢?这个问题留给朋友们自己思考吧~

三.主页路由跳转的实现


image.png

我们暂时需要用到首页,商品这个两个选项。我们先实现首页这个组件的呈现。

1.设置子路由


使用路由的时候,我们需要思考我们希望它呈现在哪个部分,现在可以确定是呈现在<Dashboard>这个页面的,因为我们使用的react-router-dom V6,可以用路由表来实现字路由的跳转,所以先在<Dashboard>里占一个位置,要用就的Outlet就得先引入:

image.png

然后

image.png

2.设置路由表


因为是<Dashboard>的字路由,所以直接在这个路径下创建children对象,注意,children属性的值是一个数组。就和最外层的useRoutes一样,接收一个数组。

image.png

这时候刚进入<Dashboard>还不会自动跳转到首页,这时候别忘了设置一下重定向

image.png

3.设置


首先引入react-router-dom里的<Link>组件,由于我使用的Material UI组件库有自己封装的link组件,为了避免以后产生一下不必要的麻烦,所以我给react的link重命名Rlink然后再引入。

image.png

接来下让ListItem表现为{Rlink}即可添加to属性定向到我们的home注意,这里不要写成to='/home'这样你表示的是一级路由,意思是在localhost:3000后面寻找/home组件,但是我们其实是没有这个组件的,就会报错。(你是在想写斜杠,就要写成to="./home",代表在当前路径下寻找home组件)

image.png

让我们看看效果

image.png

点击登陆,马上跳转到<Home>组件,功能实现。

image.png




相关文章
|
7月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
7月前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
141 0
|
前端开发 数据库 Docker
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
88 0
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
7月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
7月前
|
前端开发 JavaScript
你可能需要的React开发小技巧!(下)
你可能需要的React开发小技巧!(下)
|
7月前
|
前端开发 API
你可能需要的React开发小技巧!(上)
你可能需要的React开发小技巧!(上)
|
7月前
|
前端开发 JavaScript
React vscode 开发插件与代码补全提示
React vscode 开发插件与代码补全提示
273 0
|
存储 前端开发 JavaScript
react typescript 开发
react typescript 开发
64 0
|
前端开发 JavaScript 容器
react组件化开发详解
react组件化开发详解
126 0