全集试看

把自己的仓库克隆到本地

全集试看

配置 CSS 模块化

全集试看

了解项目整体的路由配置

全集试看

配置路由

全集试看

提取登录和注册共享的 AuthLayout 布局组件

全集试看

实现 AuthLayout 组件的布局样式

全集试看

Git 分支操作

全集试看

配置 CSS 模块化生成的类名风格

全集试看

基于 antd 组件库绘制注册页面的表单

全集试看

基于 Link 组件绘制底部去登录的链接

全集试看

为表单项添加 pattern 正则校验

全集试看

完善确认密码框的校验规则

接口文档和调用接口的注意事项

如何使用接口授权码访问项目的接口

安装并配置 axios

基于 useSubmit 把数据提交给路由的 action 函数

调用注册接口并处理调用失败的情况

根据注册的结果进行失败的提示或成功的跳转

请求期间展示 loading 效果

深入说明 loading 条件的运算过程

在 axios 的请求拦截器中挂载请求体转换器

封装请求体转换器函数

按需挂载请求体转换器

使用响应拦截器统一展示错误消息

处理请求失败且没有响应体时如何提示错误消息

通过响应拦截器把真正的数据返回给用户

提交注册的 Git 分支

绘制登录组件的表单结构

为表单项添加正则校验

使用 useSearchParams 解析查询参数

使用 userFetcher 提交表单数据

封装并调用登录的接口

为 axios 接口提供返回数据的 TS 类型

为登录按钮绑定 loading 状态和 loading 延迟

在项目中配置 zustand 进行全局状态管理

把 token 存储到 zustand 中

提交登录的 Git 分支

绘制后台主页的基础布局

把 Header 区域封装为独立的组件

实现 Header 组件内部元素的布局效果

询问用户是否确认退出登录

实现退出登录的功能

未登录不允许访问后台主页

登录后禁止访问登录和注册页面

基于 token 进行接口鉴权

在 zustand 中创建 user 相关的模块

为 user-store 配置中间件

封装接口获取用户的基本信息并存储到 store 中

渲染用户名称和头像

处理 token 失效的问题

获取左侧菜单的列表数据

封装 RootMenu 组件渲染左侧菜单的数据

处理左侧菜单的图标

修改子菜单的背景颜色

实现父级菜单互斥展开的效果

点击菜单项实现路由跳转

创建 Home 首页对应的路由规则

完善个人中心和文章管理对应的路由规则

刷新网页时动态设置左侧菜单的选中项

分析递归查找左侧菜单展开项的实现思路

递归查找需要被展开的菜单项的 key 值

隐藏修改文章的菜单项

优化 token 无效后的错误提示

实现面包屑组件的基础布局

分析如何递归生成面包屑导航的数据源

定义函数递归生成面包屑导航的数据源

调用递归函数生成面包屑导航的数据源

使用 useMemo 缓存递归计算的结果

优化 RootMenu 组件中数据的 TS 类型

提交后台主页的 Git 分支

绘制基本资料的表单结构

回显表单数据

点击按钮进行数据还原

封装接口并实现修改基本资料的功能

优化 action 中的代码逻辑

为保存按钮添加 loading 效果

提交修改基本资料的 Git 分支

绘制重置密码的表单

基于 validator 添加表单验证

实现重置表单的功能

封装接口实现修改密码的功能

密码修改成功后重置表单

展示 loading 提示的两种方案

提交修改密码的 Git 分支

渲染更换头像的基础布局

点击按钮展示选择头像的对话框

读取并展示用户选择的头像

动态计算保存按钮的禁用状态

封装接口实现更换头像的功能

展示保存按钮的 loading 状态

提交更换头像的 Git 分支

获取文章分类的列表数据

渲染分类的表格数据

把添加分类按钮封装为独立的组件

使用 Modal 组件渲染添加分类的对话框

渲染添加分类的 Form 表单

手动触发表单的校验

