07Thymeleaf

淩亂°似流年 2023-09-26 09:13 23阅读 0赞

**目录**

一、Thymeleaf\_Thymeleaf入门

二、Thymeleaf\_变量输出

三、Thymeleaf\_操作字符串

四、Thymeleaf\_操作时间

五、Thymeleaf\_条件判断

1. 单分支if条件判断

2.多分支switch-case条件判断

六、Thymeleaf\_迭代遍历

1.遍历集合

2.使用状态变量

3.遍历Map

七、Thymeleaf\_获取域中的数据

八、Thymeleaf\_URL写法

1.在路径中添加参数

2. 在RESTful风格路径中添加参数

九、知识点整理：

--------------------

> **上一篇博客：**
> 
> [06SpringBoot访问静态资源][06SpringBoot]

**项目结构:**

![636e0be56fad45fa95cf7dc76f7f0061.png][]

## **一、Thymeleaf\_Thymeleaf****入门** ##

![8ca1021aa09a4151aa7ba85d6734b918.png][]

**Thymeleaf是一款用于渲染XML/HTML5** **内容的模板引擎，类似JSP。**它可以轻易的与 SpringMVC 等 Web 框架进行集成作为 Web 应用的模板引擎。在SpringBoot 中推荐使用 Thymeleaf 编写动态页面。

**Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。**

**Thymeleaf** **在有网络和无网络的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。**没有数据时，Thymeleaf的模板可以静态地运行；当有数据返回到页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。

>  **即Thymeleaf是html文件，html文件显示静态效果，jsp文件显示动态效果，而Thymeleaf文件既可以显示静态效果也可以显示动态效果。**

**1.创建Springboot项目**

**2.引入SpringMVC和Thymeleaf起步依赖**

<dependency>
          <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starterthymeleaf</artifactId>
    </dependency> 
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starterweb</artifactId>
    </dependency>

**3.创建视图index.html**

**4.template中的html文件不能直接访问，需要编写Controller跳转到页面中**

@Controller
    public class PageController {
        // 页面跳转
        @GetMapping("/show")
        public String showPage(Model model){
            model.addAttribute("msg","Hello Thymeleaf");
            return "index";
       }
    }

**5.在application.properties配置文件中配置**

#日志格式
    logging.pattern.console=%d{HH:mm:ss.SSS}
    %clr(%-5level) --- [%-15thread]
    %cyan(%-50logger{50}):%msg%n

**6.启动项目，访问http://localhost:8080/show及静态页面**

**7.结果显示：**

![0d0540044128419d83adfee9760d49df.png][]

## 二、**Thymeleaf\_****变量输出**  ##

![fce9bdd3af5e4a42a5ba66010cb1a9df.png][]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>语法</strong></td> 
   <td><strong>作用</strong></td> 
  </tr> 
  <tr> 
   <td><strong>th：text</strong></td> 
   <td>将model中的值作为内容放入标签中</td> 
  </tr> 
  <tr> 
   <td><strong>th：value</strong></td> 
   <td>将model中的值放入input标签的value属性中</td> 
  </tr> 
 </tbody> 
</table>

**1.准备模型数据：**

@GetMapping("/show")
    public String showPage(Model model){
        model.addAttribute("msg","Hello Thymeleaf");
        return "index"; 
    }

**2.在视图index.html展示model中的值**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    
    <h2 th:text="${msg}">程序员</h2>
    <input th:value="${msg}">
    </body>
    </html>

**6.启动项目，访问http://localhost:8080/show及页面**

**7.结果显示：**

![f13904fe29354275a4a09dfcbf5a83e8.png][]

## 三、**Thymeleaf\_****操作字符串** ##

