landluck / React Ant Admin
使用 ant-design react react-hook ts 开发的类 ant-design-pro 管理后台,具有完整的权限系统和配套的node + ts 的 api
Stars: ✭ 199
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Ant Admin
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+6413.57%)
Mutual labels: admin, axios, ant-design
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+5411.56%)
Mutual labels: axios, admin, ant-design
vue-iview-admin-template
Vue 2.0 admin template based on View UI
Stars: ✭ 43 (-78.39%)
Mutual labels: admin, axios, ant-design
React Antd
基于react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd实现的SPA后台管理系统模板
Stars: ✭ 321 (+61.31%)
Mutual labels: admin, react-redux, ant-design
Placeline Nextjs
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Stars: ✭ 88 (-55.78%)
Mutual labels: axios, ant-design
Ant Design Pro Plus
✨ 基于 ant-design-pro 做一些微小的工作。
Stars: ✭ 88 (-55.78%)
Mutual labels: admin, ant-design
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+559.8%)
Mutual labels: admin, ant-design
Ruoyi Vue Fast
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 107 (-46.23%)
Mutual labels: axios, admin
Vue Admin Pro
Solution for company middle and backstage, written using the vue and nuxtjs
Stars: ✭ 48 (-75.88%)
Mutual labels: admin, ant-design
Iview Vue Admin
iView vue Admin / An admin management system template
Stars: ✭ 105 (-47.24%)
Mutual labels: axios, admin
React Antd Multi Tabs Admin
ts+react+antd-多页签后台模板(纯净版,非 antd pro!)
Stars: ✭ 73 (-63.32%)
Mutual labels: admin, ant-design
Ant Design Vue Pro
👨🏻💻👩🏻💻 Use Ant Design Vue like a Pro!
Stars: ✭ 8,965 (+4405.03%)
Mutual labels: admin, ant-design
Dva Boot Admin
🍰 react admin dashboard ui LANIF-ADMIN --- react 16 + react-router 4 + dva 2 + antd 4 后台管理 脚手架
Stars: ✭ 1,553 (+680.4%)
Mutual labels: admin, ant-design
Laravue
Admin dashboard for enterprise Laravel applications built by VueJS and Element UI https://laravue.dev
Stars: ✭ 1,964 (+886.93%)
Mutual labels: axios, admin
React Ant Admin
开箱即用的中台前端/设计解决方案
介绍
最开始的时候,我需要一个 react
开发的 amdin
模版,在开源社区寻找了一边之后,比较中意 ant design pro
的 UI
,当我一堆操作把 ant desgin pro
的代码拉下来研究之后,发现内容是在太多了,除了 react
、redux
之外,还包含了 umi
、dva
、ant-design/pro-layout
等其它东西,当这些概念和 ts
结合起来使用的时候,我瞬间感觉无处下手,后面又仔细了阅读了权限设计、菜单栏渲染部分的代码,我得出结论, Ant Design Pro
足够优秀,但不适合我的需求场景。很遗憾,只能放弃使用
但是,Ant Design Pro
的 UI
是我见过的 react
admin
系统中最为好看的一个,颜值即正义,既然我无法放弃 Ant Design Pro
的 UI
,那干脆模仿 Ant Design Pro
的 UI
,自己来实现一个较为简单的版本
规划
- 从零使用
react
搭建系统 - 全面使用
react-hooks
开发,抛弃class
组件写法、所有组件异步加载,提高首屏渲染速度 - 动态权限设计,开发配套的后端 Api
- ...
使用技术
-
UI 框架:
react
、react-hook
、classnames
-
UI 组件:
antd
、@ant-design/aliyun-theme
-
数据管理:
redux
、react-redux
、redux-thunk
、redux-logger
-
类型检查:
typescript
-
接口请求:
axios
-
cookies:
js-cookie
-
过渡动画:
react-transition-group
-
CSS 规则:
BEM
-
后端 API:
nodejs
、eggjs
、ts
、mysql
、sequelize
菜单
-首页介绍 - 系统介绍 - 权限管理 - 用户管理 - 角色管理 - 菜单管理;
使用
$ git clone https://github.com/landluck/react-ant-admin.git
$ cd react-ant-admin
$ npm install
$ npm start
文件说明
.
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── api
│ │ ├── request.ts // Axios 请求统一封装
│ │ └── requestMd.ts // md 单独使用的 axios 实例
│ ├── components // 系统组建和业务无关
│ │ ├── Breadcrumb // 面包屑导航
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── Hamburger // 菜单栏开关
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── HeaderSearch // 头部搜索
│ │ │ └── index.tsx
│ │ ├── LayoutHeader // 系统头部
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── LayoutNavBar // 系统头部右侧内容
│ │ │ ├── AvatarDropdown.tsx
│ │ │ ├── NavBarItem.tsx
│ │ │ ├── NavDropdown.tsx
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── LayoutSettings // 系统设置
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── LayoutSideBar // 侧边栏导航
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── NoticeIcon // 消息通知
│ │ │ ├── NoticeTab.less
│ │ │ ├── NoticeTab.tsx
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── SideMenu // 菜单栏
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── SidebarLogo // 菜单栏logo
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ └── TransitionMain // 主体内容过度
│ │ └── index.tsx
│ ├── hooks // 自定义 react-hook
│ │ └── count.ts
│ ├── index.tsx
│ ├── layout
│ │ ├── AsyncRoutes.tsx // 负责异步路由请求和渲染
│ │ ├── Auth.tsx // 权限校验
│ │ ├── MainRoutes.tsx // 业务路由渲染
│ │ ├── UserLayout.less // 系统用户路由渲染
│ │ ├── UserLayout.tsx
│ │ ├── index.less
│ │ └── index.tsx // 系统主要layout
│ ├── react-app-env.d.ts
│ ├── router
│ │ ├── config.ts // 项目的路由配置
│ │ └── utils.ts // 路由相关的一些 utils
│ ├── serviceWorker.ts
│ ├── store // redux
│ │ ├── index.ts
│ │ ├── module
│ │ │ ├── app.ts
│ │ │ ├── notice.ts
│ │ │ ├── settings.ts
│ │ │ └── user.ts
│ │ └── types.ts
│ ├── styles // 基本公用的样式
│ │ ├── index.less
│ │ ├── md.css
│ │ └── var.less
│ ├── typings // 类型申明
│ │ ├── global.d.ts
│ │ └── index.ts
│ ├── utils // 工具类
│ │ ├── cookie.ts
│ │ ├── store.ts
│ │ └── verifty.ts
│ └── views // 视图
│ ├── auth
│ │ ├── menu
│ │ │ ├── AddOrEditMenu.tsx
│ │ │ ├── index.tsx
│ │ │ └── service.ts
│ │ ├── role
│ │ │ ├── AddOrEdit.tsx
│ │ │ ├── editMenu.tsx
│ │ │ ├── index.tsx
│ │ │ └── service.ts
│ │ └── user
│ │ ├── AddOrEdit.tsx
│ │ ├── index.tsx
│ │ └── service.ts
│ ├── components
│ │ ├── BaseTable.tsx
│ │ ├── PageWrap.tsx
│ │ ├── SearchForm.tsx
│ │ └── index.less
│ ├── dashborad
│ │ └── intro
│ │ ├── index.tsx
│ │ └── intro.md
│ ├── error
│ │ ├── 403.tsx
│ │ └── 404.tsx
│ └── system
│ ├── component
│ │ ├── FormItem.tsx
│ │ ├── FormWrap.tsx
│ │ └── LoginItem.tsx
│ ├── login
│ │ ├── index.less
│ │ ├── index.tsx
│ │ └── service.ts
│ ├── recoveryPwd
│ │ ├── index.tsx
│ │ └── service.ts
│ ├── register
│ │ ├── index.tsx
│ │ └── service.ts
│ └── registerResult
│ └── index.tsx
└── tsconfig.json
37 directories, 89 files
支持环境
现代浏览器及 IE11
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].