首页 > 其他分享 >Thymeleaf从入门到清晰使用

Thymeleaf从入门到清晰使用

时间:2023-02-05 19:00:25浏览次数:42  
标签:入门 spring Thymeleaf thymeleaf html names 清晰 view

@​​TOC​


什么是thymeleaf?

模板引擎:

前端交给我们的页面,是html页面,如果是以前开发,我们需要把他们转成jsp页面,jsp的好处是当我们查出一些数据转发给jsp页面后,我们可以使用jsp实现数据的显示,及交互等。jsp支持非常强大的功能,包括能写Java代码。这其中的jsp也是模板引擎,模板引擎的功能就类似我们的会议室开会一样开箱即用,将模板设计好之后直接填充数据即可而不需要重新设计整个页面。提高页面、代码的复用性。

但是:springboot这个项目首先是以jar的方式,不是war,第二,我们用的还是嵌入式的Tomcat,所以他默认是不支持jsp,对此springboot推荐我们使用Thymeleaf模板引擎

Thymeleaf的好处:

  • 动静分离: Thymeleaf选用html作为模板页,这是任何一款其他模板引擎做不到的!Thymeleaf使用html通过一些特定标签语法代表其含义,但并未破坏html结构,即使无网络、不通过后端渲染也能在浏览器成功打开,大大方便界面的测试和修改。
  • 开箱即用: Thymeleaf提供标准和Spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • Springboot官方大力推荐和支持,Springboot官方做了很多默认配置,开发者只需编写对应html即可,大大减轻了上手难度和配置复杂度。

第一个Thymeleaf程序

​IDEA基于Springboot构建第一个Thymeleaf程序​

  1. 新建项目
  2. 添加依赖
    IDEA的编译器做的很友好,可以直接选择热门的依赖而不需要去进行寻找,我们勾选其中Web 模块的Spring web依赖以及Template 模块的Thymeleaf依赖,参见上图,如果没有勾选这个依赖,也可以拷贝下面的代码
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
  1. 编写Controller,index.html

包结构如下:

Thymeleaf从入门到清晰使用_模板引擎


其中:

  • controller:用来编写控制器,主要负责处理请求以及和视图(Thymeleaf)绑定。
  • static:用于存放静态资源,例如html、JavaScript、css以及图片等。
  • templates:用来存放模板引擎Thymeleaf(本质依然是.html文件)
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
* @Author 秋名山码神
* @Date 2023/1/11
* @Description
*/
@Controller
public class IndexController {
@RequestMapping("/index")
public String index(Model model){
model.addAttribute("msg","hello,springboot");
return "index";
}
}

代码含义如下:

  • @controller 注解的意思就是声明这个java文件为一个controller控制器。
  • @RequestMapping来映射URL("index")
  • model.addAttribute("msg","hello,springboot") 就是Model存入数据的书写方式,Model是一个特殊的类,相当于维护一个Map一样,而Model中的数据通过controller层的关联绑定在view层(即Thymeleaf中)可以直接使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th:元素名字-->
<div th:text="${msg}"></div>
</body>
</html>

代码含义如下:

  • th:元素名称,$取出变量。是thymeleaf中的一个语法,我们后面来说
  1. 启动项目

访问:​​http://localhost:8080/index​​

Thymeleaf从入门到清晰使用_html_02

Thymeleaf详解

刚刚我们已经创建好了第一个项目,但是那样远远满足不了我们真实开发中使用Thymeleaf,所以我们要对thymeleaf来进行更深层次的学习

配置

springboot官方提供的配置:

# THYMELEAF (ThymeleafAutoConfiguration)
spring.thymeleaf.cache=true # Whether to enable template caching.
spring.thymeleaf.check-template=true # Whether to check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Whether to check that the templates location exists.
spring.thymeleaf.enabled=true # Whether to enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.enable-spring-el-compiler=false # Enable the SpringEL compiler in SpringEL expressions.
spring.thymeleaf.encoding=UTF-8 # Template files encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names (patterns allowed) that should be excluded from resolution.
spring.thymeleaf.mode=HTML # Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.reactive.chunked-mode-view-names= # Comma-separated list of view names (patterns allowed) that should be the only ones executed in CHUNKED mode when a max chunk size is set.
spring.thymeleaf.reactive.full-mode-view-names= # Comma-separated list of view names (patterns allowed) that should be executed in FULL mode even if a max chunk size is set.
spring.thymeleaf.reactive.max-chunk-size=0 # Maximum size of data buffers used for writing to the response, in bytes.
spring.thymeleaf.reactive.media-types= # Media types supported by the view technology.
spring.thymeleaf.servlet.content-type=text/html # Content-Type value written to HTTP responses.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names (patterns allowed) that can be resolved.

