springboot 整合Thymeleaf
Thymeleaf是目前流行的视图层的技术，Spring boot 官方推荐的使用Thymeleaf
什么是Thymeleaf？
Thymeleaf是一个支持原生的THML文件的java末班，可以实现前后端的分离的交互方式，即视图与业务的数据分开响应，他可以直接返回服务端返回的数据生成HTML文件，同时也可以处理XML、javascript、css等格式。
Thymeleaf的最大特点是即可以直接在浏览器打开（静态方式），也可以结合服务器将业务数据填充到HTML之后启动动态的页面（动态方式），Springboot支持Thymeleaf，使用起来非常方便。
1.创建maven工程
<parent>
<artifactId>spring-boot-dependencies</artifactId>
<groupId>org.springframework.boot</groupId>
<version>2.2.4.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
2.application.yml
spring:
thymeleaf:
prefix: classpath:/templates/ #模版的路径
suffix: .html #模版的后缀
servlet:
content-type: text/html #设置Content-type
encoding: UTF-8 #编码方式
mode: HTML5 #校验H5的格式
cache: false #关闭缓冲 每次都重新修改页面
3.创建Handler
package com.southwind.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/hello")
public class HellloHandler {
@GetMapping("/index")
public ModelAndView index(){
ModelAndView modelAndView =new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("mess","张三");
return modelAndView;
}
}
4.启动类
package com.southwind;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class,args);
}
}
5.视图：
HTML
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymaleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>index</h1>
<p th:text="${mess}">hello word</p>
</body>
</html>
需要引入标签
<html xmlns:th="http://www.thymaleaf.org">
<p th:text="${mess}">hello word</p>
Thymeleaf是直接嵌入到模版标签的内部的，不同于JSTL模版
Thymeleaf常用标签
-
th:text
th:text用于文本的显示，将业务的值显示到HTML的页面中
-
th:if
th:if用于条件判断，对业务数据的判断，如果条件成立，则显示内容，否则不显示，具体的使用：
@GetMapping("/if") public ModelAndView ifTest(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("score",90); return modelAndView; }test.html
<!DOCTYPE html> <html lang="en"> <html xmlns:th="http://www.thymaleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p th:if="${score>=90}">优秀</p> <p th:if="${score<90}">良好</p> </body> </html> -
th:unless
th:unless也用作条件判断，逻辑于if恰好相反，如果条件成立不显示，条件不成立显示
@GetMapping("/unless") public ModelAndView unlessTest(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("score",90); return modelAndView; }<!--unless--> <p th:unless="${score>=90}">优秀</p> <p th:unless="${score<90}">良好</p> -
th:switch th:case
th:switch th:case两结合起来使用，用于多条件的等值判断，逻辑于java的switch case一致，当switch中的业务数据等于摸个case时，就显示该case对应的内容。
@GetMapping("/switch")
public ModelAndView switchTest(){
ModelAndView modelAndView =new ModelAndView();
modelAndView.setViewName("test");
modelAndView.addObject("mess",1);
return modelAndView;
}
<!--switch-->
<div th:switch="${mess}">
<p th:case="1">优秀</p>
<p th:case="2">良好</p>
</div>
-
th：action
用来指定请求的URL，相当于form表单的action属性
1.写死
<form th:action="@{/hello/action}" method="get"> <input type="submit" value="提交"> </form>
2.后端传过来
<form th:action="${url}" method="get">
<input type="submit" value="提交">
</form>
@GetMapping("/redirect/{url}")
public String redirect(@PathVariable("url") String url, Model model){
model.addAttribute("url" ,"/hello/action");
return url;
}
@GetMapping("/action")
@ResponseBody
public String actionTest(){
return "action";
}
-
th;each
用来遍历集合
1.实体类
package com.southwind.entity; import lombok.AllArgsConstructor; import lombok.Data; @Data @AllArgsConstructor public class User { private String name; private Integer id; }2.Handler
@GetMapping("/each") public ModelAndView each(){ List<User> users = Arrays.asList(new User("张三",1),new User("李四",2),new User("王五",3)); ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("list",users); return modelAndView; }3.视图
<!--each--> <table> <tr> <th> 编号</th> <th> 姓名</th> </tr> <tr th:each="user:${list}"> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> </tr> </table> -
th:value
用来给标签赋值
@GetMapping("/value") public ModelAndView value(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("list","sprngboot"); return modelAndView; }<!--value--> <input type="text" th:value="${list}"> -
th：src
用来引入静态资源相当于HTML的原生的img。scrip的src标签
图片、css、js都必须放在resource下的static中
@GetMapping("/src") public ModelAndView src(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("src","/1.jpg"); return modelAndView; }
<!--value-->
<input type="text" th:value="${list}">
-
th:href
用来设置超链接的href
@GetMapping("/href") public ModelAndView href(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("src","https://www.baidu.com"); return modelAndView; }<!--href--> <a th:href="${src}">百度</a> -
th：selected标签
给html设置选中的元素，条件成立选中，条件不成立不选中
@GetMapping("/selected")
public ModelAndView selected(){
List<User> users = Arrays.asList(new User("张三",1),new User("李四",2),new User("王五",3));
ModelAndView modelAndView =new ModelAndView();
modelAndView.setViewName("test");
modelAndView.addObject("list",users);
modelAndView.addObject("name","李四");
return modelAndView;
}
<!--selected-->
<select>
<option
th:each="user:${list}"
th:value="${user.id}"
th:text="${user.name}"
th:selected="${user.name==name}"
></option>
</select>
结合th：each来使用，首次遍历list的集合来动态的创建元素，更具每次遍历出的user、name于业务数据中的name是否相等来决定是否要选择。
-
th：attr
给HTML的任意标签来赋值
@GetMapping("/attr") public ModelAndView attr(){ ModelAndView modelAndView =new ModelAndView(); modelAndView.setViewName("test"); modelAndView.addObject("attr","spring boot"); return modelAndView; }<!--attr--> <input th:attr="value=${attr}"><br> <input th:value="${attr}">
浙公网安备 33010602011771号