All Projects → NLRX-WJC → React Antd Admin Template

NLRX-WJC / React Antd Admin Template

Licence: mit
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Antd Admin Template

Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (-13.41%)
Mutual labels:  create-react-app, redux-thunk, react-router, react-redux
trivin
⚡️Setup your entire project quickly and easily with 1-line command ⚡️
Stars: ✭ 58 (-94.32%)
Mutual labels:  react-router, react-redux, redux-thunk, axios
boss
React+express+sock.io+mongodb build a boss
Stars: ✭ 25 (-97.55%)
Mutual labels:  create-react-app, react-redux, redux-thunk, axios
redux-login
React & Redux 实现注册登录认证系统 - 视频源码
Stars: ✭ 26 (-97.46%)
Mutual labels:  create-react-app, react-redux, redux-thunk
Todo React Redux
Todo app with Create-React-App • React-Redux • Firebase • OAuth
Stars: ✭ 942 (-7.83%)
Mutual labels:  create-react-app, react-router, react-redux
cra-redux-boilerplate
⚛️🔨create-react-app application with redux and another cool libraries to make your life easier.
Stars: ✭ 15 (-98.53%)
Mutual labels:  react-router, react-redux, redux-thunk
react-movies-finder
React Movies finder is a React app to search movies and series using redux, redux-thunk, React Hooks, and Material UI
Stars: ✭ 27 (-97.36%)
Mutual labels:  react-redux, redux-thunk, axios
Quickbill
Create unlimited invoices for free.
Stars: ✭ 278 (-72.8%)
Mutual labels:  webpack, react-router, react-redux
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (-72.7%)
Mutual labels:  webpack, axios, echarts
Antd Umi Sys
企业BI系统,数据可视化平台,主要技术:react、antd、umi、dva、es6、less等,与君共勉,互相学习,如果喜欢请start ⭐。
Stars: ✭ 503 (-50.78%)
Mutual labels:  echarts, react-router, react-redux
React Social Network
Simple React Social Network
Stars: ✭ 409 (-59.98%)
Mutual labels:  create-react-app, redux-thunk, react-redux
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-96.87%)
Mutual labels:  webpack, axios, react-router
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-98.43%)
Mutual labels:  react-router, create-react-app, redux-thunk
Soundcloud Redux
SoundCloud API client with React • Redux • Redux-Saga
Stars: ✭ 681 (-33.37%)
Mutual labels:  webpack, react-router, react-redux
laravel-react-boilerplate
Laravel React Boilerplate with Ant Design, Route-Level Code Splitting, Redux, Sanctum Auth
Stars: ✭ 49 (-95.21%)
Mutual labels:  react-router, react-redux, axios
React-Playground
Learning reactjs from the ground up (router, redux, thunk, hooks, context, portals, and functional components)
Stars: ✭ 15 (-98.53%)
Mutual labels:  react-router, react-redux, redux-thunk
spring-boot-react-ecommerce-app
eCommerce application based on the microservices architecture built using Spring Boot and ReactJS.
Stars: ✭ 221 (-78.38%)
Mutual labels:  react-router, react-redux, redux-thunk
kugou
multiple implementations for kugou music
Stars: ✭ 25 (-97.55%)
Mutual labels:  react-router, react-redux, axios
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-70.55%)
Mutual labels:  webpack, axios, echarts
Xiaoduyu.com
🐟小度鱼 - 年轻人的交流社区 https://www.xiaoduyu.com
Stars: ✭ 549 (-46.28%)
Mutual labels:  webpack, react-router, react-redux

简介

react-antd-admin-template 是一个基于 ReactAnt Design 的后台管理系统模板。它内置了用户登录/登出,动态路由,权限校验,用户管理等典型的业务模型,可以帮助你快速搭建企业级中后台产品原型,是你接私活的不二之选。

本系统的开发灵感来自 vue-element-admin ,这是一个基于 VueElementUI 的优秀的后台管理系统模板,在这里向大佬致敬!

其实我的主技术栈一直是 Vue,只是最近入坑了 React ,看了大半个月文档,就想牛刀小试一下,哈哈。不是有那句话么:检验学习成果最好的方式就是造轮子。所以就造了这么个轮子,哈哈。对于 React ,我还是个小白,项目中肯定有做的不够好的地方,欢迎各位同好提 prissue

功能

- 登录 / 注销

- 权限验证
  - 页面权限
  - 路由权限

- 全局功能
  - 动态侧边栏(支持多级路由嵌套)
  - 动态面包屑
  - 本地/后端 mock 数据
  - Screenfull全屏
  - 自适应收缩侧边栏

- 编辑器
  - 富文本
  - Markdown

- Excel
  - 导出excel
  - 导入excel
  - 前端可视化excel

- Zip
  - 导出zip

- 错误页面
  - 404

- 组件
  - 拖拽列表

- 表格
- Dashboard
- 引导页
- ECharts 图表
- 剪贴板

目录结构

├─ public                     # 静态资源
│   ├─ favicon.ico            # favicon图标
│   └─ index.html             # html模板
├─ src                        # 项目源代码
│   ├─ api                    # 所有请求
│   ├─ assets                 # 图片 字体等静态资源
│   ├─ components             # 全局公用组件
│   ├─ config                 # 全局配置
│   │   ├─ menuConfig.js      # 导航菜单配置
│   │   └─ routeMap.js        # 路由配置
│   ├─ lib                    # 第三方库按需加载
│   ├─ mock                   # 项目mock 模拟数据
│   ├─ store                  # 全局 store管理
│   ├─ styles                 # 全局样式
│   ├─ utils                  # 全局公用方法
│   ├─ views                  # views 所有页面
│   ├─ App.js                 # 入口页面
│   ├─ defaultSettings.js     # 全局默认配置
│   └─index.js                # 源码入口
├── .env.development          # 开发环境变量配置
├── .env.production           # 生产环境变量配置
├── config-overrides.js       # 对cra的webpack自定义配置
├── deploy.sh                 # CI部署脚本
├── .travis.yml               # 自动化CI配置
└── package.json              # package.json

安装

# 克隆项目
git clone https://github.com/NLRX-WJC/react-antd-admin-template.git

# 进入项目目录
cd react-antd-admin-template

# 安装依赖
npm install

# 切换淘宝源,解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm start

启动完成后会自动打开浏览器访问 http://localhost:3000, 你看到下面的页面就代表操作成功了。

接下来你可以修改代码进行业务开发了。

关于作者

大家好,我是难凉热血。

终南山下码农一枚,师从道长王重阳,酷爱打码,崇尚开源精神,乐于分享。

2005年服役于中国人民解放军东南战区狼牙特种大队,担任狙击手。

2008年受俄罗斯阿尔法特种部队邀请,执教于该特种部队第一大队教授其队员学习中国特色社会主义理论及毛泽东思想。

2011年竞选美国总统落选,遂心灰意冷,放下所有荣誉,隐居终南山下。

2015年受道长王重阳委托,为道观开发香火管理系统,遂沉迷IT,无法自拔。

喜欢折腾和搞机,追求新鲜技术。

下边是我的微信,欢迎同好伙伴一起树(tree)新(new)风(bee)!!!

鼓励作者

作为个人开发者,维护开源实属不易。如果您觉得本项目对你有些许帮助的话,还请帮忙点个 star 哈~~ 如果您有余力的话也非常感谢您对我的赞赏,您的赞赏,是对我创作最大的认可和鼓励。

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].