网站建设asp文件怎么展现,房子简装修效果图片,wordpress主题实现伪静态,企业网站服务费怎么做记账凭证隶属文章#xff1a; Java高级 | #xff08;二十二#xff09;Java常用类库-CSDN博客 系列文章#xff1a; Java高级 | 【实验一】Spring Boot安装及测试 最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 目录
一、Thymeleaf
1.1 是什么 Java高级 | 二十二Java常用类库-CSDN博客 系列文章 Java高级 | 【实验一】Spring Boot安装及测试 最新-CSDN博客 Java高级 | 【实验二】Springboot 控制器类相关注解知识-CSDN博客 目录
一、Thymeleaf
1.1 是什么
1.2 Thymeleaf机制说明
1.3 优点VS缺点
1.4 使用Thymeleaf
1jar包依赖
2在application.properties中配置thymeleaf
二、Thymeleaf语法
2.1 chongyoth属性
①文本替换th:text
②HTML 替换th:utext
2.2 其他th 属性
三、spring boot使用Thymeleaf
3.1 创建spring boot工程并默认使用thymeleaf模板引擎
3.2 编写控制器类及数据对象类
3.3 编写前端视图页面
1编写test1.html
2编写test2.html
3编写test3.html
4编写test4.html
四、练习题
【问题】
【答案】 Web 开发离不开动态页面的开发很早以前企业主要使用JSP技术来开发网页随着技术的升级更替目前来说主流的方案是Thymeleaf。 Thymeleaf 是一个模板框架它可以支持多种格式的内容动态渲染功能非常强大它天然和 HTML是相融合的所以对于前端工程师来说它也是易于理解的。 Springboot默认是不支持JSP的默认使用Thymeleaf模板引擎。 官方文档Tutorial: Using Thymeleaf 一、Thymeleaf
1.1 是什么
是一个跟 Velocity、FreeMarker 类似的模板引擎可完全替代 JSP。是一个 java 类库它是一个 xml/xhtml/html5 的模板引擎可以作为mvc的web应用的view层。
1.2 Thymeleaf机制说明 Thymeleaf 是服务器渲染技术页面数据是在服务器端进行渲染的。 因此在开发中使用Thymeleaf并不是前后端分离。
1.3 优点VS缺点
开箱即用它提供标准和spring标准两种方言可以直接套用模板实现JSTL、 OGNL表达式效果避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言Thymeleaf模板页面无需服务器渲染也可以被浏览器运行页面简洁SpringBoot支持 Thymeleaf、Velocity、FreeMarker。
并不是一个高性能的引擎适用于单体应用。如果要做一个高并发的应用选择前后端分离更好但是作为SpringBoot推荐的模板引擎还是需要了解一下。
1.4 使用Thymeleaf
1jar包依赖
在pom.xml中添加如下依赖:
//这个配置是必须的事实上spring boot项目创建好后已自动添加该依赖
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency
2在application.properties中配置thymeleaf
//这个配置不是必须的
//但是spring.thymeleaf.mode的默认值是HTML5其实是一个很严格的检查改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。
spring.thymeleaf.mode LEGACYHTML5
二、Thymeleaf语法 2.1 chongyoth属性 html有的属性Thymeleaf基本都有而常用的属性大概有七八个。其中th属性执行的优先级从1~8数字越低优先级越高。 属性 作用描述 相关属性 优先级order 说明 th:insert 代码块引入 th:replace, th:include 1 优先级最高常用于公共代码块提取 三者的区别较大若使用不恰当会破坏html结构 th:each 遍历循环元素 与 th:text、th:value 一起使用 2 优先级很高注意修饰标签位置 th:if 条件判断 th:unless, th:switch, th:case 3 优先级较高 th:object 声明变量配合 *{} 使用达到偷懒的效果 - 4 优先级一般用于简化表达 th:attr 修改任意属性 th:attrappend, th:attrprepend 5 优先级一般实际开发中用的较少因为有丰富的其他th属性帮忙类似的还有th:attrappendth:attrprepend th:value 设置当前元素的 value 值类似修改指定属性 th:src, th:href 6 优先级不高 th:text 设置当前元素的文本内容 th:utext 7 优先级不高th:text会转义HTML标签th:utext不会 th:fragment 定义代码块供 th:insert 引用 - 8 优先级最低
①文本替换th:text
文本替换是指直接将变量的值替换到 HTML 标签的文本内容中。
在 Thymeleaf 中可以使用th:text属性来实现文本替换。
p th:text${user.name}Default Text/p
在这个例子中${user.name} 的值会替换 p 标签中的文本内容如果user.name存在则其值会显示在页面上如果不存在则显示默认文本Default Text。
②HTML 替换th:utext
HTML 替换是指将变量的值作为 HTML 内容插入到 HTML 标签中。在 Thymeleaf 中可以使用th:utext属性来实现 HTML 替换。
div th:utext${user.description}Default HTML/div
在这个例子中${user.description} 的值会被作为 HTML 内容插入到 div 标签中不会被转义处理。这意味着如果${user.description}的值包含 HTML 标签它们会被正确地解析并显示在页面上。
2.2 其他th 属性
Thymeleaf 还提供了大量的 th 属性这些属性可以直接在 HTML 标签中使用其中常用 th 属性及其示例如下表。 属性 描述 示例 th:id 替换 HTML 的 id 属性 input idhtml-id th:idthymeleaf-id / th:text 文本替换转义特殊字符 h1 th:texthellobianchengbang hello/h1 th:utext 文本替换不转义特殊字符 div th:utexth1欢迎来到编程帮/h1 欢迎你/div th:object 在父标签选择对象子标签使用 *{…} 选择表达式选取值。 没有选择对象那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。 同时即使选择了对象子标签仍然可以使用变量表达式。 div th:object${session.user} p th:text*{fisrtName}firstname/p /div th:value 替换 value 属性 input th:value ${user.name} / th:with 局部变量赋值运算 div th:withisEvens ${prodStat.count}%2 0 th:text${isEvens}/div th:style 设置样式 div th:stylecolor:#F00; font-weight:bold编程帮 www.biancheng.net/div th:onclick 点击事件 td th:onclick getInfo()/td th:each 遍历支持 Iterable、Map、数组等。 tabletr th:eachm:${session.map}td th:text${m.getKey()}/tdtd th:text${m.getValue()}/td/tr/table th:if 根据条件判断是否需要展示此标签 a th:if ${userId collect.userId} th:unless 和 th:if 判断相反满足条件时不显示 div th:unless${m.getKey()name} /div th:switch 与 Java 的 switch case语句类似 通常与 th:case 配合使用根据不同的条件展示不同的内容 div th:switch${name}span th:casea编程帮/spanspan th:casebwww.biancheng.net/span/div th:fragment 模板布局类似 JSP 的 tag用来定义一段被引用或包含的模板片段 footer th:fragmentfooter插入的内容/footer th:insert 布局标签 将使用 th:fragment 属性指定的模板片段包含标签插入到当前标签中。 div th:insertcommons/bar::footer/div th:replace 布局标签 使用 th:fragment 属性指定的模板片段包含标签替换当前整个标签。 div th:replacecommons/bar::footer/div th:selected select 选择框选中 selectoption---/optionoption th:selected${namea}编程帮/optionoption th:selected${nameb}www.biancheng.net/option/select th:src 替换 HTML 中的 src 属性 img th:src{/asserts/img/bootstrap-solid.svg} srcasserts/img/bootstrap-solid.svg / th:inline 内联属性 该属性有 textnone,javascript 三种取值 在 script 标签中使用时js 代码中可以获取到后台传递页面的对象。 script typetext/javascript th:inlinejavascriptvar name /*[[${name}]]*/ bianchengbang;alert(name)/script th:action 替换表单提交地址 form th:action{/user/login} th:methodpost/form
三、spring boot使用Thymeleaf
3.1 创建spring boot工程并默认使用thymeleaf模板引擎 File-New-Project 至此一个基于spring boot的web工程已创建完毕该工程默认的前端模板是Thymeleaf。
运行工程如果能运行成功。则编写控制器类。 如果不能正常运行请根据提示信息修改工程的配置可能修改pom.xml可能修改工程的结构快捷键shiftctrlalts等。
3.2 编写控制器类及数据对象类
在当前包com.example.thymeleaftest中创建控制器类及数据对象类。 1创建 MyData1类
//存放数据对象
package com.example.thymeleaftest;public class MyData1 {private int id 0;private String username;private String password;public MyData1() {}public MyData1(int id, String username, String password) {this.id id;this.username username;this.password password;}public int getId() {return id;}public void setId(int id) {this.id id;}public String getUsername() {return username;}public void setUsername(String username) {this.username username;}public String getPassword() {return password;}public void setPassword(String password) {this.password password;}Overridepublic String toString() {return MyData1{ id id , username username \ , password password \ };}
}
2编写控制器类 TestController
用于跳转到视图层并传递相关数据给指定的视图层。
package com.example.thymeleaftest;import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.ArrayList;
import java.util.List;Controller//该注解表明TestController类是一个控制器
RequestMapping(/test)//注解TestController类所有方法访问的url是http://localhost8080/test
public class TestController {RequestMapping(/test1)//该方法处理的url是http://localhost8080/test/test1public String test1() {return test1;//转发给视图test1.html}RequestMapping(/test2)//该方法处理的url是http://localhost8080/test/test2public String test2(Model model) {//参数model为模型用来存放转发到视图的数据String name Jack;model.addAttribute(name, name);//模型中填充数据该数据在视图的中名称为namereturn test2;}RequestMapping(/test3)//该方法处理的url是http://localhost8080/test/test3public String test3(Model model) {ListMyData1 myList new ArrayList();myList.add(new MyData1(1, laisc, lai1203));myList.add(new MyData1(2, admin, admin888));myList.add(new MyData1(3, root, root9812));model.addAttribute(userlist, myList);return test3;}RequestMapping(/test4)//该方法处理的url是http://localhost8080/test/test4public String test4(Model model) {MyData1 mydata1 new MyData1(1, admin, admin1234);model.addAttribute(data123, mydata1);return test4;}RequestMapping(/test5)//该方法处理的url是http://localhost8080/test/test2public String test5(HttpServletRequest request) {String name 张三;request.setAttribute(name, name);return test2;}
}
上面的控制类一个定义了5个方法每个方法都定义了其前端访问的url以及返回到视图的数据。
3.3 编写前端视图页面
前端视图用的是thymeleaf模板而thymeleaf模板默认的路径是/resources/templates。因此我们在templates文件夹中创建4个html页面分别是test1.html、test2.html、test2.html和test4.html即4个视图页面。如图4所示 1编写test1.html 该视图对应TestController控制器类的test1()方法该方法没有传递任何数据到test1.html视图。test1.html视图直接输出“Hello, world!”其代码如下所示。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
Hello, world!
/body
/html 说明由于该视图没有输出变量的值因此可以使用传统的html代码。
2编写test2.html
该视图对应TestController控制器类的test2()方法该方法传递一个“name”变量到test2.html视图。test2.html视图输出“name”变量的值。其代码如下
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
p th:textHello, ${name} !/p
/body
/html html xmlns:thhttp://www.thymeleaf.org---导入thymeleaf资源说明由于该视图要输出变量的值因此必须使用thymeleafhtml代码。p th:textHello, ${name} !3333/p----输出变量。 3编写test3.html 该视图对应TestController控制器类的test3()方法该方法传递一个list集合到 test3.html视图视图循环输出集合的值。
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
tabletrthID/ththusername/ththpassword/th/trtr th:eachuser : ${userlist}td th:text${user.id}-1/tdtd th:text${user.username}abc/tdtd th:text${user.password}555/td/tr
/table
/body
/html 4编写test4.html 该视图对应TestController控制器类的test3()方法该方法传递一个model对象到test4.html视图.该视图把对象的值输出到超链接的参数值。
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
a hrefdetails.html th:href{http://localhost:8080/gtvg/order/details(orderId${data123.username})}链接1/a
a hrefdetails.html th:href{/order/details(orderId${data123.username})}链接2/a
a hrefabc.html th:hreforder/${data123.id}/details?orderId${data123.username} 链接3/a
a hrefabc.html th:href{/details/${data123.id}(orderId${data123.username})}链接4/a
a hrefabc.html th:href{/details/${data123.id}/aaa(orderId${data123.username})}链接5/a
/body
/html 四、练习题
【问题】
编写一个控制器产生100个学生对象并把这些对象在html中以表格的形式输出。
【答案】 package com.example.thymeleaftest;public class Student {private int id;private String name;private int age;public Student(int id, String name, int age) {this.id id;this.name name;this.age age;}// Getter方法public int getId() { return id; }public String getName() { return name; }public int getAge() { return age; }
}
package com.example.thymeleaftest;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;Controller
RequestMapping(/student)
public class StudentController {RequestMapping(/list)public String listStudents(Model model) {ListStudent students new ArrayList();// 生成100个简单学生数据for (int i 1; i 100; i) {students.add(new Student(i, 学生 i, 18 (i % 7)));}model.addAttribute(students, students);return studentList;}
}
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title学生列表/title
/head
body
h1学生列表/h1
table border1trthID/thth姓名/thth年龄/th/trtr th:eachstudent : ${students}td th:text${student.id}/tdtd th:text${student.name}/tdtd th:text${student.age}/td/tr
/table
/body
/html
