Java SpringBoot模板引擎之 Thymeleaf入门详解

目录
  • 模板引擎简介
  • 引入Thymeleaf模板引擎
  • 分析Thymeleaf模板引擎
  • 测试Thymeleaf模板引擎
    • 1、编写一个TestController
    • 2、编写一个测试页面 test.html 放在 templates 目录下
    • 3、启动项目请求测试
    • 4、结论
  • Thymeleaf入门：
    • 1、修改测试请求，增加数据传输
    • 2、使用thymeleaf
    • 3、我们去编写下前端页面
    • 4、启动测试！
  • thymeleaf语法学习
    • 1、使用任意的 th:attr 来替换Html中原生属性的值！
    • 2、表达式语法：
    • 2、测试页面取出数据
    • 3、启动项目测试！
  • 总结：

模板引擎简介

如果我们直接用纯静态页面方式，必然会给开发带来很大麻烦，所以springboot推荐使用模板引擎，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf！模板引擎的本质思想如下图：

引入Thymeleaf模板引擎

Thymeleaf 官网：Thymeleaf

Spring官方文档：

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

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

Maven自动下载jar包，下图试maven下载的东西；

分析Thymeleaf模板引擎

首先按照SpringBoot的自动配置原理来看一下我们这个Thymeleaf的自动配置规则，再按照这个规则，我们进行使用。可以先去看看Thymeleaf的自动配置类：ThymeleafProperties

我们可以在配置文件看到默认的前缀和后缀！

我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染。

测试Thymeleaf模板引擎

1、编写一个TestController

2、编写一个测试页面 test.html 放在 templates 目录下

3、启动项目请求测试

4、结论

只要需要使用thymeleaf，只需要导入对应的依赖就可以了，然后将html放在templates的目录下即可

Thymeleaf入门：

我们可以查看下Thymeleaf 官网：https://www.thymeleaf.org/
简单练习：查出一些数据，在页面中展示

1、修改测试请求，增加数据传输

@Controller
public class TestController {

    @RequestMapping("/t1")
    public String test1(Model model){
        //存入数据
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }
}

2、使用thymeleaf

我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。


 xmlns:th=http://www.thymeleaf.org

3、我们去编写下前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>九阳真经---龍弟</title>
</head>
<body>
<h1>测试页面</h1>
<!--th:text就是将div中的内容设置为它指定的值-->
<div th:text="${msg}"></div>
</body>
</html>

4、启动测试！

thymeleaf语法学习

1、使用任意的 th:attr 来替换Html中原生属性的值！

2、表达式语法：

练习测试

@Controller
public class TestController {
    @RequestMapping("/t2")
    public String test2(Map<String,Object> map){
        //存入数据
        map.put("msg","<h1>Hello,SpringBoot</h1>");
        map.put("users", Arrays.asList("dragon","longdi"));
        //classpath:/templates/test.html
        return "test";
    }
}

2、测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>九阳真经---龍弟</title>
</head>
<body>
<h1>测试页面</h1>

<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>
<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签-->
<h4 th:each="user :${users}" th:text="${user}"></h4>
<hr>
    <!--行内写法-->
    <h4 th:each="user:${users}">[[${user}]]</h4>
</body>
</html>

3、启动项目测试！

总结：

由于thymeleaf很多语法样式，我们现在学了也会忘记，因此，在学习过程中，需要使用什么，根据官方文档来查询，所以要熟练使用官方文档！

