springboot模板引擎（thymeleaf、Freemarker）

最新推荐文章于 2025-03-08 14:54:14 发布

玉姬

最新推荐文章于 2025-03-08 14:54:14 发布

阅读量193

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45243895/article/details/103737619

版权

本文介绍了SpringBoot中两种常用的模板引擎——Thymeleaf和Freemarker。Thymeleaf以其HTML原生语法受到青睐，而在企业开发中，通常使用.yml配置文件。文章详细展示了Thymeleaf的使用，包括导入依赖、关闭缓存、取值等，并探讨了Freemarker的学习资源、配置以及各种逻辑操作的实现，如取值、条件、循环和包含。同时，文章还提供了Thymeleaf包含公共区域的两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

thymeleaf模板

关于Thymeleaf的优点，我只说一条：它就是html页面。
下面直接上代码
导入相关pom依赖

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

Spring Boot官方文档建议在开发时将缓存关闭，那就在application.properties文件中加入下面这行

spring.thymeleaf.cache=false

在这里插入图片描述
正式环境还是要将缓存开启的
补充：在企业开发中一般不采用默认的.properties文件，一般采用.yml文件,原因是yml文件所展现的树形结构展示。

thymeleaf模板引擎的应用语法
UserController

package com.zxp.springboot1.controller;



import com.zxp.springboot1.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;


import java.util.ArrayList;
import java.util.List;

/**
 * @author笑笑
 * @site www.xiaoxiao.com
 * @company
 * @create 2019-11-30 16:29
 *
 * 介绍thymeleaf模板引擎的应用
 * 连接到HTML页面
 * 介绍三个常用的
 * 字符串
 * 集合
 *前台HTML代码
 */
@Controller
@RequestMapping("/thymeleaf")
public class UserController {

    @RequestMapping("/list")
    public  ModelAndView list(){
//        System.out.println("list...");
        ModelAndView mv=new ModelAndView();
        mv.addObject("title","员工列表");
//        造数据
        List<User> list=new ArrayList<>();
        list.add(new User(""+1,"zs",123+""));
        list.add(new User(""+1,"ls",456+""));
        list.add(new User(""+1,"ww",789+""));
//        返数据到页面
        mv.addObject("users",list);
//        为啥需要讲解HTML转义  通过th:utext渲染，在后台就可以让前台有效果
        mv.addObject("msg","<span style='color:red'>优秀员工zs</span>");

        mv.setViewName("list");
        return mv;
    }
}

User

package com.zxp.springboot1.entity;

import lombok.Data;

/**
 * @author笑笑
 * @site www.xiaoxiao.com
 * @company
 * @create 2019-12-27 20:14
 *
 * 模拟一些数据
 */
@Data
public class User {
    private  String uid;
    private  String uname;
    private  String pwd;

    public User(String uid, String uname, String pwd) {
        this.uid = uid;
        this.uname = uname;
        this.pwd = pwd;
    }

    public User() {
    }
}

HTML:el表达式已经不可行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf知识点</title>
</head>
<body>
<!--此时el表达式已经不可行-->
${title}
</body>
</html>

在这里插入图片描述
thymeleaf如何得到值

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf知识点</title>
</head>
<body>
<!--此时el表达式已经不可行-->
<!--${title}-->
<!--如何能得到值-->

<table border="1" cellpadding="0" cellspacing="0" width="600px" >
    <caption th:text="${title}"></caption><!--传三个字符串-->
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>密码</th>
    </tr>
    <tr th:each="u : ${users}"><!--传集合 遍历-->
        <td th:text="${u.uid}"></td>
        <td th:text="${u.uname}"></td>
        <td th:text="${u.pwd}"></td>
    </tr>
</table>
<p th:utext="${msg}"></p><!--传前台HTML代码-->
</body>
</html>

在这里插入图片描述

提示标签

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

Freemarker模板

Freemarker学习网站
导入pom依赖

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

application.yml文件的默认配置

server:
  port: 80
  servlet:
#    Freemarker设置局部变量(assign)/全局变量(global)  获取的是项目名
    context-path: /xiaoxiao
    #    去除浏览器缓存  默认为true
spring:
  thymeleaf:
    cache: false
  freemarker:
    # 设置模板后缀名
    suffix: .ftl
    # 设置文档类型
    content-type: text/html
    # 设置页面编码格式
    charset: UTF-8
    # 设置页面缓存
    cache: false
    # 设置ftl文件路径，默认是/templates，为演示效果添加role
    template-loader-path: classpath:/templates/role
  mvc:
        static-path-pattern: /static/**

补充
在这里插入图片描述
对其后

测试application.yml文件的默认配置
list.ftl

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Freemarker知识点</title>
</head>
<body>
Freemarker知识点
</body>
</html>

RloeController

package com.zxp.springboot1.controller;


import com.zxp.springboot1.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

/**
 * @author笑笑
 * @site www.xiaoxiao.com
 * @company
 * @create 2019-11-30 16:29
 *
 *
 */