![d6f394b23cf34ac9ac90868db04d8125.png][]

Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以\#引用的，操作字符串的内置对象为strings。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>方法</strong></td> 
   <td><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.isEmpty(key)} </span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">判断字符串是否为空，如果为空返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回</span> 
     <span style="color:#333333;">false</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.contains(msg,'T')}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">判断字符串是否包含指定的子串，如果包含返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回false</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.startsWith(msg,'a')}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">判断当前字符串是否以子串开头，如果是返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回false</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.endsWith(msg,'a')}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">判断当前字符串是否以子串结尾，如果是返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回false </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.length(msg)}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">返回字符串的长度 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.indexOf(msg,'h')} </span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">查找子串的位置，并返回该子串的下标，如果没找到则返回</span> 
     <span style="color:#333333;">-1 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.substring(msg,2,5)}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">截取子串，用法与</span> 
     <span style="color:#333333;">JDK</span> 
     <span style="color:#333333;">的 </span> 
     <span style="color:#ff3502;">subString </span> 
     <span style="color:#333333;">方法相同</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.toUpperCase(msg)}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">字符串转大写 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#strings.toLowerCase(msg)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">字符串转小写</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**1.数据模型：**

@GetMapping("/show")
    public String showPage(Model model){
        model.addAttribute("msg","Hello Thymeleaf");
        return "index"; 
    }

**2.使用方式：（在index.html中）**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <span th:text="${#strings.isEmpty(msg)}"></span><br>
    <span th:text="${#strings.contains(msg,'s')}"></span><br>
    <span th:text="${#strings.length(msg)}"></span><br>
    <span th:text="${#strings.toUpperCase(msg)}"></span><br>
    <span th:text="${#strings.substring(msg,2,5)}"></span><br>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![dbc6332049604fa09dfc826aa38df9ef.png][]

## 四、**Thymeleaf\_****操作时间** ##

![5bde0899b12743aa877297325ba215fd.png][]

**操作时间的内置对象为dates**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>方法</strong></td> 
   <td><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#dates.format(key)}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">格式化日期，默认的以浏览器默认语言为格式化标准 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#dates.format(key,'yyyy/MM/dd')}</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">按照自定义的格式做日期转换 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#dates.year(key)} </span> 
    </div> </td> 
   <td>取年</td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#dates.month(key)} </span> 
    </div> </td> 
   <td>取月</td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">${#dates.day(key)} </span> 
    </div> </td> 
   <td>取日</td> 
  </tr> 
 </tbody> 
</table>

**1.准备数据：**

@GetMapping("/show")
    public String showPage(Model model){
         //这里时间，年是从1990年开始算起，130即2030年，月从0开始算起，即这里的1指的是2月
        model.addAttribute("date",new Date(130,1,1));
        return "index"; 
    }

**2.使用内置对象操作时间**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <span th:text="${#dates.format(date)}"></span><br>
    <span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span><br>
    <span th:text="${#dates.year(date)}"></span><br>
    <span th:text="${#dates.month(date)}"></span><br>
    <span th:text="${#dates.day(date)}"></span><br>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![c289a1b8219941baaa71aa6d0f1a4a2f.png][]

## 五、**Thymeleaf\_****条件判断** ##

![159d6285fd70433ba4e66eb1a8a1de30.png][]

### 1. 单分支if条件判断 ###

**1.准备数据模型**

@GetMapping("/show")
    public String showPage(Model model){
        model.addAttribute("sex","女");
        return "index"; 
    }

**2.进行条件判断**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <div>
        <span th:if="${sex} == '女'">性别：女</span>
        <span th:if="${sex} == '男'">性别：男</span>
    </div>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![9ff48676153541a49b0b6b2c70bb723e.png][]

### 2.多分支switch-case条件判断 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>语法</td> 
   <td>作用</td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#333333;">th:switch/th:case </span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#333333;">th:switch/th:case</span> 
     <span style="color:#333333;">与</span> 
     <span style="color:#333333;">Java</span> 
     <span style="color:#333333;">中的</span> 
     <span style="color:#333333;">switch</span> 
     <span style="color:#333333;">语句等效。 </span> 
     <span style="color:#ff3502;">th:case="*" </span> 
     <span style="color:#333333;">表示</span> 
     <span style="color:#333333;">Java</span> 
     <span style="color:#333333;">中switch的</span> 
     <span style="color:#333333;">default</span> 
     <span style="color:#333333;">，即没有</span> 
     <span style="color:#333333;">case</span> 
     <span style="color:#333333;">的值为</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">时显示 </span> 
     <span style="color:#ff3502;">th:case="*" </span> 
     <span style="color:#333333;">的内容。 </span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**1.准备数据模型**

