[646] React18+Next.js14+Nest.js全栈开发复杂低代码项目从基础使用,到高阶运用,再到原理解析,点、线、面结合,保证学习效果

[646] React18+Next.js14+Nest.js全栈开发复杂低代码项目风筝自习室-课程资源-网盘资源风筝自习室
[646] React18+Next.js14+Nest.js全栈开发复杂低代码项目从基础使用,到高阶运用,再到原理解析,点、线、面结合,保证学习效果
此内容为付费阅读,请付费后查看
500积分
付费阅读

image

 

网站资源均收集于公开网络,仅供学习和交流。版权归版权人所有,所标价格为资源收集整理费用,如喜欢作品请支持正版。

网盘链接:

1. 开期准备

  • 1-1 -导学
  • 1-2 -功能介绍
  • 1-3 -课程安排-即学即用,渐进式开发项目

2. 【入门】什么是 React React 引领了现代前端开发的变革

  • 2-1 -章介绍
  • 2-2 -React是全球最火爆的前端框架
  • 2-3 -React其实非常简单-但需要你熟悉JS语法
  • 2-4 -看几个示例来体会React的代码逻辑
  • 2-5 -React核心价值-组件化
  • 2-6 -React核心价值-数据驱动视图
  • 2-7 -章总结

3. 【基础】创建 React 项目开发环境 – 代码未动,环境先行

  • 3-1 -章介绍
  • 3-2 -准备工作-安装必备软件
  • 3-3 -使用Create-React-App创建项目-React官网推荐的方式
  • 3-4 -使用Vite创建React 项目-Vite是前端热门工具
  • 3-5 -使用eslint检查代码语法错误-提前识别,防患于未然
  • 3-6 -使用prettier规范代码风格-统一风格,多人开发也不怕乱
  • 3-7 -提交代码到git仓库-选择国内平台
  • 3-8 -使用husky执行pre-commit检查-把非规范代码拒之门外
  • 3-9 -使用commit-lint规范commit提交格式-让git记录清晰可读
  • 3-10 -【加餐】vite和webpack的区别-vite使用ES-Module增加启动速度
  • 3-11 -章总结

4. 【基础】JSX 语法和组件基础 – 学完即可开发一个静态页面

  • 4-1 -章介绍
  • 4-2 -JSX语法和HTML相似-很容易学习
  • 4-3 -JSX的标签-和HTML标签有几点不同
  • 4-4 -JSX的属性-style改动非常大
  • 4-5 -JSX中监听DOM 事件-遇到了Typescript类型问题
  • 4-6 -补充Typescript类型基础知识-解答上一节的困惑
  • 4-7 -JSX中插入JS变量和表达式-让JSX真正融入JS代码中
  • 4-8 -JSX中使用条件判断-让JSX具备if-else能力
  • 4-9 -JSX中使用循环-让JSX真正动起来
  • 4-10 -实战-开发项目列表页-即学即用效果好
  • 4-11 -React组件基础-拆分UI结构,便于开发维护和复用
  • 4-12 -组件props-父子组件通讯的桥梁
  • 4-13 -React开发者工具-让React调试更简单
  • 4-14 -加餐-JSX和Vue模板的区别-体现两者设计理念的差异
  • 4-15 -章总结

5. 【基础】React Hooks – 处理逻辑监听状态,让页面动起来

  • 5-1 -章介绍
  • 5-2 -useState让页面“动”起来
  • 5-3 -state 一个组件的“独家记忆”
  • 5-4 -state特点-异步更新,合并后更新
  • 5-5 state特点-不可变数据-非常重要的概念
  • 5-6 实战-重构列表页-用useState实现增、删、改
  • 5-7 使用immer修改state-帮你摆脱“不可变数据”的痛苦
  • 5-8 实战-重构列表页-使用immer让开发更简单
  • 5-9 useEffect监听组件生命周期-创建、更新、销毁
  • 5-10 useEffect在开发环境下执行两次-模拟全流程,及早暴露bug
  • 5-11 用useRef操作DOM元素-React的ref和Vue3的ref不一样
  • 5-12 使用useMemo缓存数据-React中常见的性能优化手段
  • 5-13 使用useCallback缓存函数
  • 5-14 自定义Hooks-React Hooks的正确打开方式
  • 5-15 使用自定义Hook获取鼠标位置-组件公共逻辑抽离和复用
  • 5-16 使用自定义Hook异步加载数据-模拟异步场景
  • 5-17 使用第三方Hooks-ahooks和react-use
  • 5-18 Hooks的三条使用规则
  • 5-19 Hooks闭包陷阱-React常考面试题
  • 5-20 章总结

