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>

7 <groupId>com.wiggin</groupId>

8 <artifactId>aispringboot</artifactId>

9 <version>1.0-SNAPSHOT</version>

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 

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 

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;

3 import org.springframework.stereotype.Controller;

4 import org.springframework.web.bind.annotation.GetMapping;

5 import org.springframework.web.bind.annotation.RequestMapping;

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 }

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>

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>

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){

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";

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 

8 <p th:text="${#strings.isEmpty(name)}"></p>

9 

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

相关阅读:
python线程的几种创建方式
 python进程之间的通信——Queue
python中进程的几种创建方式
 python中的生成器、迭代器、闭包、装饰器
 java中String和StringBuffer的区别
 python中的元类介绍
 宣传片制作技巧
 树莓派创建WiFi热点
 PCB布线要求
 jsoncpp linux平台编译和arm移植
原文地址：https://www.cnblogs.com/wigginess/p/13499419.html