thymeleaf学习笔记(公共页面提取)

前言

thymeleaf类似于jsp的模板引擎。结合springboot使用,解决前后端分离问题。

  1. 使用的版本:spring-boot-starter-thymeleaf-2.1.2.RELEASE.jar,对应的maven会自动导入需要的thymeleaf-3.0.11.RELEASE.jarthymeleaf-spring5-3.0.11.RELEASE.jar。可在项目底下的Maven Dependencies目录下查看。

  2. 如果需要IDE获得代码提示功能则需要在HTML标签加入xmlns:th="http://www.thymeleaf.org"

    
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>Insert title heretitle>
    head>
    <body>
        hello thymeleaf!
    body>
    html>
    
  3. thymeleaf所有的标签元素都是以th:开头。除thymeleaf本身所含有的元素外。HTML元素中所有的标签元素都可以用th:+元素名覆盖。举例:a标签中有href属性,便可以使用th:href覆盖。img标签含有src属性,则可以使用th:src覆盖代替。

基本属性解释

th:text="" th:utext=""
区别 不会解析HTML标签;${hello

exp

}输出hello

exp

会解析HTML标签:输出helloexp
[[]]功能和th:text=""相同。区别是th:text=""标签内使用,[[]]标签外使用:如[[${hello}]] [()]功能和th:utext=""相同。区别是th:utext=""标签内使用,[()]标签外使用

例子

<tr th:each="user:${users}">
    <td th:text="${user.id}">td>
    <td th:text="${user.username}">td>
    <td>[[${user.password}]]td>
    <td>[[${user.danWeiTID}]]td>
    <td>
		<a class="btn btn-sm btn-primary" th:href="@{/user/}+${user.id}">编辑a>
		<button th:attr="del_uri=@{/user/}+${user.id}" type="submit" class="btn btn-danger 			deleteBtn">删除button>
	td>
tr>

常用表达式

标签 作用 使用举例说明
${example} 一般用于获得变量值相关。如example的值

value

说明:如果example存在并且有值,那么便会替代value。
@{/assets/exp.css} 一般用于链接地址,或请求地址使用。 1.引入静态资源的地址:。其他样式表,脚本等类似。2. 发送请求地址使用:
~{Commons::topbar} 片段表达式。一般用于引入一段代码片段 引入每个页面都需要的导航栏:有一个Commons.html里面包含一个导航栏代码片。当我们需要引入这一个导航栏代码时,只需要在需要引入的位置使用
引入就好了。语法规则:commons是Commons.html的名字,省略.html后缀。代表从哪个模板里边获取。topbar即这个模板底下使用th:fragment属性命名的标识。

实用例子

1. 公共页面抽取

使用th:fragmentth:replace属性。

举例:有一个Commons.html。里面包含每个页面所需要的顶部导航栏,侧部导航栏等等,即每个页面都含有的公共部分,单独抽取出来放在Commons.html页面里。代码片加上th:fragment属性并取一个唯一的名字用作标识。

Commons.html


<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" th:fragment="topbar">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
          button>
          <a class="navbar-brand" href="#" th:text="${session.loginUser}">Project namea>
        div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboarda>li>
            <li><a href="#">设置a>li>
            <li><a href="#">个人a>li>
            <li><a href="#">帮助a>li>
          ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          form>
        div>
      div>
    nav>

        <div class="col-sm-3 col-md-2 sidebar" th:fragment="sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="#">Overview <span class="sr-only">(current)span>a>li>
            <li><a href="#">Reportsa>li>
            <li><a href="#">Analyticsa>li>
            <li><a href="#">Exporta>li>
          ul>
          <ul class="nav nav-sidebar">
            <li th:class="${activeUri=='main.html'?'active':''}"><a href="" th:href="@{/main.html}">主页a>li>
            <li th:class="${activeUri=='users'?'active':''}"><a href="" th:href="@{/users}">员工列表a>li>
            <li><a href="">One more nava>li>
            <li><a href="">Another nav itema>li>
            <li><a href="">More navigationa>li>
          ul>
          <ul class="nav nav-sidebar">
            <li><a href="">Nav item againa>li>
            <li><a href="">One more nava>li>
            <li><a href="">Another nav itema>li>
          ul>
        div>
body>
html>

thymeleaf学习笔记(公共页面提取)_第1张图片

假设我们要引入templates/commons/bar.html里面的一个公共片段,且公共片段用th:fragment命名。假设为topbar。

只需要在其他页面需要引入的位置使用

引入就好了

2.开发小技巧

2.1th:attr的使用

需求

当我们需要定义一个HTML本身不含有的属性,并且被thymeleaf所识别,可以被jQuery所获取。

举例

一个员工列表,每个员工含一个删除按钮且有每个员工的ID。点击删除按钮,发起submit表单提交请求@{/user/}+${user.id}。调用JS执行操作。

thymeleaf学习笔记(公共页面提取)_第2张图片

  1. 给button按钮的class属性添加一个类名deleteBtn。用于jQuery获取:$(".deleteBtn")

  2. 添加自定义属性del_uri

    方法:使用 th:attr属性添加 th:attr="del_uri=@{/user/}+${user.id}" 本例中 +用于字符串拼接。如果想定义多个属性,使用,隔开,如th:attr="at1=@{/user/}+${user.id}, at2=xxx, at3=xxx "

<tr th:each="user:${users}">
    <td th:text="${user.id}">td>
    <td th:text="${user.username}">td>
    <td>[[${user.password}]]td>
    <td>[[${user.danWeiTID}]]td>
    <td>
		<a class="btn btn-sm btn-primary" th:href="@{/user/}+${user.id}">编辑a>
		<button th:attr="del_uri=@{/user/}+${user.id}" type="submit" class="btn btn-danger 			deleteBtn">删除button>
	td>
tr>
........


<form id="deleteUserForm" method="post">
		<input type="hidden" name="_method" value="delete">
form>
<script type="text/javascript">
		$(".deleteBtn").click(function(){  //获得button点击事件
             //将表单的“action”属性的值替换成当前点击按钮del_uri属性的值,执行submit方法。
			$("#deleteUserForm").attr("action",$(this).attr("del_uri")).submit();
			return false;
		});
script>

指错联系:[email protected]

你可能感兴趣的:(thymeleaf)