Spring Boot+Vue全栈应用开发实践 课件06 Web开发实战：MVC与Thymeleaf

罗荣良Web开发实战：MVC与Thymeleaf本节学习目标1.深入理解MVC设计模式(Model-View-Controller)2.了解SpringMVC的核心执行流程3.掌握Thymeleaf模板引擎的集成4.实战：使用Thymeleaf渲染动态数据列表什么是MVC模式Model(模型)：数据与业务逻辑View(视图)：用户看到的界面(HTML)Controller(控制器)：接收请求，协调M和V核心思想：解耦

生活中的MVC：餐厅类比顾客=用户服务员=Controller(接收点单，传菜)厨师=Model(处理食材，业务逻辑)菜品=View(最终呈现给用户的结果)|人性化教学DispatcherServlet(前端控制器)：整个流程的指挥官。Request->DispatcherServlet->Controller->ViewResolver->ResponseSpringMVC核心组件为什么学习Thymeleaf？服务端渲染

：HTML在服务器生成。优势：1.简单易学，所见即所得。2.SEO(搜索引擎优化)友好。3.SpringBoot官方推荐替代JSP。说明：虽然有Vue，但服务端渲染仍有场景。项目集成Thymeleaf依赖引入：spring-boot-starter-thymeleaf目录结构：src/main/resources/templates/->放HTML文件src/main/resources/static/->放CSS/JS/图片

实战案例：学生列表展示目标：在页面上显示一组学生信息。步骤：1.创建Student实体类。2.创建Controller模拟数据。3.编写Thymeleaf页面展示数据。Step1:创建实体类(Model)属性：id,name,ageStep2:编写Controller注解：@Controller(注意不是@RestController)方法：list(Modelmodel)关键点：model.addAttribute("students",list)Model：SpringMVC提供的接口。作用：Controller与View之间的数据桥梁。语法：model.addAttribute("key",value)->相当于把数据放进“快递盒”。数据传输的核心：Model对象Step3:编写View(HTML)头部引入：<htmlxmlns:th="">关键：引入命名空间才能有代码提示。Thymeleaf语法1：文本替换th:text代码：<spanth:text="${name}">默认名</span>解释：如果有值，替换"默认名"；没值显示"默认名"(原型支持)。th:each代码：<trth:each="stu:${students}">解释：类似Java的for(Studentstu:students)。取值：<tdth:text="${}"></td>Thymeleaf语法2：循环遍历Thymeleaf语法3：条件判断配置实现th:if/th:unless代码：<spanth:if="${stu.age>18}">已成年</span>解释：满足条件才渲染该标签。运行效果演示浏览器访问localhost:8080/students展示：一个包含多行数据的表格。对比：查看网页源代码，看到的是纯HTML(服务端渲染完毕)。服务端渲染vs前后端分离

Thymeleaf：服务器压力大，适合简单页面。Vue.js：浏览器渲染，服务器只发JSON，交互性强。本课路线：先懂服务端渲染原理，后续全面转向Vue。本节小结与