6. 【基础】在 React 中使用 CSS 样式 – 为页面“美颜”,页面变漂亮

  • 6-1 章介绍
  • 6-2 普通方式使用CSS-尽量不要用内联style
  • 6-3 CSS-Module 解决className可能会重复的问题
  • 6-4 使用Sass语法-提高CSS编码效率
  • 6-5 CSS-in-JS常用工具之Styled-components
  • 6-6 JS函数后加字符串的调用形式-解决Style-components写法的困惑
  • 6-7 CSS-in-JS常用工具之Styled-jsx和Emotion
  • 6-8 实战-增加CSS样式-创建正式项目环境
  • 6-9 实战-为列表页增加CSS样式
  • 6-10 实战-为QuestionCard组件增加CSS样式
  • 6-11 章总结

7. 【中级】React-router 路由 – 配置多页面,由单页变成一个系统

  • 7-1 章介绍
  • 7-2 路由设计-确定网址和页面的关系
  • 7-3 设计Layout模板-抽离公共部分,代码复用
  • 7-4 路由开发-创建所有页面
  • 7-5 路由开发-创建3个Layout和使用Outlet
  • 7-6 使用React-Router配置路由-实现了多页面
  • 7-7 使用路由API-跳转页面和获取参数
  • 7-8 章总结
  • 7-9 自定义网页标题和favicon

8. 【基础】使用 AntDesign UI 组件库 – 常用组件拿来即用

  • 8-1 章介绍
  • 8-2 介绍React世界中常用的几个UI组件库
  • 8-3 安装和使用Ant-Design
  • 8-4 使用AntD重构MainLayout-体现AntD布局能力-part1
  • 8-5 使用AntD重构ManageLayout-灵活使用Button组件
  • 8-6 使用AntD开发Logo组件
  • 8-7 开发UserInfo组件
  • 8-8 使用AntD开发首页
  • 8-9 使用AntD快速制作漂亮的404页面
  • 8-10 使用AntD重构QuestionCard组件-得到了最终的UI效果
  • 8-11 使用AntD的confirm功能-展示AntD的交互能力
  • 8-12 使用AntD开发星标问卷列表页
  • 8-13 使用AntD开发回收站页面-使用Table组件
  • 8-14 开发回收站的恢复和删除-为表格增加了选择功能
  • 8-15 加餐-介绍TailWind-CSS
  • 8-16 章总结

9. 【中级】React 表单组件 – 接收用户输入,让用户和页面互动起来

  • 9-1 章介绍
  • 9-2 什么是受控组件-React表单组件的重要概念
  • 9-3 使用textarea组件-通过dangerouslySetInnerHTML使文本换行
  • 9-4 使用radio单选按钮-受控组件的设计思路
  • 9-5 使用checkbox复选按钮-模拟真实的业务场景
  • 9-6 使用select下拉框组件
  • 9-7 使用form组件和submit方法
  • 9-8 使用AntD开发ListSearch搜索组件
  • 9-9 ListSearch搜索修改URL参数-体现组件设计的解耦合
  • 9-10 使用AntD的Form组件开发注册页
  • 9-11 使用AntD的Form组件开发登录页,并实现“记住我”功能
  • 9-12 使用AntD表单组件的校验功能,校验用户名和密码的格式
  • 9-13 使用第三方表单校验工具React-Hook-Form
  • 9-14 使用第三方表单校验工具Formik
  • 9-15 章总结

10. 【中级】Ajax 网络请求 part1 – 搭建 Mock 服务,完成前后端通讯

  • 10-1 章介绍
  • 10-2 关于Ajax的基础知识、API和工具
  • 10-3 使用mockjs模拟Ajax请求
  • 10-4 在nodejs中使用mockjs-使用Random轻松模拟数据
  • 10-5 使用nodejs启动服务,模拟get请求
  • 10-6 模拟post请求,并使用postman测试
  • 10-7 使用craco.js扩展webpack配置-使用devServer代理访问mock服务
  • 10-8 介绍几个在线mock平台-谨慎使用
  • 10-9 API设计-使用Restful API规范
  • 10-10 配置axios的response拦截器-统一处理错误提示
  • 10-11 开发新建问卷功能-设置loading状态以优化体验
  • 10-12 开发获取问卷信息功能-使用自定义Hook抽离公共逻辑
  • 10-13 使用useRequest重构Ajax请求-统一处理loading和error
  • 10-14 使用useRequest获取问卷列表
  • 10-15 给列表增加搜索功能-使用第三方Hook抽离组件公共逻辑
  • 10-16 使用useRequest开发星标和回收站页面

