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

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

已完结
|
难度:中级
|
时长:共 26 小时 30 分钟
前端学习榜第 6 名
优惠到手 318
原价¥348.00
满599减100 满299减30
立即购买
加购物车
已有 587 人在学
  • 把控全局,打造高通用性项目
  • 系统设计,提升架构设计思维
  • 打通权限,制定通用设计方案
  • 解锁技能,实战React18全家桶
  • 突破瓶颈,落地性能优化策略
  • 灵活封装,增强组件化技巧
试看本节课 08:05
试看本节课 06:47
试看本节课 09:12
1-1 老司机带你弯道超车,技能&经验收获满满
1-2 “幕幕货运”后台管理系统演示
2-2 技术选型(技术角度、面向用户、UI框架选择)
具备中后台管理系统开发能力,已成为优秀前端工程师的标配。本课程将基于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 配置

本章介绍:

本章从0讲解JSX和Hook语法,详细讲解每一个知识点,学完即可掌握事件交互、循环、React缓存和React调试能力,能够动手开发一个动态的页面

第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功能

本章介绍:

从0讲解TS基础知识,掌握8种基础类型,元组、泛型、接口、函数等主要知识点,为后面的实战课程做好准备。每节课的案例提供Demo源码。

第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类型定义

本章介绍:

本章会详细介绍6.0路由语法知识,包含路由基础安装和使用,动态路由、嵌套路由以及6.0的特色Loader和Action功能。

第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 【阶段练练练】请按要求定义以下路由

本章介绍:

通过15个小节来讲解架构设计,从开发规范、结构定义、模块封装、组件封装到Axios封装、运行环境一应俱全,通过构建一个稳定的系统框架来提高开发效率。

第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 【资料梳理】接口文档

本章介绍:

实现登录页面的静态布局和动态交互功能,同时实现自定义主题、css module和局部loading控制效果

第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和报错提示

本章介绍:

实现一个欢迎首页,包含布局组件、菜单递归渲染、NavHeader和Footer组件、面包屑、多页签功能等。

第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

本章介绍:

封装Echarts组件,实现折线图、饼图、雷达图等中后台常见的图表功能

第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

本章介绍:

实现用户管理模块,包含CRUD和上传功能,同时对弹框组件进行封装并做性能优化。

第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 【资料梳理】局部修复和功能优化

本章介绍:

通过ReactHook实现一个带增删改查功能的部门列表

第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 【资料梳理】菜单动态渲染

本章介绍:

实现角色模块功能,介绍RBAC通用权限设计方案,基于React-Router的Loader能力开发路由拦截。

第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 【资料梳理】按钮权限

本章介绍:

基于ReactHook+百度地图实现地图打点、订单轨迹图、订单聚合图等功能

第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 【资料梳理】订单聚合

本章介绍:

实现路由按需功能、暗黑主题切换、多页签开发、面包屑开发以及SearchForm组件封装、XRender使用

第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
本课程已完结
适合人群
1-3年前端开发者
希望增强项目开发经验,拓宽实用技能边界的同学们
想在毕设答辩、项目面试中更好得展示能力的同学们
技术储备
熟悉Javascript、HTML、CSS的基础应用
了解React基本操作
环境参数
react 18.2.0
react-router-dom 6.4.5
antd 5.2.3
typescript 4.6.4
vite 4.0

十年前端开发经验,先后任职IBM、哔哩哔哩和货拉拉,主导H5、小程序、中后台、低代码等一线产品开发和架构设计。

