SpringBoot系列Spring-Boot使用模板引擎Thymeleaf

29次阅读

共计 1731 个字符,预计需要花费 5 分钟才能阅读完成。

一、Java 模板引擎

模板引擎(这里特指用于 Web 开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的 HTML 文档。

在 java 中,主要的模板引擎有 JSP、Thymeleaf、FreeMarker、
Velocity 等。

虽然随着前后端分离的崛起和流行,模板引擎已遭受到冷落,但不少旧项目依然使用 java 的模板引擎渲染界面,而偶尔自己写一些练手项目,使用模板引擎也比起前后端分离要来的快速。

本系列会分别讲解 SpringBoot 怎么集成 JSP、Thymeleaf 和 FreeMarker,至于 Velocity,高版本的 SpringBoot 已经不支持 Velocity 了,这里也就不进行讲解了。

而这一篇,主要讲解 Spring Boot 如何集成 Thymeleaf。

一、Spring Boot 集成 Thymeleaf

首先我们要引入依赖,除了核心的 web 依赖外,只需引入 thymeleaf 的 statrer 即可。

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

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

然后就是配置文件了。spring.thymeleaf 下配置视图文件目录 prefix 以及文件后缀 suffix,如果是本地开发,cache 可以设置为 false 关闭缓存,避免修改文件后需要重新启动服务。

server:
  port: 10900

spring:
  profiles:
    active: dev
  thymeleaf:
    prefix: classpath:/templates/
    check-template-location: true #是否检查模板位置是否存在
    suffix: .html
    encoding: utf-8 #模板编码
    servlet:
      content-type: text/html
    mode: HTML5
    cache: false #禁用缓存,本地开发设置为 false,避免修改后重启服务器 

然后 resoucres 目录下新建 templates 目录,分别新建了 hello.html 和 mv.html 文件。

<h3>hello thymeleaf</h3>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <h3>mv thymeleaf</h3>
    <span>I'm <span th:text="${name}"></span> from mv method</span>
</html>

这里主要讲解如何集成 Thymeleaf,不对 Thymeleaf 语法做过多的讲解,所以仅仅提供了两个简单的 html 文件作为演示。

接着再创建 Controller 类路由页面,该类十分简单,跳转 hello 页面,以及携带 name=imyang 跳转 mv 页面。

@Controller
@RequestMapping("index")
public class IndexApi {@RequestMapping("/hello")
    public String hello(){return "hello";}

    @RequestMapping("/mv")
    public ModelAndView mv(){ModelAndView mv = new ModelAndView("mv");
        mv.addObject("name","yanger");
        return mv;
    }

}

启动项目,分别访问 http://localhost:10900/index/hello 和 http://localhost:10900/index/mv,可以看到已经可以展示页面信息了。

源码地址:https://github.com/imyanger/s…

正文完
 0