快速上手thymeleaf

2021/7/15 23:10:04

编程Tag： 标签页面 html 模板快速 Thymeleaf 上手

本文主要是介绍快速上手thymeleaf，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

介绍

thymeleaf是springboot官方推荐的模板引擎，可以完全替代JSP

优势

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

2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

官方文档

官方教程：http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#what-is-thymeleaf
去看看

快速上手

首先需要在Maven中导入依赖

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

在HTML页面中引入thymeleaf名称空间

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

基本语法

1. 变量表达式 ${xxx}

      <h1 th:text="${xx}"></h1>
      或者使用行内写法:
      <h1>[[${xx}]]</h1>

2.链接表达式 @{xx}

搭配src，href等跳转的属性使用，也可跳转到controller

   <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
   <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" >
   <a th:action=@{/user/login}>登录</a>

3.文本替换

   msg="<h1>这是一段内容</h1>"
   <h1 th:text="${msg}"></h1>
   <h1 th:utext="${msg}"></h1>
   运行结果：
   		<h1>这是一段内容</h1>
   		 这是一段内容

4.#{}

可以从配置文件中读取值。例如，我们在进行国际化时声明了login.properties，并且设置了值login.trip=请登录

<h1  th:text="#{login.tip}">Please sign in</h1>
<label >Username</label>
<input type="text" th:placeholder="#{login.username}" required="" autofocus="">
<label >Password</label>
<input type="password" th:placeholder="#{login.password}" required="">

5.请求携带参数

<a th:href="@{/index.html(lang='zh_CN')}">中文</a>
<a th:href="@{/index.html(lang='en_US')}">English</a>

6.循环

<li th:each="user: users" th:text="${user}"></li>

常用标签

在这里插入图片描述

以上总结了thymeleaf中最重要也是最常用的几种用法，为了快速上手的初衷，并没有添加例如运算符或其他不常用的表达式。并且配有实例演示，希望对你有所帮助

这篇关于快速上手thymeleaf的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！