react_后台管理_项目

目录

1.运行项目

2. 项目结构

①项目顶部导航栏

②项目左侧导航栏

③主页面-路由切换区


本项目使用的是 react+ts+scss 技术栈。

1.运行项目

在当前页面顶部下载本项目,解压后使用编辑器打开,然后再终端输入命令:

npm i

下载依赖后,运行项目:

npm run start

此时项目运行起来了,可以再浏览器看到运行效果:

2. 项目结构

在做自己的项目时,对于这个项目目录我们只需要更改以下几个文件:

src目录下的文件和App.tsx,可以根据自己项目需要进行更改。

①项目顶部导航栏

header.tsx:

import logo from '../../assets/images/logo.svg';
import './header.scss';function Header() {return (<div className="headerAll"><header className="headerBox"><img src={logo} alt="logo" className='headerImg' /><div className="headerText">后台管理系统</div><div className="circle">zh</div></header><header className="headerBoxPlaceholder"></header></div>);
}export default Header;

header.scss:

.headerBox {width: 100vw;height: 56px;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9;min-width: 1140px;overflow: auto;.headerImg {width: 30px;height: 30px;position: absolute;top: 13px;left: 17px;}.headerText {font-size: 20px;position: absolute;top: 14px;left: 57px;font-weight: bold;}.navText {font-size: 16px;position: absolute;top: 16px;left: 218px;}.circle {width: 28px;height: 28px;line-height: 28px;border-radius: 50%;background-color: #19edcd;position: absolute;top: 14px;right: 14px;font-size: 12px;color: #FFF;text-align: center;}
}.headerBoxPlaceholder {width: 100vw;height: 56px;box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
}
②项目左侧导航栏

leftNavigation.tsx:

使用左侧导航图标使用svg,方便切换状态时换色,以及后期更改主题色。

import { ReactComponent as IconEducationGroup } from '../../assets/images/icon-education-group.svg';
import { ReactComponent as IconEduGroup } from '../../assets/images/icon-edu-group.svg';
import { ReactComponent as IconSet } from '../../assets/images/icon-set.svg';
import Arrow from "../../assets/images/icon-arrow.png";
import './leftNavigation.scss';
import { useState } from 'react';function LeftNavigation() {// 左侧导航,一级按钮let navText = ['企业信息', '组织管理', '系统设置'];// 二级导航按钮,比如企业信息没有子级则二级导航为空数组let navTextChild = [[], ['组织架构', '部门设置'], ["日志设置", '通知设置']];// 当前选中的是哪个按钮,0是一级按钮,-1代表它没有子级选中的就是它本身const [currentBtn, setCurrentBtn] = useState([0, -1]);// 如果存在子层级,子层级展开还是合并,0合并,1展开const [childShow, setChildShow] = useState([1, 1, 1, 1]);/*** 判断按钮背景颜色* @param index 索引* @param flag 标志* @param indexChild 二级索引* @returns 返回className*/function changeBGColor(index: number, flag: string, indexChild?: number): string {if (flag === 'one') {if (navTextChild[index].length === 0) {if (currentBtn[0] === index && navTextChild[index].length === 0) return 'first-order-tag bg-color'}} else {if (navTextChild[index].length !== 0 && currentBtn[0] === index && currentBtn[1] === indexChild) return 'first-order-tag bg-color'}return 'first-order-tag';}/*** 点击导航按钮进行页面切换* @param indexOne 一级索引* @param indexTwo 二级索引*/function changeNavClick(indexOne: number, indexTwo?: number): void {if (navTextChild[indexOne].length === 0) { setCurrentBtn([indexOne, -1]) }if (indexTwo !== undefined && navTextChild[indexOne].length !== 0) {setCurrentBtn([indexOne, indexTwo])}if (indexTwo === undefined && navTextChild[indexOne].length !== 0) {updateItem(indexOne, childShow[indexOne] === 1 ? 0 : 1)}}/*** 只更新数组中的一个数值,数组[1]的值* @param indexFlag 一级索引* @param newValue 新的数值*/function updateItem(indexFlag: number, newValue: number) {setChildShow(prevItems =>prevItems.map((item, index) => {if (index === indexFlag) {return newValue;}return item;}));}return (<div className="leftNavigationAll"><div className="leftNavigationBox">{navText.map((item, index) => (<div key={index}>{/* 第一层级 */}<div key={index} className={changeBGColor(index, 'one')} onClick={() => changeNavClick(index)}><div className={currentBtn[0] === index ? 'navTextStyle-selected' : 'navTextStyle'}> {item}</div>{index === 0 && <IconEducationGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 1 && <IconEduGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 2 && <IconSet className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} fill={currentBtn[0] === index ? '#00B498' : '#505553'} />}{navTextChild[index].length !== 0 && <img alt="箭头" src={Arrow} className={childShow[index] === 1 ? 'arrow' : 'arrowHidden'}></img>}</div>{/* 第二层级 */}<div className={childShow[index] === 1 ? 'showDiv' : 'hiddenDiv'}>{navTextChild[index].length !== 0 && navTextChild[index].map((itemChild, indexChild) => (<div key={indexChild} className={changeBGColor(index, 'two', indexChild)} onClick={() => changeNavClick(index, indexChild)}><div className={(currentBtn[1] === indexChild && currentBtn[0] === index) ? 'navTextStyle-selected' : 'navTextStyle'}> {itemChild}</div></div>))}</div></div>))}</div></div>);
}export default LeftNavigation;

leftNavigation.scss:

.bg-color {background-color: #E8FAF8;
}.showDiv {display: block;
}.hiddenDiv {display: none;
}.leftNavigationBox {z-index: 8;width: 200px;height: 100vh;min-height: 400px;background-color: #FFF;position: fixed;top: 0;left: 0;padding-top: 72px;padding-left: 8px;padding-right: 8px;box-sizing: border-box;.first-order-tag {width: 184px;height: 40px;// background-color: #E8FAF8;margin-bottom: 4px;border-radius: 6px;position: relative;cursor: pointer;&:hover {background-color: #F2F5F4;}.arrow {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;transform: rotateZ(180deg);}.arrowHidden {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;// transform: rotateZ(180deg);}.icon-svg {width: 18px;height: 18px;position: absolute;left: 12px;top: 11px;}.navTextStyle {font-size: 14px;color: #505553;position: absolute;left: 42px;top: 9px;}.navTextStyle-selected {font-size: 14px;color: #00B498;position: absolute;left: 42px;top: 9px;}}
}
③主页面-路由切换区

App.tsx:

所有路由写在这里,然后再左侧导航栏进行切换。

import './App.scss';
import Header from './pages/navigation/header';
import LeftNavigation from './pages/navigation/leftNavigation';
import Home from './pages/home';
import { Route, Routes } from 'react-router-dom'function App() {return (<div className="App"><Header /><LeftNavigation />{/* 2. 使用路由组件,渲染路由,并且传入路由配置 */}<Routes>{/* comopnent替换为 element */}<Route path='/' element={<Home />}></Route></Routes></div>);
}export default App;

home / index.tsx:

import './index.scss';
function Home() {return (<div className='homeBox'><div className='homeBoxText'>应用主页</div></div>);
}export default Home;

以上就是项目的主要内容,可以将此项目当作基础框架进行二次开发。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【应急响应】Windows应急响应 - 基础命令篇

前言 在如今的数字化时代&#xff0c;Windows系统面对着越来越复杂的网络威胁和安全挑战。本文将深入探讨在Windows环境下的实战应急响应策略。我们将重点关注实际应急响应流程、关键工具的应用&#xff0c;以及如何快速准确地识别和应对安全事件。通过分享实际案例分析&#…

FIO压测磁盘性能以及需要注意的问题

一、压测类型 1、顺序读&#xff08;IO&#xff09;&#xff1a;read&#xff0c;bs1M&#xff0c;job数从1开始往上加&#xff1a;2、3、4... 2、顺序写&#xff08;IO&#xff09;&#xff1a;write&#xff0c;bs1M&#xff0c;job数从1开始往上加&#xff1a;2、3、4... …

如何通过 1688 商品详情的 API 接口获取商品的详细信息

在当今数字化商业的大背景下&#xff0c;能够从 1688 这样规模庞大且商品种类丰富的电商平台中准确、高效地获取商品的详细信息&#xff0c;对于众多企业和开发者而言&#xff0c;具有举足轻重的意义。而通过 1688 商品详情的 API 接口来实现这一目标&#xff0c;无疑是一种强大…

【ACM出版,马来西亚-吉隆坡举行】第四届互联网技术与教育信息化国际会议 (ITEI 2024)

作为全球科技创新大趋势的引领者&#xff0c;中国不断营造更加开放的科技创新环境&#xff0c;不断提升学术合作的深度和广度&#xff0c;构建惠及各方的创新共同体。这是对全球化的新贡献&#xff0c;是构建人类命运共同体的新贡献。 第四届互联网技术与教育信息化国际学术会议…

【 木兰宽松许可证】

木兰宽松许可证&#xff0c; 第1版 2019年8月 http://license.coscl.org.cn/MulanPSL 您对“软件”的复制、使用、修改及分发受木兰宽松许可证&#xff0c;第1版&#xff08;“本许可证”&#xff09;的如下条款的约束&#xff1a; 定义 “软件”是指由“贡献”构成的许可在“本…

【C++知识点总结全系列 (07)】:模板与泛型编程详细总结与分析

模板与泛型编程 1、概述(1)What&#xff08;什么是模板、泛型编程&#xff09;(2)Why(3)Which(4)模板参数A.WhatB.HowC.模板参数的类型成员D.默认模板参数 2、模板函数3、模板类(1)How&#xff08;如何定义和使用模板类&#xff09;(2)成员模板 4、模板实参推断(1)What&#xf…

入侵检测模型

入侵检测模型&#xff08;Intrusion Detection Model&#xff09;在网络安全中起着至关重要的作用。它们用于识别和响应未经授权的访问和攻击行为。以下是常见的入侵检测模型的详细介绍&#xff1a; 一、入侵检测模型分类 基于签名的入侵检测模型&#xff08;Signature-Based …

昇思25天学习打卡营第7天|Pix2Pix实现图像转换

文章目录 昇思MindSpore应用实践基于MindSpore的Pix2Pix图像转换1、Pix2Pix 概述2、U-Net架构定义UNet Skip Connection Block 2、生成器部分3、基于PatchGAN的判别器4、Pix2Pix的生成器和判别器初始化5、模型训练6、模型推理 Reference 昇思MindSpore应用实践 本系列文章主要…

大数据面试题之Flink(3)

如何确定Flink任务的合理并行度? Flink任务如何实现端到端一致? Flink如何处理背(反)压? Flink解决数据延迟的问题 Flink消费kafka分区的数据时flink件务并行度之间的关系 使用flink-client消费kafka数据还是使用flink-connector消费 如何动态修改Flink的配置&a…

实战:基于Java的大数据处理与分析平台

实战&#xff1a;基于Java的大数据处理与分析平台 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何利用Java构建高效的大数据处理与分析平台。…

Python基础003

Python流程控制基础 1.条件语句 内置函数input a input("请输入一段内容&#xff1a;") print(a) print(type(a))代码执行的时候遇到input函数&#xff0c;就会等键盘输入结果&#xff0c;已回车为结束标志&#xff0c;也就时说输入回车后代码才会执行 2.顺序执行…

pandas数据分析(5)

pandas使用Numpy的np.nan代表缺失数据&#xff0c;显示为NaN。NaN是浮点数标准中地Not-a-Number。对于时间戳&#xff0c;则使用pd.NaT&#xff0c;而文本使用的是None。 首先构造一组数据&#xff1a; 使用None或者np.nan来表示缺失的值&#xff1a; 清理DataFrame时&#xf…

深度学习之交叉验证

交叉验证&#xff08;Cross-Validation&#xff09;是一种用于评估和验证机器学习模型性能的技术&#xff0c;尤其是在数据量有限的情况下。它通过将数据集分成多个子集&#xff0c;反复训练和测试模型&#xff0c;以更稳定和可靠地估计模型的泛化能力。常见的交叉验证方法有以…

java设计模式(四)——抽象工厂模式

一、模式介绍 改善在工厂方法模式中&#xff0c;扩展时新增产品类、工厂类&#xff0c;导致项目中类巨多的场面&#xff0c;减少系统的维护成本&#xff0c;且一个工厂可以生成多种产品&#xff0c;而不是同一种的产品&#xff0c;比如一个工厂既可以生产鞋子又可以衣服&#…

解决数据库PGSQL,在Mybatis中创建临时表报错TODO IDENTIFIER,连接池用的Druid。更换最新版本Druid仍然报错解决

Druid版本1.1.9报错Caused by: java.sql.SQLException: sql injection violation, syntax error: TODO IDENTIFIER : CREATE TEMPORARY TABLE temp_ball_classify (id int8 NOT NULL,create_time TIMESTAMP,create_by VARCHAR,classify_name VARCHAR) 代码如下&#xff1a; 测…

四川蔚澜时代电子商务有限公司打造抖音电商服务新高地

在数字化浪潮汹涌澎湃的今天&#xff0c;电商行业以其独特的魅力和强大的市场潜力&#xff0c;成为了推动经济增长的新引擎。四川蔚澜时代电子商务有限公司&#xff0c;作为这个领域的佼佼者&#xff0c;正以其专业的服务、创新的理念和卓越的实力&#xff0c;引领抖音电商服务…

用AI,每天创作200+优质内容,2分钟教会你操作!

前段时间发布了这篇“寻找爆款文案及标题的9大渠道&#xff0c;直接搬运都能搞流量&#xff01;”&#xff0c;里面我讲到如何寻找爆款标题。最近不少朋友问我&#xff0c;如何创作这个标题相关的内容。 多数平台都有风控规则&#xff0c;有些平台内容也会有字数要求。为了让大…

SpringBoot 项目整合 MyBatis 框架,附带测试示例

文章目录 一、创建 SpringBoot 项目二、添加 MyBatis 依赖三、项目结构和数据库表结构四、项目代码1、application.yml2、TestController3、TbUser4、TbUserMapper5、TestServiceImpl6、TestService7、TestApplication8、TbUserMapper.xml9、MyBatisTest 五、浏览器测试结果六、…

JavaScript实现时钟计时

会动的时钟 1.目标 2.分析 1.最开始页面不显示时间&#xff0c;有两个按钮 开始 暂停。开始按钮是可以点击的&#xff0c;暂停按钮不能点击 2.当点击开始按钮后&#xff0c;设置开始按钮不可用&#xff0c;暂停按钮可用。然后将当前系统时间放到按钮上面。每隔1秒中更新一下…

TransMIL:基于Transformer的多实例学习

MIL是弱监督分类问题的有力工具。然而&#xff0c;目前的MIL方法通常基于iid假设&#xff0c;忽略了不同实例之间的相关性。为了解决这个问题&#xff0c;作者提出了一个新的框架&#xff0c;称为相关性MIL&#xff0c;并提供了收敛性的证明。基于此框架&#xff0c;还设计了一…