@Controller
@RequestMapping("/freemarker")
public class RloeController {

    @RequestMapping("/list")
    public  ModelAndView list(){
        System.out.println("list...");
        ModelAndView mv=new ModelAndView();

        mv.setViewName("list");
        return mv;
    }
}

在这里插入图片描述
讲解Freemarker
补充
Freemarker .ftl文件原来是没有的

步骤

或者自己手动修改后缀名
对应前台代码
list.ftl

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Freemarker知识点</title>
</head>
<body>
<h2>如何取值</h2>
<h3>提供默认值</h3>
welcome 【${name!'未知'}】 to freemarker!

<h3>exists用在逻辑判断</h3>
<#if name?exists>
    ${name}
</#if>

<h2>条件</h2>
<#if sex=='girl'>
		女
<#elseif sex=='boy'>
		男
<#else>
		保密
</#if>

<h2>循环</h2>
<table border="1px" width="600px">
    <thead>
    <tr>
        <td>ID</td>
        <td>角色名</td>
    </tr>
    </thead>
    <tbody>
    <#list roles as role>
    <tr>
        <td>${role.rid}</td>
        <td>${role.rname}</td>
    </tr>
    </#list>
    </tbody>
</table>

<h2>include 包含</h2>
<#include 'foot.ftl'>

<h2>设置局部变量(assign)/全局变量(global)</h2>
<#--获取的是项目名-->
 <#assign ctx1>
     ${springMacroRequestContext.contextPath}
 </#assign>

<#global ctx2>
    ${springMacroRequestContext.contextPath}
</#global>

${ctx1}和${ctx2}
</body>
</html>

foot.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部版权信息</title>
</head>
<body>
备案号：湘ICP备xxxxxxx号

Copyright © 2018-2019 xiaoxiap 版权所有
</body>
</html>

对应的后台代码
Role

package com.zxp.springboot1.entity;

import lombok.Data;

/**
 * @author笑笑
 * @site www.xiaoxiao.com
 * @company
 * @create 2019-12-27 21:36
 */
@Data
public class Role {
    private  String rid;
    private  String rname;

    public Role(String rid, String rname) {
        this.rid = rid;
        this.rname = rname;
    }

    public Role() {
    }
}

RloeController

package com.zxp.springboot1.controller;


import com.zxp.springboot1.entity.Role;
import com.zxp.springboot1.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

/**
 * @author笑笑
 * @site www.xiaoxiao.com
 * @company
 * @create 2019-11-30 16:29
 *
 *讲解Freemarker知识点
 *如何取值
 *提供默认值
 *exists用在逻辑判断
 *条件
 *循环
 *include 包含
 *设置局部变量(assign)/全局变量(global)
 */
@Controller
@RequestMapping("/freemarker")
public class RloeController {

    @RequestMapping("/list")
    public  ModelAndView list(){
        System.out.println("list...");
        ModelAndView mv=new ModelAndView();

        mv.setViewName("list");
//        如何取值
        mv.addObject("name","zs");
//        条件 exists用在逻辑判断
        mv.addObject("sex","gay");
//        循环
        List<Role> list=new ArrayList<>();
        list.add(new Role("1","超管"));
        list.add(new Role("1","财务"));
        list.add(new Role("1","仓管"));

        mv.addObject("roles",list);
        return mv;
    }
}

运行结果
=使用功能成功运行
在这里插入图片描述
取值、提供默认值逻辑
前台

后台

无法得到取值
在这里插入图片描述
条件逻辑
前台

后台
在这里插入图片描述
无法得到取值平且没有默认值

循环逻辑
前台

后台

无法得到循环

包含逻辑
前台

后台

无法得到包含的页面直接报错
设置局部变量(assign)/全局变量(global)逻辑
前台

后台

没有得到项目名（设置局部变量(assign)/全局变量(global)
在这里插入图片描述

补充thymeleaf包含公共区域的方案
比较方便好用

代码演示
创建common.html

<div th:fragment="h1">公共区域1</div><!--fragment碎片-->
<div th:fragment="h2">公共区域2</div>
<div th:fragment="h3">公共区域3</div>

list.html

<!--thymeleaf包含公共区域的方案 两种方案-->
<!--一种包全部-->
<div th:include="common.html"></div>
<!--第二章自主选择需要包含的区域-->
<div th:replace="common :: h2"></div>
<div th:replace="common :: h3"></div>

结果演示
方案一
在这里插入图片描述
方案二