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

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

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

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

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

以下是正文:

一.进一步优化用户体验


目前已经实现了用户第一次访问localhost:3000会自动跳转到首页

image.png

但是左边的首页确并没有在初次渲染的时候被选中,可以看到并没有变为antd选中时的蓝色

image.png

这个解决也很简单,antd有封装好的API直接使用即可。

image.png

<Menu>组件使用现有的API即可。defaultSelectedKeys={[siderBarList[0].key]}。至于里面的变量为什么写成这个,这个留给大家思考,如果有兴趣,可以去查阅这个链接里的侧边栏渲染变量的定义。基于React.js的后台管理系统开发全过程(五)

接下来就完成了进入主页自动渲染首页图标的UI颜色

image.png

到这一步不要以为大功告成了,有个bug需要思考,像上面这样做,我不管在哪个列表,刷新,虽然页面还停留在role,但是一旦刷新就会重新UI图标在首页上,这并不是我想要的效果。

这里我采用了极度不清真的手法来完成这个任务,虽然不推荐读者使用,但是效果是完全可以实现的! 我在侧边栏组件内定义了一个变量path来存储当前url的地址,并且将前面的dashiboard地址替换成空字符串,这样就可以完美填写antd里的APIdefaultSelectedKeys={[path]}

image.png

image.png

即使我在user这个界面刷新,淡蓝色的背景色依然会正确的渲染在user这里。

image.png

(>.<)虽然这个方法极度不清真,但是暂时先这样吧,后续我会更新其它方法的。

----补充:目前已经将,defaultSelectedKeys={[path]},改为selectedKeys={[path]}因为default...只会在页面加载的时候渲染一次,而selected会动态的渲染。


先不谈网页,先讲一个额外的知识点,我并不希望只是单纯的复述一些网页效果的实现。我更希望的是,我可以通过这个项目来学习更多的额外知识,如果单一的是为了结果而去实现,却忘记了带入自己的思考,那学习起来该多无趣。

在Material UI里使用的是jss的样式,它的写法和less那些预编译器大差不差,但是它是真正的在js文件里写样式的一个依赖,刚开始我也不习惯,但是写起来是真的舒服。

首先我们在Dashboard里创建一个style.js的文件,把从官方复制的组件属性复制到这个里面。

image.png

先引入重要的一个核心勾子,makeStyles,

image.png

今天研究material UI的API研究了半天,所以更新较少........还是那句话,我们在学习过程中并不是为了目的而去实现目的,学习的过程中不管是复习的老知识,还是新东西,都是最宝贵的。加油!


相关文章
|
7月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
7月前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
143 0
|
前端开发 数据库 Docker
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
89 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 开发插件与代码补全提示
285 0
|
存储 前端开发 JavaScript
react typescript 开发
react typescript 开发
65 0
|
前端开发 JavaScript 容器
react组件化开发详解
react组件化开发详解
129 0