nlrx-wjc/react-antd-admin-template

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

简介

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

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

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

• 在线预览
• Gitee在线预览(国内用户可访问该地址)
• 开发文档 目前还在持续编写完善中...

功能

- 登录 / 注销

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

- 全局功能
  - 动态侧边栏（支持多级路由嵌套）
  - 动态面包屑
  - 本地/后端 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 哈~~ 如果您有余力的话也非常感谢您对我的赞赏，您的赞赏，是对我创作最大的认可和鼓励。

react-antd-admin-template's Issues

作者考虑用hook吗

感觉都是class写法，作者考虑用hook重构下吗

chrome浏览器的redux看不到store的数据流结构

系统设置有个问题

固定header那里第一次有效果，后面几次都是没有效果的，无论是刷新还是从新打开网页，

您好，可以联系一下您吗

如何把 menuConfig 里面的数据替换成后台数据呢

跨域问题处理

借助 http-proxy-middleware解决跨域时，在src新建setupProxy.js时，配置完毕跨域后，项目启动报错，无法正常启动

启动报这个错，按照他的提示弄了还是报这个错

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\Administrator\node_modules\webpack is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls webpack in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

刷新的时候tab标签会丢失

刷新下 tab 标签没有了。

你好 我想请问一下,怎么添加一个不在menu菜单上展示的子路由

比如一个table中的一列 我点击查看详情 跳转到一个子路由, 但是这个子路由不需要在菜单中显示

表格修改做记录

比如表格->编辑后，后台记录修改的字段，字段名称，表名和修改人。
如username 原值 张三 修改后 李四 ，表名 table_user ,修改人 张三

页面缓存怎么加呀？

页面缓存怎么加呀？

类似 vue 的 keep-alive

多标签页面的状态管理怎么实现？

点开一个标签都是重新加载，怎么实现状态保存？

关于bug收集

您好
我正在学习antd,看到您做的项目很感兴趣。非常感谢您的分享。
我想请问一下关于bug收集那里src/views/bug
/index.js，我看bug收集按钮所对应的function
jsError = () => {
console.log(obj.a.length);
};
loadResourceError = () => {
let img = document.createElement("img");
img.src = "/images/notExist.jpg";
let parent = document.querySelector(".app-container")
parent.appendChild(img);
}
并没有传递前端页面显示的异常信息呀，

请问您这些异常信息是从哪里获取来的呢？如何传递进来的。

请问怎么配置支持css-modules，我参考了create-react-app还是不行

打包部署服务器一片空白？

什么情况

注释太少，小白看不懂

sos

请问这个项目是基于create-react-app创建的么，是如何启用less的呢，感谢

加油热血！

加油热血！加油热血！加油热血！加油热血！加油热血！

登陆的信息是怎么获取到的呢？

我已经一路查到src-utils下的request.js了。在第九行中，我修改了axios.create函数中的baseURL，但是还是能正常登陆，这是为什么呢？以及，如果要想把这个修改成自己的服务器地址要在哪里修改呢~

如何修改baseURl

请问第九行代码的url在哪里设置，找半天没找到，求赐教

nice！什么时候出antd4.0版本？

mark！！！

强烈建议升个级

考虑升级一下， React Router V6/ React V18...
其他依赖也升级一下

登录成功后跳转首页的逻辑是什么

你好，我碰见一些情况，请教一下。

问题：研究代码，login页面，点击登录按钮，先获取token-->获取用户信息，但是获取成功之后没有看到进行路由跳转的代码。我本地调试看到了点击登录按钮成功后，login组件进行了重新渲染，token存在，所以返回，但是为什么点击登录后，login组件会重新渲染呢,

创建项目

请问怎么创建的项目

强烈建议用TypeScript重写一把

刷新页面后当前页tab标签丢失了

窗口自适应

缩小web窗口，页面下方的滚动条怎么调出来？不然没法看到最右边的内容呢。