{"id":26155741,"url":"https://github.com/kiritoking/react-manage-system","last_synced_at":"2026-05-07T18:09:07.378Z","repository":{"id":144677841,"uuid":"566610862","full_name":"KiritoKing/react-manage-system","owner":"KiritoKing","description":"基于 React+Koa.js 的全栈人员管理应用","archived":false,"fork":false,"pushed_at":"2023-06-12T14:03:34.000Z","size":797,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T23:35:44.649Z","etag":null,"topics":["full-stack","koa","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/KiritoKing.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-16T03:06:30.000Z","updated_at":"2024-04-10T07:34:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f300d27-af07-4438-8890-9cbafcf8c7cf","html_url":"https://github.com/KiritoKing/react-manage-system","commit_stats":null,"previous_names":["kiritoking/hust-kingsoft-2022","kiritoking/react-manage-system"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/KiritoKing/react-manage-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KiritoKing%2Freact-manage-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KiritoKing%2Freact-manage-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KiritoKing%2Freact-manage-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KiritoKing%2Freact-manage-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KiritoKing","download_url":"https://codeload.github.com/KiritoKing/react-manage-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KiritoKing%2Freact-manage-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32749690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["full-stack","koa","react","typescript"],"created_at":"2025-03-11T08:58:59.102Z","updated_at":"2026-05-07T18:09:07.349Z","avatar_url":"https://github.com/KiritoKing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# 基于 React+Koa.js 的全栈人员管理应用\n\n本应用使用Webpack+NPM构造脚本架，前后端均在一个项目内运行。\n\n前端以React+Typescript+AntD为核心构建。\n\n后端采用Koa.js+Node.js环境实现。\n\n更多Commit记录请访问：[KiritoKing/student-management: 基于 React+Koa.js 的全栈人员管理应用 (github.com)](https://github.com/KiritoKing/student-management)\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\n\n\n## 目录\n\n- [上手指南](#上手指南)\n  - [开发前的配置要求](#开发前的配置要求)\n  - [安装步骤](#安装步骤)\n- [部署](#部署)\n- [使用到的框架](#使用到的框架)\n- [版本控制](#版本控制)\n- [作者](#作者)\n\n### 上手指南\n\n###### 开发前的配置要求\n\n本应用尚未在Mac电脑测试过，产生意料之外的错误，请注意全局脚本命令和 `nodemodules` 路径是否出错\n\n**注意：需要本地全局环境安装Webpack和Node**\n\n###### **安装步骤**\n\n1. 克隆Git仓库\n\n```sh\ngit clone https://github.com/KiritoKing/student-management.git\n```\n\n2. 安装全部依赖\n\n```shell\nnpm install\n```\n\n\n\n### 文件目录说明\n\n```\nfinal\n├── README.md\n├── /fe/\n├── /server/\n├── /node_modules/\n├── /webpack/\n└── /packages.json\n```\n\n\n\n### 部署\n\n**注意两种模式访问的端口不同**\n\n###### 开发模式（Dev）\n\n1. 运行后端服务器 `npn run server`\n2. 运行前端开发服务器 `npm run dev`\n3. 访问 http://localhost:9000\n\n###### 生产模式（Prod）\n\n1. 打包页面 `npm run build`\n2. 运行后端服务器 `npm run server`\n3. 访问 http://localhost:9001\n\n*注：管理员用户名admin，密码123456*\n\n\n\n### 使用到的框架\n\n- [React](https://github.com/facebook/react)\n- [Ant Degsign](https://github.com/ant-design/ant-design)\n- [Koa.js](https://github.com/koajs/koa)\n\n\n\n\n### 版本控制\n\n该项目使用Git进行版本管理。您可以在repository参看当前可用版本。\n\n\n\n### 作者\n\nChlorineC@HUST, 2022\n\n邮箱: kiritoclzh@gmail.com\n\n\n\n---\n\n\n\n### 开发札记\n\n##### 前端部分\n\n- 项目可视化部分分为Page和Component两个部分组成\n  - Page主要用于构成路由页面，管理高层状态\n  - Component将页面用到的组件全部解耦合\n    - 利用CSS Module实现了选择器类名的简化\n    - 使部分插件能在不同页面之间复用，如`Modal`、`BreadBar`、`Layout`等\n- 客户端路由使用 `React-Router` 实现，使用 `HashRouter` 作为硬实现，避免服务端的额外适配\n  - 使用`Chlidren`和`Outlet`特性实现`Layout`\n- 逻辑层上使用`Redux`管理全局状态树，并在部分高复用功能下使用自定义Hook\n  - 创建了三个切片分别管理**学生列表信息、登陆状态信息和历史记录信息**\n  - 使用两个自定义Hook\n    - `useLogin` 用于获取并保持用户登陆状态（使之不会随刷新产生的状态消失而重新登陆）\n    - `useHistory` 用于解析当前Path刷新历史信息树Redux，供面包屑部件使用\n\n##### 后端部分\n\n- 因为是初次接触后端开发，所以没有太多技术细节\n- 将不同的功能拆分成单个文件，放在`/server/utils/` 目录中，使中间件表达更加简洁\n- 将数据存储在json中以实现数据持久化\n- 关于端口对接\n  - 在Dev中使用代理实现，即对Dev-Server实现9000端口的/api到9001端口的转发\n  - 在Prod中使用koa-static实现，直接在9001端口下渲染/fe/build/，即不用跨域\n\n##### 其他部分\n\n- 脚手架完全自己通过Webpack搭建~~（虽然考虑过next但是它的优化项不太熟反而造成了麻烦）~~，实现了**前端和后端在一个项目中构建**\n- 脚手架中完整具有ESLint，Prettier和CSS Module支持\n\n\n\n\u003c!-- links --\u003e\n\n[your-project-path]: KiritoKing/student-management\n[contributors-shield]: https://img.shields.io/github/contributors/KiritoKing/student-management.svg?style=flat-square\n[contributors-url]: https://github.com/KiritoKing/student-management/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/KiritoKing/student-management.svg?style=flat-square\n[forks-url]: https://github.com/KiritoKing/student-management/network/members\n[stars-shield]: https://img.shields.io/github/stars/KiritoKing/student-management.svg?style=flat-square\n[stars-url]: https://github.com/KiritoKing/student-management/stargazers\n[issues-shield]: https://img.shields.io/github/issues/KiritoKing/student-management.svg?style=flat-square\n[issues-url]: https://img.shields.io/github/issues/KiritoKing/student-management.svg\n[license-shield]: https://img.shields.io/github/license/KiritoKing/student-management.svg?style=flat-square\n[license-url]: https://github.com/KiritoKing/student-management/blob/master/LICENSE.txt\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiritoking%2Freact-manage-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiritoking%2Freact-manage-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiritoking%2Freact-manage-system/lists"}