实战全栈：React18 与 Nest.js 问卷系统构建指南

很多学习者能写单页应用，但面对完整业务逻辑时往往卡在数据流和后端交互上。这门课针对这一痛点，从零搭建一个仿制“问卷星”的低代码项目。它不是碎片化的 Demo，而是一个具备增删改查、分页、搜索、用户认证等完整功能的真实系统。课程内容覆盖 React18 前端交互、Next.js 14 路由架构，以及 Nest.js 后端服务开发，旨在打通全栈开发闭环。

适合人群与前置建议

建议已掌握 React 基础语法和 HTML/CSS 的开发者学习。课程中涉及 Next.js App Router 和 Nest.js 装饰器等进阶概念，需要你具备一定的异步编程思维。若对 HTTP 请求和状态管理不熟悉，可重点参考第 10 章的 Axios 配置与拦截器部分，以及第 12 章的 Redux 实战，这部分内容专门解决复杂状态下的数据同步难题。

学完你能独立做什么

学完本课，你应能独立开发类似后台管理系统的 Web 应用。具体能力包括：使用 Axios 封装请求、配置接口拦截器统一处理 Token 与错误、利用自定义 Hook 抽离通用逻辑；在 Nest.js 中实现 RESTful API 规范接口、处理 JWT 登录校验；在 Next.js 中配置路由参数、实现列表分页与上滑加载等交互。你将掌握如何将前端交互与后端逻辑无缝对接。

配套练习与资料使用

学习时请务必配合资料包中的代码进行复现。第 10 章的 Mockjs 模拟请求和第 11 章的分页功能是核心难点，建议先暂停视频，尝试自己编写防抖逻辑和 URL 参数处理。第 12 章的 Redux 实战可结合 TodoList 案例，深入理解 Action 和 Reducer 的数据流向。通过模仿课程中的 Axios 拦截器配置和登录校验流程，你将真正掌握企业级项目的开发规范。

课程目录

