SpringBoot整合Thymleaf

最新推荐文章于 2024-07-24 16:53:23 发布

心痕霸巅

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量293

点赞数

文章标签： mvc html java

本文链接：https://blog.csdn.net/qq_45625290/article/details/119964323

版权

一。Thymleaf的介绍

免费模板页面
 整合semantic ui框架
Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎，可以在Web（基于servlet ）和非Web环境中工作。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5，但它甚至可以在脱机环境中处理任何XML文件。它提供完整的Spring Framework。

在Web应用程序中，Thymeleaf旨在成为JavaServer Pages （JSP）的完全替代品，并实现自然模板的概念：模板文件可以直接在浏览器中打开，并且仍然可以正确显示为网页。

Thymeleaf是开源软件、许可下 Apache许可证2.0.

springboot默认推荐的模板引擎(代替了原来的jsp)
HTML的所有标签都能用Thymleaf的前缀 th: 来代替

二。导入依赖

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

三。引入HTML命名空间

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

以后的每个HTML文件都需要加上这个引用

四。HTML文件位置

所有HTML默认放在Templetes文件夹下，这个文件夹相当于以前的WEB-INF文件夹，外界也无法直接访问里面的文件，需要通过controller跳转访问，而要成功跳转就必须需要Thymleaf引擎
定制首页可以放在资源文件下，不一定要放在Templetes下，但习惯性放在这里面，在controller层编写跳转，如：

  @RequestMapping({"/","/index","index.html"})
    public String toIndex(){
        return "index";
    }

四。常用语法（重要）

通过${}来获取model中的变量，注意这不是el表达式，而是ognl表达式，但是语法非常像

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>

package com.xie.controller;

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

@Controller
public class HtmlController {
    @RequestMapping("/a")
    public String a(Model model){
        model.addAttribute("msg","xzx");
        return "a";
    }
}

所有可用值表达式: *{…}

比如*{name} 从可用值中查找name，如果有上下文，比如上层是object，则查object中的name属性

消息表达式: #{…}

常用于国际化消息中

链接表达式: @{…}

不管是静态资源的引用，form表单的请求，凡是链接都可以用@{…} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问

片段表达式: ~{…}

统一顶部栏代码
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> ...</nav> 

统一侧边栏代码
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">...</nav>

引用
<div th:replace="~{commons/commons::sidebar}"></div>
<div th:replace="~{commons/commons::topbar}"></div>

常用于代码块抽取，如导航栏和侧边栏

支持：~{templatename::#id}

templatename：模版名，Thymeleaf会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。

fragmentname：片段名，Thymeleaf通过th:fragment声明定义代码块，即：th:fragment=“fragmentname”

id：HTML的id选择器，使用时要在前面加上#号，不支持class选择器。

代码块表达式的使用
代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用。

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，

th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，

th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中，

th属性，常用th属性如下：

1）th:text：文本替换；

2）th:utext：支持html的文本替换。

3）th:value：属性赋值

4）th:each：遍历循环元素

5）th:if：判断条件，类似的还有th:unless，th:switch，th:case

6）th:insert：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景

7）th:fragment：定义代码块，方便被th:insert引用

8）th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。

9）th:attr：设置标签属性，多个属性可以用逗号分隔

<!DOCTYPE html><!--名称空间--><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
<meta charset="UTF-8">
<title>Thymeleaf 语法</title></head><body>
<h2>ITDragon Thymeleaf 语法</h2>
<!--th:text 设置当前元素的文本内容，常用，优先级不高-->
<p th:text="${thText}" />
<p th:utext="${thUText}" />

<!--th:value 设置当前元素的value值，常用，优先级仅比th:text高-->
<input type="text" th:value="${thValue}" />

<!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
<!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
<div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->
    <p th:text="${message}" />
</div>
<div> <!--只遍历p，推荐使用-->
    <p th:text="${message}" th:each="message : ${thEach}" />
</div>

<!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
<p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

<!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 -->
<div th:insert="~{grammar/common::thCommon}"></div>

<!--th:object 声明变量，和*{} 一起使用-->
<div th:object="${thObject}">
    <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
    <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
    <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
</div></body></html>

心痕霸巅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot整合Thymleaf

一。Thymleaf的介绍Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎，可以在Web（基于servlet ）和非Web环境中工作。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5，但它甚至可以在脱机环境中处理任何XML文件。它提供完整的Spring Framework。在Web应用程序中，Thymeleaf旨在成为JavaServer Pages （JSP）的完全替代品，并实现自然模板的概念：模板文件可以直接在浏览器中打开，并且仍然可
复制链接

扫一扫