这门课解决什么问题
很多前端开发者卡在“能写页面,但做不出完整产品”的阶段:React 组件写得熟练,但一涉及后端接口、数据库设计、服务器部署,就不知道怎么把前后端串起来。这门课聚焦记账本应用,带你用 MERN 技术栈走完一个全栈项目的完整闭环——从 React 前端搭建、Node 后端 API 开发、MongoDB 数据存储,到阿里云正式部署。它解决的核心场景是:当你需要独立交付一个带用户认证、数据持久化、可线上访问的业务应用时,怎么把零散的技术点拼成能跑的产品,而不是停留在本地 demo 阶段。
适合什么基础,建议先看哪几块
课程节奏偏快,默认你已经能写基本的 React 组件、了解 npm 操作和 JavaScript 语法。如果你完全没碰过 React,建议先补 JSX 和组件生命周期再来看,否则第二模块的布局配置会跟不上。后端部分对 Node 零基础的人也勉强能跟,但最好提前理解 Express 的路由和中间件概念。建议的观看顺序:先看课程介绍和前端配置两节,确认项目结构和 antd 布局思路;然后跳到后端初始化和 MongoDB 连接,把数据层跑通;再回到用户登录注册的前端 UI 和对应 API,跟着把认证流程走一遍。账单增删改查部分是业务核心,放在最后集中看,因为前面搭好的框架在这里才真正运转起来。
学完能独立做什么,资料怎么配合练习
学完后你能独立搭建一个中小型全栈应用:设计 React 前端页面并用 antd 组件库完成布局,编写 Node 后端接口并连接 MongoDB 做数据存取,实现用户注册登录和数据增删改查,最后把项目部署到阿里云让外部访问。这套流程可以直接迁移到 todo 应用、博客系统、后台管理面板等类似项目。资料配合练习的方式:视频不要只看不练,每看完一个模块暂停,对照源码在自己的本地环境复现一遍。前端部分重点练 antd 布局组件和路由配置,后端部分重点练接口设计和数据库连接逻辑。部署环节建议准备一个阿里云轻量服务器,跟着视频操作一遍域名解析和项目上线,这一步很多人跳过,但实际跑通线上环境才是全栈闭环的关键。遇到报错先查源码差异,再回头看视频对应片段,比反复拖进度条更高效。
七小时快速构建MERN全栈应用-我的记账本,并使用最新版本antd作为UI组件库,最终实现阿里云部署
课程目录
* 01 我的记账本全栈应用——课程介绍/
* 01 课程介绍.mp4 09:14
* 02 我的记账本全栈应用——配置前端/
* 01 初始化react应用程序.mp4 03:43
* 02 配置文件结构及安装模块.mp4 12:22
* 03 创建默认布局组件.mp4 13:57
* 04 添加默认布局组件样式.mp4 13:54
* 03 我的记账本全栈应用——配置后台/
* 01 初始化server服务器.mp4 05:13
* 02 连接MongoDB数据库.mp4 13:05
* 04 我的记账本全栈应用——用户登录/注册UI/
* 01 注册页面组件.mp4 17:43
* 02 登录页面组件.mp4 21:49
* 05 我的记账本全栈应用——用户登录/注册API/
* 01 用户模型及API.mp4 15:12
* 02 测试登录和注册.mp4 14:58
* 06 我的记账本全栈应用——加载/路由保护/
* 01 加载和通知.mp4 13:26
* 02 路由守卫.mp4 17:21
* 07 我的记账本全栈应用——添加流水UI/
* 01 添加流水弹出框.mp4 12:12
* 02 添加流水表单.mp4 18:30
* 08 我的记账本全栈应用——添加流水API/
* 01 添加流水模型.mp4 09:20
* 02 添加流水API.mp4 20:14
* 03 展示交易流水数据.mp4 23:14
* 09 我的记账本全栈应用——过滤功能/
* 01 解释日期过滤.mp4 12:11
* 02 实现日期过滤.mp4 26:39
* 03 类型过滤.mp4 07:25
* 10 我的记账本全栈应用——数据分析/
* 01 添加视图切换组件.mp4 14:58
* 02 总交易流水笔数分析.mp4 20:27
* 03 总交易流水金额分析.mp4 09:48
* 11 我的记账本全栈应用——分类分析/
* 01 收入类别分析.mp4 15:03
* 02 支出类别分析.mp4 03:38
* 12 我的记账本全栈应用——编辑或删除交易/
* 01 编辑交易.mp4 16:02
* 02 实现编辑和删除交易.mp4 13:42
* 13 我的记账本全栈应用——重构和部署/
* 01 样式重构.mp4 19:14
* 02 Nodejs后端部署.mp4 11:52
* 03 前端打包部署.mp4 14:51