@GetMapping("/show")
    public String showPage(Model model){
        model.addAttribute("id","12");
        return "index"; 
    }

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <div th:switch="${id}">
        <span th:case="1">ID为1</span>
        <span th:case="2">ID为2</span>
        <span th:case="3">ID为3</span>
        <span th:case="*">ID为*</span>
    </div>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：（因为传入的数12不在case案例中，所以返回case=“\*”的结果）**

![93616b2f4abd45ac89e844dff3dc9ef3.png][]

## 六、**Thymeleaf\_****迭代遍历** ##

![0cf3e8ce3ceb47799bd094ad4852fce3.png][]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>语法</strong></td> 
   <td> <p><strong>作用</strong></p> </td> 
  </tr> 
  <tr> 
   <td>th：each</td> 
   <td> <p>迭代器，用于循环迭代集合</p> </td> 
  </tr> 
 </tbody> 
</table>

### 1.遍历集合 ###

**1.编写Users实体类**

public class Users {
        private String id;
        private String name;
        private int age;
        // 省略getter/setter/构造方法
    }

**2.准备数据**

@GetMapping("/show")
    public String showPage(Model model){
        List<Users> users = new ArrayList<>();
        users.add(new Users("1","sxt",23));
        users.add(new Users("2","baizhan",22));
        users.add(new Users("3","admin",25));
        model.addAttribute("users",users);
        return "index"; 
    }

**3.在页面中展示数据**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <table border="1" width="50%">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
    </body>
    </html>

**4.启动项目，访问http://localhost:8080/show及页面**

**5.结果显示：**

![22c50df53cdd4465aa1d68f1225dddce.png][]

###  ###

### 2.**使用状态变量**  ###

![575c7b2fbbe4417b841343eeec4fd6cb.png][]

thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>状态变量</td> 
   <td>含义</td> 
  </tr> 
  <tr> 
   <td>indexl</td> 
   <td>当前迭代器的索引，从0开始</td> 
  </tr> 
  <tr> 
   <td>count</td> 
   <td>当前迭代器对象的技术，从1开始</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>被迭代对象的长度</td> 
  </tr> 
  <tr> 
   <td>odd/even</td> 
   <td>布尔值，当前循环是否是偶数/奇数，从0开始</td> 
  </tr> 
  <tr> 
   <td>first</td> 
   <td> 
    <div> 
     <span style="color:#333333;">布尔值，当前循环的是否是第一条，如果是返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回</span> 
     <span style="color:#333333;">false </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>last</td> 
   <td> 
    <div> 
     <span style="color:#333333;">布尔值，当前循环的是否是最后一条，如果是返回</span> 
     <span style="color:#333333;">true</span> 
     <span style="color:#333333;">，否则返回</span> 
     <span style="color:#333333;">false </span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**使用状态变量**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <table border="1" width="50%">
        
        <tr th:each="user,status : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${status.index}"></td>
            <td th:text="${status.count}"></td>
            <td th:text="${status.size}"></td>
            <td th:text="${status.odd}"></td>
            <td th:text="${status.even}"></td>
            <td th:text="${status.first}"></td>
            <td th:text="${status.last}"></td>
        </tr>
    </table>
    </body>
    </html>

**4.启动项目，访问http://localhost:8080/show及页面**

**5.结果显示：**

![55b9a452b528430c82431831ae734e65.png][]

### 3.**遍历****Map** ###

![8f272250daca4069940df5bfb02b69bf.png][]

**1.准备数据：**

@GetMapping("/show")
    public String showPage(Model model){
            //map对象类型
            Map<String,Users> map = new HashMap();
            map.put("user1",new Users("1","sxt",23));
            map.put("user2",new Users("2","tx",25));
            map.put("user3",new Users("3","xyj",20));
            model.addAttribute("map",map);
        return "index"; 
    }

**2.遍历map：**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <table border="1" width="50%">
       <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
           <th>Key</th>
       </tr>
       
        <tr th:each="map : ${map}">
            <td th:text="${map.value.id}"></td>
            <td th:text="${map.value.name}"></td>
            <td th:text="${map.value.age}"></td>
            <td th:text="${map.key}"></td>
        </tr>
    </table>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![112c645f0a2b4e129e78877b9119bb3b.png][]

