JavaWeb——SpringBoot 系列（3）Thymeleaf 模板引擎
其他
2020-02-08 18:24:15
阅读次数: 0
Thymeleaf 是一个 Java 类库，是一个 xml/xhtml/html5 的模板引擎，可以作为 MVC 的 Web 应用的 View 层，并且提供了额外的模块与 Spring MVC 集成，从而可以替代 JSP。
Thymeleaf 页面中可以使用 Spring 的 Model.addAttribute() 方法添加到视图层的数据，例如：@RequestMapping ( "/" )
public String index ( Model model) {
Person single = new Person ( "aa" , 11 ) ;
List< Person> = new ArrayList < > ( ) ;
Person p1 = new Person ( "xx" , 11 ) ;
Person p2 = new Person ( "yy" , 22 ) ;
Person p3 = new Person ( "zz" , 33 ) ;
people. add ( p1) ;
people. add ( p2) ;
people. add ( p3) ;
model. addAttribute ( "singlePerson" , single) ;
model. addAttribute ( "people" , people) ;
return "index" ;
}
在 index.html 页面：
< divclass = " panel panel-primary" > < divclass = " panel-heading" > < h3class = " panel-title" > </ h3> </ div> < divclass = " panel-body" > < spanth: text= " ${singlePerson.name}" > </ span> </ div> </ div> < divth: if= " ${not #lists.isEmpty(people)}" > < divclass = " panel panel-primary" > < divclass = " panel-heading" > < h3class = " panel-title" > </ h3> </ div> < divclass = " panel-body" > < ulclass = " list-group" > < liclass = " list-group-item" th: each= " person:${people}" > < spanth: text= " ${person.name}" > </ span> < spanth: text= " ${person.age}" > </ span> < buttonclass = " btn" th: onclick= " ' getName(\'' + ${person.name} + ' \');' " > </ button> </ li> </ ul> </ div> </ div> </ div>
从上面可以看出，Thymeleaf 页面用 ${} 来访问和使用 model 中的数据。
Thymeleaf 页面也支持数据迭代，使用 th:each="att:${list} ，att 为迭代元素。
${not #list.isEmpty(attribute)} 表达式可用来判断属性是否为空值；Thymeleaf 支持 >、<、>=、<=、==、!= 作为比较条件，也支持将 SpringEL 表达式语言用于条件中。以上表达式都是在非 Javascript 的部分，若在 Javascript 中访问 model 中的数据，其格式稍微不同：< script th: inline= "javascript" >
var single= [ [ ${ singlePerson} ] ] ;
console. log ( single. name+ "/" + single. age)
function getName ( name) {
console. log ( name) ;
}
< / script>
th:inline="javascript 标签可让 Javascript 代码也能够访问 model 中的数据。用**[[${}]]** 格式来访问值。
编辑一个 JavaBean 用于演示，代码如下：
package com. wisely. ch5_2_3. bean;
public class Person {
private String name;
private Integer age;
public Person ( ) {
super ( ) ;
}
public Person ( String name, Integer age) {
super ( ) ;
this . name = name;
this . age = age;
}
public String getName ( ) {
return name;
}
public void setName ( String name) {
this . name = name;
}
public Integer getAge ( ) {
return age;
}
public void setAge ( Integer age) {
this . age = age;
}
}
建立一个 Thymeleaf 页面作为视图层，具体代码如下：<!DOCTYPE html>
< htmlxmlns: th= " http://www.thymeleaf.org" lang = " en" > < head> < metacontent = " text/html;charset=UTF-8" /> < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" /> < metaname = " viewport" content = " width=device-width, initial-scale=1" /> < linkth: href= " @{bootstrap/css/bootstrap.min.css}" rel = " stylesheet" /> < linkth: href= " @{bootstrap/css/bootstrap-theme.min.css}" rel = " stylesheet" /> < title> </ title> </ head> < body> < divclass = " panel panel-primary" > < divclass = " panel-heading" > < h3class = " panel-title" > </ h3> </ div> < divclass = " panel-body" > < spanth: text= " ${singlePerson.name}" > </ span> </ div> </ div> < divth: if= " ${not #lists.isEmpty(people)}" > < divclass = " panel panel-primary" > < divclass = " panel-heading" > < h3class = " panel-title" > </ h3> </ div> < divclass = " panel-body" > < ulclass = " list-group" > < liclass = " list-group-item" th: each= " person:${people}" > < spanth: text= " ${person.name}" > </ span> < spanth: text= " ${person.age}" > </ span> < buttonclass = " btn" th: onclick= " ' getName(\'' + ${person.name} + ' \');' " > </ button> </ li> </ ul> </ div> </ div> </ div> < scriptth: src= " @{jquery-1.10.2.min.js}" type = " text/javascript" > </ script> < scriptth: src= " @{bootstrap/js/bootstrap.min.js}" > </ script> < scriptth: inline= " javascript" >
var single= [ [ ${ singlePerson} ] ] ;
console. log ( single. name+ "/" + single. age)
function getName ( name) {
console. log ( name) ;
}
</ script> </ body> </ html>
这一步主要在入口类中完成：@Controller
@SpringBootApplication
public class Ch523Application {
@RequestMapping ( "/" )
public String index ( Model model) {
Person single = new Person ( "aa" , 11 ) ;
List< Person> = new ArrayList < > ( ) ;
Person p1 = new Person ( "xx" , 11 ) ;
Person p2 = new Person ( "yy" , 22 ) ;
Person p3 = new Person ( "zz" , 33 ) ;
people. add ( p1) ;
people. add ( p2) ;
people. add ( p3) ;
model. addAttribute ( "singlePerson" , single) ;
model. addAttribute ( "people" , people) ;
return "index" ;
}
public static void main ( String[ ] args) {
new SpringApplicationBuilder ( Ch523Application. class )
. showBanner ( true )
. run ( args) ;
}
}
运行项目，然后用浏览器访问 localhost:8080，页面如下：
上一篇 下一篇
发布了146 篇原创文章 ·
获赞 15 ·
访问量 1万+
转载自 blog.csdn.net/qq_42896653/article/details/104158395
