用React18、Antd5和RTK2简简单单写个中后台管理系统--react-admin-design

最新推荐文章于 2024-07-24 18:46:58 发布
最新推荐文章于 2024-07-24 18:46:58 发布
阅读量358 收藏 1
点赞数 4
文章标签： react.js 前端 reactjs typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42779798/article/details/137050458
版权
react-admin-design是一个利用最新前端技术栈（如React18、AntDesign5和RTK2）构建的中后台管理系统，提供配置主题色和国际化支持，内置Mock数据。通过简单的步骤即可快速安装并开始开发。演示地址和代码仓库已给出。
摘要由CSDN通过智能技术生成

react-admin-design 是一个基于react18 + antd5+rtk2的中后台管理系统的解决方案，它使用了最新的前端技术栈，并且提供了丰富的功能组件模块，可以帮助你快速搭建企业级中后台的前端架构。

特性

  • 技术栈：使用 React18、Antd5、RTK2 等前端前沿技术开发
  • 主题：可配置的主题色
  • 国际化：内置完善的国际化方案
  • Mock 数据 内置 Mock 数据方案

快速安装

// 克隆项目
git clone https://github.com/baimingxuan/react-admin-design.git

// 安装依赖
pnpm install

// 开发
pnpm run dev

页面展示

演示、仓库地址

演示地址：https://baimingxuan.github.io/react-admin-design/

代码仓库：https://github.com/baimingxuan/react-admin-design

Daniel Pak
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React+Antd 后台管理系统
zhaoyu_m69的博客
12-27 4万+
说明之前为了熟练antd框架，特别做了这个后台管理系统练手。 正因为要熟悉，所以在设计面板的时候，尽可能想用上更多的控件。 于是对照着antd的API，开始往这个项目上堆控件。效果图!Components General Button按钮 Icon图标 Layout Grid栅格 Layout布局 Navigation Breadcrumb面包屑 Dropdown下拉菜单 Me
react-antd-admin：用React和Ant Design构建的一个通用管理后台
02-04
React通用后台 ...诸如各种内部系统，各种操作后台，总要有个界面给人用的吧。如果是自己用的话当然命令行就可以将就下了。。。 内部系统么，公司也不会很容易认识，不会有专业的前端来搞。对准人员自己搞搞，能
react-antd实现一个后台管理系统
12-20
react-antd实现的后台管理系统，有登录退出功能，登录成功后，能够在不同目录下看到各种折线图，表格，同时有上传文件的功能。登录账号：admin，密码：admin。适合需要学习react-antd的新手，或者需要完成毕设的同学。下载资源后，使用命令行，先到代码所在的目录下方，npm i，再 cd client，在npm start然后登录进去即可使用
React后台管理系统-首页Home组件
wyw223的博客
06-26 976
React后台管理系统-首页Home组件 1.Home组件要显示用户总数、商品总数和订单总数，数据请求后端的 /manage/statistic/base_count.do接口，返回的是 this.state = {            userCount : '-',            productCount : '-',            orde...
React实现后台管理系统（一）
最新发布
qq_41051239的博客
07-24 1173
在src/utils文件夹下新建mock.js文件用于编写mock请求拦截及接口数据模拟，并在根目录下的index.js文件（入口文件）中引入mock.js文件（菜单展开收起状态其实只需要组件间传值就能简单实现，只是此处用此作为例子实现redux，原始使用传值实现的方式此处我也做了保留。使用antd中的Grid栅格组件进行布局，然后使用Card组件实现首页用户Card的内容展示。在src文件下新建utils/request.js文件用于封装axios。
React _ 后台管理
Mr.小灰狼_随笔
09-30 1279
目录 一、后台管理系统 1.1、技术栈 1.2、项目初始化 1.3、安装 antd ui 库 1.4、登录 1.4.1、定义登录路由 1.4.2、界面 1.4.3、登录实现 1.5、后台首页 1.5.1、后台登录检查 1.5.2、接口请求携带 token 1.5.3、后台界面 1.6、用户管理 一、后台管理系统 1.1、技术栈 测试接口环境 ：nodejs 前端 : react / react-dom -- 函数组件 + hooks redux react-red...
React 后台管理系统
tby_pr的博客
11-29 6129
后台管理系统 2.1、技术栈 测试接口环境：nodejs 前端: react.js redux react-redux redux-thunk react-router-dom@5 styled-components/sass(node-sass) ui组件库 ant-design Ant Design - 一套企业级 UI 设计语言和 React 组件库 axios/fetch sessionStorage/localStorage/cookie webpack配置(装饰器配置和代理
react:后台管理系统（React）
03-11
react:后台管理系统（React）
react-admin：React + AntD后台管理系统解决方案
02-05
欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-app创建的，主要还是列...
react-antd-admin:由React.js和Ant-design设计的简单管理面板
05-06
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ...
react-antd-admin：后台前端管理系统，基于react，typescript，antd，dva及一些特别优秀的开源库实现
02-04
基于工作中开发需要，设计了一个后台管理系统，减少了从零开始构建的时间，前端基于 （拥抱钩子），， ， 及一些特别优秀的开源库实现，特别感谢。 使用 ， 模拟了一层数据服务，部署在平台上。 :house:主页 :file...
react-web-admin:React后台管理系统
03-11
react-web-admin React后台管理系统
react_project:React的后台管理项目
04-06
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
React中后台管理界面UIReactAdminUI
08-11
react admin dashboard ui LANIF-ADMIN --- react 16 react-router 4 dva 2 antd 3
react-admin-client:React后台管理项目
05-31
创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 yarn test 在交互式观察模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 yarn eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可传递依赖
admin-client:基于React的后台管理系统
03-30
该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到
react-antd-admin-template：一个基于React + Antd的后台管理模版，在线预览https：nlrx-wjc.github.ioreact-antd-admin-template
02-05
是一个基于React和Ant Design的后台管理系统模板。它内置了用户登录/登出，动态路由，权限重置，用户管理等典型的业务模型，可以帮助您快速构建企业级中后台产品原型，是你接私活的不二之选。 本系统的开发灵感来自 ...
react_后台管理_项目
分享程序相关知识
07-02 517
本项目使用的是 react+ts+scss 技术栈。
React通用后台管理系统
weixin_34252686的博客
08-24 349
react-admin 部分采用了antd，相关功能较全，添加了较多的组件模块。star 664 GitHub：https://github.com/yezihaohao/react-admin 在线地址：http://cheng_haohao.oschina.io/reactadmin/ antd-admin 样式全部采用antd+dva star 18...
create-react-app中Less与Ant Design按需加载教程
这样配置后，当你在React组件中导入antd的组件时，只会加载实际使用的那些组件和对应的CSS。例如： ```jsx import { Button, Input } from 'antd'; ``` 只有Button和Input组件及其相关的样式会被加载到项目中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值