SpringBoot系列 - 集成Thymeleaf构建Web应用

三月 08, 2018 本文总阅读量次

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
目前最新版本是Thymeleaf 3，官网地址：http://www.thymeleaf.org

本篇将介绍如何在SpringBoot中集成Thymeleaf构建Web应用。

maven依赖

UTF-8
UTF-8
1.8
3.0.7.RELEASE

2.2.2

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jetty</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

资源目录

Spring Boot默认提供静态资源目录位置需置于classpath下，目录名需符合如下规则：

/static
/public
/resources
/META-INF/resources
举例：我们可以在src/main/resources/目录下创建static，在该位置放置一个图片文件pic.jpg。启动程序后，尝试访问http://localhost:8080/pic.jpg。如能显示图片，配置成功。

SpringBoot的默认模板路径为：src/main/resources/templates

添加页面

这里我在src/main/resources/templates下面添加一个index.html首页，同时引用到一些css、js文件，看看Thymeleaf 3的语法：

<!DOCTYPE html>

首页

页面中几个地方说明一下：

加上这个命名空间后就能在页面中使用Thymeleaf自己的标签了，以th:开头。

连接语法 th:href=”@{/static/css/bootstrap.min.css}”

访问Model中的数据语法 th:text=”${msg}”

这里我在页面里显示的是一个键为msg的消息，需要后台传递过来。

Thymeleaf 3的详细语法规则请参考官网教程

编写Controller

接下来编写控制器类，将URL / 和 /index 都返回index.html页面：

@Controller
public class IndexController {
private static final Logger _logger = LoggerFactory.getLogger(IndexController.class);
/**

 * 主页
 *
 * @param model
 * @return
 */
@RequestMapping({"/", "/index"})
public String index(Model model) {
    model.addAttribute("msg", "welcome you!");
    return "index";
}

}
这里，我再model里面添加了一个属性，key=msg，值为welcome you!。

接下来启动应用后，打开首页看看效果如何。消息正确显示，成功！。

查看评论