springboot笔记thymeleaf模板和freemarker模板

最新推荐文章于 2024-04-18 06:05:09 发布

licmi

最新推荐文章于 2024-04-18 06:05:09 发布

阅读量498

点赞数

分类专栏： springboot 文章标签： spring boot

本文链接：https://blog.csdn.net/licmi/article/details/110236747

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

SpringBoot之Thymeleaf模板和Freemarker模板

前言
Thymeleaf模板
- Thymeleaf 是个什么？
- 案例
Freemarker模板
- 什么是 FreeMarker?
- 案例

前言

上一篇博客创建项目时所勾选Thymeleaf和Apache Freemarker只是简单的跳过，这篇博客就来详细解释一下这两个模板
注：基于上篇博客项目
链接：SpringBoot入门.

Thymeleaf模板

Thymeleaf 是个什么？

简单说， Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎，类似JSP、Velocity、FreeMarker 等模板引擎它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比，它有如下三个极吸引人的特点：

1.Thymeleaf 在有网络和无网络的环境下皆可运行，而且完全不需启动WEB应用，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

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

相关pom依赖

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

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

spring:
  thymeleaf:
    cache: false

正式环境还是要将缓存开启的

案例

项目结构
在这里插入图片描述

application.yml

server:
  servlet:
    context-path: /
  port: 80

user:
  uname: zs
  pwd: 123456
  age: 22
  sex: nan
  addr: aaa

spring:
  thymeleaf:
    cache: false

User.java

package com.liuchunming.springboot01.entity;

import lombok.Data;

/**
 * @author liuchunming
 * @site www.liuchunming.com
 * @company xxx公司
 * @create  2020-11-27 9:48
 */
@Data
public class User {
    private  Integer uid;
    private String uname;
    private String pwd;

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

    public User() {
    }
}

UserController.java

package com.liuchunming.springboot01.controller;

import com.liuchunming.springboot01.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

/**
 * @author liuchunming
 * @site www.liuchunming.com
 * @company xxx公司
 * @create  2020-11-27 9:49
 */
@Controller
@RequestMapping("/thymeleaf")
public class UserController {

    @RequestMapping("/list")
    public  String hello(HttpServletRequest req){
        /*
        * 1、获取单个值
        * 2、能够html页面进行遍历展示
        * 3、如何在html界面转义html代码块
        * */
        req.setAttribute("msg","传输单个数据");
        List<User> userList =new ArrayList<>();
        userList.add(new User(1,"zs","123"));
        userList.add(new User(2,"ls","234"));
        userList.add(new User(3,"ww","456"));
        req.setAttribute("userList",userList);
        req.setAttribute("htmlStr","<span style='color:red'>转义html代码块</span>");
        return "list";
    }
}

list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf模板知识点介绍</title>
</head>
<body>
<strong>获取单个字符串</strong>
<div th:text="${msg}"></div>
<strong>如何遍历</strong>
<table width="60%" border="1">
    <tr>
        <td>id</td>
        <td>用户名</td>
        <td>密码</td>
    </tr>
    <tr th:each="u : ${userList}">
        <td th:text="${u.uid}"></td>
        <td th:text="${u.uname}"></td>
        <td th:text="${u.pwd}"></td>
    </tr>
</table>
<strong>如何转义html代码</strong>
<div th:utext="${htmlStr}"></div>

<!--<div th:include="common.html"></div>-->
<!--选中性包含-->
<div th:replace="common :: h2"></div>
</body>
</html>

页面显示
在这里插入图片描述

Freemarker模板

什么是 FreeMarker?

FreeMarker 是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

模板编写为FreeMarker Template Language (FTL)。它是简单的，专用的语言，不是像PHP那样成熟的编程语言。那就意味着要准备数据在真实编程语言中来显示，比如数据库查询和业务运算，之后模板显示已经准备好的数据。在模板中，你可以专注于如何展现数据，而在模板之外可以专注于要展示什么数据。
在这里插入图片描述
这种方式通常被称为 MVC (模型视图控制器) 模式，对于动态网页来说，是一种特别流行的模式。它帮助从开发人员(Java 程序员)中分离出网页设计师(HTML设计师)。设计师无需面对模板中的复杂逻辑，在没有程序员来修改或重新编译代码时，也可以修改页面的样式。

而FreeMarker最初的设计，是被用来在MVC模式的Web开发框架中生成HTML页面的，它没有被绑定到 Servlet或HTML或任意Web相关的东西上。它也可以用于非Web应用环境中。

