react 搭建简单的后台管理系统

1.分析后台组成
后台基本组成是由菜单、头部、内容区域组成

2 后台具体实现
2.1 整体页面布局
页面整体布局为侧边栏(CommonAside)、头部(CommonHeader)、标签区域(CommonTag)、内容区域(Content)四部分组成,展开和收起功能是把展开和收起的状态,用一个变量值,存在全局的store里面,可以通过useSelector来实时获取当前状态,通过点击展开和收起按钮就触发diapatch提交相应的reducer进行修改值

注意: 如果Content不包含Outlet子路由会无法渲染

2.1.1 主页面的实现:
代码具体实现:
在这里插入图片描述

2.1.2 登录页面的实现
如果有token,就直接到首页,没有token,就去登录页
代码具体实现:
在这里插入图片描述

2.1.3 tab标签栏的实现

  1. 获取当前已经打开的tab列表,进行遍历
  2. 获取当前激活的tab,用于高亮展示
  3. 如果新增tab,则往tab列表新增一条数据,且高亮展示
  4. 如果删除一个tab,判断是否是最后一个,如果是最后一个,高亮往前移动,如果不是最后一个,高亮往后移动,首页不可删除
  5. 如果进行tab切换,则重新设置高亮,和路由跳转
    在这里插入图片描述
    2.2 运行效果
    在这里插入图片描述

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

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

相关文章

Unity基础(三)3D场景搭建

目录 简介: 一.下载新手资源 二.创建基本地形 三.添加场景细节 四,添加水 五,其他 六. 总结 简介: 在 Unity 中进行 3D 场景搭建是创建富有立体感和真实感的虚拟环境的关键步骤。 首先,需要导入各种 3D 模型资源,如建筑物、角色、道具等。这些模…

Java——IO流(一)-(3/8):File案例练习-文件遍历,文件搜索,删除非空文件夹,啤酒问题(需求分析、问题解决、运行结果)

目录 文件遍历(遍历所有文件及文件夹) 需求分析 问题解决 运行结果 文件搜索 需求分析 问题解决 运行结果 删除非空文件夹 啤酒问题(递归案例) 文件遍历(遍历所有文件及文件夹) 需求分析 需求&am…

【全开源】医护上门系统小程序APP公众号h5源码

医护上门系统:健康守护,就在您身边 🚪引言:开启全新的医护模式 在快节奏的现代生活中,健康问题往往成为我们关注的焦点。而“医护上门系统”正是为了满足这一需求,将专业的医疗服务送到您的家中。这一创新…

Github 2024-06-12 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10PHP项目1PLpgSQL项目1C++项目1Ventoy: 100%开源的可启动USB解决方案 创建周期:1534 天开发语言:C协议类型:GNU General Public Licen…

SpringCloud 网关Gateway配置并使用

目录 1 什么是网关? 2 Gateway的使用 2.1 在其pom文件中引入依赖 2.2 然后gateway配置文件中配置信息 2.3 启动网关微服务 3 网关处理流程 4 前端-网关-微服务-微服务间实现信息共享传递 1 什么是网关? 网关:就是网络的关口&#xff…

可视化剪辑,账号矩阵管理,视频分发,聚合私信多功能一体化营销工具 源代码开发部署方案

可视化剪辑,账号矩阵管理,视频分发,聚合私信多功能一体化营销工具 源代码开发部署方案 可视化剪辑: 可视化剪辑开发是一种通过图形化界面和拖放操作,以可视化的方式进行影片剪辑和编辑的开发方法。它可以让非专业用户…

Java的一些补充性介绍

目录 什么是JDK,JRE 快速入门 学习路线: 如何快速掌握技术或知识点: IDEA 常用快捷键 IDEA创建项目、模块、包、类 模板/自定义模板 包 包的命名:​编辑 常用的包 如引入包 断点调试(debug)​编辑 多线程:…

字符串循环遍历抵消、队列的应用-649. Dota2 参议院

题目链接及描述 649. Dota2 参议院 - 力扣(LeetCode) 题目分析 题目描述的意思:对于一个字符串循环执行抵消操作,(R的个数为1时可以使后续的一个D失效,D的个数为1时可以使后续的一个R失效)【相…

