https://www.jianshu.com/p/a842e5b5012e

开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言

  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • JSP

上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。

添加Thymeleaf依赖

要想使用Thhymeleaf，首先要在pom.xml文件中单独添加Thymeleaf依赖。

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

Spring Boot默认存放模板页面的路径在src/main/resources/templates或者src/main/view/templates，这个无论是使用什么模板语言都一样，当然默认路径是可以自定义的，不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。

数据显示

在MVC的开发过程中，我们经常需要通过Controller将数据传递到页面中，让页面进行动态展示。

显示普通文本

创建一个Controller对象，在其中进行参数的传递

@Controller

public class ThymeleafController {

    @RequestMapping(value = "show", method = RequestMethod.GET)

    public String show(Model model){

        model.addAttribute("uid","123456789");

        model.addAttribute("name","Jerry");

        return "show";

    }

}

在SpringBoot默认的页面路径下创建show.html文件，内容如下

<!DOCTYPE HTML>

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

<head>

    <title>SpringBoot模版渲染</title>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

</head>

<body>

    <p th:text="'用户ID：' + ${uid}"/>

    <p th:text="'用户名称：' + ${name}"/>

</body>

</html>

可以看到在p标签中有th:text属性，这个就是thymeleaf的语法，它表示显示一个普通的文本信息。

如果我们要显示的信息是存在资源文件中的，同样可以在页面中显示，例如资源文件中定义了内容welcome.msg=欢迎{0}光临！。可以在页面中将其显示

<h2 th:text="#{welcome.msg('admin')}"/>

另外，在th:utext中还能做一些基础的数学运算

<p th:text="'数学计算：1+2=' + (1 + 2)"/>

显示带有样式的普通文本

如果我们想要传递到的页面的信息，它本身是带有CSS样式的，这个时候如何在页面中将携带的样式信息也显示出来？此时我们的控制器方法这样写。

@RequestMapping(value = "showStyle", method = RequestMethod.GET)

public String showStyle(Model model){

    model.addAttribute("uid","123456789");

    model.addAttribute("name","<span style='color:red'>Jerry</span>");

    return "show_style";

}

此时页面中需要借助th:utext属性进行显示

<p th:utext="'用户名称：' + ${name}"/>

通过浏览器查看页面源码可以看出th:utext和th:text的区别是：th:text会对<和>进行转义，而th:utext不会转义。

显示对象

我们常常需要将一个bean信息展示在前端页面当中。

  1. 用于前端展示的VO类
public class User implements Serializable {

    private Long uid ;

    private String name ;

    private Integer age ;

    private Date birthday ;

    private Double salary ;

    //省略get/set方法

}
  1. 控制器方法
@RequestMapping(value = "/message/member_show", method = RequestMethod.GET)

public String memberShow(Model model) {

    User vo = new User();

    vo.setUid(12345678L);

    vo.setName("尼古拉丁.赵四");

    vo.setAge(59);

    vo.setSalary(1000.00);

    vo.setBirthday(new Date());

    model.addAttribute("member", vo);

    return "message/member_show";

}
  1. 页面展示
<div>

    <p th:text="'用户编号：' + ${member.uid}"/>

    <p th:text="'用户姓名：' + ${member.name}"/>

    <p th:text="'用户年龄：' + ${member.age}"/>

    <p th:text="'用户工资：' + ${member.salary}"/>

    <p th:text="'出生日期：' + ${member.birthday}"/>

    <p th:text="'出生日期：' + ${#dates.format(member.birthday,'yyyy-MM-dd')}"/>

</div>

<hr/>

<div th:object="${member}">

    <p th:text="'用户编号：' + *{uid}"/>

    <p th:text="'用户姓名：' + *{name}"/>

    <p th:text="'用户年龄：' + *{age}"/>

    <p th:text="'用户工资：' + *{salary}"/>

    <p th:text="'出生日期：' + *{birthday}"/>

    <p th:text="'出生日期：' + *{#dates.format(birthday,'yyyy-MM-dd')}"/>

</div>

