Spring Boot入门教程3-2、使用Spring Boot+Thymeleaf模板引擎开发Web应用

KenTalk

发布于 2018-09-11 11:45:25

8510

发布于 2018-09-11 11:45:25

文章被收录于专栏：Ken的杂谈Ken的杂谈

一、前言

为什么要使用模板引擎？

在最早的Java Web应用中，最为广泛使用的就是JSP，但是JSP已经是陈旧的技术了，ken.io觉得JSP主要有三个问题：

1、视图代码不能与Java代码完全分离，如果再JSP页面写Java代码维护成本高

2、无法实现页面继承工程，实现模板页的方式蹩脚

3、由于一些已知问题，Spring Boot官方不建议，比如：Spring Boot+JSP打成jar包会有问题

所以，ken.io选择了较为流行的Thymeleaf，本文我们介绍Spring Boot+Thymeleaf的基本使用

本项目构建基于：https://cloud.tencent.com/developer/article/1334223

二、操作步骤

引入Thymeleaf

在pom.xml文件的dependencies引入

  <dependencies>

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>


  </dependencies>

创建模板

1、创建模板文件夹

在resources文件夹下新建templates文件夹，作为模板根目录

完整路径：src/main/resources/templates

为什么文件夹名字一定要叫templates？

答：Spring Boot就是这么约定的，如果有需要，可以通过配置application.yml修改

spring:
  thymeleaf:
    prefix: classpath:/templates/

2、在templates新建welcome.html文件

html就是Thymeleaf模板文件后缀，可以通过配置application.yml修改

<!DOCTYPE html>

<html>

<head>
    <title>Welcome - ken.io</title>
</head>

<body>

</body>

</html>

Thymeleaf的语法跟Freemarker差异比较大，因为Thymeleaf所有的语法都依赖于HTML标签。

<p th:text="${message}"></p>

表示将controller返回的message对象以文本形式输出到标签内

相对来说，ken.io更喜欢Fremarker的语法

增加Welcome访问入口

在HomeController中增加函数

    @RequestMapping("/")
    @ResponseBody
    String index() {
        return "Hello World!";
    }

    @RequestMapping("/welcome")
    ModelAndView welcome(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("welcome");
        modelAndView.addObject("message","Welcome to Spring Boot & Thymeleaf");
        return modelAndView;
    }

对比index函数，主要发生了以下几个变化：

1、去掉@ResponseBody注解，如果使用该注解，返回结果会直接输出，而不是使用模板引擎渲染

2、使用ModelAndView对象，指定视图名&添加视图对象

对于setViewName函数，如果视图的路径是templates/home/index.ftl

那么使用方式应该是：

modelAndView.setViewName("home/index");

启动

启动项目&访问

访问：http://localhost:8080/welcome：

Welcome to Spring Boot & Thymeleaf

三、备注

Thymeleaf 常用配置

配置项	说明
spring.thymeleaf.prefix	模板根目录，例如：classpath:/templates/
spring.thymeleaf.cache	是否启用缓存(true/false)
spring.thymeleaf.encoding	字符编码
spring.thymeleaf.content-type	内容类型，例如：text/html
spring.thymeleaf.suffix	模板文件后缀，默认为.html