{10}--第10章 【中级】Ajax 网络请求 part1 - 搭建 Mo
[10.10]--10-10 配置axios的response拦截器-统一处理错误.mp4 115.90M
[10.11]--10-11 开发新建问卷功能-设置loading状态以优化体验.mp4 44.39M
[10.12]--10-12 开发获取问卷信息功能-使用自定义Hook抽离公共逻辑.mp4 57.79M
[10.13]--10-13 使用useRequest重构Ajax请求-统一处理l.mp4 55.11M
[10.14]--10-14 使用useRequest获取问卷列表.mp4 118.95M
[10.15]--10-15 给列表增加搜索功能-使用第三方Hook抽离组件公共逻.mp4 83.83M
[10.16]--10-16 使用useRequest开发星标和回收站页面.mp4 84.66M
[10.1]--10-1 章介绍.mp4 7.67M
[10.2]--10-2 关于Ajax的基础知识、API和工具.mp4 20.72M
[10.3]--10-3 使用mockjs模拟Ajax请求.mp4 144.44M
[10.4]--10-4 在nodejs中使用mockjs-使用Random轻松.mp4 71.54M
[10.5]--10-5 使用nodejs启动服务，模拟get请求.mp4 60.01M
[10.6]--10-6 模拟post请求，并使用postman测试.mp4 47.30M
[10.7]--10-7 使用craco.js扩展webpack配置-使用dev.mp4 59.95M
[10.8]--10-8 介绍几个在线mock平台-谨慎使用.mp4 5.05M
[10.9]--10-9 API设计-使用Restful API规范.mp4 130.02M
{11}--第11章 【中级】Ajax 网络请求 part2 - 一次学习多
[11.10]--11-10 开发删除问卷功能-修改信息&ldquo;假删除&rd.mp4 34.85M
[11.11]--11-11 开发恢复问卷功能-使用for-awiat-of处理多.mp4 59.82M
[11.12]--11-12 开发彻底删除功能.mp4 38.79M
[11.13]--11-13 介绍JWT-用户登录校验的技术方案.mp4 32.48M
[11.14]--11-14 开发用户的mock和services.mp4 64.22M
[11.15]--11-15 开发注册和登录功能.mp4 55.03M
[11.16]--11-16 存储token，并使用axios拦截器附加token.mp4 57.47M
[11.17]--11-17 开发获取用户信息，以及退出登录.mp4 50.97M
[11.18]--11-18 -章总结.mp4 8.66M
[11.1]--11-1 开发分页功能-定义URL参数page和pageSize.mp4 87.58M
[11.2]--11-2 实现列表分页功能-使用Antd的Pagination组.mp4 124.32M
[11.3]--11-3 LoadMore上划加载更多-设计组件的state.mp4 52.62M
[11.4]--11-4 LoadMore上划加载更多-使用防抖监听scroll.mp4 60.73M
[11.5]--11-5 LoadMore上划加载更多-根据DOM位置判断加载时.mp4 61.13M
[11.6]--11-6 LoadMore上划加载更多-真正加载数据.mp4 72.23M
[11.7]--11-7 LoadMore上划加载更多-优化功能体验.mp4 63.29M
[11.8]--11-8 开发问卷标星功能.mp4 88.13M
[11.9]--11-9 开发问卷复制功能.mp4 46.70M
{12}--第12章 【中级】Redux 状态管理 - 复杂项目的数据管理形
[12.10]--12-10 使用Redux实现数字加减法-使用useSelect.mp4 50.22M
[12.11]--12-11 使用Redux实现TodoList-展示复杂数据结构.mp4 61.70M
[12.12]--12-12 使用Redux实现TodoList-传入Action.mp4 81.18M
[12.13]--12-13 Redux单项数据流-动图体验数据流转过程.mp4 11.01M
[12.14]--12-14 Redux开发者工具-方便跟踪和调试.mp4 13.32M
[12.15]--12-15 介绍MobX-可以像Vue一样声明式的修改数据.mp4 109.49M
[12.16]--12-16 使用MobX开发TodoList-创建数据模型.mp4 80.30M
[12.17]--12-17 使用MobX开发TodoList-数据的显示和操作.mp4 109.90M
[12.18]--12-18 使用Redux管理用户信息-定义store和redu.mp4 69.22M
[12.19]--12-19 使用Redux管理用户信息-使用useSelecto.mp4 50.65M
[12.1]--12-1 章介绍.mp4 13.60M
[12.20]--12-20 使用自定义Hook统一加载用户信息，并存储到redu.mp4 76.61M
[12.21]--12-21 根据用户登录状态动态跳转页面-使用自定义Hook统一.mp4 74.68M
[12.22]--12-22 章总结.mp4 8.14M
[12.2]--12-2 什么是状态管理，为何要用状态管理.mp4 45.52M
[12.3]--12-3 使用Context实现跨组件跨层级传递数据.mp4 72.25M
[12.4]--12-4 学习使用useReducer-提前了解redux的概念.mp4 82.14M
[12.5]--12-5 使用useReducer开发TodoList-定义in.mp4 71.24M
[12.6]--12-6 使用useReducer开发TodoList-使用di.mp4 56.11M
[12.7]--12-7 使用Context和useReducer实现跨组件通讯.mp4 50.06M
[12.8]--12-8 介绍Redux-React世界最流行的状态管理工具.mp4 12.12M
[12.9]--12-9 使用Redux实现数字加减法-认识Reducer和Ac.mp4 86.40M
{13}--第13章 【实战】开发问卷编辑器 part1 - 寻找突破口，用
[13.10]--13-10 -定义组件配置-可根据type找到组件.mp4 56.09M
[13.11]--13-11 -在画布上动态显示组件列表-梳理完整的流程.mp4 42.78M
[13.12]--13-12 -点击画布选中组件-通过selectedId全局共享.mp4 84.04M
[13.13]--13-13 -组件库-组件按类型分组.mp4 72.91M
[13.14]--13-14 -把组件分组显示在组件库中.mp4 23.28M
[13.15]--13-15 -点击组件库中的组件，添加到画布中.mp4 48.21M
[13.16]--13-16 -解释为何要使用fe_id.mp4 19.59M
[13.17]--13-17 -定义属性表单，用于修改组件的属性.mp4 78.62M
[13.18]--13-18 -根据选中的组件，动态显示属性表单.mp4 69.44M
[13.19]--13-19 -修改组件属性，并同步到画布中.mp4 68.15M
[13.1]--13-1 -章介绍.mp4 6.65M
[13.20]--13-20 -定义EditHeader组件，实现返回功能.mp4 71.80M
[13.2]--13-2 -需求分析-详细演示各个功能.mp4 52.26M
[13.3]--13-3 -分析UI界面，如何拆分组件.mp4 45.17M
[13.4]--13-4 -开发UI组件拆分-实现画布Y轴滚动.mp4 51.68M
[13.5]--13-5 -定义画布中的两个组件-Title和Input.mp4 146.22M
[13.6]--13-6 -把Title和Input组件显示到画布上.mp4 49.35M
[13.7]--13-7 -定义问卷组件的数据结构-这是动态渲染画布的前提.mp4 55.21M
[13.8]--13-8 -把组件列表存储到Redux store-统一各个组件.mp4 52.98M
[13.9]--13-9 -把组件列表存储到Redux store-重构useL.mp4 66.40M

React18+Next.js14+Nest.js全栈开发：问卷星仿制低代码项目教程