从静态页面到前后端联调：构建 Web 开发完整闭环

这门课专门解决“只会写 HTML/CSS，不懂 JS 交互，更不会前后端协同”的典型能力缺口。很多初学者在入门阶段止步于静态网页，遇到表单提交、数据动态展示等需求就无从下手。课程从 HTML/CSS 布局基础讲起，逐步引入 JavaScript 语法、DOM 操作、事件监听以及正则校验，最后深入 Vue 框架的数据绑定与组件化思维，并打通前后端开发链路。它适合零基础转岗或希望补全前端技能树的初学者，内容覆盖了从页面结构到逻辑交互的完整链条，确保学习者能够建立起对 Web 开发的系统性认知，而不仅仅是碎片化的知识点。

建议的学习顺序与门槛

学习前无需任何前置编程经验，但建议具备基本的逻辑思维能力和耐心。学习路径需严格按阶段推进：先在 Day01 花费充足时间把新闻页面的标题、正文、表格及表单样式写熟，这是前端的地基，务必理解语义化标签与盒模型；Day02 重点攻克 JavaScript 语法，特别是变量、数据类型、BOM/DOM 操作以及正则校验，务必亲手敲完“隔行换色”和“表单校验”两个经典案例，不要只看不动；Day03 的 Vue 基础部分要深入理解 v-for、v-bind 等指令的底层响应式原理，尝试用 Vue 重写 Day02 的 DOM 案例，对比原生 JS 与框架的差异，体会声明式编程的优势，从而真正掌握现代前端开发的核心工具。

学完产出与资料用法

完成这套体系后，你应该能独立设计并开发一个包含登录注册、数据列表渲染、表单校验以及简单后端数据交互的完整 Web 项目，具备初级前端开发工程师的实战能力。资料中的视频部分是核心，请在学习时同步打开编辑器，跟随讲师步骤逐行敲代码，遇到报错先尝试自行调试，无法解决再对照视频查找差异。建议在 CSS 部分多尝试不同的布局方式，在 JS 部分多动手改写代码逻辑，在 Vue 部分多做数据绑定的练习。这种“看-敲-改-问”的配合方式，能帮助你把被动观看转化为主动记忆，确保每一个知识点都内化为自己的技能，从而在面对实际开发任务时能够举一反三，快速定位问题并给出解决方案。

课程目录

Day01-前端Web-HTML&CSS
01. Web前端初识.mp4 55.18M
02. HTML&CSS-课程安排.mp4 41.36M
03. HTML&CSS-入门程序.mp4 29.84M
04. HTML&CSS-VSCode开发工具.mp4 47.98M
05. HTML&CSS-常见标签及样式(新闻-标题-排版).mp4 74.31M
06. HTML&CSS-常见标签及样式(新闻-标题-样式1).mp4 60.08M
07. HTML&CSS-常见标签及样式(新闻-标题-样式2).mp4 47.73M
08. HTML&CSS-常见标签及样式(新闻-标题-完善(超链接)).mp4 44.09M
09. HTML&CSS-常见标签及样式(新闻-正文-排版).mp4 164.66M
10. HTML&CSS-常见标签及样式(新闻-正文-布局).mp4 87.69M
11. HTML&CSS-表格标签.mp4 32.29M
12. HTML&CSS-表单标签.mp4 34.53M
13. HTML&CSS-表单项标签.mp4 56.57M
Day02-前端Web-JavaScript
01.JS-课程介绍.mp4 15.25M
02.JS-引入方式.mp4 22.70M
03.JS-基础语法-书写规范.mp4 15.32M
04.JS-基础语法-变量.mp4 18.62M
05.JS-基础语法-数据类型.mp4 27.06M
06.JS-基础语法-运算符与类型转换.mp4 40.15M
07.JS-函数.mp4 40.95M
08.JS-对象-内置对象Array.mp4 57.15M
09.JS-对象-内置对象String.mp4 20.95M
10.JS-对象-内置对象JSON.mp4 45.90M
11.JS-对象-BOM.mp4 43.09M
12.JS-对象-DOM.mp4 60.14M
13.JS-对象-DOM-案例.mp4 28.87M
14. JS-事件监听-语法.mp4 27.69M
15. JS-事件监听-常见事件.mp4 30.00M
16. JS-事件监听-案例1(隔行换色).mp4 32.63M
17. JS-事件监听-案例2(表单校验).mp4 81.97M
18. JS-事件监听-案例2(正则表达式优化).mp4 56.18M
19. JS-模块化(import&export).mp4 46.40M
Day03-前端Web-Vue-基础
01. Vue-简介.mp4 16.61M
02. Vue-基础-入门程序.mp4 42.06M
03. Vue-基础-v-for指令.mp4 41.12M
04. Vue-基础-v-for(key).mp4 8.38M
05. Vue-基础-v-bind指令.mp4 21.06M
06. Vue-基础-v-if&v-show指令.mp4 36.01M
07. Vue-基础-v-model指令.mp4 29.75M
08. Vue-基础-v-on指令.mp4 30.82M
09. Ajax-介绍.mp4 33.09M
10. Ajax-axios.mp4 45.49M
11. Vue-生命周期.mp4 29.31M
12. Ajax-axios-案例.mp4 42.29M
13. Ajax-案例-省市区(async&await).mp4 83.82M
Day04-后端Web基础(Maven基础)
01. Maven基础-课程安排.mp4 33.26M
02. Maven基础-概述.mp4 33.85M
03. Maven基础-安装.mp4 36.25M
04. Maven基础-创建maven项目.mp4 32.74M
05. Maven基础-maven坐标.mp4 15.37M
06. Maven基础-导入maven项目.mp4 21.15M
07. Maven基础-依赖管理-依赖配置.mp4 23.61M
08. Maven基础-依赖管理-依赖传递.mp4 29.22M
09. Maven基础-依赖管理-生命周期.mp4 55.23M
10. Maven基础-单元测试-概述.mp4 22.87M
11. Maven基础-单元测试-入门.mp4 44.57M
12. Maven基础-单元测试-常见注解.mp4 39.69M
13. Maven基础-单元测试-断言.mp4 30.23M
14. Maven基础-依赖范围.mp4 20.36M
15. Maven常见问题1.mp4 32.51M
16. Maven常见问题2.mp4 19.21M
Day05-后端Web基础(基础知识)
01. 课程介绍.mp4 23.27M
02. Tomcat-介绍及基本使用.mp4 61.84M
03. Tomcat-基本配置.mp4 42.57M
04. Servlet-入门程序.mp4 73.30M
05. Servlet-执行流程.mp4 21.98M
06. Http协议-概述.mp4 20.05M
07. HTTP协议-请求协议-格式.mp4 24.14M
08. HTTP协议-请求协议-数据获取.mp4 46.46M
09. HTTP协议-响应协议-格式.mp4 52.18M
10. HTTP协议-响应协议-设置响应数据.mp4 38.50M
11. SpringBootWeb-概述.mp4 31.05M
12. SpringBootWeb-入门程序.mp4 56.23M
13. SpringBootWeb-入门程序解析.mp4 54.42M
Day06-后端Web实战(IOC+DI)