三、SpringBoot整合Thymeleaf

最新推荐文章于 2024-07-27 21:41:27 发布

de1980

最新推荐文章于 2024-07-27 21:41:27 发布

阅读量53

点赞数

文章标签：测试 java javascript ViewUI

原文链接：http://www.cnblogs.com/jiabaoo/p/10759756.html

版权

三、SpringBoot整合Thymeleaf

As well as REST web services, you can also use Spring MVC to serve dynamic HTML content. Spring MVC supports a variety of templating technologies, including Thymeleaf, FreeMarker, and JSPs. Also, many other templating engines include their own Spring MVC integrations.

Spring Boot includes auto-configuration support for the following templating engines:

* FreeMarker

* Groovy

* Thymeleaf

* Mustache

If possible, JSPs should be avoided. There are several known limitations when using them with embedded servlet containers

When you use one of these templating engines with the default configuration, your templates are picked up automatically from src/main/resources/templates.

由上述内容可知,我们可以通过SpringMVC来提供动态内容,SpringMVC支持各种模板引擎,比如Thymeleaf,FreeMarker以及JSP等等,SpringBoot对这些模板引擎也有很好的集成

但是,如果可能,我们应该尽量避免在SpringBoot应用程序中使用Jsp,因为它们和一些嵌入式Servlet容器一起使用时,会出现问题...

1.简单整合

①,在pom.xml中添加Thymeleaf集成

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 4     <modelVersion>4.0.0</modelVersion>
 5     <parent>
 6         <groupId>org.springframework.boot</groupId>
 7         <artifactId>spring-boot-starter-parent</artifactId>
 8         <version>2.1.4.RELEASE</version>
 9         <relativePath/> <!-- lookup parent from repository -->
10     </parent>
11     <groupId>com.hnnz</groupId>
12     <artifactId>demo</artifactId>
13     <version>0.0.1-SNAPSHOT</version>
14     <name>SpringBootDemo</name>
15     <description>Demo project for Spring Boot</description>
16  
17  
18     <properties>
19         <java.version>1.8</java.version>
20     </properties>
21  
22  
23     <dependencies>
24         <dependency>
25             <groupId>org.springframework.boot</groupId>
26             <artifactId>spring-boot-starter-web</artifactId>
27         </dependency>
28  
29  
30         <dependency>
31             <groupId>org.springframework.boot</groupId>
32             <artifactId>spring-boot-starter-test</artifactId>
33             <scope>test</scope>
34         </dependency>
35  
36  
37         <dependency>
38             <groupId>org.springframework.boot</groupId>
39             <artifactId>spring-boot-starter-thymeleaf</artifactId>
40         </dependency>
41  
42  
43         <!-- Compile -->
44         <dependency>
45             <groupId>javax.servlet</groupId>
46             <artifactId>jstl</artifactId>
47         </dependency>
48         <!-- Provided -->
49         <dependency>
50             <groupId>org.springframework.boot</groupId>
51             <artifactId>spring-boot-starter-tomcat</artifactId>
52             <scope>provided</scope>
53         </dependency>
54         <dependency>
55             <groupId>org.apache.tomcat.embed</groupId>
56             <artifactId>tomcat-embed-jasper</artifactId>
57             <scope>provided</scope>
58         </dependency>
59  
60  
61     </dependencies>
62  
63  
64     <build>
65         <plugins>
66             <plugin>
67                 <groupId>org.springframework.boot</groupId>
68                 <artifactId>spring-boot-maven-plugin</artifactId>
69             </plugin>
70         </plugins>
71     </build>
72  
73  
74 </project>

如上:

红色标注部分是SpringBoot集成Thymeleaf
蓝色划去部分是我们上一章整合JSP的内容,这里可以忽略或者删除

②,修改application.properties(删去application.properties中原有的配置JSP的内容)

1 spring.mvc.view.prefix: /resources/templates/
2 spring.mvc.view.suffix: .html

其实还是修改前缀后缀,但是这里我们完全可以不写,因为本章最开始的英文文档已经说过:Spring会默认的去/resources/templates/ 下寻找HTML模板

