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

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

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


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

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

一.实现左侧导航栏的二级路由


前言:原本打算是不使用antd,只想用Material UI来完成左侧导航列表的折叠伸缩效果的,结果试了一上午,只能感叹不得不承认还是antd封装的后台管理系统完善。

image.png

image.png

虽然使用MaUI也完成了相关的一些搭配,不过它封装的效果不够完善,它是利用<collapes>单独的组件搭配<ListItem>的onclick事件控制某个状态的变化操作<collapes>中的in属性的变化,来完成折叠伸缩的效果,但是很坑的是如果你想把整个左边菜单栏用数组渲染出来的时候,就会发现一个问题,某个列表的点击事件会把所有的列表全部展开,因为渲染列表的时候所有的的in属性共用着一个状态,下面是我只点击了·商品·这个链接出现的效果:

image.png

这是完全不符合我的预期的,虽然你可以给每个上面的创建一个单独的onClick事件,但是这是非常繁琐,不管是代码的复用性还是后面用数组渲染,都是很难管理的。(可能有好的办法但是以目前我的水平来说暂时办不到,以后有机会可能会更改本篇文章)。

故果断采用antd的组件。

image.png

由于antd把折叠打开的效果封装在了单独的组件内,所以各个组件相互都没影响

image.png

这样就清爽多了. 接下来去路由表里设置二级路由。创建以下文件夹,并且创建相应的.jsx文件,分别对应我们后续需要用到的各个部分。

image.png

在这里再强调一下

这些路由组件,都是dashboard页面的子路由,所以我们就路由表的组件的路由下面创建子路由就可以了.

image.png

同样的道理,想用就得先引入:

image.png

依次设置以下子路由,不要忘了children对象的属性是一个数组。

image.png

然后去对应的地方添加标签,这里我把key换成路由路径了,这不是必须的。

image.png

(图表页面同样的道理,图片太大就不放进来了)

二.列表渲染的优化


现在虽然看到了页面的效果,但是这样的列表是死的,不方便复用。我们需要把它通过向之前的todolist案例一样,通过数组把它渲染出来。 首先需要做的是,观察这个列表的结构,思考数组里需要有哪些值。在Config文件夹下创建siderBarList文件夹

image.png

我知道了需要渲染用到的变量是这些,而我的<Item>组件的key和<Link>组件的path是一样的,所以可以只设置一个关键词key就可以了,icon用来存放图标信息。

image.png

我们先不用管折线图,先完成这一部分。

image.png

返会侧边栏组件,不需要思考,直接引入刚刚写好的变量

image.png

现在需要编写一个函数来自动选入这个数组,

1.逐步分析,首先需要判断这个渲染的对象是否有二级路由,如果没有,直接渲染出<Menu.Item>即可。这个和常规的list渲染没什么区别,下面即可渲染出没有二级路由的首页或者角色管理等。


image.png

2.如果有二级路由的话,我们就需要考虑二次渲染,


image.png

这里使用了函数递归调用自身,其实这里就相当于重新写了这行代码而已,需要仔细去理解一下。

image.png

看一下页面效果,并没有报错

image.png


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