JavaWeb——SpringBoot 系列(3)Thymeleaf 模板引擎
其他
2020-02-08 18:24:15
阅读次数: 0
一、Thymeleaf 简介
Thymeleaf 是一个 Java 类库,是一个 xml/xhtml/html5 的模板引擎,可以作为 MVC 的 Web 应用的 View 层,并且提供了额外的模块与 Spring MVC 集成,从而可以替代 JSP。
1、Thymeleaf 模板页面
1.1、加载静态资源
1.2、数据的访问和使用
Thymeleaf 页面中可以使用 Spring 的 Model.addAttribute() 方法添加到视图层的数据,例如:@RequestMapping ( "/" )
public String index ( Model model) {
Person single = new Person ( "aa" , 11 ) ;
List< Person> people = 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 页面:
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" >
访问model
</ h3>
</ div>
< div class = " panel-body" >
< span th: text= " ${singlePerson.name}" > </ span>
</ div>
</ div>
< div th: if= " ${not #lists.isEmpty(people)}" >
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" > 列表</ h3>
</ div>
< div class = " panel-body" >
< ul class = " list-group" >
< li class = " list-group-item" th: each= " person:${people}" >
< span th: text= " ${person.name}" > </ span>
< span th: text= " ${person.age}" > </ span>
< button class = " 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 中的数据。
用**[[${}]]** 格式来访问值。
二、Thymeleaf+Spring Boot 简单项目
1、准备 Thymeleaf 依赖
2、JavaBean
编辑一个 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;
}
}
3、准备视图页面
建立一个 Thymeleaf 页面作为视图层,具体代码如下:<!DOCTYPE html>
< html xmlns: th= " http://www.thymeleaf.org" lang = " en" >
< head>
< meta content = " text/html;charset=UTF-8" />
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" />
< meta name = " viewport" content = " width=device-width, initial-scale=1" />
< link th: href= " @{bootstrap/css/bootstrap.min.css}" rel = " stylesheet" />
< link th: href= " @{bootstrap/css/bootstrap-theme.min.css}" rel = " stylesheet" />
< title> Thymeleaf</ title>
</ head>
< body>
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" >
访问model
</ h3>
</ div>
< div class = " panel-body" >
< span th: text= " ${singlePerson.name}" > </ span>
</ div>
</ div>
< div th: if= " ${not #lists.isEmpty(people)}" >
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" > 列表</ h3>
</ div>
< div class = " panel-body" >
< ul class = " list-group" >
< li class = " list-group-item" th: each= " person:${people}" >
< span th: text= " ${person.name}" > </ span>
< span th: text= " ${person.age}" > </ span>
< button class = " btn" th: onclick= " ' getName(\'' + ${person.name} + ' \');' " > 获得名字</ button>
</ li>
</ ul>
</ div>
</ div>
</ div>
< script th: src= " @{jquery-1.10.2.min.js}" type = " text/javascript" > </ script>
< script th: src= " @{bootstrap/js/bootstrap.min.js}" > </ script>
< script th: inline= " javascript" >
var single= [ [ ${ singlePerson} ] ] ;
console. log ( single. name+ "/" + single. age)
function getName ( name) {
console. log ( name) ;
}
</ script>
</ body>
</ html>
4、数据准备
这一步主要在入口类中完成:@Controller
@SpringBootApplication
public class Ch523Application {
@RequestMapping ( "/" )
public String index ( Model model) {
Person single = new Person ( "aa" , 11 ) ;
List< Person> people = 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) ;
}
}
5、运行
运行项目,然后用浏览器访问 localhost:8080,页面如下:
上一篇 下一篇
发布了146 篇原创文章 ·
获赞 15 ·
访问量 1万+
转载自 blog.csdn.net/qq_42896653/article/details/104158395