比较常用的有是否使用页面缓存​​spring.thymeleaf.cache=false​​,开发的时候不使用缓存,真正上线的时候为了缓解服务器压力使用缓存,还有使用编码utf-8​​spring.thymeleaf.encoding=UTF-8​​。

常用标签

标签

作用

示例

th:id

替换id

​<input th:id="${user.id}"/>​

th:text

文本替换

​<p text:="${user.name}">bigsai</p>​

th:utex

支持html的文本替换

​<p utext:="${htmlcontent}">content</p>​

th:object

替换对象

​<div th:object="${user}"></div>​

th:value

替换值

​<input th:value="${user.name}" >​

th:each

迭代

​<tr th:each="student:${user}" >​

th:href

替换超链接

​ <a th:href="@{index.html}">超链接</a>​

th:src

替换资源

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

最后

本篇旨在带你从一个对Thymeleaf概念为零的状态到一个能够较为清晰明了的认识和使用Thymeleaf,对于Thymeleaf的内容远远不止上面所涉及到的,对于一些算术运算、条件表达式等等其他内容还需要你自己到Thymeleaf官网去学习研究。

标签:入门,spring,Thymeleaf,thymeleaf,html,names,清晰,view
From: https://blog.51cto.com/u_15558498/6038335

相关文章

  • drf从入门到精通---day05
    上节课回顾#1序列化类的常用字段-CharField。。。。-ListField-DictField-------------------------------#2字段参数-max_length。。。......
  • Spring2 - 入门案例
    Spring基本操作导入依赖在pom.xml中添加依赖添加依赖:<dependencies><!--springcontext依赖--><!--当你引入SpringContext依赖之后,表示将Spring的基础依......
  • python 3.python入门
    1.编程语言介绍1.1分类机器语言#机器语言用二进制代码0和1描述的指令称为机器指令,由于计算机内部是基于二进制指令工作的,所以机器语言是直接控制计算......
  • drf入门规范、序列化器组件、视图组件、请求与响应
    DRF框架之入门规范​ 本篇文章会详细介绍web开发模式、API接口及其接口测试工具、restful规范、还有经常分不清又很重要的序列化与反序列化的部分,初级交接触APIView、Requ......
  • Golang入门第三天
    获取命令行参数init函数局部变量和全局变量变量的内存和变量的地址指针变量的使用new函数的使用值传递引用传递随机数的使用数组切片map结构体可见性规则p......
  • 简易的git命令行入门教程
    一、Git全局设置gitconfig--globaluser.name"用户名"gitconfig--globaluser.email"邮件地址@163.com"二、创建git仓库mkdir项目名cd项目名gitinitt......
  • C++ Primer 5th 阅读笔记:入门指南
    学习方法Thewaytolearnanewprogramminglanguageistowriteprograms.学习一门新编程语言的方式是编写程序。函数(Function)函数的四部分:返回类型;函数......
  • vuejs从入门到精通——watch侦听器——侦听数据源类型
    watch侦听器——侦听数据源类型https://cn.vuejs.org/guide/essentials/watchers.html#basic-examplewatch的第一个参数可以是不同形式的“数据源”:它可以是一个ref(包......
  • vuejs从入门到精通——watch侦听器
    watch侦听器https://cn.vuejs.org/guide/essentials/watchers.html虽然计算属性在大多数情况下更适合,但有时也需要一个自定义的侦听器。 这就是为什么vue通过watch......
  • Docker入门
    Docker入门一、Docker为什么会出现此外,Docker是基于Go开发的。二、虚拟化技术和容器化技术的对比(1)虚拟化技术的缺点·资源占用十分多·冗余步骤多·启动很慢(2)容......