SpringBoot---Thymeleaf 模板引擎

雨点打透心脏的1/2处 2022-05-11 14:14 326阅读 0赞

> **一、**使用Thymeleaf模板引擎开发
> 
>     **1.**在pom.xml文件中引入Thymeleaf依赖   
> 
>     
>     <dependency>
>        <groupId>org.springframework.boot</groupId>
>        <artifactId>spring-boot-starter-thymeleaf</artifactId>
>     </dependency>
> 
>     **2.**与上一博客相同，创建controller和model文件夹等，具体去看上一篇博客。
> 
>     **3.templates/index.html**
> 
>     <!DOCTYPE html>
>     <html xmlns:th="http://www.w3.org/1999/xhtml">
>     <head lang="en">
>     	<title>Spring Boot Demo - FreeMarker</title>
>     	
>     	<link href="/css/index.css" rel="stylesheet" />
>     	
>     </head>
>     <body>
>     	<center>
>     		<img src="/images/logo.png" />
>     		<h1 id="title" th:text="${title}"></h1>
>     	</center>
>     	
>     	<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>
>     	
>     	<script>
>     		$(function(){
>     			$('#title').click(function(){
>     				new Date();
>     				alert(new Date().getFullYear()+"年"+new Date().getMonth()+"月"+new Date().getDate()+"日"+" "+new Date().getHours()+"时"+new Date().getMinutes()+"分"+new Date().getSeconds()+"秒");
>     			});
>     		})
>     	</script>
>     </body>
>     </html>
> 
>     **3.**http://localhot:8888/web/index 访问资源
> 
> ![70][]
> 
> **二、**Thymeleaf 常用标签如下：
> 
> **关键字    　　功能介绍    　　　　案例  
> th:id    　　替换id    　　　　  <input th:id="'xxx' + $\{collect.id\}"/>  
> th:text    　文本替换    　　　　<p th:text="$\{collect.description\}">description</p>  
> th:utext    支持html的文本替换   <p th:utext="$\{htmlcontent\}">conten</p>  
> th:object    替换对象    　　　　<div th:object="$\{session.user\}">  
> th:value    属性赋值    　　　　<input th:value="$\{user.name\}" />  
> th:with    变量赋值运算    　　　　<div th:with="isEven=$\{prodStat.count\}%2==0"></div>  
> th:style    设置样式    　　　　　　　　th:style="'display:' + @\{($\{sitrue\} ? 'none' : 'inline-block')\} + ''"  
> th:onclick    点击事件    　　　　　　th:οnclick="'getCollect()'"  
> th:each    属性赋值    　　　　　　　　tr th:each="user,userStat:$\{users\}">  
> th:if    判断条件    　　　　　　　　<a th:if="$\{userId == collect.userId\}" >  
> th:unless    和th:if判断相反    　　　　<a th:href="@\{/login\}" th:unless=$\{session.user != null\}>Login</a>  
> th:href    链接地址    　　　　　　　　　　<a th:href="@\{/login\}" th:unless=$\{session.user != null\}>Login</a> />  
> th:switch    多路选择 配合th:case 使用    <div th:switch="$\{user.role\}">  
> th:case    th:switch的一个分支    　　　　<p th:case="'admin'">User is an administrator</p>  
> th:fragment    布局标签，定义一个代码片段，方便其它地方引用    <div th:fragment="alert">  
> th:include    布局标签，替换内容到引入的文件    <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />  
> th:replace    布局标签，替换整个标签到引入的文件    <div th:replace="fragments/header :: title"></div>  
> th:selected    selected选择框 选中    th:selected="($\{xxx.id\} == $\{configObj.dd\})"  
> th:src    图片类地址引入    　　　　　　<img class="img-responsive" alt="App Logo" th:src="@\{/img/logo.png\}" />  
> th:inline    定义js脚本可以使用变量    <script type="text/javascript" th:inline="javascript">  
> th:action    表单提交的地址    　　　　<form action="subscribe.html" th:action="@\{/subscribe\}">  
> th:remove    删除某个属性    　　　　<tr th:remove="all">   
> 　　　　　　　　　　　　　　　　　　　　1.all:删除包含标签和所有的孩子。  
> 　　　　　　　　　　　　　　　　　　　　2.body:不包含标记删除,但删除其所有的孩子。  
> 　　　　　　　　　　　　　　　　　　　　3.tag:包含标记的删除,但不删除它的孩子。  
> 　　　　　　　　　　　　　　　　　　　　4.all-but-first:删除所有包含标签的孩子,除了第一个。  
> 　　　　　　　　　　　　　　　　　　　　5.none:什么也不做。这个值是有用的动态评估。  
> th:attr    设置标签属性，多个属性可以用逗号分隔    比如 th:attr="src=@\{/image/aa.jpg\},title=\#\{logo\}"，此标签不太优雅，一般用的比较少。**

> **application.properties Thymeleaf 配置**
> 
> \#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
> \#\#\#THYMELEAF (ThymeleafAutoConfiguration)  
> \#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
> \#spring.thymeleaf.prefix=classpath:/templates/  
> \#spring.thymeleaf.suffix=.html  
> \#spring.thymeleaf.mode=HTML5  
> \#spring.thymeleaf.encoding=UTF-8  
> \# ;charset=<encoding> is added  
> \#spring.thymeleaf.content-type=text/html   
> \# set to false for hot refresh  
> spring.thymeleaf.cache=false

[70]: /images/20220505/49439dbaef254aae8c7c5aecd13d84e9.png