SpringBoot：Thymeleaf： if、switch、内联text、内联JavaScript、字面量

已于 2022-07-18 12:18:03 修改
阅读量907 收藏
点赞数 1
分类专栏： # SpringBoot总结 文章标签： java spring boot javascript
于 2022-07-17 19:14:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfengling999/article/details/125833189
版权

目录：

（1）模板if

（2）模板switch

（3） 内联text

（4） 内联JavaScript

（5）字面量

（1）模板if

 

 控制器：ThymeleafController：if-unless的使用

package com.bjpowernode.controller;

import com.bjpowernode.model.SysUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/tpl")  //放在类上方的这个注解会和@GetMapping一起组成完整的访问路径
public class ThymeleafController {

    

    //if-unless的使用
    @GetMapping("/ifunless")
    public String ifunless(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("isLogin",true);
        model.addAttribute("age",20);
        model.addAttribute("name","");
        model.addAttribute("idOld",null);

        return "ifunless";
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h3>index.html--学习Thymeleaf语法</h3>
  <a href="tpl/expression1">标准变量表达式</a>
  <br>
  <a href="tpl/expression2">选择变量表达式</a>
  <br>
  <a href="tpl/link">连接表达式</a>
  <br>
  <a href="tpl/property">模板属性</a>
  <br>
  <a href="tpl/eachList">循环list集合</a>
  <br>
  <a href="tpl/eachArray">循环数组Array</a>
  <br>
  <a href="tpl/eachMap">循环Map集合</a>
  <br>
  <a href="tpl/ifunless">判断语句if和unless</a>
</body>
</html>

模板ifunless.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="margin-left: 400px">
      <h3>if 的使用：判断条件为true，显示标签体内容</h3>
      <p th:if="${sex=='m'}">性别是男</p>
      <p th:if="${isLogin}">已经登录系统</p>
      <!--年龄不大于20，不显示-->
      <p th:if="${age>20}">年龄大于20</p>
      <!--“” 空字符是true  显示-->
      <p th:if="${name}">name是“”</p>
      <!--null是false 不显示-->
      <p th:if="${isOld}">idOld是null</p>
  </div>

  <br>
  <br>
  <div style="margin-left: 400px">
      <h3> unless 的使用：判断条件为false，显示标签体内容</h3>
      <!--false才显示，符合要求，显示-->
      <p th:unless="sex=='f'">性别是男</p>
      <!--为true不显示-->
      <p th:unless="${isLogin}">登录系统</p>
      <p th:unless="${isOld}">idOld是null</p>
  </div>
</body>
</html>

启动主启动类：

package com.bjpowernode;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ThymeleafApplication {

    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class, args);
    }

}

浏览器地址访问： 

点击判断语句if和unless：、

 

 （2）模板switch

 

 

控制器：

package com.bjpowernode.controller;

import com.bjpowernode.model.SysUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/tpl")  //放在类上方的这个注解会和@GetMapping一起组成完整的访问路径
public class ThymeleafController {

   