到此这篇关于Java SpringBoot模板引擎之 Thymeleaf入门详解的文章就介绍到这了,更多相关Java SpringBoot Thymeleaf内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈spring boot使用thymeleaf版本的问题

    浅谈spring boot使用thymeleaf版本的问题

    spring boot使用thymeleaf版本问题 Spring boot默认使用的是thymeleaf的2版本,这个版本比较低,有些功能不支持,需要切换成3版本 在properties中加入 <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version> thyme

  • springboot配合Thymeleaf完美实现遍历功能

    springboot配合Thymeleaf完美实现遍历功能

    一. 什么是Thymeleaf Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以正确显示在浏览器中的HTML,也可以作为静态原型工作,从而在开发团队中进行更强大的协作. 随着Spring框架的模块,与您最喜欢的工具的集成,以及插入自己的功能的能力,Thymeleaf是现代HTML5 JVM Web开发的理想选择,尽管它可以做的更多. 好吧,我承认刚才那段是Thymeleaf官方的说明,我只不过机

  • Java之SpringBoot-Thymeleaf详情

    Java之SpringBoot-Thymeleaf详情

    目录 1.About Thymeleaf 2.Hello Thymeleaf 3.Thymeleaf 表达式 3.1配置文件声明 3.2 常用表达式 3.2.1 0x01 ${} 变量表达式 3.2.2 0x02 *{} 选择变量表达式# 3.2.3 0x03 #{} 消息表达式 3.2.4 0x04 @{} 链接表达式 3.2.5 0x05 空值处理 4.标签与属性 前言: 聊Thymeleaf,需要知道为什么到了SpringBoot中就不用JSP了?这跟SpringBoot打包方式有点关系,

  • Java基础总结之Thymeleaf详解

    一.Thymeleaf语法 标签 在HTML页面上使用Thymeleaf标签,Thymeleaf 标签能够动态地替换掉静态内容,使页面动态展示.为了大家更直观的认识Thymeleaf,下面展示一个在HTML文件中嵌入了Thymeleaf的页面文件,示例代码如下: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta

  • 极为简易的Qno SmartLink IPSec VPN设定

    VPN--Virtual Private Network,是针对在互联网技术及应用不断发展中,企业及特定用户对信息交流.传递.交换的安全性.可靠性及成本上的需求,在公共互联网的基础上,通过遂道和加密技术,构建虚拟专用网的解决方案. VPN构建中的一项重要的核心任务是遂道技术,而IPSec--因特网安全协议(即遂道协议)是VPN技术中较为成熟的遂道协议.相对于PPTP.SSL这两种协议来说, IPSec虽然公认是最值得信赖和安全的VPN协议,但同时也是出名的难以设置,安装配置和管理都比较复杂,尤其

  • Java基础之Thymeleaf的简单使用

    Java基础之Thymeleaf的简单使用

    Java代码 package com.zzx.controller; import com.zzx.model.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.Arrays; /** * @date:

  • Java SpringBoot模板引擎之 Thymeleaf入门详解

    Java SpringBoot模板引擎之 Thymeleaf入门详解

    目录 模板引擎简介 引入Thymeleaf模板引擎 分析Thymeleaf模板引擎 测试Thymeleaf模板引擎 1.编写一个TestController 2.编写一个测试页面 test.html 放在 templates 目录下 3.启动项目请求测试 4.结论 Thymeleaf入门: 1.修改测试请求,增加数据传输 2.使用thymeleaf 3.我们去编写下前端页面 4.启动测试! thymeleaf语法学习 1.使用任意的 th:attr 来替换Html中原生属性的值! 2.表达式语法

  • 基于模板引擎Jade的应用(详解)

    有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!) 例子: js: const jade = require('jade'); console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

  • JavaScript模板引擎实现原理实例详解

    本文实例讲述了JavaScript模板引擎实现原理.分享给大家供大家参考,具体如下: 1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> <a href="{{href}}" rel="external nofollow" > {{title}} </a> </h2> <img src

  • JavaScript模板引擎原理与用法详解

    本文实例讲述了JavaScript模板引擎原理与用法.分享给大家供大家参考,具体如下: 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "

  • springboot+swagger2.10.5+mybatis-plus 入门详解

    springboot+swagger2.10.5+mybatis-plus 入门详解

    最新idea2020安装部署超详细教程 懂得懂的 2020.3 2020.2.4 2020.2.3 2020.2.2 20.2.1 2019.3 2018.3 最新2020永久 springboot简介: 个人对springboot的一点小的理解: 1.最大优势:简化配置 区别于传统的 MVC 模式,对于配置进行了大量的简化,魔鬼注解:SpringBootApplication 中包含了的注解 @SpringBootConfiguration @EnableAutoConfiguration @

  • JavaScript模板引擎Template.js使用详解

    JavaScript模板引擎Template.js使用详解

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https://github.com/aui/artTemplate 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.

  • Java SpringBoot实现带界面的代码生成器详解

    Java SpringBoot实现带界面的代码生成器详解

    目录 1.项目gitthub地址链接: https://github.com/baisul/generateCode.git切换到master分支 2.环境 2.1 springboot+freemarker+mysql 2.2 要装node.js,vue文件运行依赖node.js 3.以下就只拿生成java实体类来作为例子 4.application.xml 5.pom.xml 6.Utils 7.生成模板 8.Controller 9.Model 10.index.html(数据库连接生成代

  • Java SpringBoot安全框架整合Spring Security详解

    Java SpringBoot安全框架整合Spring Security详解

    目录 1.工业级安全框架介绍 2.建议搭建Spring Security环境 2.1在pom.xml中添加相关依赖 2.2创建Handler类 2.3创建简单的html和配置相关thymeleaf的路径 2.4最后再加个启动类,那么我们的整合测试就完成勒 2.5成果展示 用户名默认user,密码则随机生成的这串数字 3.进阶版使用 3.1用户名和密码自定义 3.2在config包下创建Encoder 3.3赋予账号角色权限 总结 1.工业级安全框架介绍 Spring Security基于Spri

  • JAVA velocity模板引擎使用实例

    JAVA velocity模板引擎使用实例

    velocity使用1.7版本. 在win7下使用intelliJ IDEA建立一基于tomcat的web app项目,命名为todo_web,设置path为/todo,导入velocity相关jar包.只导入velocity-1.7.jar这个包可能会报错,根据提示再导入velocity自带的其他包. 项目结构如下: 测试Tomcat index.jsp内容如下: 复制代码 代码如下: <%-- Created by IntelliJ IDEA. --%><%@ page conten

  • SpringBoot快速入门详解

    SpringBoot快速入门详解

    Spring Boot是什么? Spring Boot并不是什么新的框架,它是对Spring的缺点进行了改善和优化,Spring Boot默认了很多的框架使用方式,像maven整合了所以jar包同一个道理.及SpringBoot并不是对Spring功能上的增强,而是提供了一种快速使用Spring的方式而已. 为什么使用Spring Boot? Spring Boot官方是这么说的:Spring Boot它是基于Spring开发项目的起点,Spring Boot的设计主要是让你快速地跑起来Spri

随机推荐