学习对话框关闭时重置表单的两种方案

封装接口并实现添加分类的功能

说明如何精准判断 loading 的状态

将 method 添加为 loading 的判断条件

将 pathname 添加为 loading 的判断条件

为添加按钮设置 loading 的 delay 时间

分类添加结束后自动关闭对话框

只在添加成功之后才关闭对话框

封装 hooks 获取导航的状态

封装 ButtonEdit 组件

绘制修改分类的对话框和表单

封装接口实现修改分类的功能

复用自定义的 hooks 实现 loading 提示

在对话框的 afterClose 事件中重置表单

封装删除分类的 ButtonDelete 组件

使用 Popconfirm 询问用户是否确定删除

实现气泡确认框的互斥展示

点击确定按钮时防止关闭气泡确认框

封装接口实现删除分类的功能

基于 paramsSerializer 转换请求头中的数据

提交文章分类的 Git 分支

演示添加文章要实现的功能效果

绘制顶部的 Steps 步骤条

封装基本信息的组件

请求并渲染分类的菜单项

把 current 存储到 zustand 中

使用 enum 增强代码的可读性

使用枚举优化 art-add-store 模块

封装文章封面组件的基本布局结构

把 Store 中的文章信息回填到表单中

实现文章基本信息的实时存储

点击按钮选择文章封面

localStorage 无法存储 Blob 文件

了解如何自定义 zustand 的存储引擎

了解 localforage 的基本用法

自定义 zustand 的存储引擎

封装自定义存储引擎相关的代码

渲染文章封面的图片

选择封面后才允许进入下一步操作

分析为什么刷新网页会导致添加文章页面闪烁

解决刷新时添加文章页面时闪烁的问题

封装文章内容组件

自定义 Quill 的最小高度和工具栏按钮

提示用户填写要发表的文章内容

全局存储填写的文章的内容

把文章的发布状态存储到 Store

把文章数据提交到路由的 action 函数

封装接口实现发表的功能

清空本地存储的文章信息并实现 Steps 自增

展示发表文章期间的 loading 提示

封装 Done 状态对应的 Result 组件

实现去文章列表和再写一篇的功能

在 loader 中获取本地存储的 current 值

使用 shouldRevalidate 阻止 loader 执行

实现分支的提交（开发这么久了，偶尔水一下也很开心）

控制文章封面大小不能超过2M

点击浮动按钮快速清空表单

在路由导航时自动关闭 Modal 弹窗

提交添加文章功能对应的 Git 分支

把搜索区域封装为组件

点击添加按钮导航到添加文章页面

通过 loader 获取并回显分类的列表数据

在 loader 中解析 URL 中的查询参数

把查询参数绑定为搜索表单的初始值

点击搜索按钮更新查询参数

点击重置按钮清空查询参数

封装并调用获取文章列表的 API 接口

封装并初步绘制表格组件的基础结构

使用 dayjs 格式化文章的发表时间

实现点击按钮跳转到文章修改页面的功能

封装删除文章的按钮组件

调用接口实现删除文章的功能

解决删除时 loading 不展示的问题

组件二次封装的规范

自定义组件时借用 Table 组件的官方属性

为自定义组件拓展分页所需的额外属性

为 Table 组件指定分页的配置选项

监听 page 和 pageSize 的变化重新请求分页数据

切换分页时保留查询参数中的发表状态和分类 id

每次触发搜索时将页码值重置为1

处理分页数据的序号

实现页码值回退操作并展示 Table 的 loading 状态

提交文章列表的 Git 分支

定义修改时存储文章信息的 Store 模块

配置 zustand 的中间件

初始化文章详情数据并存储到 Store 中

渲染 Steps 步骤条

封装修改文章时的基本信息组件

为基本信息的表单设置初始值

把变化后的表单更新到 Store 中

点击按钮进入下一步

使用 useBeforeUnload 阻止浏览器的刷新

