其他分享
首页 > 其他分享> > springboot简单使用（4）

springboot简单使用（4）

作者：互联网

1.9 第九章 Thymeleaf 模版

1.9.1 认识 Thymeleaf

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发

模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下 的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。

Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境 下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从 后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体， Thymeleaf 要寄托在 HTML 标签下实现。

Spring Boot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来 替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot 只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们 往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低 Thymeleaf 的官方网站：http://www.thymeleaf.org

Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

 

例子：

1.9.2.2 pom.xml 主要依赖 pom.xml 主要依赖

<dependencies>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
   </dependency>

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
   </dependency>
</dependencies>

1.9.2.3 application.properties 设置

#开发阶段设置为 false ，上线后设置为 true
spring.thymeleaf.cache=false

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
#设置模板的类型
spring.thymeleaf.mode=HTML

1.9.2.4 创建模版文件：在 resources/templates/目录下创建 demo.html

<body>
<table>
    <tr><td>测试数据</td></tr>
    <tr><td th:text="${name}"></td></tr>
</table>
</body>
</html>

1.9.2.5 创建 ThymeleafController

@Controller
public class ThymeleafController {

    @RequestMapping("/thymeleaf")
    public String thymeleafcontroller(HttpServletRequest request){
        request.setAttribute("name","李斯");
        return "demo";
    }
}

1.9.2.6 运行 Application 类，在浏览器访问

 

1.9.3 表达式

表达式是在页面获取数据的一种 thymeleaf 语法。类似 ${key}

1.9.3.1 标准变量表达式 注意：th:text="" 是 Thymeleaf 的一个属性，用于文本的显示 语法: ${key}

说明：标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 EL 中的 ${} 相 同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。 也就是 request 作用域中的数据。

创建 Student 类

Controller 增加方法

创建模版文件

模版文件（html）修改后，可以使用 idea—Build 菜单-Recompile 编译文件。重新 Recompile 即可生效。

 

1.9.3.2 1 选择变量表达式 语法：*{key} 说明：需要配和 th:object 一起使用。

选择变量表达式，也叫星号变量表达式，使用 th:object 属 性来绑定对象，选择表达式首先使用 th:object 来绑定后台传来的对象，然后使用 * 来代表这 个对象，后面 {} 中的值是此对象中的属性。

选择变量表达式 *{...} 是另一种类似于标准变量表达式 ${...} 表示变量的方法 选择变量表达式在执行时是在选择的对象上求解，而${...}是在上下文的变量 model 上求解

 

创建模板文件：

<p>学习选择表达式</p>
<div th:object="${mystudent}">
    <p th:text="*{id}">id</p>
    <p th:text="*{name}">name</p>

</div>
<p th:text="*{mystudent.name}"></p>

1.9.3.3 链接表达式（URL 表达式） 语法：@{链接 url} 说明：主要用于链接、地址的展示，可用于

<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等，可以
在 URL 路径中动态获取数据

Controller 增加方法

@RequestMapping("/link")
public String linkcontroller(HttpServletRequest request){
    request.setAttribute("stuid",111);

    return "link";
}

@GetMapping("/query/student")
@ResponseBody
public String query(Integer id){
    return "查询学生 id="+id;
}
@GetMapping("/find/school")
@ResponseBody
public String query2(Integer id, String name) {
    return "查询 2，id=" + id + ",姓名=" + name;
}

)创建模版文件

<body>
<p>链接表达式</p>
<p>链接到绝对地址</p>
<a th:href="@{http://www.baidu.com}">百度</a>
<br/>
<br/>
<p>链接到相对地址</p>
<a th:href="@{/student}">相对地址没有传参数</a>
<br/>
<br/>
<p>链接到相对地址,传参数方式 1</p>
<a th:href="@{'/query/student?id='+${stuid}}">相对地址传参数方式
    1</a>
<br/>i
<br/>
<p>链接到相对地址,传参数方式 2,推荐方式</p>
<a th:href="@{/find/school(id=${stuid},name='lisi')}">相对地址传参数
    方式 2</a>
</body>

1.9.4 Thymeleaf 属性 大部分属性和 html 的一样，只不过前面加了一个 th 前缀。 加了 th 前缀的属性，是经过 模版引擎处理的。

