SpringBoot-thymeleaf页面调整

版权声明：来一来，看一看，有钱的捧个人场，没钱的你不得捧个人场 https://blog.csdn.net/wait_for_eva/article/details/82929734

restful

类型	方式	路径	参数	全路径
查询	GET	student	id	/student/id
添加	POST	student	-	/student
修改	PUT	student	id	/student/id
删除	DELETE	student	id	/student/id

• 每种操作通过提交方式进行区分
• 路径为资源名称，一般是对应的对象名称
• 参数可以是name等其他属性，也可以有多个

页面抽取

1. 标记

<!-- base.html -->
<div id="footer" th:fragment="footer">
   ...    
</div>

通过th:fragment对指定内容进行标记。

2. 填充

引入格式:file::fragment

file:模板名称，thymeleaf管理模板，自动拼接前后缀

fragment：模板内标记th:fragment名称

::：记得是两个冒号

• th:insert:把引入内容直接插入到指定标签下。

<div id="contain" th:insert="~{base::footer}"></div>

结果：

<div id="contain">
    <div id="footer">
        ...
    </div>
</div>

• th:replace：用引入标签替换当前标签

<div id="contain" th:replace="~{base::footer}"></div>

结果

<div id="footer">
    ...
</div>

• th:include:只引入标签内容，不包含最外层标签

<div id="contain" th:include="~{base::footer}"></div>

结果

<div id="contain">
    ...
</div>

3. 引入方式

• ~{}

<div id="contain" th:include="~{base::footer}"></div>

一般引入都用~{}

• 直接引入

<div id="contain" th:include="base::footer"></div>

属性引入也可以去掉~{}，直接进行引入操作

• 选择器

<div id="contain" th:include="~{base::#footer}"></div>

可以直接通过选择器进行选择

#id:id选择器

.class:class选择器

---

4. 注意

• 注意thymeleaf配置
• 通用块记得抽取到公共模板，进行引入即可
• 注意引入标签的差别
• 别忘记引入thymeleaf的xmls

引入传参

1. 声明参数

<!-- 定义th:fragment时声明参数-->
<div id="footer" th:fragment="footer (param1, param2)">
   <span th:text="${param1} + '_' + ${param2}"></span>
</div>
<!-- 不声明也可以进行调用，外部引用时传入即可 -->
<div id="footer" th:fragment="footer">
   <span th:text="${param1} + '_' + ${param2}"></span> 
</div>

2. 引入传参

<!-- 可以指定名称进行传参 -->
<div id="contain" th:insert="~{base::footer(param1='first', param2='second')}"></div>
<!-- 不指定，按顺序填充 -->
<div id="contain" th:insert="~{base::footer('first', 'second')}"></div>
<!-- 也可以${}用域内参数 -->
<div id="contain" th:insert="~{base::footer ($(first), $(second))}"></div>
<!--  和python传参一样，指定也可，顺序填充也可，就是不知道有没有默认值 -->

3. 参数变化

<!-- 通过引入传参判断，让同一份引入代码，在不同地方的引入，显示出不同的风格 -->
<div th:class="${local=='menu_list'?'list activate':'activate'}"></div>

补充

1. bootstrap中的几个样式属性(class)

• activate:高亮
• btn-primary:蓝色(按钮)
• btn-danger:红色(按钮)
• btn-success:绿色(按钮)

2. #dates.format

<!-- 内置方法，格式化日期 -->
<span th:text="${#datas.format(date, 'yyyy-MM-dd HH:mm:ss:SSS')}"></span>