上面给出了两种展现方式，一种是通过${属性}，另外一种是通过{属性}。
关于“${属性}”和“{属性}”的区别？
$访问完整信息，而访问指定对象中的属性内容， 如果访问的只是普通的内容两者没有区别；

数据处理

在 thymeleaf 之中提供有相应的集合的处理方法，例如：在使用 List 集合的时候可以考虑采用
get()方法获取指定索引的数据，那么在使用 Set 集合的时候会考虑使用 contains()来判断某个数据是否存在，使用 Map
集合的时候也希望可以使用 containsKey()判断某个 key 是否存在，以及使用get()根据 key 获取对应的
value，而这些功能在之前并不具备，下面来观察如何在页面中使用此类操作

  1. 控制器方法向页面传递一些数据，以供操作
@RequestMapping(value = "/user/set", method = RequestMethod.GET)

public String set(Model model) {

    Set<String> allNames = new HashSet<String>() ;

    List<Integer> allIds = new ArrayList<Integer>() ;

    for (int x = 0 ; x < 5 ; x ++) {

        allNames.add("boot-" + x) ;

        allIds.add(x) ;

    }

    model.addAttribute("names", allNames) ;

    model.addAttribute("ids", allIds) ;

    model.addAttribute("mydate", new java.util.Date()) ;

    return "user_set" ;

}
  1. 数据处理
<body>

    <p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"/>

    <p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}"/>

    <hr/>

    <p th:text="${#strings.replace('www.baidu.cn','.','$')}"/>

    <p th:text="${#strings.toUpperCase('www.baidu.cn')}"/>

    <p th:text="${#strings.trim('www.baidu.cn')}"/>

    <hr/>

    <p th:text="${#sets.contains(names,'boot-0')}"/>

    <p th:text="${#sets.contains(names,'boot-9')}"/>

    <p th:text="${#sets.size(names)}"/>

    <hr/>

    <p th:text="${#sets.contains(ids,0)}"/>

    <p th:text="${ids[1]}"/>

    <p th:text="${names[1]}"/>

</body>

路径处理

在传统WEB工程开发时，路径的处理操作是有点麻烦的。SpringBoot中为我们简化了路径的处理。

  1. 在"src/main/view/static/js"中创建一个js文件

    js文件路径
  2. 然后在页面中可以通过“@{路径}”来引用。
<script type="text/javascript" th:src="@{/js/main.js}"></script>

页面之间的跳转也能通过@{}来实现

<a th:href="@{/show}">访问controller方法</a>

<a th:href="@{/static_index.html}">访问静态页面</a>

操作内置对象

虽然在这种模版开发框架里面是不提倡使用内置对象的，但是很多情况下依然需要使用内置对象进行处理，所以下面来看下如何在页面中使用JSP内置对象。

  1. 在控制器里面增加一个方法，这个方法将采用内置对象的形式传递属性。
@RequestMapping(value = "/inner", method = RequestMethod.GET)

public String inner(HttpServletRequest request, Model model) {

    request.setAttribute("requestMessage", "springboot-request");

    request.getSession().setAttribute("sessionMessage", "springboot-session");

    request.getServletContext().setAttribute("applicationMessage",

            "springboot-application");

    model.addAttribute("url", "www.baidu.cn");

    request.setAttribute("url2",

            "<span style='color:red'>www.baidu.cn</span>");

    return "show_inner";

}
  1. 在页面之中如果要想访问不同属性范围中的内容，则可以采用如下的做法完成：
<!DOCTYPE HTML>

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

<head>

    <title>SpringBoot模版渲染</title>

    <script type="text/javascript" th:src="@{/js/main.js}"></script>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

</head>

<body>

    <p th:text="${#httpServletRequest.getRemoteAddr()}"/>

    <p th:text="${#httpServletRequest.getAttribute('requestMessage')}"/>

    <p th:text="${#httpSession.getId()}"/>

    <p th:text="${#httpServletRequest.getServletContext().getRealPath('/')}"/>

    <hr/>

    <p th:text="'requestMessage = ' + ${requestMessage}"/>

    <p th:text="'sessionMessage = ' + ${session.sessionMessage}"/>

    <p th:text="'applicationMessage = ' + ${application.applicationMessage}"/>