1.9.4.1 th:action 定义后台控制器的路径，类似

标签的 action 属性，主要结合 URL 表达式,获取动态变量 ......

 

 

 

 

 

 

1.9.4.7.1 循环 List:

Controller 增加方法

@GetMapping("/eachlist")
public String eachlist(HttpServletRequest request){
    List<student> list=new ArrayList<>();
    list.add(new student(2,"张三"));
    list.add(new student(3,"三"));
    list.add(new student(4,"张"));
    list.add(new student(5,"张三d1"));
    request.setAttribute("studentlist",list);
    return "eachlist";

}

创建模版文件

<p>在一个div中循环p</p>
<div th:each="stu:${studentlist}">
    <p th:text="${stu.id}"></p>
    <p th:text="${stu.name}"></p>
</div>

语法说明： th:each="user, iterStat : ${userlist}"中的 ${userList} 是后台传过来的集合

◼ user 定义变量，去接收遍历${userList}集合中的一个数据

◼ iterStat ${userList} 循环体的信息

◼ 其中 user 及 iterStat 自己可以随便取名

◼ interStat 是循环体的信息，通过该变量可以获取如下信息

index: 当前迭代对象的 index（从 0 开始计算）

count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多

size: 被迭代对象的大小 current: 当前迭代变量

even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）

first: 布尔值，当前循环是否是第一个

last: 布尔值，当前循环是否是最后一个

注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat

 

1.9.4.7.2 遍历数组 Array

Controller 增加方法

@GetMapping("/eacharray")
public String eacharray(HttpServletRequest request){
     student stu[]=new student[3];
     stu[0]=new student(1001,"关羽");
     stu[1]=new student(1002,"赵云");
     stu[2]=new student(1003,"张飞");
     request.setAttribute("stuarray",stu);
    return "eacharray";

}

创建模版文件

<p>在一个div中循环p</p>
<div th:each="stu:${stuarray}">
    <p th:text="${stu.id}"></p>
    <p th:text="${stu.name}"></p>
</div>

1.9.4.7.3 遍历 map

Controller 增加方法

@GetMapping("/eachmap")
public String eachmap(HttpServletRequest request){
    Map<String,student> map=new HashMap<>();
    map.put("stu1",new student(1001,"关羽"));
    map.put("stu2",new student(1002,"张飞"));
    map.put("stu3",new student(1003,"刘备"));

    request.setAttribute("stumap",map);
    return "eachmap";

}

创建模版文件

<p>在一个div中循环p</p>
<div th:each="stu,stuInter:${stumap}">
    <p th:text="${stuInter.size}"></p>
    <p th:text="${stuInter.count}"></p>
    <p th:text="${stu.key}"></p>
    <p th:text="${stu.value.id}"></p>
    <p th:text="${stu.value.name}"></p>
</div>

1.9.4.8 条件判断 if

语法：th:if=”boolean 条件” ， 条件为 true 显示体内容

th:unless 是 th:if 的一个相反操作

Controller 增加方法

@GetMapping("/if")
public String ifunless(HttpServletRequest request){

   request.setAttribute("sex","m");
   request.setAttribute("islog",true);
   request.setAttribute("age",20);
   request.setAttribute("name","");


    return "if";

}

创建模版文件

<p th:if="${sex=='m'}">
    性别为男
</p>
<p th:if="${sex=='f'}">
    性别为女
</p>
<p th:if="${islog}">
    已登录
</p>
<p th:if="${age<50}">
    年龄小于50
</p>
<p th:if="5>0">
    5>0
</p>

<p th:if="${name}">
    name 是 ’‘
</p>

 

1.9.4.9 switch，case 判断语句

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

一旦某个 case 判断值为 true，剩余的 case 则都当做 false，“*”表示默认的 case，前面的 case 都不匹配时候，执行默认的 case

 

 

1.9.4.10 th:inline:th:inline 有三个取值类型 (text, javascript 和 none)

1.9.4.10.1 内联 text:可以让 Thymeleaf 表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动 态数据，要求在父级标签上加 th:inline = “text”属性

Controller 增加方法

