SpringBoot Thymeleaf入门_spring.thymeleaf.prefix-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39477597/article/details/80873961

Thymeleaf 是什么？

Thymeleaf 是一个java库，它是一个XML/HTML5模板引擎，能够应用于转换于模板文件，以显示应用程序产生的数据和文

本，它适合于基于XHTML/HTML5的web服务应用程序，同时它还可以处理任何XML 文件，作为web 或独立的应用程序。

后台怎么传变量给模板？

1. 加入thymeleaf 的依赖

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

2. 在application.properties文件中进行如下配置

#配置在使用Thymeleaf做页面模板时的前缀，即页面所在路径spring.thymeleaf.prefix=classpath:/templates#设置在使用Thymeleaf做页面模板时的后缀，其实默认就是htmlspring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTML#设置在使用Thymeleaf做页面模板时是否启用缓存spring.thymeleaf.cache=false#设置编码格式spring.thymeleaf.encoding=UTF-8

注意：在配置Thymeleaf时已经把页面的路径设置为在工程中的 resources 文件夹下的templates文件夹中，所以静态html 页一定要放到这个文件夹中

3. controller 中的方法如下：

	@GetMapping(value="/news_list") 
	public String newsList(ModelMap model,HttpServletRequest request) {
		
		try {
			
			initPage(model,request);
			//将返回的数据放入model中
			model.put("publishStatus",0));
			
		} catch (Exception e) {
			LogWriter.writeErrorLog("新闻列表页面初始化异常",e);
		}
		// 新闻列表页 news_list.html 在templates文件夹中的news文件
		return "/news/news_list";
	}

注意：在controller中一定不要使用 @RestController 注解，而要使用 @Controller 注解，因为@RestController = @Controller + @ResponseBody 这样返回给前台的一定是json类型的数据

页面如何获取后台返回的数据？

1. 在页面中引入thymeleaf的命名空间

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

2. 获取数据

<input class="caption-subject font-green-sharp bold uppercase" type="text" id="publishText" name="publishText" th:value="${publishStatus}" readonly="readonly" style="border:none">

注意：这里是根据 model 中的key进行取值的。

Thymelaeaf 的一些表达式

它的表达式主要分为四类

变量表达式
选择或星号表达式
文字国际化表达式
URL表达式

一、变量表达式

它将以HTML标签的一个属性来表示，表现形式如下： ${.....}

例如：

    <!--后台model中的数据形式如下：model.put("news",一个新闻的对象)-->
<input type="text" id="title" name="title" lass="form-control" maxlength="50" placeholder="请输入新闻标题" th:value="${news.title}">
     <!--后台model中的数据形式如下 model.put("publishStatus",一个对象类型的集合)-->
     <!--循环获取数据，此时entry代表数组中的每个对象->
     <option th:each="entry : ${publishStatus}" th:value="${entry.key}" th:text="${entry.value}"></option>

二、选择（星号）表达式

它的表达形式很像变量表达式，不过它用一个预先选择的对象来代替上下文变量容器来执行，表现形式如下：*{......}

例如：

   <!--由于在这个div事先获得了news的对象，所以他的子元素就可以直接获得news中的属性值-->
    <div th:object="${news}">  
      <span th:text="*{title}">...</span>  
    </div>

三、URL表达式

是指把一个有用的上下文或回话信息添加到URL中，表现形式如下：@{.......}

例如：

    <a href="main.html" th:href="@{/main}">

常用的th 标签

关键字	功能介绍	案例
th：id	替换id	<input th:id="'xxx' + ${news.newsId/>
th：text	文本替换	<p th:text="${news。title}">新闻标题</p>
th：utext	支持html的文本替换	<div th:utext = "${news.content}">新闻内容</div>
th:object	替换对象	<div th:object="${session.news}">
th：value	替换属性值	<input th:value="${news.summary}">
th:with	变量属性值运算	<div th:with="isEven=${news.count}%2==0"></div>
th：style	设置样式	th:style="'display:' + @{(${isHot} ? 'none' : 'inline-block')} + ''"
th：onclick	点击事件	th:οnclick="'getCollect()'"
th:each	属性赋值	<option th:each="entry : ${publishStatus}" th:value="${entry.key}" th:text="${entry.value}"></option>
th:if	判断条件	<a th:if="${newsId == news.newsId}" >
th:unless	和th:if判断相反	< th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch	多路选择配合th:case 使用	<div class="col-md-4 radio-list" th:switch="${news.newsProperty}">
th:case	th:switch的一个分支	<p th:case="'0'">普通新闻</p>
th:selected	selected选择框选中	th:selected="(${xxx.id} == ${configObj.dd})"
th:src	图片地址引入	<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th：checked	radio单选框选中	<input type="radio" name="newsProperty" id="newsProperty0" value="0" th:checked="${news.newsProperty==0}"> 普通文章(默认) </label>
th:action	表单提交的地址	<form action="subscribe.html" th:action="@{/subscribe}">
th:remove	删除某个属性	<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。
th:include	布局标签，替换内容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace="fragments/header :: title"></div>
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:inline="javascript">
th:href	链接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	<div th:fragment="alert">