{"id":19529395,"url":"https://github.com/kongyijilafumi/react-ant-admin","last_synced_at":"2025-04-06T04:10:29.989Z","repository":{"id":37697877,"uuid":"356150262","full_name":"kongyijilafumi/react-ant-admin","owner":"kongyijilafumi","description":"此框架使用与二次开发，前端框架使用react，UI框架使用ant-design，全局数据状态管理使用redux，ajax使用库为axios。用于快速搭建中后台页面。","archived":false,"fork":false,"pushed_at":"2024-10-17T02:18:58.000Z","size":11699,"stargazers_count":88,"open_issues_count":2,"forks_count":23,"subscribers_count":2,"default_branch":"webpack","last_synced_at":"2025-03-30T03:04:57.048Z","etag":null,"topics":["admin","admin-web","ant-design","axios","react","react-admin","redux","web"],"latest_commit_sha":null,"homepage":"http://z3web.cn/react-ant-admin/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kongyijilafumi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-09T05:43:59.000Z","updated_at":"2024-12-27T07:32:13.000Z","dependencies_parsed_at":"2023-11-16T03:28:39.749Z","dependency_job_id":"771b4a6a-efd2-4541-9783-ad51848236a0","html_url":"https://github.com/kongyijilafumi/react-ant-admin","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kongyijilafumi%2Freact-ant-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kongyijilafumi%2Freact-ant-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kongyijilafumi%2Freact-ant-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kongyijilafumi%2Freact-ant-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kongyijilafumi","download_url":"https://codeload.github.com/kongyijilafumi/react-ant-admin/tar.gz/refs/heads/webpack","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430870,"owners_count":20937874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","admin-web","ant-design","axios","react","react-admin","redux","web"],"created_at":"2024-11-11T01:24:44.840Z","updated_at":"2025-04-06T04:10:29.972Z","avatar_url":"https://github.com/kongyijilafumi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-ant-admin\n\n[![GitHub star](https://img.shields.io/github/stars/kongyijilafumi/react-ant-admin?label=GitHub%20Star)](https://github.com/kongyijilafumi/react-ant-admin)\n[![GitHub fork](https://img.shields.io/github/forks/kongyijilafumi/react-ant-admin?label=GitHub%20fork)](https://github.com/kongyijilafumi/react-ant-admin/network/members)\n[![Gitee star](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/badge/star.svg?theme=dark)](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/stargazers)\n[![Gitee fork](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/badge/fork.svg?theme=dark)](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/members)\n![](https://img.shields.io/github/license/kongyijilafumi/react-ant-admin)\n\nTypeScript 版[GitHub(国外地址)](https://github.com/kongyijilafumi/react-ant-admin-ts) |\nTypeScript 版[码云(国内镜像)](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin-ts)\n\nJavaScript 版[GitHub(国外地址)](https://github.com/kongyijilafumi/react-ant-admin) |\nJavaScript 版[码云(国内镜像)](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin)\n\n此框架使用与二次开发，前端框架使用 react，UI 框架使用 ant-design，全局数据状态管理使用 redux，ajax 使用库为 axios。用于快速搭建中后台页面。欢迎各位提[issue](https://github.com/kongyijilafumi/react-ant-admin/issues)\n\n- [react](https://react.docschina.org/)\n- [react-router-cache-route](https://www.npmjs.com/package/react-router-cache-route)\n- [ant-design](https://ant.design/index-cn)\n- [redux](https://redux.js.org/)\n- [axios](http://www.axios-js.com/)\n\n## 预览地址\n\n[react-ant-admin](http://z3web.cn/react-ant-admin/)\n\nnodejs 后台 web 服务:[react-ant-admin-server](https://gitee.com/kong_yiji_and_lavmi/react-ant-admin-server)\n\n## 二次开发视频讲解地址\n\n- [百度云视频下载地址](https://pan.baidu.com/s/1aJHIhCnv0q1wojUdJknidQ?pwd=y9mx )\n- [阿里云视频下载地址](https://www.aliyundrive.com/s/kvfHSoa7fP3)\n\n\n## 文档地址\n\n[react-ant-admin 文档地址](https://z3web.cn/doc-react-ant-admin/)\n\n更多建议欢迎骚扰~\n[qq 交流群:564048130](https://jq.qq.com/?_wv=1027\u0026k=pzP2acC5)\n\n欢迎各位提出建议与问题!\n\n## [接口文档地址](https://www.apifox.cn/apidoc/project-927261)\n\n## 特性\n\n- 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步\n- 页面懒加载:使用[@loadable/component](https://loadable-components.com/docs/getting-started/)来解决首次打开页面过慢的问题.\n- Ajax 请求：restful 规范，自动错误提示，提示可配置；自动打断未完成的请求；\n- 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.\n- 自定义主题，可以自己定义界面颜色。\n- 代理转发，解决前端请求跨域问题。\n- 路由自动生成，去中心化。\n\n系统提供了一些基础的页面\n\n- 登录页\n- 详情页\n- 表单页\n- 列表页\n- 权限管理\n- 结果页\n\n## 切换 Vite 版本\n\n1. 切换分支\n\n```bash\nD:\\react-ant-admin\u003egit checkout vite\n```\n\n2. 安装依赖\n\n```bash\nD:\\react-ant-admin\u003ecnpm i\n```\n\n3. 启动\n\n```bash\nD:\\react-ant-admin\u003enpm run dev\n```\n\n## 快速使用\n\n1. 下载本项目到本地\n\n```bash\nD:\u003e git clone https://github.com/kongyijilafumi/react-ant-admin.git #github地址 慢\nD:\u003e git clone https://gitee.com/kong_yiji_and_lavmi/react-ant-admin.git #码云地址 快\n```\n\n2. 安装依赖\n\n```bash\n# npm 慢\nnpm i\n# cnpm 国内镜像 快\ncnpm i\n```\n\n3. 启动\n\n```bash\nnpm run \"start:mock\" # 启动本地mock数据 (暂时没有后台接口,请用此模式预览项目)\nnpm run start # 启动本地API接口来获取数据\n```\n\n浏览器打开 `http://localhost:3000` 即可\n\n## 创建一个新的页面\n\n1. 在 src/pages 文件夹下创建一个 test.js 文件,代码如下\n\n```js\n// 函数组件\nimport React from \"react\";\n\nexport default function Test() {\n  return \u003cdiv\u003etest页面\u003c/div\u003e;\n}\n\n// 类组件\nexport default class Test extends React.Component {\n  render() {\n    return \u003cdiv\u003etest页面\u003c/div\u003e;\n  }\n}\n\n/**\n * MENU_* 开头信息在package.json 文件中找到\n * 给 pages 组件追加路由信息\n * export default 组件的原型上添加route信息,或者向外暴露一个 route\n * 会被webpack的webpack-router-generator插件捕获信息\n */\n\n// 1.被捕获 export default 原型上的route\nTest.route={\n  [MENU_TITLE] : \"test页面\",\n  [MENU_KEY] : 11,\n  [MENU_PATH]: \"/test\"\n}\n\n// 2.被捕获 暴露的route信息  优先级比上面高\nexport const route = {\n  [MENU_TITLE] : \"test页面\",\n  [MENU_KEY] : 11,\n  [MENU_PATH]: \"/test\"\n}\n```\n\n2. 浏览器访问 `http://localhost:3000/react-ant-admin/test` 即可\n\n## 创建一个菜单\n\n该添加方式适用于 `npm run \"start:mock\"`启动的项目\n\n1. 在`src/mock/index.js` 找到`menu`变量,往里添加一条菜单信息.代码如下所示\n\n```js\nlet menu = [\n  {\n    [MENU_TITLE]: \"列表页\",\n    [MENU_PATH]: \"/list\",\n    [MENU_KEY]: 9, // 菜单的唯一标识 \n    [MENU_PARENTKEY]: null,\n    [MENU_ICON]: \"icon_list\",\n    [MENU_KEEPALIVE]: \"false\",\n    [MENU_LAYOUT]:\"FULLSCREEN\" // 页面内容主题全屏显示 布局\n    [MENU_ORDER]: 1,\n  },\n  {\n    [MENU_TITLE]: \"卡片列表\",\n    [MENU_PATH]: \"/card\",\n    [MENU_KEY]: 10,\n    [MENU_PARENTKEY]: 9, // 父菜单的唯一标识 \n    [MENU_ICON]: null,\n    [MENU_LAYOUT]:\"TWO_COLUMN\" // 拥有侧边栏的 布局 此属性默认可以不填 在 src/layout/index.js defualt 项导出一个默认布局\n    [MENU_KEEPALIVE]: \"false\",\n    [MENU_ORDER]: 5485,\n  },\n  // .... 开始添加菜单信息 ....\n  {\n    [MENU_TITLE]: \"test\", // 标题\n    [MENU_PATH]: \"/test\", // 访问路径\n    [MENU_KEY]: 11, // 菜单的唯一标识 \n    [MENU_PARENTKEY]: null, // 空表示 为主菜单而非子菜单\n    [MENU_ICON]: \"icon_infopersonal\", // 菜单图标\n    [MENU_ORDER]: 1, // 菜单排序 越小越靠前 number\n    [MENU_KEEPALIVE]: \"true\", //  页面保持状态\n  },\n  // .....\n];\n```\n\n2. 由于菜单会走本地会话存储`window.sessionStorage`,所以保存代码后需要关闭当前窗口,重新打开地址 `http://localhost:3000/react-ant-admin`\n\n\u003e 打开之后,会发现菜单会多出一个`test`栏目,点击会打开之前我们创建的 test 页面.这样就完成了菜单和页面的编写.\n\n## 脚本启动\n\n在完成依赖安装之后,有以下几种启动方式。\n\n- npm run start\n\n请求接口数据，通过后台返回数据显示项目信息\n\n- npm run \"start:color\"\n\n请求接口数据，通过后台返回数据显示项目信息，并且开启主题色配置。\n\n- npm run \"start:mock\"\n\n本地模拟数据，假数据来显示项目信息\n\n- npm run \"start:mock_color\"\n\n本地模拟数据，假数据来显示项目信息，并且开启主题色配置。\n\n- npm run build\n\n普通打包模式。\n\n- npm run \"build:color\"\n\n打包主题色。项目体积会有所增加。\n\n### vscode 快速启动项目\n\n使用[vscode 编辑器](https://code.visualstudio.com/)[下载地址](https://blog.csdn.net/bielaiwuyang1999/article/details/117814237)\n\n把此项目文件夹拖入`vscode编辑器`,找到左下角`npm 脚本栏目`选择快速启动，免命令。\n![免命令示例图](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/run.png)\n\n## 项目截图\n\n- 登录\n\n![登录](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-doc01.png)\n\n- 详情页\n\n![详情页](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-detail.png)\n\n- 列表\n\n![表格](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-list.png)\n\n- 权限管理\n\n![权限管理](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-power.png)\n\n- 结果页\n\n![结果页](https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-result1.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkongyijilafumi%2Freact-ant-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkongyijilafumi%2Freact-ant-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkongyijilafumi%2Freact-ant-admin/lists"}