3.SpringBoot整合Thymeleaf模板

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、前言

SrpingBoot支持如 JSP 、 Thymeleaf 、 FreeMarker 、 Mustache 、 Velocity 等各种模板引擎，同时还为开发者提供了自定义模板扩展的支持。

使用嵌入式Servlet容器时，请避免使用JSP，因为使用JSP打包后会存在一些限制。

在 SpringBoot 使用上述模板，默认从 src/main/resources/templates 下加载。

二、thymeleaf介绍

Thymeleaf 是现代化服务器端的Java模板引擎，不同与其它几种模板的是 Thymeleaf 的语法更加接近HTML，并且具有很高的扩展性。详细资料可以浏览官网。

特点

支持无网络环境下运行，由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。所以它可以让前端小姐姐在浏览器中查看页面的静态效果，又可以让程序员小哥哥在服务端查看带数据的动态页面效果。
开箱即用，为 Spring 提供方言，可直接套用模板实现 JSTL、 OGNL 表达式效果，避免每天因套用模板而修改 JSTL、 OGNL 标签的困扰。同时开发人员可以扩展自定义的方言。
SpringBoot 官方推荐模板，提供了可选集成模块( spring-boot-starter-thymeleaf )，可以快速的实现表单绑定、属性编辑器、国际化等功能。

三、使用

3.1 首先要在 `pom.xml` 中添加对 `thymeleaf` 模板依赖

 <dependency>

     <groupId>org.springframework.boot</groupId>

     <artifactId>spring-boot-starter-thymeleaf</artifactId>

 </dependency>

 <dependency>

   <groupId>org.springframework.boot</groupId>

   <artifactId>spring-boot-starter-web</artifactId>

 </dependency>

3.2 添加完 `thymeleaf` 模板依赖的pom.xml文件内容如下

 <?xml version="1.0" encoding="UTF-8"?>

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

     <modelVersion>4.0.0</modelVersion>

     <groupId>cn.kgc</groupId>

     <artifactId>springboot1</artifactId>

     <version>0.0.1-SNAPSHOT</version>

     <packaging>jar</packaging>

     <name>springboot1</name>

     <description>我用的第一个maven工程</description>

     <!--版本采用的是最新的 2.0.1.RELEASE

     TODO 开发中请记得版本一定要选择 RELEASE ，因为是稳定版本且BUG少-->

     <parent>

         <groupId>org.springframework.boot</groupId>

         <artifactId>spring-boot-starter-parent</artifactId>

         <version>2.0.5.RELEASE</version>

         <relativePath/> <!-- lookup parent from repository -->

     </parent>

     <properties>

         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

         <java.version>1.8</java.version>

     </properties>

     <dependencies>

         <!--模块(spring-boot-starter-thymeleaf)，可以快速的实现表单绑定、属性编辑器、国际化等功能。-->

         <dependency>

             <groupId>org.springframework.boot</groupId>

             <artifactId>spring-boot-starter-thymeleaf</artifactId>

         </dependency>

         <!-- 默认就内嵌了Tomcat 容器，如需要更换容器也极其简单-->

         <dependency>

             <groupId>org.springframework.boot</groupId>

             <artifactId>spring-boot-starter-web</artifactId>

         </dependency>

         <!-- 测试包,当我们使用 mvn package 的时候该包并不会被打入,因为它的生命周期只在 test 之内-->

         <dependency>

             <groupId>org.springframework.boot</groupId>

             <artifactId>spring-boot-starter-test</artifactId>

             <scope>test</scope>

         </dependency>

         <!--该依赖可以不添加，但是在 IDEA 和 STS 中不会有属性提示，

         没有提示的配置就跟你用记事本写代码一样苦逼，出个问题弄哭你去-->

         <dependency>

             <groupId>org.springframework.boot</groupId>

             <artifactId>spring-boot-configuration-processor</artifactId>

             <optional>true</optional>

         </dependency>

     </dependencies>

     <build>

         <plugins>

             <!-- 编译插件 -->

             <plugin>

                 <groupId>org.springframework.boot</groupId>

                 <artifactId>spring-boot-maven-plugin</artifactId>

             </plugin>

         </plugins>

     </build>

 </project>