@GetMapping("/inline")
public String inline(HttpServletRequest request){
    request.setAttribute("sex","m");
    request.setAttribute("islog",true);
    request.setAttribute("age",20);
    request.setAttribute("name","张飞");
    request.setAttribute("myuser",new student(234,"李武"));
    return "inline";

}

创建模版文件

<p>在一个div中循环p</p>
<div th:inline="text">
    姓名为：[[${name}]]</br>
   年龄为：[[${age}]]
</div>

<div>
    性别：[[${sex}]]
    登录：[[${islog}]]
</div>

1.9.4.10.2 内联 javascript

可以在 js 中，获取模版中的数据。 在上面的模版页面中，增加

<button onclick="fun()">单击按钮</button>
<script type="text/javascript" th:inline="javascript">
    var name = [[${myuser.name}]];
    var id = [[${myuser.id}]];
    function fun() {
        alert("click 用户是"+name+",他的 id 是"+id);
    }
</script>

 

1.9.5 字面量

Controller 增加方法

@GetMapping("/thy/text")

public String text(Model model){

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

model.addAttribute("isLogin",true);

model.addAttribute("age",20);

model.addAttribute("name",null);

model.addAttribute("city","北京");

model.addAttribute("myuser",new SysUser(1005,"周向","f",23));

return "10-text"; }

1.9.5.1.1 文本字面量

用单引号'...'包围的字符串为文本字面量

<p th:text="'城市是'+${city}+' 用户登录'+${isLogin}"></p>

1.9.5.1.3 boolean 字面量

<p th:if="${isLogin == true}">用户登录了</p>

1.9.5.1.2 数字字面量

<p th:if="${age > 10}"> age > 10 </p>
<p th:if="20 > 5">20 大于 5</p>

1.9.5.1.4 null 字面量

<p th:if="${name == null}"> name 是 null </p>

1.9.6 字符串连接

<p>字符串的连接，1 使用'';2 使用|字符串内容|</p>
<p th:text="'城市是'+${city}+' 用户登录'+${isLogin}"></p>
<p th:text="|城市是${city}用户登录${isLogin}|"></p>

1.9.7 运算符

算术运算：+ , - , * , / , %

关系比较: > , < , >= , <= ( gt , lt , ge , le )

相等判断：== , != ( eq , ne )

<p th:if="${age > 10}"> age > 10 </p>
<p th:if="20 > 5">20 大于 5</p>
<p th:text="${sex =='m' ? '男':'女'}"></p>
<p th:text="${sex =='m' ? (isLogin?'男已经登录':'男的没有登录'):'女
'}"></p>

 

1.9.8 Thymeleaf 基本对象:模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这些对象由# 号开始引用，我们比较常用的内置对象

1.9.8.1 #request 表示 HttpServletRequest

1.9.8.2 #session 表示 HttpSession 对象

编写controller

@GetMapping("/baseobject")
public String baseobject(HttpServletRequest request, HttpSession session){
    request.setAttribute("reqdata","request中的数据");
    session.setAttribute("sesdata","session中的数据");
    request.getSession().setAttribute("reqsesdata","request获得session的数据");

    session.setAttribute("loginname","张三");
    return "baseobject";
}

编写模板文件

<p th:text="${#request.getAttribute('reqdata')}">request作用域</p>
<p th:text="${#request.getServerName()}"></p>
<p th:text="${#request.getServerPort()}"></p>
<p th:text="${#request.getServletPath()}"></p></br>

<p th:text="${#session.getAttribute('sesdata')}">session 中数据</p>
<p th:text="${#session.getAttribute('loginname')}"></p>
<p th:text="${session.loginname}"></p>

#session表示HttpSession对象，session表示map对象，是#session的简单表示方式，用来获取session中指定的key的值

1.9.9 Tymeleaf 内置工具类对象

1.9.9.1 内置工具类对象

模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法 工作中常使用的数据类型，如集合，时间，数值，可以使用 Thymeleaf 的提供的功能性对 象来处理它们 内置功能对象前都需要加#号，内置对象一般都以 s 结尾

官方手册：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

