网站 › 『编程语言区』 › React企业人事后台管理实战HOOKS+TS+Vite (前端项目+源码)

a6201034 发表于 2021-4-26 11:08

React企业人事后台管理实战HOOKS+TS+Vite (前端项目+源码)

本帖最后由 a6201034 于 2021-7-31 20:25 编辑

项目简介
1.项目介绍
[*]项目使用到的技术栈

[*]React，使用Redux做状态管理。
[*]Hook，react-use库（很方便）。
[*]TypeScript。
[*]antd 组件库。
[*]Less。
[*]Vite。
[*]Eslint做代码检查。
[*]项目的目标

[*]使用React-Hooks+TS开发项目

2.适合人群及收获
[*]适合人群:

[*]适合想了解一个项目的大致流程
[*]或者是学习了React 全家桶但是缺乏React项目经验
[*]学习了TS但没有实战过的人群
[*]收获:

[*]掌握管理系统常用的权限校验,(根据角色/后端返回路由表)方式动态生成路由
[*]项目目录的结构划分，项目的state管理
[*]掌握TypeScript在react中的使用
[*]项目的大致流程

3.项目截图
https://github.com/chengzhenguo1/react-admin/raw/master/resources/01_%E7%99%BB%E5%BD%95.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/02_%E6%B3%A8%E5%86%8C.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/03_%E6%8E%A7%E5%88%B6%E5%8F%B0.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/04_%E7%94%A8%E6%88%B7%E5%88%97%E8%A1%A8.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/05_%E7%94%A8%E6%88%B7%E6%B7%BB%E5%8A%A0%E4%BF%AE%E6%94%B9.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/06_%E9%83%A8%E9%97%A8%E5%88%97%E8%A1%A8.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/07_%E6%B7%BB%E5%8A%A0%E9%83%A8%E9%97%A8.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/08_%E8%81%8C%E4%BD%8D%E5%88%97%E8%A1%A8.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/09_%E6%B7%BB%E5%8A%A0%E8%81%8C%E4%BD%8D.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/10_%E8%81%8C%E5%91%98%E5%88%97%E8%A1%A8.pnghttps://github.com/chengzhenguo1/react-admin/raw/master/resources/11_%E8%81%8C%E5%91%98%E6%B7%BB%E5%8A%A0.png
4.项目Github源码及API接口

[*]项目部署预览地址： http://icloudmusic.top/reactAdmin
[*]项目Github地址:https://github.com/chengzhenguo1/react-admin   如果觉得项目还不错的话 ，就给个Star鼓励一下吧
[*]项目原型
[*]https://lanhuapp.com/url/eSvUV-xKdRP
[*]接口文档

[*]http://www.web-jshtml.cn/file/reactApi.html

5.项目规范

[*]文件夹、文件名称统一驼峰式命名；
[*]TS变量名称采用驼峰标识，常量全部使用大写字母，组件采用大驼峰；
[*]CSS采用less来编写；
[*]全面使用TS开发组件；
[*]整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；
[*]所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
[*]函数组件内部基本按照如下顺序：

[*]组件内部state管理；
[*]路由以及其他信息；
[*]Api请求；
[*]元素上绑定的方法；
[*]redux代码规范如下:

[*]每个模块有自己独立的reducer，通过combineReducer进行合并；
[*]异步请求代码使用redux-thunk，并且写在actionCreators中；

[*]其他规范在项目中根据实际情况决定和编写；
备注
[*]感谢A总老师的手把手撸码前端让我学习到 react 开发管理平台的的知识。
[*]该项目是B站上的一个项目，原项目采用了class+js写法，该项目采用了TS+Hooks编写。

a6201034 发表于 2022-9-12 17:15

y32533 发表于 2022-9-7 11:13
可以在分享下吗

通过百度网盘分享的文件：React人事管…
链接:https://pan.baidu.com/s/1JjzvHDaE5R2Qk1IMdUfqHw?pwd=5dvd 
提取码:5dvd
复制这段内容打开「百度网盘APP 即可获取」

初级菜鸟 发表于 2021-12-3 11:20

大佬，可以发我一个全的么，不胜感激
大家好，在此收集React企业人事后台管理实战HOOKS
有效期截止到2022年1月2日11:19，麻烦在此之前点击以下链接将文件发送给我，支持发送任意格式的文件，感谢~
链接：https://pan.baidu.com/disk/main#/transfer/send?surl=ABkAAAAAAAxaeg

败败、 发表于 2021-4-26 11:12

楼主大大木有地址啊

a6201034 发表于 2021-4-26 11:13

败败、 发表于 2021-4-26 11:12
楼主大大木有地址啊

{:301_999:}我在编辑中，不知道为啥插入地址不管用

我为52pojie狂 发表于 2021-4-26 11:17

感谢提供，又多了一件吃灰的收藏品。

败败、 发表于 2021-4-26 11:20

a6201034 发表于 2021-4-26 11:13
我在编辑中，不知道为啥插入地址不管用

好哒

a6201034 发表于 2021-4-26 11:32

败败、 发表于 2021-4-26 11:20
好哒

已添加，不过用户组等级太低，没法直接蓝链{:301_995:}

rainbow270118 发表于 2021-4-26 11:33

感谢分享，多谢楼主

zxxiaopi 发表于 2021-4-26 11:34

感谢分享

失去了快乐丶 发表于 2021-4-26 11:40

感谢分享，厉害，先收藏看看。:eee

宜城小站 发表于 2021-4-26 13:46

感谢分享
期待中

查看完整版本: React企业人事后台管理实战HOOKS+TS+Vite (前端项目+源码)