【Random】七、集成thymeleaf及常用标签使用

Stranger。

于 2021-02-24 22:15:10 发布

阅读量179

点赞数

分类专栏： SpringBoot-Random 文章标签： springboot thymeleaf

本文链接：https://blog.csdn.net/lp1791803611/article/details/114044384

版权

SpringBoot-Random 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

1.pom文件添加thymeleaf依赖

在需要使用thymeleaf的Module中添加依赖，在random项目中，我们在random-admin模块的pom文件中添加：

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

2.application.yml添加thymeleaf配置

spring:
  thymeleaf:
    #开发配置为false,避免修改模板还要重启服务器
    cache: false
    #模板的模式，支持 HTML, XML TEXT JAVASCRIPT
    #mode: HTML5
    #编码 可不用配置
    #encoding: UTF-8
    #内容类别,可不用配置
    #content-type: text/html
    #配置模板路径，默认是templates，可以不用配置
    #prefix: classpath:/templates

3.常用标签

使用thymeleaf时，需要在html页面中引入thymeleaf，引入方式为：

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

th:fragment，布局标签，定义一个代码片段，方便其它地方引用

例如，创建一个include.html，其他页面可引入部分代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<body>
<!-- 通用CSS -->
<head th:fragment=header(title)>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title th:text="${title}"></title>
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" >
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
</head>

<!-- 通用JS -->
<div th:fragment="footer">
    <script th:inline="javascript"> var ctx = [[@{/}]];</script>
    <script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
    <script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>
    <script th:src="@{/js/common.js}" charset="utf-8"></script>
</div>
</body>
</html>

加载公共页面，使用th:include标签

例如加载公共head

<th:block th:include="common/include :: header('菜单列表')" />

例如加载公共js

<th:block th:include="common/include :: footer" />

th:href标签

在引入css，或是a标签中使用，例如：

<link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">

<a th:href="@{'/article/view/'+${art.id}}">文章标题列表</a>

th:src标签

例如

<script th:src="@{/lib/xmselect/xm-select.js}"></script>

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

定义js脚本可以使用变量，使用th:inline标签

例如在定义上下文变量时，就需要使用th:inline

<script th:inline="javascript">
	var ctx = [[@{/}]];
	$.ajax({
        url: ctx + 'sysDictType/batchDelete',
        type: 'POST',
        async: false,
        data: JSON.stringify(ids),
        contentType: 'application/json; charset=UTF-8',
        dataType: "json",
        success: function (res) {
        	layer.msg(res.msg);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        	layer.close(index);
        	if (XMLHttpRequest.status == 404) {
        		window.location.href = ctx + "/404";
        	} else {
        		layer.msg("服务器好像出了点问题！请稍后试试");
        	}
        }
	});
</script>

th:object，th:field，th:value

th:object替换对象，可用于编辑页面，例如：
```
<div class="layui-form" th:object="${sysMenu}">
    <input name="id"  type="hidden"  th:field="*{id}" />
    <input type="text" name="menuName" th:field="*{menuName}" class="layui-input">
    <input type="text" name="code" th:field="*{code}" class="layui-input">
</div>
```
th:field和th:value的区别是：

th:field，用法：th:field="*{name}"，(用来绑定后台对象和表单数据)

th:value，用法：th:value="${brand.name}"，(用对象对name值替换value属性)

th:switch, th:case, th:selected

<select name="menuTarget" lay-filter="menuTarget" th:field="*{menuTarget}" th:switch="*{menuTarget}">
	<option value="_self" th:case="'_self'" th:selected="selected">页签</option>
	<option value="_blank" th:case="'_blank'" th:selected="selected">新窗口</option>
</select>

th:if, th:unless

th:unless和th:if正好相反，

<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">不及格</td>

<td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>

th:action，表单提交的地址

<form action="subscribe.html" th:action="@{/subscribe}"></form>

th:each，遍历

	<table>
        <tr th:each="a,userStat:${list}">
            <td th:text="${a.username}"></td>
            <td th:text="${userStat.index}"></td>
        </tr>
        <!-- 数组循环遍历 -->
        <tr>
            <td th:each="array:${arrays}" th:text="${array}"></td>
        </tr>
    </table>

项目地址 ： https://gitee.com/lp1791803611/random

Stranger。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Random】七、集成thymeleaf及常用标签使用

文章目录@[toc]1.pom文件添加thymeleaf依赖2.application.yml添加thymeleaf配置3.常用标签1.pom文件添加thymeleaf依赖在需要使用thymeleaf的Module中添加依赖，在random项目中，我们在random-admin模块的pom文件中添加： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s
复制链接

扫一扫