## 七、**Thymeleaf\_****获取域中的数据** ##

![9695bd1b4bdd4d0192dd79e9c49e6d73.png][]

thymeleaf也可以获取request，session，application域中的数据，方法如下：

**1.准备数据**

@GetMapping("/show")
        public String showPage(Model model, HttpServletRequest request, HttpSession session){
    
            //获取域中的数据
            request.setAttribute("req","HttpServletRequest");
            session.setAttribute("ses","HttpSession");
            session.getServletContext().setAttribute("app","application");
    
            return "index";
        }

**2.获取域数据**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <hr/>
    request:<span th:text="${#request.getAttribute('req')}"></span>
    request2:<span th:text="${#httpServletRequest.getAttribute('req')}"></span>
    
    <hr/>
    session1:<span th:text="${session.ses}"></span>
    session2:<span th:text="${#httpSession.getAttribute('ses')}"></span>
    
    <hr/>
    application1:<span th:text="${application.app}"/>
    application2:<span th:text="${#servletContext.getAttribute('app')}"/>
    </body>
    </html>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![88dfe4be46d6482db209f774aa666906.png][]

## 八、**Thymeleaf\_URL****写法** ##

![65e5ec81efc6448ea96272a05f8149d0.png][]

**在Thymeleaf中路径的写法为 @\{路径\}**

> <a th:href="@\{http://www.baidu.com\}">百度</a>

### **1.在路径中添加参数** ###

**1.准备数据**

@GetMapping("/show")
        public String showPage(Model model, HttpServletRequest request, HttpSession session){
    
            model.addAttribute("id","100");
            model.addAttribute("name","zhangsan");
    
            return "index";
        }

**2.准备跳转后访问的Controller**

@GetMapping("/show2")
        @ResponseBody
        public String show2(String id,String name){
            return id+":"+name;
        }

**3.在URL中添加参数**

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymeleaf入门</title>
    </head>
    <body>
    
    <a th:href="@{http://www.baidu.com}">百度</a>
    
    <a th:href="@{show2?id=1&name=zhangsan}">静态参数一</a>
    <a th:href="@{show2(id=1,name=zhangsan)}">静态参数二</a>
    <a th:href="@{'show2?id='+${id}+'$name='+${name}}">动态参数一</a>
    <a th:href="@{show2(id=${id},name=${name})}">动态参数二</a>
    </body>
    </html>

**4.启动项目，访问http://localhost:8080/show及页面**

**5.结果显示：**

![d4c376d79a544a4a9bb592a6601e727f.png][]

![443cd931dca34f6d89d45c0a5842a315.png][]

### 2. **在****RESTful****风格路径中添加参数**  ###

**1.准备跳转后访问的** **Controller**

@GetMapping("/show3/{id}/{name}")
        @ResponseBody
        public String show3(@PathVariable String id,@PathVariable String name){
            return id+":"+name;
        }

**2.在URL中添加参数**

<a th:href="@{/show3/{id}/{name}(id=${id},name=${name})}">RESTful风格传递参数方式</a>

**3.启动项目，访问http://localhost:8080/show及页面**

**4.结果显示：**

![be0be3c1224d4073a00d771bc11e93ba.png][]

![1576f09e4e344e67a45156ec03171797.png][]

## 九、知识点整理： ##

1.Thymeleaf文件的后缀名是**“****.html ”**

2.关于Thymeleaf，**“在****SpringBoot中推荐使用Thymeleaf编写动态页面。”**

3.在Thymeleaf中，使用**"****th:value"**属性可以将model中的值放入 <input> 的value 属性中

4.在Thymeleaf中，操作字符串的内置对象为**“strings”**

5.在Thymeleaf中，操作时间的内置对象为**“****dates ”**

6.在Thymeleaf中，表示条件判断的属性为**“****th:if”**

7.在Thymeleaf中， th:case="\*" 表示**“没有****case的值为true时显示 th:case="\*"** **的内容**”

8.在Thymeleaf中，遍历集合的属性为**“th:each ”**

9.在Thymeleaf中，遍历集合时，迭代器索引的状态变量为**“index”**

10.在Thymeleaf中，遍历Map集合时，遍历出的每一项是**“键值对”**