11. 【中级】Ajax 网络请求 part2 – 一次学习多种形式的列表和分页功能

  • 11-1 开发分页功能-定义URL参数page和pageSize
  • 11-2 实现列表分页功能-使用Antd的Pagination组件
  • 11-3 LoadMore上划加载更多-设计组件的state
  • 11-4 LoadMore上划加载更多-使用防抖监听scroll事件
  • 11-5 LoadMore上划加载更多-根据DOM位置判断加载时机
  • 11-6 LoadMore上划加载更多-真正加载数据
  • 11-7 LoadMore上划加载更多-优化功能体验
  • 11-8 开发问卷标星功能
  • 11-9 开发问卷复制功能
  • 11-10 开发删除问卷功能-修改信息“假删除”
  • 11-11 开发恢复问卷功能-使用for-awiat-of处理多个异步请求
  • 11-12 开发彻底删除功能
  • 11-13 介绍JWT-用户登录校验的技术方案
  • 11-14 开发用户的mock和services
  • 11-15 开发注册和登录功能
  • 11-16 存储token,并使用axios拦截器附加token
  • 11-17 开发获取用户信息,以及退出登录
  • 11-18 -章总结

12. 【中级】Redux 状态管理 – 复杂项目的数据管理形式

  • 12-1 章介绍
  • 12-2 什么是状态管理,为何要用状态管理
  • 12-3 使用Context实现跨组件跨层级传递数据
  • 12-4 学习使用useReducer-提前了解redux的概念
  • 12-5 使用useReducer开发TodoList-定义initialState和reducer
  • 12-6 使用useReducer开发TodoList-使用dispatch和action处理数据
  • 12-7 使用Context和useReducer实现跨组件通讯-网上热议的话题
  • 12-8 介绍Redux-React世界最流行的状态管理工具
  • 12-9 使用Redux实现数字加减法-认识Reducer和Action
  • 12-10 使用Redux实现数字加减法-使用useSelector和useDispatch
  • 12-11 使用Redux实现TodoList-展示复杂数据结构的Reducer写法
  • 12-12 使用Redux实现TodoList-传入Action时需带PayLoad
  • 12-13 Redux单项数据流-动图体验数据流转过程
  • 12-14 Redux开发者工具-方便跟踪和调试
  • 12-15 介绍MobX-可以像Vue一样声明式的修改数据
  • 12-16 使用MobX开发TodoList-创建数据模型
  • 12-17 使用MobX开发TodoList-数据的显示和操作
  • 12-18 使用Redux管理用户信息-定义store和reducer
  • 12-19 使用Redux管理用户信息-使用useSelector获取store数据
  • 12-20 使用自定义Hook统一加载用户信息,并存储到redux中
  • 12-21 根据用户登录状态动态跳转页面-使用自定义Hook统一处理
  • 12-22 章总结

13. 【实战】开发问卷编辑器 part1 – 寻找突破口,用两个组件打通全部流程

  • 13-1 -章介绍
  • 13-2 -需求分析-详细演示各个功能
  • 13-3 -分析UI界面,如何拆分组件
  • 13-4 -开发UI组件拆分-实现画布Y轴滚动
  • 13-5 -定义画布中的两个组件-Title和Input
  • 13-6 -把Title和Input组件显示到画布上
  • 13-7 -定义问卷组件的数据结构-这是动态渲染画布的前提
  • 13-8 -把组件列表存储到Redux store-统一各个组件的属性
  • 13-9 -把组件列表存储到Redux store-重构useLoadQuestionData
  • 13-10 -定义组件配置-可根据type找到组件
  • 13-11 -在画布上动态显示组件列表-梳理完整的流程
  • 13-12 -点击画布选中组件-通过selectedId全局共享
  • 13-13 -组件库-组件按类型分组
  • 13-14 -把组件分组显示在组件库中
  • 13-15 -点击组件库中的组件,添加到画布中
  • 13-16 -解释为何要使用fe_id
  • 13-17 -定义属性表单,用于修改组件的属性
  • 13-18 -根据选中的组件,动态显示属性表单
  • 13-19 -修改组件属性,并同步到画布中
  • 13-20 -定义EditHeader组件,实现返回功能

