react18+TS 通用后台管理系统解决方案落地实战

全面提升React高阶技能,灵活驾驭各类后台管理系统开发痛点,先人一步成为前端核心骨干

你将学会:

1. 把控全局,打造高通用性项目
4. 系统设计,提升架构设计思维
2. 打通权限,制定通用设计方案
5. 解锁技能,实战React18全家桶
3. 突破瓶颈,落地性能优化策略
6. 灵活封装,增强组件化技巧

具备中后台管理系统开发能力,已成为优秀前端工程师的标配。本课程将基于React18 全家桶+Vite4.0+TypeScript4.0,带你从需求分析、业务核心实现到性能优化,全流程打造“幕幕货运”后台管理系统。你将学到复杂业务拆解、权限方案设计、性能调优、上传下载、 大屏设计、地图应用、暗黑主题、订单统计、业务组件封装、自定义Hook、函数封装等满满干货。线上体验:http://driver.marsview.cc

目录大纲:

第1章 【学前概览】这里有你需要了解的一切
2 节|15分钟
收起
视频:
1-1 老司机带你弯道超车,技能&经验收获满满
试看
08:05
视频:
1-2 “幕幕货运”后台管理系统演示
试看
06:47
第2章 【项目准备】项目需求分析、前端开发环境搭建
13 节|88分钟
收起
视频:
2-1 需求分析(开发流程、课程介绍)
14:40
视频:
2-2 技术选型(技术角度、面向用户、UI框架选择)
试看
09:12
视频:
2-3 本次课程选型思考
02:47
视频:
2-4 创建Vite项目
11:45
视频:
2-5 项目配置(editorconfig、npm、yarn)
09:21
视频:
2-6 Prettier配置讲解
16:31
视频:
2-7 ESLint问题说明
03:17
视频:
2-8 Eslint配置讲解
09:25
视频:
2-9 Vite配置讲解
10:14
图文:
2-10 【资料梳理】ESLint配置
图文:
2-11 【资料梳理】editorconfig配置
图文:
2-12 【资料梳理】Prettier配置
图文:
2-13 【资料梳理】Yarn 和 Npm 配置
第3章 【React入门】掌握JSX和常用Hook开发,一学就会
21 节|124分钟
收起
视频:
3-1 初识ReactHook(本章概览、Vue和React对比)
09:27
视频:
3-2 React JSX语法讲解(变量、条件、样式、循环、属性传递)
16:57
视频:
3-3 ReactHook基本介绍
04:30
视频:
3-4 useState语法讲解(字符串、数字、数组、对象动态更新)
18:29
视频:
3-5 useState到底是同步更新还是异步更新
04:53
视频:
3-6 useEffect语法讲解(模拟生命周期以及自定义Hook)
19:52
视频:
3-7 memo、useMemo和useCallback案例讲解
14:16
视频:
3-8 useContext和useReducer案例演示
07:17
视频:
3-9 useRef基础语法讲解
05:50
视频:
3-10 useTransition 过渡使用
07:05
视频:
3-11 前端常用调试技巧
12:01
视频:
3-12 重难点梳理
03:01
图文:
3-13 【资料梳理】Hook开发规则
图文:
3-14 【资料梳理】React入门到进阶
图文:
3-15 【资料梳理】useContext 和 useReducer
图文:
3-16 【资料梳理】useEffect语法讲解
图文:
3-17 【资料梳理】useMemo_useCallback
图文:
3-18 【资料梳理】useRef
图文:
3-19 【资料梳理】useState语法讲解
图文:
3-20 【资料梳理】React 调试
作业:
3-21 【阶段练练练】用JSX实现一个TODO-LIST功能
第4章 【TS入门】基础类型、泛型、元组、接口、函数、联合类型以及交叉类型等一网打尽
18 节|77分钟
收起
视频:
4-1 TS入门概览
04:18
视频:
4-2 JS内置8种基础类型
07:14
视频:
4-3 void、never、any、unknown类型定义
03:55
视频:
4-4 Array和函数类型定义讲解
09:30
视频:
4-5 元组和交叉类型使用
06:17
视频:
4-6 接口五种场景使用
15:25
视频:
4-7 泛型的三种定义和使用方式
09:08
视频:
4-8 keyof、typeof和in使用
06:07
视频:
4-9 tscofnig配置讲解
09:14
视频:
4-10 重难点梳理
05:28
图文:
4-11 【资料梳理】void、never、any、unknown类型
图文:
4-12 【资料梳理】元组
图文:
4-13 【资料梳理】接口
图文:
4-14 【资料梳理】泛型
图文:
4-15 【资料梳理】关键知识点
图文:
4-16 【资料梳理】tsconfig.json配置
图文:
4-17 【资料梳理】TS必知必会总结
作业:
4-18 【阶段练练练】请给以下语法添加TS类型定义
第5章 【React-Router6.0进阶】路由全方位学习,从此不迷路
15 节|60分钟
收起
视频:
5-1 本章概览
04:02
视频:
5-2 路由基本安装和使用
04:43
视频:
5-3 路由跳转4种方式
10:02
视频:
5-4 通过HookApi和基础Api创建路由
07:38
视频:
5-5 动态路由和嵌套路由
10:39
视频:
5-6 路由的数据API讲解-Loader
09:01
视频:
5-7 路由的数据API讲解-Action
07:38
视频:
5-8 重难点梳理
06:11
图文:
5-9 【资料梳理】ReactRouter安装
图文:
5-10 【资料梳理】路由跳转
图文:
5-11 【资料梳理】通过API创建路由
图文:
5-12 【资料梳理】动态路由、嵌套路由
图文:
5-13 【资料梳理】Data API
图文:
5-14 【资料梳理】路由必知必会梳理
作业:
5-15 【阶段练练练】请按要求定义以下路由
第6章 【加薪秘籍】系统架构设计
17 节|164分钟
收起
视频:
6-1 章节介绍
02:00
视频:
6-2 目录结构定义
03:01
视频:
6-3 API路由定义
18:47
视频:
6-4 组件路由定义
03:02
视频:
6-5 基础Axios实例封装
11:51
视频:
6-6 拦截器封装
08:01
视频:
6-7 Loading组件封装-方案一
11:17
视频:
6-8 Spin问题说明
02:52
视频:
6-9 Loading组件封装-方案二
17:25
视频:
6-10 请求TS类型定义
06:34
视频:
6-11 localStorage封装
13:13
视频:
6-12 编译时环境讲解
18:25
视频:
6-13 运行时环境封装
11:29
视频:
6-14 金额格式化(两种方案)
16:13
视频:
6-15 日期格式化(两种方案)
14:55
视频:
6-16 接口整理
04:19
图文:
6-17 【资料梳理】接口文档
第7章 【项目实战】实现登录、自定义主题、CSS-Module和局部控制Loading
11 节|90分钟
收起
视频:
7-1 登录静态布局实现
24:35
视频:
7-2 CSS Module讲解和实战
09:48
视频:
7-3 自定义主题色
06:25
视频:
7-4 登录实战-动态交互实现
17:35
视频:
7-5 message打印报错问题解决方案
08:52
视频:
7-6 局部Loading和局部报错封装
11:52
视频:
7-7 declare 声明语法使用
10:38
图文:
7-8 CSS Module
图文:
7-9 定制主题
图文:
7-10 登 录
图文:
7-11 局部控制loading和报错提示
第8章 【项目实战】菜单递归渲染和容器布局开发,实现欢迎首页
11 节|119分钟
收起
视频:
8-1 首页布局开发实现
07:31
视频:
8-2 水印使用和实现原理、MutationObserver讲解
12:36
视频:
8-3 NavHeader组件静态实现
12:17
视频:
8-4 NavFooter组件开发实现
04:31
视频:
8-5 侧边栏菜单组件实现
11:02
视频:
8-6 欢迎首页静态布局实现
22:01
视频:
8-7 获取用户信息
12:01
视频:
8-8 状态管理框架Resso使用
12:27
视频:
8-9 zustand框架基本使用
12:46
视频:
8-10 zustand更新token
03:34
视频:
8-11 折叠菜单实现
07:58
第9章 【项目实战】基于Echarts实现一个工作台页面
7 节|91分钟
收起
视频:
9-1 工作台个人信息静态布局
13:48
视频:
9-2 Echarts图表开发入门
21:23
视频:
9-3 饼图和雷达图实现
13:15
视频:
9-4 个人信息和司机汇总接口动态加载实现
15:14
视频:
9-5 自定义Echarts Hook,简化开发
13:46
视频:
9-6 图表数据接口动态实现
09:49
视频:
9-7 图表刷新功能实现
02:48
第10章 【项目实战】弹框组件封装和组件性能优化,实现用户管理页面
17 节|141分钟
收起
视频:
10-1 页面风格基本结构搭建
09:44
视频:
10-2 用户列表静态实现
10:35
视频:
10-3 用户列表接口实现
09:11
视频:
10-4 用户列表分页功能实现
21:30
视频:
10-5 弹框封装思路介绍、弹框表单实现
15:45
视频:
10-6 头像上传实现(格式验证、大小验证、上传Loading)
21:29
视频:
10-7 弹框封装、创建用户接口实现
14:34
视频:
10-8 用户编辑功能实现
07:13
视频:
10-9 删除和批量删除功能实现.mp4
11:53
视频:
10-10 功能优化、问题修复
09:07
视频:
10-11 使用aHook插件快速集成分页功能
09:47
图文:
10-12 【资料梳理】用户列表接口
图文:
10-13 【资料梳理】分页
图文:
10-14 【资料梳理】弹框封装
图文:
10-15 【资料梳理】用户创建和编辑接口
图文:
10-16 【资料梳理】用户删除、批量删除接口
图文:
10-17 【资料梳理】局部修复和功能优化
第11章 【项目实战】实现部门树形列表CRUD功能
6 节|63分钟
收起
视频:
11-1 部门列表实现
19:06
视频:
11-2 部门弹框实现一
12:07
视频:
11-3 部门弹框实现二
11:54
视频:
11-4 部门新增、编辑、删除接口实现
19:33
图文:
11-5 【资料梳理】部门列表接口
图文:
11-6 【资料梳理】部门创建、编辑接口
第12章 【项目实战】菜单管理功能实现、菜单动态生成、递归算法讲解
12 节|102分钟
收起
视频:
12-1 菜单列表实现
14:07
视频:
12-2 菜单弹窗实现
16:48
视频:
12-3 菜单创建、编辑、删除功能实现
09:48
视频:
12-4 菜单模块局部优化
09:18
视频:
12-5 权限接口、AuthLoader定义
08:34
视频:
12-6 递归算法 – 获取页面路径
11:49
视频:
12-7 菜单动态渲染
20:03
视频:
12-8 菜单点击跳转和受控组件
05:09
视频:
12-9 布局和菜单优化
05:52
图文:
12-10 【资料梳理】菜单接口
图文:
12-11 【资料梳理】菜单模块优化
图文:
12-12 【资料梳理】菜单动态渲染
第13章 【项目实战】角色模块实战、RBAC权限设计、页面和按钮权限拦截
11 节|108分钟
收起
视频:
13-1 角色列表功能实现
20:03
视频:
13-2 创建和编辑角色功能实现
20:24
视频:
13-3 删除角色功能实现
03:25
视频:
13-4 权限设置功能实现(上)
15:02
视频:
13-5 权限设置功能实现(下)
14:47
视频:
13-6 权限更新和子账号登录
13:54
视频:
13-7 页面权限控制
12:24
视频:
13-8 按钮权限开发实现
07:34
图文:
13-9 【资料梳理】部门接口
图文:
13-10 【资料梳理】权限设置
图文:
13-11 【资料梳理】按钮权限
第14章 【项目实战】实现地图打点、订单轨迹、订单大屏功能
14 节|205分钟
收起
视频:
14-1 订单列表实现
23:35
视频:
14-2 创建订单功能实现
29:02
视频:
14-3 订单详情、手机号加密开发实现
22:15
视频:
14-4 地图初始化、地图打点功能实现(上)
14:43
视频:
14-5 地图初始化、地图打点功能实现(下)
16:51
视频:
14-6 地图轨迹动画实现
18:20
视频:
14-7 打点和轨迹优化
03:34
视频:
14-8 文件下载封装、删除功能实现
18:05
视频:
14-9 订单聚合功能实现
26:26
视频:
14-10 司机列表功能实现(上)
14:38
视频:
14-11 司机列表功能实现(下)
16:59
图文:
14-12 【资料梳理】订单列表接口
图文:
14-13 【资料梳理】轨迹地图
图文:
14-14 【资料梳理】订单聚合
第15章 【项目实战】路由按需、暗黑、多页签、面包屑、组件封装和XRender
9 节|110分钟
收起
视频:
15-1 章节介绍、面包屑功能实现
14:07
视频:
15-2 路由懒加载实现
11:19
视频:
15-3 多页签功能实现
26:02
视频:
15-4 SearchForm组件封装
05:03
视频:
15-5 XRender插件集成使用(上)
16:24
视频:
15-6 XRender插件集成使用(下)
07:56
视频:
15-7 暗黑主题切换(上)
13:22
视频:
15-8 暗黑主题切换(下)
11:53
视频:
15-9 课程总结
03:48

持续更新

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注