    //switch的使用
    @GetMapping("switch")
    public String doswitch(Model model){
        model.addAttribute("sex","m");

        return "switch";
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h3>index.html--学习Thymeleaf语法</h3>
  <a href="tpl/expression1">标准变量表达式</a>
  <br>
  <a href="tpl/expression2">选择变量表达式</a>
  <br>
  <a href="tpl/link">连接表达式</a>
  <br>
  <a href="tpl/property">模板属性</a>
  <br>
  <a href="tpl/eachList">循环list集合</a>
  <br>
  <a href="tpl/eachArray">循环数组Array</a>
  <br>
  <a href="tpl/eachMap">循环Map集合</a>
  <br>
  <a href="tpl/ifunless">判断语句if和unless</a>
  <br>
  <a href="tpl/switch">判断语句switch</a>
</body>
</html>

switch.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="margin-left: 400px">
      <h3>switch的使用</h3>
      <div th:switch="${sex}">
          <p th:case="f">性别是女</p>
          <p th:case="m">性别是男</p>
          <p th:case="*">性别未知</p>
      </div>
  </div>
</body>
</html>

从启主启动类：

点击判断语句switch

（3） 内联text

 控制器：

package com.bjpowernode.controller;

import com.bjpowernode.model.SysUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/tpl")  //放在类上方的这个注解会和@GetMapping一起组成完整的访问路径
public class ThymeleafController {

    

    //内联 text
    @GetMapping("/inline")
    public String inline(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("age",20);
        model.addAttribute("name","张三");
        model.addAttribute("myuser",new SysUser(1005,"周峰","男",23));

        return "inline";
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h3>index.html--学习Thymeleaf语法</h3>
  <a href="tpl/expression1">标准变量表达式</a>
  <br>
  <a href="tpl/expression2">选择变量表达式</a>
  <br>
  <a href="tpl/link">连接表达式</a>
  <br>
  <a href="tpl/property">模板属性</a>
  <br>
  <a href="tpl/eachList">循环list集合</a>
  <br>
  <a href="tpl/eachArray">循环数组Array</a>
  <br>
  <a href="tpl/eachMap">循环Map集合</a>
  <br>
  <a href="tpl/ifunless">判断语句if和unless</a>
  <br>
  <a href="tpl/switch">判断语句switch</a>
  <br>
  <a href="tpl/inline">内联iniline</a>
</body>
</html>

模板inline.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="margin-left: 400px">
      <h3>内联 text:使用内联表达式，显示变量的值</h3>
      <!--th:inline="text"可写可不写-->
      <div th:inline="text">
          <p>我是[[${name}]],年龄是[[${age}]]，性别是[[${sex}]]</p>
          <br>
          我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
      </div>
  </div>
</body>
</html>

运行主启动类：

点击内联iniline

（4） 内联JavaScript

将模板中的数据和js练习到一块，这样可以在js中获取动态的数据了，相当于通过内联的语法格式，可以把java语言和js紧密的联合在一起了，js中使用java模板引擎中所提供的数据，所以说内联脚本是挺有用的

 i模板nline.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>inline</title>
    <script type="text/javascript" th:inline="javascript">
        var myname=[[${name}]];
        var myage=[[${age}]];

        //alert("获取的是模板中数据"+myname+","+myage);
        function fun(){
            alert("单击事件，获取数据"+myname+","+myage+','+[[${sex}]]);
        }
    </script>
</head>
<body>
  <div style="margin-left: 400px">
      <h3>内联 text:使用内联表达式，显示变量的值</h3>
      <!--th:inline="text"可写可不写-->
      <div th:inline="text">
          <p>我是[[${name}]],年龄是[[${age}]]，性别是[[${sex}]]</p>
          <br>
          我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>

          <br>
          <br>
          <input type="button" name="btn" value="单机获取模板数据" onclick="fun()">
      </div>
  </div>
</body>
</html>

点击单击获取模板数据：

 （5）字面量

控制器：

package com.bjpowernode.controller;

import com.bjpowernode.model.SysUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/tpl")  //放在类上方的这个注解会和@GetMapping一起组成完整的访问路径
public class ThymeleafController {

   

    //字面量
    @GetMapping("/text")
    public String text(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("age",20);
        model.addAttribute("name","张三");
        model.addAttribute("city","北京");
        model.addAttribute("isLogin",true);
        model.addAttribute("myuser",new SysUser(1005,"周峰","男",23));

        return "text";
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h3>index.html--学习Thymeleaf语法</h3>
  <a href="tpl/expression1">标准变量表达式</a>
  <br>
  <a href="tpl/expression2">选择变量表达式</a>
  <br>
  <a href="tpl/link">连接表达式</a>
  <br>
  <a href="tpl/property">模板属性</a>
  <br>
  <a href="tpl/eachList">循环list集合</a>
  <br>
  <a href="tpl/eachArray">循环数组Array</a>
  <br>
  <a href="tpl/eachMap">循环Map集合</a>
  <br>
  <a href="tpl/ifunless">判断语句if和unless</a>
  <br>
  <a href="tpl/switch">判断语句switch</a>
  <br>
  <a href="tpl/inline">内联iniline</a>
  <br>
  <a href="tpl/text">字面量</a>
</body>
</html>

text.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="margin-left: 400px">
      <h3>文本字面量：使用单引号括起来的字符串</h3>
      <p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>

      <h3>数字字面量</h3>
      <p th:if="${20>5}">20大于5</p>

      <h3>boolean字面量</h3>
      <p th:if="${isLogin==true}">用户已经登录系统</p>

      <h3>null字面量</h3>
      <p th:if="${myuser !=null}">有myuser数据</p>
  </div>
</body>
</html>

运行主启动类：

点击字面量：

喵俺第一专栏
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值