react管理系统layOut简单搭建

news2025/1/13 7:35:04

一、新建立react文件夹,生成项目

npx create-react-app my-app
cd my-app
npm start

二、安装react-router-dom

npm install react-router-dom

三、安装Ant Design of React(UI框架库,可根据需求进行安装)

npm install antd --save

好的,现在前期工作准备得差不多了,开始搭建我们的页面

四、搭建页面

创建main页面,实现react LayOut总体布局

import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';

const { Header, Sider, Content } = Layout;

const Main: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout >
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
//左侧标题栏
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <UserOutlined />,
              label: '标题1',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: '标题2',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: '标题3',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 500,
            background: colorBgContainer,
          }}
        >
          Content我们需要展示的页面
        </Content>
      </Layout>
    </Layout>
  );
};

export default Main;

页面布局总体搭建完成,下一张将写reacrt Menu跳转组件

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

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

相关文章

Idea JavaWeb项目,继承自HttpFilter的过滤器,启动Tomcat时部署工件出错

JDK版本&#xff1a;1.8 Tomcat版本&#xff1a;8.5 10-Oct-2023 13:55:17.586 严重 [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal One or more Filters failed to start. Full details will be found in the appropriate conta…

onnx转换TensorRT的步骤

A. 解析onnx 已有的trt不适配&#xff0c;需要将onnx转为trt parse onnxserialize trt保存trt文件 注意&#xff1a;如果不使用Int8模式&#xff0c;onnx的parser代码几乎通用 概览 构建阶段 建立logger&#xff08;日志&#xff09;建立builder&#xff08;网络元数据)创…

SpringBoot 如何使用 Sleuth 进行分布式跟踪

使用Spring Boot Sleuth进行分布式跟踪 在现代分布式应用程序中&#xff0c;跟踪请求和了解应用程序的性能是至关重要的。Spring Boot Sleuth是一个分布式跟踪解决方案&#xff0c;它可以帮助您在分布式系统中跟踪请求并分析性能问题。本文将介绍如何在Spring Boot应用程序中使…

【Python深度学习】目标检测和语义分割的区别

在计算机视觉领域&#xff0c;语义分割和目标检测是两个关键的任务&#xff0c;它们都是对图像和视频进行分析&#xff0c;但它们之间存在着明显的区别。本文将通过图像示例&#xff0c;详细阐述语义分割和目标检测之间的差异。 一、基本概念 1.1 语义分割&#xff08;Semantic…

Git【入门】从安装到会用(千字总结)

Git使用 一、Git介绍 1.1 版本控制(理解) 无论是代码编写&#xff0c;还是文档编写&#xff0c;我们都会遇到对文档内容反复修改的情况 但我们不能只保留最后一次修改的文件&#xff0c;其余版本也要保留&#xff0c;有可能老板想要的就是你的上一个版本的 1.2 开发中存在的…

基于YOLOv5、YOLOv8的火灾检测(超实用毕业设计项目)

yolo系列文章目录 摘要&#xff1a;基于YOLOV5模型的火灾检测系统用于日常生活中检测与定位火灾目标&#xff0c;包括建筑火灾、森林火灾等。利用深度学习算法可实现图片、视频、摄像头等方式的火灾目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导…

云安全之信息内容安全

内容安全产生背景 随着互联网、智能设备及各种新生业务的飞速发展&#xff0c;互联网上的数据呈现爆炸式增长&#xff0c;图片、视频、发文、聊天等互动内容已经成为人们表达感情、记录事件和日常工作不可或缺的部分。每天&#xff0c;通过互联网上传的视频、图片数量超过10亿…

在工业机器视觉领域中应用钡铼技术有限公司的EtherCAT网关

钡铼技术有限公司作为一家专注于业物联网关、工业智能网关、边缘计算网关、ARM嵌入式工业计算机、PLC远程采集网关、Modbus转MQTT网关、OPC UA网关、BACnet网关路由器、Lora网关、工业4G边缘路由器、4G无线远程数据采集模块、4G DTU RTU、以太网远程IO模块、工业总线分布式I/O模…

R语言实现向量自回归和误差修正模型——附实战代码

大家好&#xff0c;我是带我去滑雪&#xff01; 向量自回归&#xff08;VAR&#xff09;模型和误差修正模型&#xff08;ECM&#xff09;是时间序列分析中常用的两种模型&#xff0c;它们用于研究多个变量之间的动态关系。VAR 模型适用于研究多个相关变量之间的相互影响和动态关…

