Java EE应用与开发-课件第3讲：JavaScript与Thymeleaf基础

03/核心技术栈解析JavaScript：网页的“行为”灵魂赋予静态网页交互能力，从简单的表单验证、按钮点击响应，到复杂的单页应用(SPA)动态内容更新，它是构建现代Web应用不可或缺的脚本语言，为用户提供流畅、即时的操作体验。Thymeleaf：服务端页面渲染引擎作为连接后端数据与前端视图的桥梁，Thymeleaf通过自然模板技术，允许在浏览器中直接打开原型页面，同时将服务端处理后的动态数据无缝嵌入HTML标签，高效实现页面的动态生成与展示。核心价值：JavaScript掌控前端交互逻辑，Thymeleaf负责服务端数据绑定，二者结合构建完整的动态Web应用闭环。本讲目标掌握JS核心基础快速回顾JS的基本语法、事件处理机制与核心对象模型，夯实前端编程的底层逻辑，为后续复杂交互功能的开发打下坚实基础。实现客户端表单验证使用JavaScript对用户输入数据进行实时校验与即时反馈，有效拦截非法信息提交，减少服务器压力，显著提升Web应用的交互体验与安全性。Thymeleaf动态渲染深入了解SpringBoot官方推荐的Thymeleaf模板引擎，掌握如何将后端业务数据高效、优雅地动态绑定并渲染到前端HTML页面中。通过本讲学习，构建“前端交互逻辑+后端数据驱动”的完整Web开发闭环，提升全栈开发思维。JavaScript快速回顾核心数据类型包含基础的原始类型：number(数值)、string(字符串)、boolean(布尔值)、null(空值)和undefined(未定义)，构成了JS数据处理的基石。变量声明方式优先使用let(块级作用域，可修改)和const(声明常量，不可修改)；var为函数作用域且存在变量提升，现已较少在现代开发中使用。函数定义结构通过function关键字定义，包含参数列表和函数体，使用return输出结果。它是实现代码复用、封装业务逻辑与功能模块的核心方式。流程控制语句条件判断使用if...else和switch实现逻辑分支；循环遍历使用for、while及do...while，灵活实现代码的重复执行与复杂业务流控制。JavaScript事件事件是用户与网页交互的核心触发点，通过监听并响应这些行为，我们能赋予网页动态交互的能力，实现从静态展示到动态响应的转变，构建流畅、直观的用户操作体验。onclick点击事件鼠标单击页面元素时触发，是最常用的交互事件，广泛用于按钮点击、链接跳转等场景。onblur失焦事件元素失去焦点时触发，常用于输入框内容校验，例如用户点击其他区域离开输入框时检查数据。onchange内容改变元素内容发生改变时触发，常见于下拉菜单、单选按钮等表单控件的选项切换交互中。onsubmit表单提交在表单提交时触发，可用于数据发送前的合法性校验，拦截非法数据提交，确保后端接收数据的有效性。onload页面加载页面或外部资源加载完成时触发，常用于初始化页面数据、绑定事件监听或执行一次性的启动逻辑代码。JavaScript操作DOMDOM(DocumentObjectModel)是HTML文档的编程接口，它将网页文档解析为结构化的节点树。JavaScript通过操作DOM，能够动态获取、修改、添加或删除页面中的元素，从而实现丰富的交互效果，让静态页面“活”起来。01.获取页面元素通过ID、name属性或CSS选择器精准定位元素，是DOM操作的基础。常用核心方法包括getElementById()、getElementsByName()以及灵活的querySelector()，实现对节点的快速检索。02.修改元素状态获取元素后，可动态更新页面内容与样式。通过innerHTML修改结构内容，利用element.value读写表单数据，或直接通过element.style实时调整CSS样式属性，实现视觉的即时反馈。03.表单验证应用这是最典型的交互场景。在提交前，通过DOM获取用户输入值，验证用户名是否为空、密码长度是否合规（≥6位）等，拦截非法数据，提升系统安全性与用户体验。核心逻辑闭环：通过DOMAPI获取页面节点➔对节点的属性、内容、样式进行读写操作➔监听并响应用户交互事件➔动态更新页面，完成数据与视图的实时同步。表单验证案例JavaScript核心验证函数实现functionvalidateForm(){letuser=document.forms["myForm"]["user"].value;if(user.length==0){alert("用户名不能为空!");returnfalse;}letpwd=document.forms["myForm"]["pwd"].value;if(pwd.length<6){alert("密码需≥6位!");returnfalse;}returntrue;//验证通过，允许提交}关键验证逻辑通过获取表单输入值，依次校验用户名非空和密码长度限制。若任意条件不满足，立即弹出提示并返回false阻止表单提交，保障数据有效性。表单提交事件绑定在form标签上使用onsubmit事件调用验证函数，利用函数返回的布尔值（true/false）来决定浏览器是否执行默认的表单提交动作，实现前端拦截。将验证逻辑封装为独立函数并关联表单提交事件，是前端控制数据提交流程的经典范式。这种方式能在数据发送到服务器前进行预检，有效减少无效请求，提升系统性能与用户体验。Thymeleaf概述面向现代Web应用的服务器端Java模板引擎，专注于将后端数据优雅地渲染到前端视图，同时保持模板的自然可读性，是连接前后端的高效桥梁。纯HTML原生模板模板文件本身是标准的HTML文件，无需编译即可直接在浏览器中打开预览，极大降低了前后端协作的沟通成本，让设计与开发并行。Spring生态首选与Spring生态无缝集成，是SpringBoot官方首推的服务器端模板引擎技术。支持零配置或极简配置，开发者可快速上手开发。强大的功能体系不仅支持基础的变量输出、循环与条件判断，还内置国际化、表达式语言及片段化模板复用能力，满足复杂Web应用的开发需求。极简依赖配置在Maven或Gradle中引入spring-boot-starter-thymeleaf依赖，无需额外配置即可直接使用，大幅简化了项目的搭建流程。Thymeleaf基础语法01变量输出:th:text<pth:text="${}">默认显示的内容</p>使用th:text可将后端变量渲染到页面，替换标签内默认文本，实现数据的动态展示，是最基础的文本输出方式。02循环遍历:th:each<lith:each="item:${list}"th:text="${item}"></li>按“元素变量:集合变量”语法遍历集合或数组，能高效、便捷地在页面中生成列表、表格等重复的HTML结构。03条件判断:th:if/th:unless<pth:if="${age>=18}">成年</p><pth:unless="...">未成年</p>th:if满足条件时渲染元素，th:unless则在条件不满足时渲染，二者配合可灵活实现页面内容的条件性展示逻辑。04动态链接:th:href<ath:href="@{/user/detail(id=${userId})}">详情</a>使用@{...}语法生成URL，支持动态拼接参数与上下文路径，自动适配应用部署环境，有效避免硬编码URL的维护问题。Thymeleaf标准表达式${...}变量表达式用于直接访问后端控制器传递到模板引擎上下文的变量，是开发中最常用的表达式。例如：${}可直接获取用户对象的姓名属性。{...}选择表达式需配合th:object属性使用，用于简化选中对象的属性访问，避免重复书写对象名。如在th:object="${user}"作用域内，可用*{name}替代${}。#{...}消息表达式主要用于应用的国际化(i18n)场景，从外部.properties属性文件中获取本地化消息文本，根据不同语言环境动态展示对应的内容。@{...}URL表达式用于生成各种类型的URL，支持动态拼接路径变量与请求参数，能自动处理上下文路径，确保链接的正确性。常配合th:href,th:src等属性使用。~{...}片段表达式用于引用和插入其他模板中的片段，实现页面公共部分（如页眉、页脚、导航栏）的复用，是Thymeleaf实现模块化开发的核心方式。案例：用户信息展示后端逻辑：数据封装与传递(Controller)通过@GetMapping("/user")映射请求，在方法内构建User对象与爱好列表数据，利用Model接口的addAttribute方法将业务数据注入视图模型，最终返回模板名“user”，完成后端数据的封装与传递准备工作。前端渲染：Thymeleaf模板引擎解析在HTML模板中，使用th:text填充文本数据，th:if实现“成年/未成年”条件判断展示，th:each遍历集合动态生成列表元素。Thymeleaf自动解析Model中的数据，将后端数据无缝渲染到最终的HTML页面中。核心逻辑：实现“后端封装数据→视图模型传递→前端模板解析渲染”的完整链路，成功将业务逻辑处理与页面视图展示进行解耦，提升了代码的可维护性与扩展性。课后作业核心任务：构建SpringBoot学生信息展示系统本次作业为综合练习，需打通“后端数据封装”到“前端视图渲染”的完整链路，重点掌握Model数据传递与Thymeleaf模板引擎的基础语法应用，实现数据与视图的解耦展示。01.后端数据层构建在Controller层创建包含姓名、成绩的学生实体对象，以及Java、Spring等课程名称列表；通过SpringMVC的Model接口将数据对象注入视图模型，完成后