关于刷新时浏览器弹窗的说明

说明 useBlocker 的基本语法

使用 useBlocker 在导航离开前进行弹窗询问

导航离开之后重置 current 的值

在 loader 中重置 current 的值

基于 useRef 实现屏蔽多个弹窗的功能

快速实现文章封面组件的布局和功能

快速实现文章内容组件的布局和功能

按需展示修改文章底部的按钮

封装接口实现修改文章的功能

优化修改文章接口调用成功之后的页面逻辑

使用 useRef 解决按钮闪烁问题

解决修改文章时 loading 不展示的问题

封装文章修改成功后的结果组件

了解如何在路由导航时携带 state 状态

导航时通过 state 携带 URL 中的查询参数

自定义封装 CountDown 倒计时组件

优化倒计时组件的实现逻辑

处理面包屑导航的路径匹配问题

提交修改文章的 Git 分支

使用按钮的 disabled 属性屏蔽额外的点击操作

在提交之前屏蔽按钮额外的点击操作

使用自定义的 hook 优化个人中心的 loading 展示效果

分析路由切换时页面卡顿的原因

介绍 Deferred Data 的基本语法格式

使用 Deferred Data 完成对文章分类的改造

封装 delay 函数模拟 Promise 的延迟操作

自定义封装 loader-error-element 组件

在 Spin 组件上展示自定义的文本消息

分析如何基于 defer 改造文章列表的 loader 函数

改造 ArticleList 组件中的 loader 函数

在 ArticleList 组件中获取并使用异步数据

在子组件中使用 useAsyncValue 获取异步数据

搜索或分页切换时展示 loading 状态

使用 useAsyncValue 改造删除组件中的代码

拓展 Chrome 调试工具中的副面板的基本用法

针对 ArticleAdd 组件中的 loader 函数进行改造

针对文章分类的下拉菜单进行 loading 的展示

分类数据请求期间隐藏下一步的按钮

优化文章列表页面中 loading 遮罩层的覆盖范围

改造 ArticleEdit 组件中的 loader 函数

改造 EditBase 组件中文章分类的表单项

解决修改文章时标题紊乱的问题

为文章标题的表单项设置 loading 效果

在 Await 等待期间不展示下一步按钮

使用 defer 改造 Root 组件中的 loader 函数

基于 Suspense 和 Await 改造 Root 组件

使用 useAsyncValue 改造 RootMenu 组件

改造 RootBreadcrumb 组件中数据的获取

把 deferred loader 代码进行分支提交

实现登录失效后的携参跳转

优化 AuthLayout 组件中的判断逻辑

自定义路由的错误页

使用无 path 的 Route 设置子路由的公共错误页

为注册、登录、后台主页设置自定义的错误页

自定义路由匹配失败后的404页面

使用 matchRoutes 匹配合法路径

如果访问地址是根路径或 home 则不用携带 from 参数

使用 onFinishHydration 监听数据是否还原完毕

把登录、注册 和 Root 组件改造为路由懒加载的形式

把 children 子路由改造为懒加载的形式

使用 subscribe 监听路由的变化

在页面资源加载期间使用 nprogress 展示进度条

把 vite 打包配置拆分到 dev 和 prod 文件中

解决配置文件的导入路径报错的问题

项目打包时按照文件类型组织文件夹

使用 node.js 和 express 托管 web 项目

删除所有的 console 语句和断点

以可视化的方式查看打包的结果

使用 html 插件向网页中注入标题和 script 标签

解决 html 插件导致的终端黄色警告的问题

使用 external 指定要排除的依赖包

通过 injectScript 把 CDN 资源注入到网页中

通过 externalGlobals 指定映射关系

抽离 localforage 和 react-quill

抽离 antd 组件库

react-router-dom 没必要进行抽离

使用免费 CDN 资源所存在的问题

在 node 服务器中开启资源压缩

项目结束-提交 optimize 分支-噢耶撒花~