14. 【实战】开发问卷编辑器 part2 – 增加其他组件,展现设计的扩展性

  • 14-1 -工具栏-删除组件,并重新计算selectedId-part1
  • 14-2 -工具栏-隐藏组件,并重新计算selectedId-part1
  • 14-3 -工具栏-锁定和解锁组件,动态禁用属性表单
  • 14-4 -工具栏-复制和粘贴组件-结合addComponent抽离公共代码
  • 14-5 -在画布增加快捷键-需提前判断ActiveElement
  • 14-6 -快捷键-选中上一个,选中下一个
  • 14-7 -增加Paragraph组件-体现编辑器组件机制的扩展性
  • 14-8 -为Paragraph组件增加换行功能-充分考虑安全性
  • 14-9 -增加QuestoinInfo组件-整合标题和段落
  • 14-10 -根据QuestionInput改造出QuestionTextarea组件
  • 14-11 -学习Antd的Radio组件,并定义属性类型
  • 14-12 -创建QuestionRadio的Component组件
  • 14-13 -开发QuestionRadio属性表单-可动态添加删除选项
  • 14-14 -QuestionRadio属性表单变化,同步到画布-校验选项文字不能重复
  • 14-15 -创建QuestionCheckbox组件,并显示在画布中
  • 14-16 -开发QuestionCheckbox属性表单-可动态添加删除选项-

15. 【实战】开发问卷编辑器 part3 – 聚焦高级功能:拖拽排序和撤销重做

  • 15-1 -显示图层列表,点击选中组件
  • 15-2 -在图层中修改组件标题-动态切换input和文本
  • 15-3 -图层-切换组件的hidden和locked
  • 15-4 -动态切换右侧tabs-根据选中组件动态切换属性和页面设置
  • 15-5 -设置页面信息-定义Redux数据结构
  • 15-6 -设置页面信息-修改表单同步到Redux中
  • 15-7 -修改网页标题-和右侧网页信息表单数据联通
  • 15-8 -保存问卷信息-判断loading防止连续触发
  • 15-9 -监听内容变化,自动保存-不是定期保存
  • 15-10 -发布问卷-更新isPublished属性
  • 15-11 -组件列表拖拽排序-选择第三方库dnd-kit
  • 15-12 -演示dnd-kit拖拽排序.mov
  • 15-13 -在dnd-kit示例中模拟组件列表的数据结构
  • 15-14 -组件列表拖拽排序-抽离公共组件SortableContainer和SortableItem
  • 15-15 -组件列表拖拽排序-应用与画布和图层
  • 15-16 -工具栏补充上移下移功能-和拖拽排序类似
  • 15-17 -撤销重做的基本原理
  • 15-18 -实现Redux的撤销重做功能-使用TodoList示例演示
  • 15-19 -问卷编辑器增加撤销重做-定义Redux数据类型
  • 15-20 -问卷编辑器增加撤销重做-工具栏按钮和快捷键
  • 15-21 【更新】redux-tookits2.0开始内置了immer
  • 15-22 -章总结

16. 【实战】问卷数据统计 – 有统计数据才能体现完整项目的业务闭环

  • 16-1 -章开始
  • 16-2 -问卷和答卷的区别-一个是题目一个是答案
  • 16-3 -需求分析-详细分析每个功能点
  • 16-4 -获取问卷信息-判断isPublished给出提示
  • 16-5 -页面UI布局-增加oading效果-part1
  • 16-6 -头部组件的UI布局
  • 16-7 -头部组件-拷贝URL,生成二维码
  • 16-8 -左侧显示组件列表-通过状态提升存储selectedId和type
  • 16-9 -答卷的数据结构设计-开发答卷列表的前提
  • 16-10 -答卷的数据结构设计-把结果写到Mock服务
  • 16-11 -显示答卷列表-使用useRequest获取数据-part1
  • 16-12 -显示统计表格-需根据componentList自定义columns
  • 16-13 -显示统计列表-实现分页功能
  • 16-14 -选择第三方图表库-最终选择Recharts
  • 16-15 -使用Recharts演示饼图PieChart
  • 16-16 -使用Recharts演示柱状图BarChart
  • 16-17 -设计图表统计的数据结构,并写到Mock服务中
  • 16-18 -为QuestionRadio扩展统计组件
  • 16-19 -为QuestionCheckbox扩展统计组件
  • 16-20 -章总结