③,在/resources/templates/下新建index.html,内容如下

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8    Hello,Thymeleaf!
 9 </body>
10 </html>

绿色部分表示声明当前文件是 thymeleaf, 里面可以用th开头的属性

HelloController内容不变,不过,现在我们访问/index,返回的视图将会是一个html页面

HelloController.java:

 1 package com.hnnz.demo.controller;
 2  
 3  
 4 import org.springframework.stereotype.Controller;
 5 import org.springframework.web.bind.annotation.RequestMapping;
 6 import org.springframework.web.bind.annotation.ResponseBody;
 7 import org.springframework.web.bind.annotation.RestController;
 8  
 9  
10 @Controller
11 public class HelloController {
12  
13  
14     @RequestMapping("/hello")
15     @ResponseBody
16     public String hello(){
17         return "Hello,Spring Boot!";
18     }
19  
20  
21     @RequestMapping("/index")
22     public String index() {
23         return "index";
24     }
25  
26  
27 }

④,访问 http://localhost:8080/index 浏览器返回的视图如下

2.参数传递

Thymeleaf的参数传递依靠ognl表达式完成(类似于EL表达式),其用法如下

①,修改HelloController

 1 package com.hnnz.demo.controller;
 2  
 3  
 4 import org.springframework.stereotype.Controller;
 5 import org.springframework.ui.ModelMap;
 6 import org.springframework.web.bind.annotation.RequestMapping;
 7 import org.springframework.web.bind.annotation.ResponseBody;
 8 import org.springframework.web.bind.annotation.RestController;
 9  
10  
11 @Controller
12 public class HelloController {
13  
14  
15     private String hello = "Hello,Thymeleaf!";
16  
17  
18     @RequestMapping("/hello")
19     @ResponseBody
20     public String hello(){
21         return "Hello,Spring Boot!";
22     }
23  
24  
25     @RequestMapping("/index")
26     public String index(ModelMap modelMap) {
27         modelMap.addAttribute("hello",hello);
28         return "index";
29     }
30  
31  
32 }

我们要做的就是将这个类里面的私有属性hello传递到html文件中
ModelMap实质上就是一个Map集合,我们可以通过addAttribute(String,Object)方法添加值

②,修改index.html

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p th:text="${hello}"></p>
 9 </body>
10 </html>

红色标注部分,就表示将hello取出来放进<p>标签里

③,访问 http://localhost:8080/index 浏览器返回的视图如下

3.模板其它用法

Thymeleaf也有其他用法,比如判断,遍历等等,这里给出一个表格,不再赘述,你也可以参阅官方文档了解它的用法,地址: https://www.thymeleaf.org/documentation.html

关键字	功能介绍	案例
th:id	替换id	<input th:id="'xxx' + ${collect.id}"/>
th:text	文本替换	<p th:text="${collect.description}">description</p>
th:utext	支持html的文本替换	<p th:utext="${htmlcontent}">conten</p>
th:object	替换对象	<div th:object="${session.user}">
th:value	属性赋值	<input th:value="${user.name}" />
th:with	变量赋值运算	<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style	设置样式	th:
th:onclick	点击事件	th:οnclick="'getCollect()'"
th:each	遍历	tr th:each="user,userStat:${users}">
th:if	判断条件	<a th:if="${userId == collect.userId}" >
th:unless	和th:if判断相反	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	链接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路选择配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<p th:case="'admin'">User is an administrator</p>
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	<div th:fragment="alert">
th:include	布局标签，替换内容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected选择框选中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	图片类地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:inline="javascript">
th:action	表单提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:remove	删除某个属性	<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:attr	设置标签属性，多个属性可以用逗号分隔	比如th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。

转载于:https://www.cnblogs.com/jiabaoo/p/10759756.html

de1980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三、SpringBoot整合Thymeleaf

三、SpringBoot整合ThymeleafAs well as REST web services, you can also use Spring MVC to serve dynamic HTML content. Spring MVC supports a variety of templating technologies, including Thymele...
复制链接

扫一扫