iOS18首个Beta测试版发布,功能介绍附beta升级办法!

今天凌晨,一年一度的苹果WWDC24开发者大会正式开幕,发布了iOS 18、iPadOS 18、macOS Sequoia、watch OS11等新系统。 大会结束后,苹果火速发布了首个iOS 18开发者Beta版,目前有开发者资格的用户已经可以下载体验尝鲜了。 本次更新…

unity开发Hololens编辑器运行 按空格没有手

选择DictationMixedRealityInputSystemProfile 如果自定义配置文件 需要可能需要手动设置 手部模型和材质球

ClickHouse快速安装教程(MacOS)

文章目录 ClickHouse快速安装教程(MacOS)1.ClickHouse2.快速安装3.快速启动3.1.启动服务器3.2.启动客户端 4.使用案例1.配置文件2.启动CK服务3.创建数据库4.创建表5.插入数据6.查询数据 ClickHouse快速安装教程(MacOS) 1.ClickHo…

YOLO检测环境安装配置

YOLO介绍 YOLO学习手册:YOLO教程 YOLO [ˈjoʊloʊ](You Only Look Once)是一种快速而准确的目标检测算法,由Joseph Redmon等人在2016年提出。YOLO被广泛应用于计算机视觉领域,包括实时视频分析、自动驾驶、安防监控、…

Spring应用如何打印access日志和out日志(用于分析请求总共在服务耗费多长时间)

我们经常会被问到这样一个问题。你接口返回的好慢呀,能不能提升一下接口响应时间啊?这个时候我们就需要去分析,为什么慢,慢在哪。而这首先应该做的就是确定接口返回时间过长确实是在服务内消耗的时间。而不是我们将请求发给网关或…

如何解决 Git 默认不区分文件名大小写和同名文件共存?

修改文件命名的大小写,不会有 git 记录 本文章的例子:将 demo.vue 文件命名改为 Demo.vue 1、在Git项目路径下执行该命令 git config core.ignorecase false (1)以上方法可以实现 git 区分 demo.vue 与 Demo.vue 文件&#xff0…

Catia零件颜色修改和透明度

可以调出这个功能 或者 可以修改透明度

2024 年 5 月区块链游戏研报:市值增长、玩家参与变迁、迷你游戏兴起

作者:stellafootprint.network 数据来源:GameFi 研究页面 2024 年 5 月,以太坊的表现因 SEC 批准现货以太坊 ETF 的初步申请而得到显著提振。区块链游戏代币的总市值达到 201 亿美元,环比上涨 6.7%。然而,尽管市值有…

[大模型]LLaMA3-8B-Instruct Lora 微调

本节我们简要介绍如何基于 transformers、peft 等框架,对 LLaMA3-8B-Instruct 模型进行 Lora 微调。Lora 是一种高效微调方法,深入了解其原理可参见博客:知乎|深入浅出 Lora。 这个教程会在同目录下给大家提供一个 nodebook 文件&#xff0c…

观成科技:基于深度学习技术的APT加密流量检测与分类检测方案

一、前言 近年来APT攻击的案例屡见不鲜,给国家、企业以及个人的利益造成极大威胁。随着流量加密技术的不断成熟,许多APT组织倾向于将流量加密后进行传输,从而保护传输内容。由于加密流量的实际载荷已被加密,故采用原始的流量检测…

[大模型]Llama-3-8B-Instruct FastApi 部署调用

环境准备 在 Autodl 平台中租赁一个 3090 等 24G 显存的显卡机器,如下图所示镜像选择 PyTorch-->2.1.0-->3.10(ubuntu22.04)-->12.1。 接下来打开刚刚租用服务器的 JupyterLab,并且打开其中的终端开始环境配置、模型下载和运行演示。 pip 换源…

RabbitMQ从入门到入土

同步与异步 同步调用 优势: 时效性强,等到结果后就返回 问题: 扩展性差 性能下降 级联失败问题 异步调用 优势: 耦合度低,扩展性强 无需等待,性能好 故障隔离,下游服务故障不影响上游 缓…