SpringBoot-集成-Thymeleaf-常用表达式

1选择变量表达方法

语法：*{…}
选择变量表达式，也叫星号变量表达式，使用th:object属性来绑定对象，比如：
后台

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

       return "list";
   }

}

前台接受数据
选择表达式首先使用th：object来绑定后台传来的的user对象，然后使用*来代表这个对象，后面{}中的值是此对象中的属性
也可以和标准表达式混合用

<div th:object="${user}">
    <span th:text="*{id}"></span>
    <span th:text="*{name}"></span>
    <span th:text="*{age}"></span>
    
</div>

Url表达式

语法：@{…}
url表达式可以用于<script src="..">,<link href=".."> <a href="..">等
绝对url

<a href="http://127.0.0.1:8080/list?id=50">跳页面1</a>
拼接
<a href="list.html" th:href="@{'http://127.0.0.1:8080/list?id'+${user.id}}">跳页面2</a>
拼接2
<a href="list.html" th:href="@{|http://127.0.0.1:8080/list?id=${user.id}&age=${user.age}|}">跳页面3</a>

没加 / 的访问不到项目名（上下文）
加上可以 访问 项目名 （上下文）

<a href="list.html" th:href="@{'list?id='+${user.id}}">跳页面4</a>
<a href="list.html" th:href="@{'/list?id='+${user.id}}">跳页面5</a>

常见的属性

th：action 定义后台控制器的路径，<from>标签的action 如果路径式写死的可以直接使用action要是用th：action要和Url表达式结合用同样加上 / 可以访问上下文

  <from id="from1" th:action="@{/tt/login}">

    </from>

    <from id="from" action="tt/login">

     </from>

th：each：这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与jstl中的<c:forEach>类似，此属性即可以循环遍历集合，也可以循环遍历数组及Map
测试
后台

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
      
        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
       return "list";
   }

}

html

<th th:text="${userStat.count}"></th> 可以统计数，
index,当前迭代对象的index(从0开始)
size,别迭代对象的大小
current，当前迭代变量
even,odd, 布尔值当前循环是否是偶数/奇数（从0开始）
first,布尔值 当前循环是否是第一个
last：布尔值 当前循环是否是最后一个

<table border="1">
    <tr  th:each="user:${list}">
        <th th:text="${user.id}"></th>
        <th th:text="${user.name}"></th>
        <th th:text="${user.age}"></th>
    </tr>

</table>

输出

map 遍历：
后台代码

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        Map<String,Object> map=new HashMap<>();

        List<User> list=new ArrayList<>();
        for (int i = 0; i <10 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
          //转换为字符串
          map.put(String.valueOf(i),users       );
        }
   model.addAttribute("list",list);
   model.addAttribute("map",map);

        return "list";
   }

}

html

<table border="1">
    <tr  th:each="user:${map}">
        <th th:text="${user.key}"></th>
        <th th:text="${user.value.id}"></th>
        <th th:text="${user.value.name}"></th>
        <th th:text="${user.value.age}"></th>


    </tr>
</table>

数组：

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        User[] arr=new User[10];
        for (int i = 0; i <10 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          arr[i]=users;
        }
        model.addAttribute("arr",arr);

        return "list";
   }

}

html

<table border="1">
    <tr  th:each="user:${arr}">
        <th th:text="${user.id}"></th>
        <th th:text="${user.name}"></th>
        <th th:text="${user.age}"></th>
    </tr>

</table>

th:id类似html中的id属性

  model.addAttribute("username","zhangsan");

html：

<span id="username">qqq1</span>

<span th:id="${username}">qqq2</span>

th:if条件判断，后台传值前台判断、

model.addAttribute("sex","1");

html

<span th:if="${sex eq '1'}">男</span>
<span th:if="${sex eq '2'}">女</span>

th:unless 它是和th:if相反的操作

model.addAttribute("sex","1");

html

<span th:unless="${sex == '1'}">男</span>
<span th:unless="${sex == '2'}">女</span>

th:switch/th:case 判断语句 一旦某个case判断值为true,剩下的case则都当作false,"*" 默认表示case前面的case都不匹配时候，执行默认case‘

model.addAttribute("sex","1");

html

<div th:switch="${sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">未知</p>

</div>

th:object用于数据对象绑定通常使用于选择变量表达式（星号表达式）
th:src用于外部资源引入，比如<script>标签的src属性，<img>标签的src属性，常与@{}表达式结合使用

<img th:src="@{/static/1.jpg}">

th:text用于文本的显示
th：value类似于html标签中的value属性，能对某个value元素进行赋值

<input type="text" id="name" name="name" th:value="${user.name}">

th：attr该属性也是用于给html中的某个属性赋值

<input type="text" id="name" name="name" th:attr=" valuue=${user.name}">

th：onclick点击事件

<span th:attr="data-ref=${user.age}" th:"'dianji()'">11</span>
<script>
   function dianji() {
       alert(1);
   }
    
</script>

th：style设置样式

<div th:style="'display:block;'">
    mncxvgbcxss
</div>

th：method设置请求的方法

<form id="from" th:action="@{/login}" th:method="post">

</form>

th：name设置表单名称

<input th:type="text" th:id="${user.age}" th:name="${user.age}"/>

th：inline内联文本，内联脚本。有三个取值类型（text,javascript和none）
th：inline写在任何父级标签都可以

<body th:inline="text">
<span >
   [[${user.name}]]
</span>
</body>

<span th:inline="text">
   [[${user.name}]]
</span>

不用父级的这样也可以

<span >
   [[${user.name}]]
</span>

内联脚本

<script th:inline="javascript" type="text/javascript">
  var user=[[${user.name}]]
    alert(user)

</script>

<script th:inline="javascript" type="text/javascript">
    var users= "hello"+[[${user.name}   ]]
    alert(users)

</script>

数字变量：

<span th:text="2017">199</span>
<span th:text="30+20"></span>

boolean字面量true和fal’se

<p th:if="${fa==true}">

</p>

null字面量
空 ，非空

<p th:if="${fa==unll}">

</p>
<p th:if="${fa!=unll}">

</p>

字符拼接
一种是字面量拼接：<span th:text="'30+20'+ ${user.name}+'1,1'+${user.age}+'等等'"></span>
另外一种，使用"|"减少了字符串的拼接<span th:text="|d ${user.name},1${user.age}等|"></span>

三元运算判断：

<span th:text="${sex==1?'男':'女'}">
不再范围
</span>

运算和 关系判断
运算符：+，-，*，/，%
关系比较：>,<,>=,<=,
相等比较：==，！=，(ep ,ne)

表达式基本对象：

1，模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这写对象由#号开始引用
#request

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model, HttpServletRequest request){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
          request.setAttribute("Name","www.bai.com");
       return "list";
   }

}

html

<span th:text="${#request.getAttribute('Name')}">
name

</span>

#session

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model, HttpServletRequest request){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
        request.setAttribute("Name","www.bai.com");
        request.getSession().setAttribute("name","1");
       return "list";
   }

}

HTML

<span th:text="${#session.getAttribute('name')}">
name

</span>

<span th:inline="text">
  [[${#session.id}]]

</span>