</body>

</html>

thymeleaf 考虑到了实际的开发情况，因为 request 传递属性是最为常用的，但是 session 也有可能使用，例如：用户登录之后需要显示用户 id，那么就一定要使用到 session，所以现在必须增加属性范围的形式后才能够正常使用。在 thymeleaf 里面也支持有 JSP 内置对象的获取操作，不过一般很少这样使用。

逻辑处理

所有的页面模版都存在各种基础逻辑处理，例如：判断、循环处理操作。在 Thymeleaf 之中对于逻辑可以使用如下的一些运算符来完成，例如：and、or、关系比较（>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne）。

通过控制器传递一些属性内容到页面之中：

<span th:if="${member.age lt 18}">

未成年人！

</span>

<span th:if="${member.name eq '啊三'}">

欢迎小三来访问！

</span>

不满足条件的判断

<span th:unless="${member.age gt 18}">

你还不满18岁，不能够看电影！

</span>

通过swith进行分支判断

<span th:switch="${member.uid}">

<p th:case="100">uid为101的员工来了</p>

<p th:case="99">uid为102的员工来了</p>

<p th:case="*">没有匹配成功的数据！</p>

</span>

数据遍历

在实际开发过程中常常需要对数据进行遍历展示，一般会将数据封装成list或map传递到页面进行遍历操作。

  1. 定义控制器类，向页面传递List数据和Map数据
@Controller

public class UserController {

    @RequestMapping(value = "/user/map", method = RequestMethod.GET)

    public String map(Model model) {

        Map<String,User> allMembers = new HashMap<String,User>();

        for (int x = 0; x < 10; x++) {

            User vo = new User();

            vo.setUid(101L + x);

            vo.setName("赵四 - " + x);

            vo.setAge(9);

            vo.setSalary(99999.99);

            vo.setBirthday(new Date());

            allMembers.put("mldn-" + x, vo);

        }

        model.addAttribute("allUsers", allMembers);

        return "user_map";

    }

    @RequestMapping(value = "/user/list", method = RequestMethod.GET)

    public String list(Model model) {

        List<User> allMembers = new ArrayList<User>();

        for (int x = 0; x < 10; x++) {

            User vo = new User();

            vo.setUid(101L + x);

            vo.setName("赵四 - " + x);

            vo.setAge(9);

            vo.setSalary(99999.99);

            vo.setBirthday(new Date());

            allMembers.add(vo) ;

        }

        model.addAttribute("allUsers", allMembers);

        return "user_list";

    }

}
  1. list类型数据遍历
<body>

    <table>

        <tr><td>No.</td><td>UID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>

        <tr th:each="user,memberStat:${allUsers}">

            <td th:text="${memberStat.index + 1}"/>

            <td th:text="${user.uid}"/>

            <td th:text="${user.name}"/>

            <td th:text="${user.age}"/>

            <td th:text="${memberStat.even}"/>

            <td th:text="${memberStat.odd}"/>

        </tr>

    </table>

</body>
  1. map类型数据遍历
<body>

    <table>

        <tr><td>No.</td><td>KEY</td><td>UID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>

        <tr th:each="memberEntry,memberStat:${allUsers}">

            <td th:text="${memberStat.index + 1}"/>

            <td th:text="${memberEntry.key}"/>

            <td th:text="${memberEntry.value.uid}"/>

            <td th:text="${memberEntry.value.name}"/>

            <td th:text="${memberEntry.value.age}"/>

            <td th:text="${memberStat.even}"/>

            <td th:text="${memberStat.odd}"/>

        </tr>

    </table>

</body>

页面引入

我们常常需要在一个页面当中引入另一个页面，例如，公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。

  • th:replace
  • th:include
  1. 新建需要被引入的页面文件，路径为"src/main/view/templates/commons/footer.html"
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

<footer th:fragment="companyInfo">

    <p>设为首页 ©2018 SpringBoot 使用<span th:text="${projectName}"/>前必读

        意见反馈 京ICP证030173号 </p>