17. 【实战】Next.js开发C端 – 学习React技术栈的 SSR 服务端渲染

  • 17-1 -章介绍
  • 17-2 -介绍SSR,它的优缺点,和CSR的区别,以及应用场景
  • 17-3 使用Next.js创建项目并启动
  • 17-4 -初试Next.js功能-扩展页面,使用API
  • 17-5 -介绍StaticGeneration-构建时生成html文件
  • 17-6 -介绍Server-side-rendering-每次请求动态生成HTML
  • 17-7 -定义动态路由,获取url参数
  • 17-8 -选择form提交数据-和B端统计页做数据匹配
  • 17-9 -创建QuestionInput组件,并引入到页面中
  • 17-10 -创建QuestionRadio组件,并引入到页面中
  • 17-11 -创建form表单-使用隐藏域存储questionId
  • 17-12 -新建API,并提交form表单
  • 17-13 -创建Mock接口,跑通前后端完整流程
  • 17-14 -抽离PageWrapper组件,统一定义Head
  • 17-15 -获取问卷数据,并校验是否正常
  • 17-16 -根据问卷组件列表,动态渲染表单
  • 17-17 -扩展表单组件Title,Paragraph和Info
  • 17-18 -扩展表单组件TextArea和Checkbox
  • 17-19 -单独解决Checkbox组件的特殊性-合并多个value
  • 17-20 -章总结

18. 【实战】React性能优化 – 将 main.js代码从1.6M优化到 33KB

  • 18-1 -章介绍
  • 18-2 -useState传入函数,只在组件渲染时执行一次
  • 18-3 -使用useMemo缓存B端统计页的链接和二维码Elem
  • 18-4 -使用useCallback缓存添加组件的函数
  • 18-5 -使用React.memo优化子组件更新
  • 18-6 -分析B端构建出的bundle文件,体积太大,需要拆分
  • 18-7 -配置路由懒加载,拆分编辑页和统计页,优化代码体积
  • 18-8 -抽离公共代码antd和react,合理使用HTTP缓存
  • 18-9 -CRA根据路由懒加载自动拆分CSS文件
  • 18-10 -章总结

19. 【实战】React 测试 – 项目有测试,睡觉才踏实(不会半夜被叫醒改bug)

  • 19-1 -章介绍
  • 19-2 -单元测试入门,使用jest写测试用例
  • 19-3 -写QuestionInfo组件的单元测试,学习新的断言API
  • 19-4 -写QuestionTitle和QuestionParagraph的单元测试-通过style断言isCenter
  • 19-5 -写QuestionInput和QuestionTextArea组件的单元测试-根据placeholder获取元素并断言
  • 19-6 -写QuestionRadio组件的单元测试-通过value获取radio元素并断言
  • 19-7 -写QuestionCheckbox组件的单元测试-获取checked属性断言是否选中
  • 19-8 -使用pre-commit做自动化测试,有问题的代码不能被提交
  • 19-9 -可视化测试-安装Storybook并演示例子
  • 19-10 -使用StoryBook写QuestionInfo组件的可视化测试
  • 19-11 -讲解TS中typeof语法,和JS的typeof不一样
  • 19-12 -使用StoryBook写其他组件的可视化测试
  • 19-13 -章总结

20. 课程总结

  • 20-1 -关于项目的服务端
  • 20-2 -课程总结

21. 【二期】使用 Nest.js 开发项目服务端(2024 新增)

  • 21-1 章介绍
  • 21-2 创建nestjs项目,启动监听文件变化
  • 21-3 创建question模块和第一个路由
  • 21-4 路由常见功能:query,param和request-body part1
  • 21-5 使用interceptor和filter统一路由返回格式
  • 21-6 安装Mongodb数据库,并用Compass连接-part1
  • 21-7 使用nestjs连接mongodb数据库,并抽离配置信息
  • 21-8 创建schema数据模型,并同步到Mongodb数据库
  • 21-9 使用service操作数据库,创建问卷和查找问卷
  • 21-10 实现Mongodb的搜索和分页
  • 21-11 创建 user 模块,并开发用户注册功能
  • 21-12 创建auth模块,开发用户登录功能
  • 21-13 增加JWT校验,登录时返回token字符串
  • 21-14 增加Guard校验,验证并解析token字符串
  • 21-15 设置JWT全局验证,增加自定义Public机制
  • 21-16 Redirect重定向user路由,以符合现有的API设计规范
  • 21-17 完善问卷schema数据模型
  • 21-18 完善问卷的增删改查功能细节
  • 21-19 开发复制问卷功能
  • 21-20 前端和服务端联调,测试问卷各个功能
  • 21-21 开发答卷功能,创建答卷的路由
  • 21-22 和C端联调,测试提交答卷的功能
  • 21-23 开发统计功能,创建 stat 模块
  • 21-24 开发单个问卷的统计功能
  • 21-25 开发单个组件的统计功能
  • 21-26 和B端联调,测试统计功能
  • 21-27 章总结
© 版权声明
THE END
加入本站 VIP,免费下载本站所有内容
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容