不为别的,只为提升面试通过率
尽管课程时间很长,
但没关系,我们有老师的陪伴,
还有同学之间互相鼓励,彼此帮助,
完成学习后,还能获得慕课网官方认证的证书。
立即购买
jaylen666给了 好评
老师的课程简单易懂,像我这种刚入门React的同学来学习都很容易就入门了并且还有些进阶的知识
handsomewolf给了 好评
基础讲解非常出色,知识点也非常清晰。 无论是对React18的基础知识还是对TypeScript的应用,都给予了详细而细致的解释,让我能够从零基础开始学习,逐步掌握核心概念。 通过实战案例来帮助我们巩固所学的内容。通过跟随老师一步步搭建通用后台管理系统,我学会了如何构建React组件、管理状态、处理表单、实现路由导航等等,这些都是在实际开发中非常实用的技能。 老师的讲解能力出色,知识点讲解清晰,实战案例帮助我加深了对React18和TypeScript的理解。无论是对于初学者还是有一定经验的开发者,这门课程都能带来很大的收获。强烈推荐给对React和TypeScript感兴趣的同学们!
兔脚给了 好评
看完老师的课程,学到了很多方案,回顾以前我在做项目、功能、模块的时候,很多情况都是由做业务的想法去主导自己思维逻辑,就是这一步该干嘛、下一步该干嘛的思维引导着自己去写代码。即使自己完成这个功能、业务、需求,很大情况下需要很多的心智负担来进行后续维护。这种开发方式,会对其他的业务逻辑代码造成很大的入侵,很有可能因为写某一个功能点,入侵到了别的业务模块而引起副作用,产生bug。后来我研究了一下老师的代码和逻辑,例如登录和权限或者其他模块,功能点之间都没有过多的代码交集,模块之间都有一个中间数据,通过中间数据去处理自己的业务。这样的处理办法能够极大地降低业务之间的耦合,方便后面维护。有此感悟而发。
慕尼黑0089250给了 好评
这是一门让零基础的学员可以获得基础和架构的课程。不但让我入门,更让我学到架构方面的知识。老师的课华而又实,没有一句多余的话,句句是技术。谢谢老师。期待老师后续的课程!
慕粉1338314103给了 好评
目前我在mooc上看的最好的一门课,对于初学者来说项目并没有特别容易,但是老师真的是非常耐心地讲解
qq_慕雪4438731给了 好评
很细心,🐂🍺克拉斯!
weixin_慕先生7184242给了 好评
一听就懂,一学就会。
嘻0给了 好评
受益匪浅啊,老师讲得太好了,
查看 24 位同学评价
本课程被纳入了《React.js 框架从入门到精通》的学习路线中,共 4 个步骤,6 门课。
Step1: React 框架零基础入门
React18 系统入门 进阶实战《欢乐购》
难度 初级
原价 ¥299.00
已有 371 人在学
加购物车
Step2: React 框架进阶之路
React18+TS 通用后台管理系统解决方案落地实战
难度 中级
原价 ¥348.00
已有 587 人在学
加购物车
React18+TS高仿AntD从零到一打造组件库
难度 高级
原价 ¥448.00
已有 2120 人在学
加购物车
Step3: 全栈开发企业级平台,掌握复杂业务实现策略
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
难度 中级
原价 ¥599.00
已有 436 人在学
加购物车
前端全栈进阶 Nextjs打造跨框架SaaS应用
难度 高级
原价 ¥299.00
已有 246 人在学
加购物车
Step4: 深入 React 框架源码之处
手写 React 高质量源码,迈向高阶开发
难度 高级
原价 ¥599.00
已有 231 人在学
加购物车
路线最高优惠: ¥388.80
选择该路线学习
已有3991人在学
还没有同学提问,您可以“提问”给官方客服,我们会及时回复。
《React18+TS 通用后台管理系统解决方案落地实战》的真实评价
内容实用:
9.50分
通俗易懂:
9.50分
逻辑清晰:
9.50分
综合评分:9.50分,共 24 人参与
jaylen666
给了 好评
老师的课程简单易懂,像我这种刚入门React的同学来学习都很容易就入门了并且还有些进阶的知识
handsomewolf
给了 好评
基础讲解非常出色,知识点也非常清晰。 无论是对React18的基础知识还是对TypeScript的应用,都给予了详细而细致的解释,让我能够从零基础开始学习,逐步掌握核心概念。 通过实战案例来帮助我们巩固所学的内容。通过跟随老师一步步搭建通用后台管理系统,我学会了如何构建React组件、管理状态、处理表单、实现路由导航等等,这些都是在实际开发中非常实用的技能。 老师的讲解能力出色,知识点讲解清晰,实战案例帮助我加深了对React18和TypeScript的理解。无论是对于初学者还是有一定经验的开发者,这门课程都能带来很大的收获。强烈推荐给对React和TypeScript感兴趣的同学们!
兔脚
给了 好评
看完老师的课程,学到了很多方案,回顾以前我在做项目、功能、模块的时候,很多情况都是由做业务的想法去主导自己思维逻辑,就是这一步该干嘛、下一步该干嘛的思维引导着自己去写代码。即使自己完成这个功能、业务、需求,很大情况下需要很多的心智负担来进行后续维护。这种开发方式,会对其他的业务逻辑代码造成很大的入侵,很有可能因为写某一个功能点,入侵到了别的业务模块而引起副作用,产生bug。后来我研究了一下老师的代码和逻辑,例如登录和权限或者其他模块,功能点之间都没有过多的代码交集,模块之间都有一个中间数据,通过中间数据去处理自己的业务。这样的处理办法能够极大地降低业务之间的耦合,方便后面维护。有此感悟而发。
慕尼黑0089250
给了 好评
这是一门让零基础的学员可以获得基础和架构的课程。不但让我入门,更让我学到架构方面的知识。老师的课华而又实,没有一句多余的话,句句是技术。谢谢老师。期待老师后续的课程!
慕粉1338314103
给了 好评
目前我在mooc上看的最好的一门课,对于初学者来说项目并没有特别容易,但是老师真的是非常耐心地讲解
qq_慕雪4438731
给了 好评
很细心,🐂🍺克拉斯!
weixin_慕先生7184242
给了 好评
一听就懂,一学就会。
嘻0
给了 好评
受益匪浅啊,老师讲得太好了,
雾里看花0073
给了 好评
讲的真细,一听就明白
oldfu
给了 好评
内容讲的很细致,照顾到各个层次的同学。
篇幅原因,只展示最近100条评价

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号