reactjs后台管理系统搭建

1 通过yarn 模板创建reactjs项目

yarn create vite reactjs-antdesign-admin --template react-ts

2 基础路由测试

定义一个router/index.tsx,里面定义路由组件

const Router: React.FC = () => {return (<HashRouter><Switch><Route path="/" component={Welcome} exact/><Route path="/user" ><Switch><Route path='/user' render={() => <Redirect to="/user/login" />} exact /><Route path='/user/login' component={Login} /></Switch></Route><Route path="/welcome"component={Welcome}/><Route path="/admin"><Route path='/admin' render={() => <Redirect to="/admin/sub-page" />} exact /><Route path='/admin/sub-page' component={Admin}/></Route><Route path="/list" component={TableList} /><Route path="*" component={NotPage} /></Switch></HashRouter>);
};

 在App.tsx中使用路由组件

function App() :ReactElement{return (<div className="App"><BrowserRouter><Provider store={store}><Suspense fallback={<div>wwww</div>}><ErrorBoundary><Router /></ErrorBoundary></Suspense></Provider></BrowserRouter></div>);
}
export default App;

3 管理系统搭建

3.1 路由结构体

export interface AppRouter {path: string //路由路径name?: string //菜单名称component?: //组件| React.ComponentType<RouteComponentProps<any>>| React.ComponentType<any>auth?: boolean //是否认证isHidden?: boolean //菜单是否隐藏icon?: any //菜单图标redirectUrl?: string //菜单是否重定向routes?: AppRouter[] //子路由
}

3.2 路由定义

router/index.tsx 

const routers: Array<AppRouter> = [{path: '/',name: '主界面',component: Welcome,auth: true,icon: <CrownFilled />,},{path: '/user',name: '用户管理',redirectUrl: '/user/login',isHidden: true,icon: <CrownFilled />,routes: [{path: '/user/login',component: Login,icon: <CrownFilled />,},],},{name: '欢迎界面',path: '/welcome',component: Welcome,icon: <CrownFilled />,auth: true,},{name: '管理员',path: '/admin',redirectUrl: '/admin/sub-page',icon: <CrownFilled />,routes: [{name: '管理子页',path: '/admin/sub-page',icon: <CrownFilled />,component: Admin,},],},{name: '列表页面',path: '/list',component: TableList,icon: <CrownFilled />,auth: true,},{path: '*',component: NotPage,auth: true,isHidden: true,},
]

3.3 App布局文件

function App(): ReactElement {return (<><BrowserRouter><Provider store={store}><Suspense fallback={<PageLoading></PageLoading>}><ErrorBoundary><FrontendRouter routerConfig={WithAppRouters(routers)} /></ErrorBoundary></Suspense></Provider></BrowserRouter></>)
}
export default App

FontendRouter是处理认证的信息,WithAppRouters是重新构建真正的路由信息列表

FontendRouter主要是导入路由包含在

<MainLayout><Routepath={pathname}component={targetRouterConfig.component}exact/></MainLayout>

3.4 MainLayout布局文件定义

这里直接去ProLayout - 高级布局 - ProComponents (ant.design) 选择需要的布局

