0%

SpringBoot2.x(七)常用Starter介绍和整合模板引擎Freemarker、Thymeleaf

SpringBoot Starter

Starters are a set of convenient dependency descriptors that you can include in your application. You get a one-stop shop for all the Spring and related technologies that you need without having to hunt through sample code and copy-paste loads of dependency descriptors. For example, if you want to get started using Spring and JPA for database access, include the spring-boot-starter-data-jpa dependency in your project.

starter是一个简洁的依赖描述,你可以通过它一步引入相关技术的一系列依赖而不必每次去找这样的一系列依赖复制粘贴到你的项目里。

  • 几个常用的starter
    • spring-boot-starter-activemq
    • spring-boot-starter-aop
    • spring-boot-starter-data-redis
    • spring-boot-starter-freemarker
    • spring-boot-starter-thymeleaf
    • spring-boot-starter-webflux

常见模板引擎和官方推荐

JSP(后端渲染,消耗性能)

Java Server Pages 动态网页技术,由应用服务器中的JSP引擎来编译和执行,再将生成的整个页面返回给客户端

优点

  • 可以写java代码
  • 支持表达式语言(eljstl)、内建函数
  • javaweb官方推荐

缺点

Freemarker

FreeMarker Template Language(FTL) 文件一般保存为 xxx.ftl

  • 严格依赖MVC模式,不依赖Servlet容器(不占用JVM内存)
  • 支持内建函数

Thymeleaf (springboot官方推荐)

  • 轻量级*的模板引擎(负责逻辑业务的不推荐,解析DOM或者XML会占用多的内存)
  • 可以直接在浏览器中打开且正确显示模板页面
  • 直接是html结尾,直接编辑

SpringBoot整合Freemarker

  1. 引入 starter-freemarker依赖
1
2
3
4
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
  1. application.properties中添加SpringBoot整合Freemarker属性配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#是否开启thymeleaf缓存,本地开发为false,生产建议为true
spring.freemarker.cache=false

spring.freemarker.charset=UTF-8
spring.freemarker.allow-request-override=false
spring.freemarker.check-template-location=true

#类型
spring.freemarker.content-type=text/html

spring.freemarker.expose-request-attributes=true
spring.freemarker.expose-session-attributes=true

#模板文件后缀
spring.freemarker.suffix=.ftl
#模板存放路径
spring.freemarker.template-loader-path=classpath:/templates/ftl
  1. templates下新建 ftl文件,文件格式为 html,如 templates/ftl/index.ftl
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello freemarker
</body>
</html>
  1. Controller中返回模板视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
package top.zhenganwen.springbootweb.controller;

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

@Controller
@RequestMapping("freemarker")
public class FreemarkerController {

@RequestMapping("hello")
public String hello() {
return "index";
}
}
  1. 访问 localhost:8080/freemarker/hello

  2. ftl中添加 DataModel

    1. 准备数据,这里以读取配置文件(classpath:resources.properties)为例
    1
    2
    server.name=spirngboot
    server.domain=localhost:8080
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    package top.zhenganwen.springbootweb.properties;

    import lombok.Data;
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.context.annotation.PropertySource;
    import org.springframework.stereotype.Component;

    @Data //lombok插件
    @Component
    @PropertySource("classpath:resource.properties")
    @ConfigurationProperties(prefix = "server")
    public class ServerSetttings {

    //服务器名称
    private String name;
    //接口域名
    private String domain;

    }
    1. action中注入 Model保存数据集
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    package top.zhenganwen.springbootweb.controller;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import top.zhenganwen.springbootweb.properties.ServerSetttings;

    @Controller
    @RequestMapping("freemarker")
    public class FreemarkerController {

    @Autowired
    private ServerSetttings serverSetttings;

    @RequestMapping("hello")
    public String hello(Model model) {
    model.addAttribute("server", serverSetttings);
    return "index";
    }
    }
    1. ftl中将 ModelMap中的数据集渲染到页面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    hello freemarker
    server.name:${server.name}
    server.domain:${server.domain}
    </body>
    </html>

SpringBoot整合Thymeleaf

  1. 引入 starter-thymeleaf
1
2
3
4
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  1. application.properties中添加整合配置,建议注释掉上一节中freemarker的配置
1
2
3
4
5
6
7
8
9
10
11
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
#前缀
spring.thymeleaf.prefix=classpath:/templates/thymeleaf/
#编码
spring.thymeleaf.encoding=UTF-8
#类型
spring.thymeleaf.content-type=text/html
#模板文件名称的后缀
spring.thymeleaf.suffix=.html
  1. 创建模板页面 templates/thymeleaf/index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello thymeleaf
</body>
</html>
  1. 添加 action
1
2
3
4
5
6
7
8
9
10
11
12
13
14
package top.zhenganwen.springbootweb.controller;

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

@Controller
@RequestMapping("thymeleaf")
public class ThymeleafController {

@RequestMapping("hello")
public String hello() {
return "index";
}
}

无法解析视图名的常见原因:SpringBoot是通过 spring.thymeleaf.prefix+视图名+ spring.thymeleaf.suffix来查找文件的,如果你的classpath:/templates/thymeleaf/写成了classpath:/templates/thymeleaf,则查找的文件就变成了 /templates/thymeleafindex.html,自然就找不到了

  1. 添加数据模型

    1. 同样的你可以通过 Model将数据模型填充到视图中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @Controller
    @RequestMapping("freemarker")
    public class FreemarkerController {

    @Autowired
    private ServerSetttings serverSetttings;

    @RequestMapping("hello")
    public String hello(Model model) {
    model.addAttribute("server", serverSetttings);
    return "index";
    }
    }
    1. 通过thymeleaf驱动将数据渲染到视图
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    hello thymeleaf
    <h1>这里没有用Thymeleaf驱动</h1>
    <h1 th:text="${server.name}">这里使用thymeleaf驱动</h1>
    </body>
    </html>
    1. 访问 http://localhost:8080/thymeleaf/hello ,响应结果如下
    1
    2
    3
    hello thymeleaf
    这里没有用Thymeleaf驱动
    spirngboot
  2. 直接访问静态页面

    1. 值得注意的是 thymeleaf模板页面是可以直接访问的(不经过controller)。但这要求你将模板文件的路径添加到springboot默认加载的静态路径中:
    1
    spring.resources.static-locations = classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/

    注意使用英文逗号分隔

    1. 访问 http://localhost:8080/thymeleaf/index.html ,结果如下:
    1
    2
    3
    hello thymeleaf
    这里没有用Thymeleaf驱动
    这里使用thymeleaf驱动

    ​ 可以发现直接访问 thymeleaf模板就会看到模板的原始内容。但因为没有经过controller,所以不会有动态数据渲染。

${}表达式只能写在 th表达式内

thymeleaf快速入门:官方教程

鼓励一下~