Spring boot HTML
Spring boot可以结合Thymeleaf模板来整合HTML,使用原生的HTML作为视图。
Thymeleaf模板时面向web和独立环境的Java模板引擎，能够处理Html、Xml、Javascript、CSS等。
- pom.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 5 <modelVersion>4.0.0</modelVersion> 6 7 <groupId>com.wiggin</groupId> 8 <artifactId>aispringboot</artifactId> 9 <version>1.0-SNAPSHOT</version> 10 11 <!-- 继承父包 --> 12 <parent> 13 <groupId>org.springframework.boot</groupId> 14 <artifactId>spring-boot-starter-parent</artifactId> 15 <version>2.0.7.RELEASE</version> 16 </parent> 17 <dependencies> 18 <!-- web启动的jar包 --> 19 <dependency> 20 <groupId>org.springframework.boot</groupId> 21 <artifactId>spring-boot-starter-web</artifactId> 22 <version>2.3.2.RELEASE</version> 23 </dependency> 24 <dependency> 25 <groupId>org.projectlombok</groupId> 26 <artifactId>lombok</artifactId> 27 <version>1.18.12</version> 28 </dependency> 29 <!-- 导入thymeleaf--> 30 <dependency> 31 <groupId>org.springframework.boot</groupId> 32 <artifactId>spring-boot-starter-thymeleaf</artifactId> 33 </dependency> 34 </dependencies> 35 </project> |
- application.yml
1 server: 2 port: 9090 3 spring: 4 thymeleaf: 5 prefix: classpath:/templattes/ 6 suffix: .html 7 encoding: UTF-8 8 mode: HTML5 |
- Handler
1 package com.wiggin.controller; 2 3 import org.springframework.stereotype.Controller; 4 import org.springframework.web.bind.annotation.GetMapping; 5 import org.springframework.web.bind.annotation.RequestMapping; 6 7 @Controller 8 @RequestMapping("/index") 9 public class IndexHandler { 10 @GetMapping("/index") 11 public String index(){ 12 System.out.println("index..."); 13 return "index"; 14 } 15 16 17 } |
- HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 </body> 10 </html> |
如果希望客户端可以直接访问HTML资源，将这些资源放置在recourses的static下的路径即可，否则必须通过Handler的视图解析器来访问静态资源。
Thymeleaf 常用语法
1.赋值和拼接
- HTML
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p th:text="${name}"></p> 9 <p th:text="'学生姓名是'+${name}"></p> 10 <p th:text="|学生姓名,${name}|"></p> 11 </body> 12 </html> |
- Hanler
1 @GetMapping("/indexPlus") 2 public String indexPlus(Map<String,String> map){ 3 map.put("name","张三"); 4 return "indexPlus"; 5 } |
2.条件判断
th:if表示条件成立显示内容，th:unless表示条件不成立显示内容
- Hanler
1 @GetMapping("/indexIf") 2 public String indexIf(Map<String,Boolean> booleanMap){ 3 booleanMap.put("flag",true); 4 return "indexIf"; 5 } |
- HTML
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p th:if="${flag == true}" th:text="if判断结果成立"></p> 9 <p th:unless="${flag != true}" th:text="unless判断结果成立"></p> 10 </body> 11 </html> |
3.循环
- Hanler
1 @GetMapping("/index") 2 public String index(Model model){ 3 System.out.println("index..."); 4 List<Student> list = new ArrayList<>(); 5 list.add(new Student(1L,"张三",22)); 6 list.add(new Student(2L,"李四",23)); 7 list.add(new Student(3L,"王五",23)); 8 model.addAttribute("list",list); 9 return "index"; 10 } |
- HTML
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 <table> 10 <tr> 11 <th>学生ID</th> 12 <th>学生姓名</th> 13 <th>学生年龄</th> 14 </tr> 15 <tr th:each="student:${list}"> 16 <td th:text="${student.id}"></td> 17 <td th:text="${student.name}"></td> 18 <td th:text="${student.age}"></td> 19 20 21 </tr> 22 </table> 23 </body> 24 </html> |
- HTML隔行变色
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 <table> 10 <tr> 11 <th>index</th> 12 <th>count</th> 13 <th>学生ID</th> 14 <th>学生姓名</th> 15 <th>学生年龄</th> 16 </tr> 17 <tr th:each="student,stat:${list}" th:style="'background-color:'+@{${stat.odd}?'#F2F2F2'}"> 18 <td th:text="${stat.index}"></td> 19 <td th:text="${stat.count}"></td> 20 <td th:text="${student.id}"></td> 21 <td th:text="${student.name}"></td> 22 <td th:text="${student.age}"></td> 23 24 25 </tr> 26 </table> 27 </body> 28 </html> |
stat是状态变量：属性
- Index 集合中元素的index(从0开始)
- count 集合中元素的count(从1开始)
- size 集合的大小
- current 当前迭代变量
- even/add 从0开始判断元素的奇偶性值
4.URL
Thymeleaf对于URL的处理是通过@{…}进行处理，结合th:href、th:src
1）th:href
- Handler
1 @GetMapping("/urlRedirect") 2 public String urlRedirect(Model model){ 3 model.addAttribute("name","张三"); 4 return "urlRedirect"; 5 } 6 @GetMapping("/url/{name}") 7 @ResponseBody // 直接返回客户端 8 public String url(@PathVariable("name") String name){ 9 10 return name; 11 } |
- HTML
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a th:href="@{http://www.baidu.com}">百度链接</a> 9 <a th:href="@{http://localhost:8080/index/url/{object}(object=${name})}">本地连接</a> 10 </body> 11 </html> |
2）th:src
- Handler
1 @GetMapping("/urlImg") 2 public String urlImg(Model model){ 3 model.addAttribute("img","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597062260384&di=3172483886d863a5e8d3e0a810490ebf&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg"); 4 return "urlRedirect"; 5 } |
- HTML
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a th:href="@{http://www.baidu.com}">百度链接</a> 9 <a th:href="@{http://localhost:8080/index/url/{object}(object=${name})}">本地连接</a> 10 <img th:src="${img}"> 11 <div th:style="'background:url('+ @{${img}} +');'"> 12 <br> 13 <br> 14 </div> 15 </body> 16 </html> |
5.三元运算
- Handler
1 @GetMapping("/eq") 2 public String eq(Model model){ 3 model.addAttribute("age",30); 4 return "urlRedirect"; 5 } |
- HTML
1 <input th:value="${age gt 30?'中年': '青年'}"> |
- gt = great than
- ge = great equal
- eq = equal
- lt = less than
- ne = not equal
6.switch
- Handler
1 @GetMapping("/switchTest") 2 public String switchTest(Model model){ 3 model.addAttribute("gender","male"); 4 return "urlRedirect"; 5 } |
- HTML
1 <div th:switch="${gender}"> 2 <p th:case="male">男</p> 3 <p th:case="female">女</p> 4 <p th:case="*">未知</p> 5 </div> |
7.基本对象
#ctx ： 上下文对象
#vare : 上下文变量
#locale : 区域对象
#request : HttpServletRequest对象
#responds : HttpServletRespondst对象
#session : HttpSession对象
#servletContext : servletContext 对象
- Handler
1 @GetMapping("/obj") 2 public String obj(HttpServletRequest request){ 3 request.setAttribute("request","request对象"); 4 request.getSession().setAttribute("session","session对象"); 5 return "urlRedirect"; 6 7 } |
- HTML
1 <p th:text="${#request.getAttribute('request')}"></p> 2 <p th:text="${#session.getAttribute('session')}"></p> 3 <p th:text="${#locale.country}"></p> |
8.内嵌对象
- datas：java.util.Date
- calendars：java.util.Canlendar
- numbers：格式化数字
- String: java.lang.String
- object： Object
- bools: 对布尔求值的方法
- arrays: 操作数组的方法
- lists: 操作集合的方法
- sets: 操作集合的方法
- maps: 操作集合的方法
- Handler
1 @GetMapping("/embed") 2 public String embed(Model model){ 3 model.addAttribute("name","张三"); 4 model.addAttribute("ueser",new ArrayList<>()); 5 model.addAttribute("count",22); 6 model.addAttribute("date",new Date()); 7 return "urlRedirect"; 8 } |
- HTML
1 <!-- 格式化时间--> 2 <p th:text="${#dates.format(date,'yyyy--MM--dd HH:mm:sss')}"></p> 3 <!-- 创建当前时间，精确时间--> 4 <p th:text="${#dates.createToday()}"></p> 5 <!-- 精确到秒--> 6 <p th:text="${#dates.createNow()}"></p> 7 <!-- 判断是String否为空--> 8 <p th:text="${#strings.isEmpty(name)}"></p> 9 <!-- 判断是List否为空--> 10 <p th:text="${#lists.isEmpty(ueser)}"></p> 11 <!-- 输出字符串的长度--> 12 <p th:text="${#strings.length(ueser)}"></p> 13 <!-- 拼接字符串--> 14 <p th:text="${#strings.concat(name,name,name)}"></p> 15 <!-- 根据长度创建自定义的字符串--> 16 <p th:text="${#strings.randomAlphanumeric(count)}" |