</footer>

可以看到页面当中还存在一个变量projectName，这个变量的值可以在引入页面中通过th:with="projectName=百度"传过来。

  1. 引入页面中只需要添加如下代码即可
<div th:include="@{/commons/footer} :: companyInfo" th:with="projectName=百度"/>

SpringBoot页面展示Thymeleaf的更多相关文章

  1. 【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_36380516/artic ...

  2. springboot-10-前端页面整合, thymeleaf, freemarker, jsp 模板使用

    springboot 中不建议使用jsp作为页面展示, 怎么使用可以看: http://412887952-qq-com.iteye.com/blog/2292471 关于什么是thymeleaf, ...

  3. SpringBoot框架 之 Thymeleaf

    目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...

  4. SpringBoot 同时整合thymeleaf html、vue html和jsp

    问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...

  5. 8.SpringBoot 模板引擎 Thymeleaf

    1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...

  6. SpringBoot页面访问处理

    SpringBoot页面访问处理 1.介绍 Springboot推荐使用thymeleaf模板引擎搭载html页面实现jsp动态渲染效果,因此这里才会用该种方案进行. 2.集成步骤 引入thymele ...

  7. Springboot模板（thymeleaf、freemarker模板）

    目的: 1.thymeleaf模板 2.Freemarker模板 thymeleaf模板 thymeleaf 的优点: 支持html5标准,页面无须部署到servlet开发到服务器上,直接通过浏览器就 ...

  8. 【SpringBoot】SpringBoot/MyBatis/MySql/thymeleaf/Log4j整合工程

    工程下载地址:https://files.cnblogs.com/files/xiandedanteng/MMSpringWeb20191027-1.rar 工程目录结构如图: 1.创建工程 有些网文 ...

  9. 7 — 简单了解springboot中的thymeleaf

    1.官网学习地址 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 2.什么是thymeleaf? 一张图看明白: 解读: ...

随机推荐

  1. b站编程课程资源汇总

    b站编程课程资源汇总 一.总结 一句话总结: b站的编程资源很多,而且很良心 二.编程课程资源汇总 b站看到的,分享给大家 https://www.bilibili.com/video/av50680 ...

  2. 怎样用 Bash 编程：语法和工具

    让我们通过本系列文章来学习基本的 Bash 编程语法和工具,以及如何使用变量和控制运算符,这是三篇中的第一篇. Shell 是操作系统的命令解释器,其中 Bash 是我最喜欢的.每当用户或者系统管理员 ...

  3. 一、基础篇--1.1Java基础-hashCode和equals方法的区别和联系

     hashCode和equals方法的区别和联系  两个方法的定义 equals(Object obj)方法用来判断两个对象是否"相同",如果"相同"则返回tr ...

  4. electron创建窗口常用配置参数

    { "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...

  5. Solr之java实现增删查操作

    1.添加pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  6. samba安装应用实例-2

    应用实例: 先安装samba软件,yum install -y samba1.需求:共享一个目录,使用用户名和密码登录才可以访问,要求可读可写.(1)首先打开samba配置文件/etc/samba/s ...

  7. loadrunner 场景设计-手工场景方案(Schedule)设计 Part 2

    loadrunner 场景设计-手工场景方案(Schedule)设计 Part 2 ---------------------------接Part 1------------------------ ...

  8. Oracle 归档日志管理

    一.Oracle日志介绍 1.Oracle日志分类 分三大类: Alert log files--警报日志,Trace files--跟踪日志(用户和进程)和            redo log ...

  9. windows上使用curl删除和查看ES索引

    首先使用curl获取集群中可用的Elasticsearch索引列表: $ curl http://<node-ip|hostname>:9200/_cat/indices <node ...

  10. Python学习之面向对象(一）

    第六章 面向对象 6.1 面向对象的初识 6.1.1 什么是面向对象 面向过程式编程: ​ 好处:出色的完成所有的需求 ​ 坏处:凡是更改或者增加一条需求,可能整个项目都随之改变 面向对象式编程: 类 ...