推荐一款快速搭建中后台页面，管理系统架构，React全家桶！

推荐关注

责编：猿哥 | 来源：GitHub猿 整理

往期文章：博客系统，简单易部署，精致主题贴心服务，专为程序员设计！

正文

大家好。我是GitHub猿。

我今天，推荐一个系统项目。猿哥第一次使用就有点上头，爱不释手，必须要推荐给大家。

上次是谁要的系统项目啊，猿哥帮你找到了。

这是我目前见过最好的系统项目。功能完整，代码结构清晰。值得推荐。

📚 项目介绍

最近猿哥在逛网站的时候发现一个不错的开源项目，猿哥觉得不错，值得拿出来和大家分享下。

🔥本项目系统是一款适用于快速搭建中后台页面，管理系统架构。react全家桶。admin管理系统。扩展：ChatGPT太TM牛逼了！

特性

• vitejs: 更快的构建工具，体验极速开发。

• 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步

• 页面懒加载:使用@loadable/component来解决首次打开页面过慢的问题.

• Ajax 请求：restful 规范，自动错误提示，提示可配置；自动打断未完成的请求；

• 另外，搜索公众号Linux就该这样学后台回复“电子书”，获取一份惊喜礼包。
  

• 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.

• 自定义主题，可以自己定义界面颜色。

• 代理转发，解决前端请求跨域问题。

• 路由自动生成，去中心化。

系统提供了一些基础的页面

• 登录页

• 详情页

• 表单页

• 列表页

• 权限管理

• 结果页

快速使用

1. 下载本项目到本地

D:> git clone 文末获取 #github地址 慢
D:> git clone 文末获取 #码云地址 快

1. 切换 vite 分支

D:\react-ant-admin>git checkout vite

1. 安装依赖

# npm 慢
npm i
# cnpm 国内镜像 快
cnpm i

1. 启动

npm run dev # 默认走代理请求线上接口 https://z3web.cn

浏览器打开 http://localhost:3000 即可

切换 webpack 版本

1. 切换分支

D:\react-ant-admin>git checkout webpack

1. 安装依赖

D:\react-ant-admin>cnpm i

1. 启动

D:\react-ant-admin>npm run start

创建一个新的页面

1. 在 src/pages 文件夹下创建一个 test.tsx 文件,代码如下

// 函数组件
export default function Test() {
return <div>test页面</div>;
}

/**
* MENU_* 开头信息在 package.json(在webpack分支中) 文件中找到
* 给 pages 组件追加路由信息
* export default 组件的原型上添加route信息,或者向外暴露一个 route
* 会被vite的vite-plugin-react-router-generator插件捕获信息
*/

// 1.被捕获 export default 原型上的route
Test.route={
[MENU_TITLE] : "test页面",
[MENU_KEY] : "test",
[MENU_PATH]: "/test",
[MENU_LAYOUT]:"FULLSCREEN" // 该页面全屏显示 默认可以不填
}

// 2.被捕获 暴露的route信息 优先级比上面高
export const route = {
[MENU_TITLE] : "test页面",
[MENU_KEY] : "test",
[MENU_PATH]: "/test",
[MENU_LAYOUT]:"FULLSCREEN" // 该页面全屏显示 默认可以不填
}

1. 浏览器访问 http://localhost:3000/react-ant-admin/test 即可

脚本启动

在完成依赖安装之后,有以下几种启动方式。

• npm run dev

请求接口数据，通过后台返回数据显示项目信息

• npm run "dev:mock"

本地模拟数据，假数据来显示项目信息

• npm run build

普通打包模式。

• npm run preview

打包后的产物，开启本地预览。

项目截图

• 登录

• 详情页

• 列表

• 权限管理

• 结果页

最后，想学习这个项目的可以查看项目地址：

项目源码，怎么领取？

源码获取

扫码下方二维码，后台回复【全家桶】即可获取所有系统

为了跟上AI时代我干了一件事儿，我创建了一个知识星球社群：ChartGPT与副业。想带着大家一起探索ChatGPT和新的AI时代。

有很多小伙伴搞不定ChatGPT账号，于是我们决定，凡是这三天之内加入ChatPGT的小伙伴，我们直接送一个正常可用的永久ChatGPT独立账户。

简单说下这个星球能给大家提供什么：

1、不断分享如何使用ChatGPT来完成各种任务，让你更高效地使用ChatGPT，以及副业思考、变现思路、创业案例、落地案例分享。

2、分享ChatGPT的使用方法、最新资讯、商业价值。

3、探讨未来关于ChatGPT的机遇，共同成长。

4、帮助大家解决ChatGPT遇到的问题。

5、提供一整年的售后服务，一起搞副业

星球福利：

1、加入星球4天后，就送ChatGPT独立账号。

2、邀请你加入ChatGPT会员交流群。

3、赠送一份完整的ChatGPT手册和66个ChatGPT副业赚钱手册。

其它福利还在筹划中... 不过，我给你大家保证，加入星球后，收获的价值会远远大于今天加入的门票费用 ！

本星球第一期原价399，目前属于试运营，早鸟价119，每超过50人涨价10元，星球马上要来一波大的涨价，如果你还在犹豫，可能最后就要以更高价格加入了。。

早就是优势。建议大家尽早以便宜的价格加入！

昨天发的20个优惠卷已经用完，今天我又放出来了100个20元优惠卷，相当于99元就能加入。
早就是优势！对了现在加入还送一个ChatGPT独享帐号。
名额有限，先到先得：

欢迎有需要的同学试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️

在 GitHub猿 还有更多优质项目系统学习资源，欢迎分享给其他同学吧！

--END--

猿哥个人微信

添加猿哥个人微信即送一份惊喜大礼包

→ 技术资料共享

→ 技术交流社群

版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢!

往日文章：

最近，GitHub猿建了一个「GitHub猿交流群」，欢迎大家一起交流优秀开源项目，也可以宣传自己的开源项目，在 「GitHub猿」公众号后台回复【加群】邀请你入群。

你点的每个赞，我都认真当成了喜欢