#dates: java.util.Date 对象的实用方法，<span th:text="${#dates.format(curDate, 'yyyy-MM-dd
HH:mm:ss')}"></span>
#calendars: 和 dates 类似, 但是 java.util.Calendar 对象；
#numbers: 格式化数字对象的实用方法；
#strings: 字符串对象的实用方法： contains, startsWith, prepending/appending 等；
#objects: 对 objects 操作的实用方法；
#bools: 对布尔值求值的实用方法；
#arrays: 数组的实用方法；
#lists: list 的实用方法，比如<span th:text="${#lists.size(datas)}"></span>
#sets: set 的实用方法；
#maps: map 的实用方法；
#aggregates: 对数组或集合创建聚合的实用方法

1.9.9.2 例子

准备对象

public class Cat { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }

public class Dog { private String name; public String getName() { return name; } public void setName(String name) { this.name = name;}}

public class Zoo { private Dog dog; private Cat cat; public Dog getDog() { return dog; } public void setDog(Dog dog) { this.dog = dog; } public Cat getCat() { return cat; } public void setCat(Cat cat) { this.cat = cat; } }

Controller 增加方法

@GetMapping("/thy/utilObject")
public String utilObject(Model model, HttpSession session){
model.addAttribute("mydate",new Date());
model.addAttribute("mynum",26.695);
model.addAttribute("mystr","bjpowernode");
List<String> mylist = Arrays.asList("a","b","c");
    model.addAttribute("mylist",mylist);
    //model.addAttribute("mylist",null);
    session.setAttribute("loginname","zhangsan");
    Dog dog = new Dog();
    dog.setName("二哈");
    Cat cat = new Cat();
    cat.setName("英短");
    Zoo zoo = new Zoo();
    zoo.setCat(cat);
    //zoo.setDog(dog);
    zoo.setDog(null);
    //
    model.addAttribute("zoo",zoo);
    return "12-utilObject";
    }

创建模版文件

<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.year(mydate)}"></p>
<p th:text="${#dates.month(mydate)}"></p>
<p th:text="${#dates.createNow()}" />
<br/>
<br/>
<p th:text="${#numbers.formatCurrency(mynum)}"></p>
<p th:text="${#numbers.formatDecimal(mynum,5,2)}"></p>
<br/>
<br/>
<p>处理@#strings</p>
<p th:text="${#strings.toUpperCase(mystr)}"></p>
<p th:text="${#strings.indexOf(mystr,'power')}"></p>
<p th:text="${#strings.substring(mystr,2,5)}"></p>
<p th:text="${#strings.concat(mystr,'----java 开发')}"></p>
<br/>
<br/>
<p>处理#lists</p>
<p th:text="${#lists.isEmpty(mylist)}"></p>
<p th:if="!${#lists.isEmpty(mylist)}" ></p>
<p th:text="${#lists.size(mylist)}"></p>
<p>空值</p>
<p th:text="${zoo?.dog?.name}"></p>

 

1.9.10 内容复用
自定义模板是复用的行为。可以把一些内容，多次重复使用。
1.9.10.1 定义模板
语法：th:fragment="top" , 定义摸模板，自定义名称是 top
例如：
<div th:fragment="top">
    <p>动力节点</p>
    <p>www.bjpowernode</p>
</div>
1.9.10.2 引用模板
语法：引用模板 ~{ templatename :: selector} 或者 templatename :: selector
例如：
<div th:insert="~{head :: top}"></div>
<div th:include="head :: top"></div>
1.9.10.3 模板例子
templates 目录下创建 head.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<!--定义模板， 就是一段页面代码-->
<div th:fragment="top">
    <p>动力节点</p>
    <p></p>
</div>
</body>
</html>

创建 footer.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    footer
    
    @copy; 动力节点 2020
</div>
</body>
</html>

在其他文件中，使用模板内容
<p>使用模板</p>
<div th:insert="~{head :: top}">
    我是 div，insert 模板 top
</div>
<hr/>
<p>insert 模板 2</p>
<p th:insert="head :: top">
    insert
</p>
<hr/>
<br/>
<p>包含</p>
<div th:include="head :: top">
    我是当前的 div
</div>
<hr/>
<div th:include="footer :: html"></div>
<hr/>
<div th:include="footer" />

标签：springboot,简单,request,1.9,使用,new,public,模板,name
来源： https://www.cnblogs.com/zhangtaibing/p/16651255.html