3.3 创建ThymeleafController.java

创建一个 ThymeleafController 用来映射HTTP请求与页面的跳转，下面写了两种方式，第一种比较直观和优雅，第二种相对普遍且代码较少，且迎合从 struts2 跳坑的朋友们…

Spring4.3以后为简化@RequestMapping(method = RequestMethod.XXX)的写法，故而将其做了一层包装，也就是现在的 GetMapping 、 PostMapping 、 PutMapping 、 DeleteMapping 、 PatchMapping

 package cn.kgc.controller;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.GetMapping;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.servlet.ModelAndView;

 import javax.servlet.http.HttpServletRequest;

 /**

  * ThymeleafController用来映射HTTP请求与页面的跳转

  */

 @Controller

 @RequestMapping

 public class ThymeleafController {

     /**

      * 方法1:返回ModelAndView对象，

      * 将视图名称封装到该对象的viewName属性中

      * 将页面所需要的数据封装到该对象的addObject对象中

      * @return

      */

     @GetMapping("/index.do")

     public ModelAndView index() {

         ModelAndView view = new ModelAndView();

         // 设置跳转的视图 默认映射到 src/main/resources/templates/{viewName}.html

         view.setViewName("index");

         // 设置属性

         view.addObject("title", "我的第一个ThymeleafWEB页面");

         view.addObject("desc", "欢迎进入课工场学习");

         Teacher teacher=new Teacher(1,"Holly","964918306","北大青鸟-南京中博软件学院-课工场");

         view.addObject("teacher", teacher);

         return view;

     }

     @GetMapping("/index1")

     public String index1(HttpServletRequest request) {

         // TODO 与上面的写法不同，但是结果一致。

         // 设置属性

         Teacher teacher=new Teacher(1,"Holly","964918306","北大青鸟-南京中博软件学院-课工场");

         request.setAttribute("teacher", teacher);

         request.setAttribute("title", "我的第一个ThymeleafWEB页面");

         request.setAttribute("desc", "欢迎进入课工场学习");

         // 返回的 index 默认映射到 src/main/resources/templates/xxxx.html

         return "index";

     }

     class Teacher {

         private int tid;

         private String tname;

         private String qq;

         private String address;

         public Teacher() {

         }

         public Teacher(int tid, String tname, String qq, String address) {

             this.tid = tid;

             this.tname = tname;

             this.qq = qq;

             this.address = address;

         }

         public int getTid() {

             return tid;

         }

         public void setTid(int tid) {

             this.tid = tid;

         }

         public String getTname() {

             return tname;

         }

         public void setTname(String tname) {

             this.tname = tname;

         }

         public String getQq() {

             return qq;

         }

         public void setQq(String qq) {

             this.qq = qq;

         }

         public String getAddress() {

             return address;

         }

         public void setAddress(String address) {

             this.address = address;

         }

     }

 }

3.4 创建 `index.html` 的模板文件

在src/main/resources/templates 目录下创建一个名 index.html 的模板文件，可以看到 thymeleaf 是通过在标签中添加额外属性动态绑定数据的

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml"

       xmlns:th="http://www.thymeleaf.org">

 <head>

     <meta charset="UTF-8">

     <!-- 可以看到 thymeleaf 是通过在标签里添加额外属性来绑定动态数据的 -->

     <!--/*@thymesVar id="title" type=""*/-->

     <title th:text="${title}">Title</title>

     <!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->

     <script type="text/javascript" th:src="@{/js/hello.js}"></script>

 </head>

 <body>

 <h1 th:text="${desc}">Hello World</h1>

 <h2>=====作者信息=====</h2>

 <p th:text="${teacher.tid}"></p>

 <p th:text="${teacher.tname}"></p>

 <p th:text="${teacher.qq}"></p>

 <p th:text="${teacher.address}"></p>

 </body>

 </html>