[06SpringBoot]: https://blog.csdn.net/m0_51697147/article/details/127063370
[636e0be56fad45fa95cf7dc76f7f0061.png]: https://img-blog.csdnimg.cn/636e0be56fad45fa95cf7dc76f7f0061.png
[8ca1021aa09a4151aa7ba85d6734b918.png]: https://img-blog.csdnimg.cn/8ca1021aa09a4151aa7ba85d6734b918.png
[0d0540044128419d83adfee9760d49df.png]: https://img-blog.csdnimg.cn/0d0540044128419d83adfee9760d49df.png
[fce9bdd3af5e4a42a5ba66010cb1a9df.png]: https://img-blog.csdnimg.cn/fce9bdd3af5e4a42a5ba66010cb1a9df.png
[f13904fe29354275a4a09dfcbf5a83e8.png]: https://img-blog.csdnimg.cn/f13904fe29354275a4a09dfcbf5a83e8.png
[d6f394b23cf34ac9ac90868db04d8125.png]: https://img-blog.csdnimg.cn/d6f394b23cf34ac9ac90868db04d8125.png
[dbc6332049604fa09dfc826aa38df9ef.png]: https://img-blog.csdnimg.cn/dbc6332049604fa09dfc826aa38df9ef.png
[5bde0899b12743aa877297325ba215fd.png]: https://img-blog.csdnimg.cn/5bde0899b12743aa877297325ba215fd.png
[c289a1b8219941baaa71aa6d0f1a4a2f.png]: https://img-blog.csdnimg.cn/c289a1b8219941baaa71aa6d0f1a4a2f.png
[159d6285fd70433ba4e66eb1a8a1de30.png]: https://img-blog.csdnimg.cn/159d6285fd70433ba4e66eb1a8a1de30.png
[9ff48676153541a49b0b6b2c70bb723e.png]: https://img-blog.csdnimg.cn/9ff48676153541a49b0b6b2c70bb723e.png
[93616b2f4abd45ac89e844dff3dc9ef3.png]: https://img-blog.csdnimg.cn/93616b2f4abd45ac89e844dff3dc9ef3.png
[0cf3e8ce3ceb47799bd094ad4852fce3.png]: https://img-blog.csdnimg.cn/0cf3e8ce3ceb47799bd094ad4852fce3.png
[22c50df53cdd4465aa1d68f1225dddce.png]: https://img-blog.csdnimg.cn/22c50df53cdd4465aa1d68f1225dddce.png
[575c7b2fbbe4417b841343eeec4fd6cb.png]: https://img-blog.csdnimg.cn/575c7b2fbbe4417b841343eeec4fd6cb.png
[55b9a452b528430c82431831ae734e65.png]: https://img-blog.csdnimg.cn/55b9a452b528430c82431831ae734e65.png
[8f272250daca4069940df5bfb02b69bf.png]: https://img-blog.csdnimg.cn/8f272250daca4069940df5bfb02b69bf.png
[112c645f0a2b4e129e78877b9119bb3b.png]: https://img-blog.csdnimg.cn/112c645f0a2b4e129e78877b9119bb3b.png
[9695bd1b4bdd4d0192dd79e9c49e6d73.png]: https://img-blog.csdnimg.cn/9695bd1b4bdd4d0192dd79e9c49e6d73.png
[88dfe4be46d6482db209f774aa666906.png]: https://img-blog.csdnimg.cn/88dfe4be46d6482db209f774aa666906.png
[65e5ec81efc6448ea96272a05f8149d0.png]: https://img-blog.csdnimg.cn/65e5ec81efc6448ea96272a05f8149d0.png
[d4c376d79a544a4a9bb592a6601e727f.png]: https://img-blog.csdnimg.cn/d4c376d79a544a4a9bb592a6601e727f.png
[443cd931dca34f6d89d45c0a5842a315.png]: https://img-blog.csdnimg.cn/443cd931dca34f6d89d45c0a5842a315.png
[be0be3c1224d4073a00d771bc11e93ba.png]: https://img-blog.csdnimg.cn/be0be3c1224d4073a00d771bc11e93ba.png
[1576f09e4e344e67a45156ec03171797.png]: https://img-blog.csdnimg.cn/1576f09e4e344e67a45156ec03171797.png