FreeMarker 是免费的，基于Apache许可证2.0版本发布。

如果你发现任何错误 (包括语法错误, 错别字, 排版错误) 或者是在文档中找到误导或混淆，或有其他建议，请联系原作者! Email: ddekany at users.sourceforge.net

文档翻译的任何问题（包括语法错误，错别字）或中文技术交流，可以联系译者：nanlei1987 at gmail.com，或在FreeMarker的Github上Fork一份，修改之后提交Pull Request。我们共同研究，共同进步。

英文版文档的作者(也是FreeMarker项目的维护者)是匈牙利人，其母语非英语，那么在这种情况下，翻译过程难免会有错误存在，译者结合自身多年对FreeMarker的实践力争精准，译文力求信达雅。但因个人才疏学浅，水平有限，恳请广大读者批评指正。最好的方式就是使用Github了

手册的更新根据原作者更新，大家的反馈随时进行。但只在有阶段性成果时才会提交发布修正版本。

本翻译是免费的，您可以自由下载和传播，但不可用于任何商业行为。文档版权归译者本人所有，原版归FreeMarker项目组所有，您可以引用其中的描述，但必须指明出处。如需用于商业行为，您必须和原作者取得联系。

案例

导入pom依赖

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

<!--可以不加，但是做项目的时候可能会用-->
 <resources>
            <!--解决mybatis-generator-maven-plugin运行时没有将XxxMapper.xml文件放入target文件夹的问题-->
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
            <!--freemarker模板也读取需要注释标红地方-->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <!--<include>*.properties</include>-->
                    <!--<include>*.xml</include>-->
                    <!--<include>*.yml</include>-->
                </includes>
            </resource>
        </resources>

application.yml

server:
  servlet:
    context-path: /
  port: 80

user:
  uname: zs
  pwd: 123456
  age: 22
  sex: nan
  addr: aaa

spring:
  thymeleaf:
    cache: false
  freemarker:
    # 设置模板后缀名
    suffix: .ftl
    # 设置文档类型
    content-type: text/html
    # 设置页面编码格式
    charset: UTF-8
    # 设置页面缓存
    cache: false
    # 设置ftl文件路径，默认是/templates，为演示效果添加role
    template-loader-path: classpath:/templates/freemarker
    mvc:
      static-path-pattern: /static/**

Role.java

package com.liuchunming.springboot01.entity;

import lombok.Data;

/**
 * @author liuchunming
 * @site www.liuchunming.com
 * @company xxx公司
 * @create  2020-11-27 16:05
 */
@Data
public class Role {
    private Integer rid;
    private String roleName;
    private String desc;

    public Role(){

    }
    public Role(Integer rid, String roleName, String desc) {
        this.rid = rid;
        this.roleName = roleName;
        this.desc = desc;
    }
}

RoleController

package com.liuchunming.springboot01.controller;

import com.liuchunming.springboot01.entity.Role;
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 liuchunming
 * @site www.liuchunming.com
 * @company xxx公司
 * @create  2020-11-27 16:04
 */

@Controller
@RequestMapping("/freemarker")
public class RoleController {
    @RequestMapping("/role/list")
    public ModelAndView roleList(){
        ModelAndView mav = new ModelAndView();
        mav.setViewName("/list");

        mav.addObject("name",null);
        mav.addObject("sex","gay");
        List list = new ArrayList();
        list.add(new Role(1,"老师","教书育人"));
        list.add(new Role(2,"学生","知识改变命运"));
        mav.addObject("roles",list);

        return mav;
    }

    @RequestMapping("toLogin")
    public String toLogin(){
        return "login";
    }
}

将html后缀修改成ftl，如果手动修改每写一个html都要修改一次。添加…ftl文件
打开Settings——》Editor——》File and Code Templates
在这里插入图片描述

list.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</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>
        <td>描述</td>
    </tr>
    </thead>
    <tbody>
    <#list roles as role>
    <tr>
        <td>${role.rid}</td>
        <td>${role.roleName}</td>
        <td>${role.desc}</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>
sss
${ctx1}和${ctx2}
sss
</body>
</html>

foot.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
底部页面

</body>
</html>

commont.ftl

<div th:fragment="h1">
    包含公共模块一
</div>
<div th:fragment="h2">
    包含公共模块二
</div>
<div th:fragment="h3">
    包含公共模块三
</div>

页面显示
在这里插入图片描述

licmi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录