{"id":24211431,"url":"https://github.com/chinacarlos/react-admin-template","last_synced_at":"2026-04-09T07:57:54.726Z","repository":{"id":39545222,"uuid":"186258377","full_name":"ChinaCarlos/react-admin-template","owner":"ChinaCarlos","description":"基于的react SPA 的后台管理系统模板","archived":false,"fork":false,"pushed_at":"2023-01-03T21:45:07.000Z","size":5159,"stargazers_count":1,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T02:35:41.381Z","etag":null,"topics":["antd-design","axios","prettier","react","react-redux","react-router-dom","redux","redux-thunk","style-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChinaCarlos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-12T13:27:03.000Z","updated_at":"2024-01-31T02:27:08.000Z","dependencies_parsed_at":"2023-02-01T10:32:02.045Z","dependency_job_id":null,"html_url":"https://github.com/ChinaCarlos/react-admin-template","commit_stats":null,"previous_names":["chinacarlos/react-admin-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Freact-admin-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Freact-admin-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Freact-admin-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaCarlos%2Freact-admin-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChinaCarlos","download_url":"https://codeload.github.com/ChinaCarlos/react-admin-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241696136,"owners_count":20004748,"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":["antd-design","axios","prettier","react","react-redux","react-router-dom","redux","redux-thunk","style-components"],"created_at":"2025-01-14T02:35:14.606Z","updated_at":"2025-11-30T12:04:39.693Z","avatar_url":"https://github.com/ChinaCarlos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 基于 React(SPA) + AntdDesign 的一个后台管理系统模板\n\n### 1.项目简介\n\u003e 1.该项目集成了`React`,`Redux`,`React-Router-Dom`,`React-Redux`,`Redux-Thunk`,`Antd-Design`,`Prettier`,`Style-Components`,`Axios`等技术。\n\n\u003e 2.效果如下图所示：\n\n\u003e ![项目效果截图](https://github.com/maliaoMJ/react-admin-template/blob/master/demos/11.png)\n\n### 2.项目运行\n##### 也可以通过`carlos-react-cli`脚手架安装\n\n1. 首先克隆本项目到本地\n\n```shell\n  git clone https://github.com/maliaoMJ/react-admin-template.git\n```\n\n2.  进入该项目目录下，安装依赖\n\n```shell\n  yarn or npm install\n```\n\n3. 运行本项目\n\n```shell\n  yarn start or npm start\n```\n\n4.  打包本项目\n\n```shell\n  yarn run build or npm run build\n```\n\n### 3.支持功能\n\n##### 1.`Antd-Design` 主题自定义\n\n在项目目录下`theme.js`文件中写入自定义主题的颜色变量(Less 变量)\n\n```javascript\nmodule.exports = {\n  '@primary-color': '#415ff3'\n  // '@layout-header-background': '#fff'\n}\n// 本人比较喜欢的紫色\n```\n\n##### 2.代码格式化 `prettier`\n\n在项目目录下`.prettierrc.js`文件中写入自定义的代码风格检查\n\n```javascript\nmodule.exports = {\n  semi: false,\n  singleQuote: true,\n  bracketSpacing: true\n  // More Config ...\n}\n```\n\n检查代码是否符合风格\n\n```shell\n  yarn run check-lint\n```\n\n或者执行命令格式化代码\n\n```shell\n   yarn run lint\n```\n\n##### 3.代码 `git` 提交检查\n\n在每次的代码提交中，在`git`提交前会触发代码风格检查，会自动按照配置的`prettier`风格格式化代码，如果格式化失败，会阻止提交代码\n如果需要自定配置其他项，请在`package.json`文件中修改:\n\n```json\n  \"lint-staged\": {\n \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\": [\n   \"prettier --config './.prettierrc.js' --write 'src/**/*.js'\",\n   \"git add\"\n ]\n}\n```\n\n##### 4.代码打包分析\n\n在每次个构建打包当中，我们可以根据分析打包后各个模块的所占的比列，进行代码性能优化。（这里用的是一个轻量级的分析工具，官方推荐的,也可以自己配置用其他工具`webpack-bundle-analyzer、webpack-chart、webpack-analyse`）\n\n```shell\n yarn run analyze\n```\n\n然后打开 ``查看打包模块分析，如下图所示：\n![项目效果截图](https://github.com/maliaoMJ/react-admin-template/blob/master/demos/22.png)\n\n##### 5.开发联调环境中 API Proxy 代理\n\n在我们开发中涉及前后端联调,如果跨域需要代理后端的接口，供前端调用\n在`src/setupProxy.js`文件中添加`api`代理配置\n\n```javascript\nconst proxy = require('http-proxy-middleware')\n\nmodule.exports = function(app) {\n  app.use(proxy('/api', { target: 'http://some-example/' }))\n  // More Proxy Config...\n}\n```\n\n### 4.打包部署\n\n- 普通部署\n  执行命令`yarn run build` 构建，如果用`history`路由模式，注意`nginx`的配置，以防止`404`出现\n- Docker 部署\n  参考目录下`deploy.sh`和`Dockerfile`文件\n- 起一个 node 页面服务\n  确保安装`pm2`(`yarn add global pm2`),然后执行：\n\n  ```\n   sh build.sh\n  ```\n\n  参考目录下： `start.js`\n\n  ```javascript\n  // 此文件为启动一个Nodejs 静态服务做端口代理\n  const path = require('path')\n  const express = require('express')\n  const fs = require('fs')\n  const app = express()\n  app.use(express.static(path.join(__dirname, './build')))\n  app.use(function(req, res) {\n    fs.readFile(\n      path.join(__dirname, './build/index.html'),\n      'utf-8',\n      (err, content) =\u003e {\n        if (err) {\n          console.log('We Cannot open \"buind/index.html\" file.')\n        }\n        res.writeHead(200, {\n          'Content-Type': 'text/html; charset=utf-8'\n        })\n        res.end(content)\n      }\n    )\n  })\n  app.listen('8080', function() {\n    console.log('web启动服务器完成')\n  })\n  ```\n\n### 5.未完待续\n\n```shell\necho '我知道你会来，所以我会等。'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinacarlos%2Freact-admin-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinacarlos%2Freact-admin-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinacarlos%2Freact-admin-template/lists"}