Spring boot3之整合HTML

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)}"

   

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wigginess/p/13499419.html