总结CRM客户管理系统实施失败的主要原因

实施CRM系统相对于ERP等大型软件要更加容易&#xff0c;但不是每一家企业都能成功实施CRM系统&#xff0c;实施CRM销售管理系统失败的原因有很多比如准备工作不足、与现有应用无法集成做到数据互通、销售人员不容易操作系统。 准备工作不足 部署方式是本地化还云服务主要取决…

除了console.log(),很多人不知道的其他方法console.table,console.dir,console.time等

console.dir 可以对象化输出 dom <script>setTimeout(() > {let d document.querySelector(.box);console.log(d);console.dir(d);}, 500);</script>输出结果 这个对象展开之后的内容太多了就不截图了 console.table能够以表格形式展现对象/数组 <scrip…

如何在 PyTorch 中冻结模型权重以进行迁移学习:分步教程

一、说明 迁移学习是一种机器学习技术&#xff0c;其中预先训练的模型适用于新的但类似的问题。迁移学习的关键步骤之一是能够冻结预训练模型的层&#xff0c;以便在训练期间仅更新网络的某些部分。当您想要保留预训练模型已经学习的特征时&#xff0c;冻结至关重要。在本教程中…

回馈式负载箱的应用

回馈式负载箱通过用来模拟负载来测量电源的性能和稳定性&#xff0c;由可编程电子负载、控制电路和测量电路组成&#xff0c;回馈式负载箱的应用非常广泛&#xff0c;它用于电源系统的研发和测试。通过连接回馈式负载箱到待测电源上&#xff0c;可以模拟不同的负载情况&#xf…

LuaRadio介绍

介绍 LuaRadio是一个用于构建信号处理流程图的框架 在软件定义的无线电流图中&#xff0c;源和接收块倾向于实现某种I/O&#xff0c;如从SDR加密狗读取样本&#xff0c;或将样本写入IQ文件&#xff0c;而处理块倾向于计算&#xff0c;如滤波器和乘法器。 数据类型说明 LuaRadio…

ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的问题解决

winR打开窗口输入 services.msc 停止mysql 找到data文件&#xff0c;清空其中全部文件。没有data文件&#xff0c;手动创建 ​ 输入 mysqld --remove mysql 移除服务&#xff1b; 注册服务&#xff0c;mysqld -install&#xff1b; 并开始初始化&#xff0c;mysqld --initi…

【FreeRTOS】【STM32】03 FreeRTOSConfig.h头文件简介与修改

基于[野火]《FreeRTOS%20内核实现与应用开发实战—基于STM32》.pdf FreeRTOSConfig.h头文件是FreeRTOS各项功能的打开与关闭 FreeRTOSConfig.h头文件简介 之前也说过了&#xff0c;FreeRTOSConfig.h文件可以添加在工程中任意文件夹&#xff0c;只需要在路径中添加好了就行。…

修炼k8s+flink+hdfs+dlink(四:k8s概念)

一&#xff1a;概念 1. 概述 1.1 kubernetes对象. k8s对象包含俩个嵌套对象字段。 spec&#xff08;规约&#xff09;&#xff1a;期望状态 status&#xff08;状态&#xff09;&#xff1a;当前状态 当创建对象的时候&#xff0c;会按照spec的状态进行创建&#xff0c;如果…

某省医保局:强化医保信息化高质量建设,提升数字医疗保障服务能力

自2018年起&#xff0c;国家医保信息化工作启动&#xff0c;2020年10月完成了国家医保信息平台主体建设&#xff0c;随后国家医保信息化工作重点转向地方落地应用。在国家医保局的指导下&#xff0c;全国各地省市级医保部门制定了医疗保障信息化工作目标。 东北某省作为医保信息…

java日志框架详解-Log4j2

一、概述 Apache Log4j 2 &#xff08;Log4j – Apache Log4j 2&#xff09;是对Log4j的升级&#xff0c;它比其前身Log4j 1.x提供了重大改进&#xff0c;并参考了Logback中优秀的设计&#xff0c;同时修复了Logback架构中的一些问题。被誉为是目前最优秀的Java日志框架&#x…

【智慧燃气】智慧燃气解决方案总体概述--终端层、网络层

关键词&#xff1a;智慧燃气、智慧燃气系统、智慧燃气平台、智慧燃气解决方案、智慧燃气应用、智能燃气 智慧燃气解决方案是基于物联网、大数据、云计算、移动互联网等先进技术&#xff0c;结合燃气行业特征&#xff0c;通过智能设备全面感知企业生产、环境、状态等信息的全方…