首页 实战

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

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

已完结
|
难度：中级
|
时长：共 26 小时 30 分钟
前端学习榜第 10 名
￥348.00
距离活动结束
立即购买
加购物车
已有 556 人在学
  • 把控全局，打造高通用性项目
  • 系统设计，提升架构设计思维
  • 打通权限，制定通用设计方案
  • 解锁技能，实战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
河畔一角
前端Leader， 已有111063个学生
其他课程： 《Vue3+ElementPlus+Koa2 全栈开发后台系统》 《Vue全家桶实战 从零独立开发企业级电商系统》、
全部
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
React18从入门到实战
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

React18 系统精讲 结合TS打造旅游电商平台

中级  · 1978人报名 ¥299.00
React进阶实战
套餐价格：¥856.00
2门课 总价：¥947.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

React18+TS+NestJS+GraphQL 全栈开发在线教育平台

中级  · 412人报名 ¥599.00
从web2到web3
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

Web3.0热门领域NFT项目实战

初级  · 295人报名 ¥299.00
React18 入门到进阶
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

React18 系统入门 进阶实战《欢乐购》

初级  · 339人报名 ¥299.00
React18进阶 复杂应用+源码剖析
套餐价格：¥676.00
2门课 总价：¥747.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

前端跳槽突围课，React18底层源码深入剖析

高级  · 92人报名 ¥399.00
从高级开发到全栈达人进阶
套餐价格：¥586.00
2门课 总价：¥647.00
立即购买
 课程介绍

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

中级  · 556人报名 ¥348.00
课程介绍 

前端全栈进阶 Nextjs打造跨框架SaaS应用

高级  · 206人报名 ¥299.00
本课程被纳入了《React.js 框架从入门到精通》的学习路线中，共 4 个步骤，6 门课。
Step1: React 框架零基础入门
React18 系统入门 进阶实战《欢乐购》
难度 初级
原价 ￥299.00
已有 339 人在学
加购物车
Step2: React 框架进阶之路
React18+TS 通用后台管理系统解决方案落地实战
难度 中级
原价 ￥348.00
已有 556 人在学
加购物车
React18+TS高仿AntD从零到一打造组件库
难度 高级
原价 ￥448.00
已有 2107 人在学
加购物车
Step3: 全栈开发企业级平台，掌握复杂业务实现策略
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
难度 中级
原价 ￥599.00
已有 412 人在学
加购物车
前端全栈进阶 Nextjs打造跨框架SaaS应用
难度 高级
原价 ￥299.00
已有 206 人在学
加购物车
Step4: 深入 React 框架源码之处
手写 React 高质量源码，迈向高阶开发
难度 高级
原价 ￥599.00
已有 220 人在学
加购物车
路线特惠价: ¥2592 6门课总价：¥2592
选择该路线学习
已有3840人在学
查看更多
数据加载中...
查看更多好课
《React18+TS 通用后台管理系统解决方案落地实战》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥348.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

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

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

意见反馈 帮助中心 APP下载
官方微信