首页实战 React18+TS 通用后台管理系统解决方案落地实战章节目录

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

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

优惠到手 _￥298

原价￥348.00

满1788减540 满1188减320 满888减220 满688减150 满488减100 满288减50 满188减20

已完结难度中级时长 26小时30分钟学习人数 648 综合评分 9.54

立即购买加购物车

第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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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分钟

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

收起列表
- 视频： 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)