const MainLayout: React.FC<{ children: ReactNode }> = (props) => {const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({fixSiderbar: true,layout: 'mix',splitMenus: false,})const [pathname, setPathname] = useState('/')const [num, setNum] = useState(40)if (typeof document === 'undefined') {return <div />}return (<divid="test-pro-layout"style={{height: '100vh',overflow: 'auto',}}><ProConfigProvider hashed={false}><ConfigProvidergetTargetContainer={() => {return document.getElementById('test-pro-layout') || document.body}}><ProLayoutprefixCls="my-prefix"bgLayoutImgList={[{src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',left: 85,bottom: 100,height: '303px',},{src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',bottom: -68,right: -45,height: '303px',},{src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',bottom: 0,left: 0,width: '331px',},]}{...defaultProps}location={{pathname,}}token={{header: {colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',},}}avatarProps={{src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',size: 'small',title: '七妮妮',render: (props, dom) => {return (<Dropdownmenu={{items: [{key: 'logout',icon: <LogoutOutlined />,label: '退出登录',},],}}>{dom}</Dropdown>)},}}actionsRender={(props) => {if (props.isMobile) return []if (typeof window === 'undefined') return []return [<InfoCircleFilled key="InfoCircleFilled" />,<QuestionCircleFilled key="QuestionCircleFilled" />,<GithubFilled key="GithubFilled" />,]}}menuFooterRender={(props) => {if (props?.collapsed) return undefinedreturn (<divstyle={{textAlign: 'center',paddingBlockStart: 12,}}><div>© 2021 Made with love</div><div>by Ant Design</div></div>)}}onMenuHeaderClick={(e) => console.log(e)}menuItemRender={(item, dom) => (<divonClick={() => {setPathname(item.path || '/welcome')}}>{dom}</div>)}{...settings}>{props.children}</ProLayout></ConfigProvider></ProConfigProvider></div>)
}
export default MainLayout

prelayout需要配置:_defaultProps.tsx

import { CrownFilled } from '@ant-design/icons'
import { AppRouter } from '../FrontendAuth'
import { routers } from '@/router'
//将默认的路由配置生成prelayout需要的
export function WithAppRouters(appRouters1: AppRouter[]): AppRouter[] {const appRouterFun = (appRouters2: AppRouter[]): AppRouter[] => {const newAppRouters: AppRouter[] = []for (const appRouter of appRouters2) {if (!appRouter.isHidden) {newAppRouters.push(appRouter)if (appRouter.routes && appRouter.routes.length > 0) {appRouter.routes = WithAppRouters(appRouter.routes)}}}return newAppRouters}return appRouterFun(appRouters1)
}
export default {route: {path: '/',routes: WithAppRouters(routers),},location: {pathname: '/',},
}

4 显示结果

源码:liu289747235/reactjs-antdesign-admin

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

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

相关文章

免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

语音克隆-GPT-SoVITS-WebUI 强大的少样本语音转换与语音合成Web用户界面。 功能&#xff1a; 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。 少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型…

【大模型应用】使用 Windows 窗体作为 Copilot 应用程序的 Ollama AI 前端(测试llava视觉问答)...

项目 “WinForm_Ollama_Copilot” 是一个使用Windows Forms作为前端的Ollama AI Copilot应用程序。这个项目的目的是提供一个用户界面(UI)&#xff0c;通过它&#xff0c;用户可以与Ollama AI进行交互。以下是该项目的一些关键特点和功能&#xff1a; Ollama Copilot: 这是一个…

Linux搭建mysql环境

搭建 MySQL 环境 1、使用 wget 下载安装包&#xff0c;下载到 opt 目录中 wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm2、安装 MySQL 公钥 rpm -i mysql57-community-release-el7-10.noarch.rpmrpm --import https://repo.mysql.com/RPM-GP…

聊聊持续测试

这是鼎叔的第九十六篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 本人新书《无测试组织-测试团队的敏捷转型》已出版&#xff08;机械工业出版社&#xff09;。 如果在测试部门只能推行一个技术建设项目&#xff0c;那鼎叔就会选择“持续测试”。 持续测…

Android手写自己的路由SDK

实现自己的路由框架 ​ 在较大型的Android app中常会用到组件化技术&#xff0c;针对不同的业务/基础功能对模块进行划分&#xff0c;从上到下为壳工程、业务模块、基础模块。其中业务模块依赖基础模块&#xff0c;壳工程依赖业务模块。同级的横向模块&#xff08;比如多个业务…

第四课 communcation服务-can基础第一弹

根据nxp can开发白皮书&#xff0c;介绍s32k1系列芯片的can通信速率、外部晶振、同步段、传播段、相位段之间的关系。 1.Can通信基础概念: 通信速率&#xff1a;单位时间内可以传输的数据量 最小位时间:Tq&#xff08;Time Quantum&#xff0c;时间量子&#xff09;是CAN控制…

【Web】CTFSHOW 中期测评刷题记录(1)

目录 web486 web487 web488 web489 web490 web491 web492 web493 web494 web495 web496 web497 web498 web499 web500 web501 web502 web503 web505 web506 web507 web508 web509 web510 web486 扫目录 初始界面尝试文件包含index.php&am…

14.集合、常见的数据结构

集合 概念 Java中的集合就是一个容器&#xff0c;用来存放Java对象。 集合在存放对象的时候&#xff0c;不同的容器&#xff0c;存放的方法实现是不一样的&#xff0c; Java中将这些不同实现的容器&#xff0c;往上抽取就形成了Java的集合体系。 Java集合中的根接口&#x…

B+树详解与实现

B树详解与实现 一、引言二、B树的定义三、B树的插入四、B树的删除五、B树的查找效率六、B树与B树的区别和联系 一、引言 B树是一种树数据结构&#xff0c;通常用于数据库和操作系统的文件系统中。它的特点是能够保持数据稳定有序&#xff0c;其插入与修改拥有较稳定的对数时间…

RoNID:通过生成可靠标签与聚类友好型表征来实现新意图的发现

论文地址&#xff1a;https://arxiv.org/abs/2404.08977 原文地址&#xff1a;intents-are-not-going-away-ronid-is-a-new-intent-discovery-framework 2024 年 4 月 26 日 Robust New Intent Discovery&#xff08;RoNID&#xff09;框架致力于在开放域场景中识别已知意图并合…

使用Android Studio 搭建AOSP FrameWork 源码阅读开发环境

文章目录 概述安装Android Studio编译源码使用Android Studio打开源码制作ipr文件直接编译成功后自动打开Android Studio 修改SystemUI验证开发环境 概述 我们都知道Android的系统源码量非常之大&#xff0c;大致有frameworka层源码&#xff0c;硬件层(HAL)源码&#xff0c;内…

yudao-cloud微服务系统系统模块+后台管理系统成功运行

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 第一章 芋…

c# winform快速建websocket服务器源码 wpf快速搭建websocket服务 c#简单建立websocket服务 websocket快速搭建

完整源码下载----->点击 随着互联网技术的飞速发展&#xff0c;实时交互和数据推送已成为众多应用的核心需求。传统的HTTP协议&#xff0c;基于请求-响应模型&#xff0c;无法满足现代Web应用对低延迟、双向通信的高标准要求。在此背景下&#xff0c;WebSocket协议应运而生…

分享自己一篇在亚马逊云科技AWS官网发的Blog技术文章

小李哥在亚马逊AWS官网&#xff0c;作为第一作者发了自己的第一篇AWS Blog文章&#xff0c;也是自己今年在AWS官网的第11篇文章。文章主要内容是描述为出海的金融企业&#xff0c;搭建满足PCI-DSS合规、FIPS 140-2 Level 3安全标准的传输中数据加密云端方案&#xff0c;主要用于…

Mac环境下ollama部署和体验

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于ollama ollama和LLM&#xff08;大型语言模型&#xff09;的关系&#xff0c;类似于docker和镜像&#xff0c;可以在ollama服务中管理和运行各种LLM&…

C语言/数据结构——每日一题(反转链表)

一.前言 大家好&#xff01;今天又是每日一题环节。今天我为大家分享了一道单链表题——反转链表。 废话不多说&#xff0c;让我们直接进入正题吧。 二.正文 1.1题目信息 这是一道leetCode上面的一道题&#xff1a;https://leetcode.cn/problems/reverse-linked-list 1.2解…

【跟马少平老师学AI】-【神经网络是怎么实现的】(九)长短期记忆网络

一句话归纳&#xff1a; 1&#xff09;RNN也会存在梯度消失的问题。 2&#xff09;同一句话&#xff0c;对于不同的任务&#xff0c;句中不同的词起的作用也不一样。 3&#xff09;LSTM&#xff08;长短期记忆&#xff09;子网络&#xff1a; 门&#xff0c;让输入经过运算&…

软件标准建设体系规范过程性文档(软件开发,管理,安全,运维等各阶段全文档)

软件标准建设体系规范是确保软件开发过程标准化、高质量和可维护性的关键。它通常包括一系列文档、规范、流程和最佳实践&#xff0c;以确保软件项目的成功实施和交付。以下是一个软件标准建设体系规范的基本框架&#xff1a; 软件全套资料获取方式1&#xff1a;进主页。 获取…

【R语言】描述性数据分析与数据可视化

我们处理的变量可以分为两类&#xff0c;一类是连续型变量&#xff0c;另一类叫做分类型变量&#xff0c;其中对于连续型变量&#xff0c;如果服从正态分布就用平均值填充NA&#xff0c;不服从正态分布就用中位数填充NA&#xff0c;对于分类型变量&#xff0c;不管是有序的&…

【蓝牙协议栈】【BR/EDR】传统蓝牙 command/event/acl/sco/iso 命令格式解析

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【精讲蓝牙协议栈】、【精讲BLE协议栈】和【Android Bluetooth Stack】专栏会持续更新中…