Thymeleaf 模板引擎入门案例 结合 SpringBoot框架

 

Thymeleaf 模板引擎入门案例 结合 SpringBoot框架

• 开发，一般禁用thymeleaf的缓存

spring.thymeleaf.cache=false

• Controller : 

  Thymeleaf默认会拼接字符串 list.html

 

@Controller
public class EmployeeController {

    //查询所有员工返回列表页面
    public String list() {
        //thymeleaf默认会拼串
        return "emp/list";
    }
}

• ThymeleafProperties.java 源码简单查看：

 

/**
	 * Prefix that gets prepended to view names when building a URL.
	 */
	private String prefix = DEFAULT_PREFIX;

	/**
	 * Suffix that gets appended to view names when building a URL.
	 */
	private String suffix = DEFAULT_SUFFIX;

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";

• thymeleaf 页面获取数据信息 行内写法： 

  [[${session.loginUser}]]

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">[[${session.loginUser}]]</a>

thymeleaf html页面点击超链接发送请求至controller : 

th:href="@{/emps}"

 

<li class="nav-item">
		<a class="nav-link" href="#" th:href="@{/emps}">				
					员工管理
		</a>
</li>

• thymeleaf公共页面元素抽取

 

其中，footer表示有一个footer.html页面，一个片段copy

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；

• 例如：我在dashboard.html 页面中抽取公共片段

  th:fragment="topbar"

• <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">

  那么，我需要在list.html 中引入公共片段：

• <!--引入抽取的topbar-->
  		<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
  		<div th:insert="~{dashboard::topbar}"></div>

  后端页面修改，只需要 Ctrl + F9 刷新即可。

• 这样的效果就是，通过页面检查元素，发现：默认效果：
  insert的公共片段在div标签中

• 三种引入公共片段的th属性：

  th:insert：将公共片段整个插入到声明引入的元素中

  th:replace：将声明引入的元素替换为公共片段

  th:include：将被引入的片段的内容包含进这个标签中

  <footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
  </footer>
  
  引入方式
  <div th:insert="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
  <div th:include="footer :: copy"></div>
  
  引入方式的依次的不同效果
  <div>
      <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
      </footer>
  </div>
  
  <footer>
  &copy; 2011 The Good Thymes Virtual Grocery
  </footer>
  
  <div>
  &copy; 2011 The Good Thymes Virtual Grocery
  </div>

  因此，替换成

  <div th:replace="~{dashboard::topbar}"></div>

• 第二种引入公共片段方法：~{templatename::selector}：模板名::选择器
• dashboard.html中申明

  <nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">

  在list.html页面引入：

  <!--引入侧边栏-->
  				<div th:replace="~{dashboard::#sidebar}"></div>