Spring Boot整合Thymeleaf

分手后的思念是犯贱 2024-04-21 08:02 114阅读 0赞

> #### ✨Spring Boot整合Thymeleaf ####
> 
>  *  
>  *  Thymeleaf
>  *   *  基本介绍
>      *  Thymeleaf默认的视图路径是：/ resources/templates,在这个目录下面创建html并引入thymeleaf
>      *  基本语法
>      *   *  th:text文本替换
>          *  th:if和th:unless文本替换
>          *  th:each foreach循环
>          *  th:href和@\{\}链接表达式
>          *  th:switch和th:case
>          *  thymeleaf默认给变量名+Stat的状态
>          *  th:id、th:value、th:checked等(和form表单相关)
>      *  \#dates.format()可以用来格式化日期格式
>  *  整合Thymeleaf
>  *   *  基本配置
>      *  数据库准备
>      *  准备好数据库中表所对应的实体类,以及三层结构
>      *  三层架构
>      *  删除操作
>      *  编辑操作
>      *  用户登录
>      *  用户注销
> 
>   
> ?个人主页: [不断前进的皮卡丘][Link 1]  
> ?博客描述: **梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记**  
> **?网站推荐：千里之行，始于足下。每天坚持刷题，巩固所学知识，也为将来找工作，面试做好准备**\----- [刷题神器][Link 2]  
> **各大互联网大厂面试真题。基础题库到进阶题库等各类面试题应有尽有！  
> 牛客网面经合集,满足大厂面试技术深度，快速构建Java核心知识体系大厂面试官亲授，备战面试与技能提升，主要考点+主流场景+内功提升+真题解析**

##  ##

## Thymeleaf ##

### 基本介绍 ###

*  Spring Boot 官方推荐使用 Thymeleaf 作为其模板引擎。SpringBoot 为 Thymeleaf 提供了一系列默认配置，并且为Thymeleaf提供了视图解析器。
 *  项目中一但导入了 Thymeleaf 的依赖，相对应的自动配置 （ThymeleafAutoConfiguration） 就会自动生效，因此 Thymeleaf 可以与 Spring Boot 完美整合 。
 *  Thymeleaf模板引擎可以和html标签完美结合，便于后端渲染数据。
 *  Thymeleaf支持**静态效果和动态效果**，在没有动态数据的时候，会展示静态效果
 *  **模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档**就是将模板文件和数据通过模板引擎生成一个HTML代码\*\*
 *  常见的模板引擎有：jsp、[freemarker][]、velocity、thymeleaf
 *  Thymeleaf默认写的位置是在**templates**这个目录下面
 *  Thymeleaf官网:[https://www.thymeleaf.org/][https_www.thymeleaf.org]

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

> ### Thymeleaf默认的视图路径是：/ resources/templates,在这个目录下面创建html并引入thymeleaf ###

xmlns:th=“http://www.thymleaf.org”>

### 基本语法 ###

> $\{域属性名\}:获得request域中的域属性值并显示  
> $\{session.域属性名\}: 获得session域中的域属性值并显示

< p th:text="${name}">aaa</p>

如果取得到数据的话，就会渲染成动态画面，否则就渲染成静态画面(只显示学生管理系统只显示学生管理系统这几个字)  
![在这里插入图片描述][f0d16432638f49f8b8d056942cc23451.png]

#### th:text文本替换 ####

#### th:if和th:unless文本替换 ####

> 使用th:if和th:unless属性进行条件判断，th:unlessth:unless刚好相反，只有表达式条件不成立才会显示内容

#### th:each foreach循环 ####

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .tb-stus{
          
                width: 900px;
                margin: 0 auto;
                border: black 1px solid;
                border-collapse: collapse;
            }
            .tb-stus th,td{
          
                padding: 10px;
                text-align: center;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <h2 align="center">学生管理系统</h2>
        <table class="tb-stus">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>生日</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="stu:${stuList}">
                    <td>1</td>
                    <td th:text="${stu.name}">aa</td>
                    <td>22</td>
                    <td>男</td>
                    <td>计科1班</td>
                    <td>2022-2-3</td>
                    <td>
                        <a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

![在这里插入图片描述][865c5ede659a4c72b9fe507c332b7035.png]

[IDEA使用Thymeleaf输入 th: 没有智能提示的全新解决办法][IDEA_Thymeleaf_ th_]

#### th:href和@\{\}链接表达式 ####

<a th:href="${
         '/stus/'+ stu.id}">编辑学生1</a>
    
    
    <a th:href="@{/stus(id=${stu.id})}">编辑学生2</a>
    
    
    <a th:href="@{/stus(id=${stu.id},name=${stu.name})}">编辑学生3</a>

#### th:switch和th:case ####

#### thymeleaf默认给变量名+Stat的状态 ####

> **如果没有显示设置状态变量，thymeleaf会默认给一个变量名+Stat的状态**

#### th:id、th:value、th:checked等(和form表单相关) ####

> **th:object可以定义对象属性**  
> \***\{\}可以和th:object配合使用，可以取出对象中的属性**
> 
> ### \#dates.format()可以用来格式化日期格式 ###

## 整合Thymeleaf ##

### 基本配置 ###

> **创建项目的时候，记得在模板引擎中勾选Thymeleaf**  
> ![在这里插入图片描述][b67d3d4d110649dcbb8dc7a7aa2f625a.png]  
> 在pom.xml中把MySQL驱动的作用域删除  
> 然后我们这里使用druid连接池，所以需要在pom文件导入相关依赖

<dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>1.2.11</version>
            </dependency>

> 然后我们需要在全局配置文件application.properties中进行相关配置

# 指定Mybatis的Mapper接口的xml映射文件的路径
    mybatis.mapper-locations=classpath:mapper/*xml
    # MySQL数据库驱动
    #这个驱动也可以省略，可以根据使用的MySQL自动加载相应的驱动
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    # 数据源名称
    spring.datasource.name=com.alibaba.druid.pool.DruidDataSource
    # 数据库连接地址
    spring.datasource.url=jdbc:mysql://localhost:3306/school?serverTimezone=UTC&zeroDateTimeBehavior=convertToNull
    # 数据库用户名和密码
    spring.datasource.username=root
    spring.datasource.password=a87684009.
    # 设置日志级别
    logging.level.com.zyh.springboot=debug
    # 开启mybatis驼峰命名规则自动转换功能
    mybatis.configuration.map-underscore-to-camel-case=true

### 数据库准备 ###

### 准备好数据库中表所对应的实体类,以及三层结构 ###

> ![在这里插入图片描述][ebb1118115c342a4b83a1856cfa3a127.png]  
> ![image.png][]

@Data
    public class Stu {
        
        private Integer id;
        private String name;
        private Integer age;
        private Boolean gender;
        private Integer cid;
        @DateTimeFormat(pattern = "yyyy-MM-dd")
        private Date birth;
    }

### 三层架构 ###

Mapper

@Mapper
    public interface StuMapper {
        
        /**
         * 查询所有学生信息
         * @return
         * @throws Exception
         */
        @Select("select * from stu")
         List<Stu> queryAllStu() throws Exception;
    }

Service

public interface StuService  {
        
        /**
         * 查询所有学生信息
         * @return
         */
        List<Stu> queryAllStu() throws Exception;
    }

Service的实现类

thymeleaf

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymleaf.org">
      <head>
        <meta charset="UTF-8">
        <title>Title</title>
      </head>
      <body>
        <h2>学生管理系统</h2>
        <h2 th:text="${name}">aaaa</h2>
      </body>
    </html>

Controller

@Controller
    @RequestMapping("/stu")
    public class StuController {
        
        @Autowired
        private StuService stuService;
        /**
        * 显示学生管理系统的画面
        * @return
        */
        @RequestMapping("/stusUi")
        public String stusUi(){
        
            return "stus";
        }
    }

![在这里插入图片描述][cdd2ce262f1a44838412f9796ef1ae4f.png]

![在这里插入图片描述][3b580364bfd64b6396f011b2437d452e.png]

![在这里插入图片描述][10e4141334464e488213679ee2a1e39a.png]

然后我们先准备好页面

<!DOCTYPE html>
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .tb-stus{
          
                width: 900px;
                margin: 0 auto;
                border: black 1px solid;
                border-collapse: collapse;
            }
            .tb-stus th,td{
          
                padding: 10px;
                text-align: center;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
    <h2 align="center">学生管理系统</h2>
    <table class="tb-stus">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="stu,status: ${stuList}">
            <td th:text="${status.index+1}">1</td>
            <td th:text="${stu.name}">aa</td>
            <td th:text="${stu.age}">22</td>
    
            <td th:if="${stu.gender}">男</td>
            <td th:unless="${stu.gender}">女</td>
            <td th:text="${stu.cid}">计科1班</td>
           <td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3</td>
            <td>
                
                <a th:href="@{/stu/delete(id=${stu.id})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    </body>
    </html>

![在这里插入图片描述][e36646b5995b4508b1f128609ee8f5c1.png]

当我们点击删除的时候，后端要根据前端传过来的id来从数据库中删除对应的数据。这里我们先按照我们之前学的时候，熟悉的方法来完成，到后面的时候，会详细讲前后端分离开发

### 删除操作 ###

Controller(之前的方法这里没有粘贴出来，不然代码太多了)

@Controller
    @RequestMapping("/stu")
    public class StuController {
        
        @Autowired
        private StuService stuService;
       
        /**根据id删除数据
         * http://localhost:8080/stu/delete?id=10
         * @return
         */
        @RequestMapping("/delete")
        public String deleteById(@RequestParam("id") Integer id){
        
            try {
        
                stuService.deleteByid(id);
            } catch (Exception e) {
        
                e.printStackTrace();
            }
            System.out.println(id);
            return "redirect:/stu/stusUi";
        }
    
    
      }

Service

public interface StuService  {
        
        /**
         * 查询所有学生信息
         * @return
         */
        List<Stu> queryAllStu() throws Exception;
    
        void deleteByid(Integer id);
    }

Service实现类

@Service
    public class StuServiceImpl implements StuService {
        
        @Autowired
        private StuMapper stuMapper;
        @Override
        public List<Stu> queryAllStu() throws Exception {
        
             return stuMapper.queryAllStu();
        }
    
        /**
         * 根据id删除数据
         * @param id
         */
        @Override
        public void deleteByid(Integer id) throws Exception {
        
            stuMapper.deleteById(id);
        }
    }

Mapper

@Mapper
    public interface StuMapper {
        
        /**
         * 查询所有学生信息
         * @return
         * @throws Exception
         */
        @Select("select * from stu")
         List<Stu> queryAllStu() throws Exception;
        @Delete("delete from stu where id=#{id}")
        void deleteById( Integer id);
    }

把编号为8的数据删除  
![在这里插入图片描述][e44e3fe231104029b466e6ef2baf8d56.png]

### 编辑操作 ###

页面stus.html

<!DOCTYPE html>
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .tb-stus{
          
                width: 900px;
                margin: 0 auto;
                border: black 1px solid;
                border-collapse: collapse;
            }
            .tb-stus th,td{
          
                padding: 10px;
                text-align: center;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
    <h2 align="center">学生管理系统</h2>
    <table class="tb-stus">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="stu,status: ${stuList}">
            <td th:text="${stu.id}">1</td>
            <td th:text="${stu.name}">aa</td>
            <td th:text="${stu.age}">22</td>
    
            <td th:if="${stu.gender}">男</td>
            <td th:unless="${stu.gender}">女</td>
            <td th:text="${stu.cid}">计科1班</td>
             <td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3</td>
            <td>
    
    
                
                <a th:href="@{/stu/delete(id=${stu.id})}">删除</a>
                <a th:href="@{/stu/edit(id=${stu.id})}">编辑</a>
            </td>
        </tr>
        </tbody>
    </table>
    
    </body>
    </html>

页面 stu-edit.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
      <head>
        <meta charset="UTF-8">
        <title>编辑画面</title>
      </head>
      <body>
        <h2 >编辑学生信息</h2>
        <form action="" method="post" th:object="${stu}">
          学号:<input type="text" name="id" th:value="*{id}"  ><br><br>
          姓名:<input type="text" name="name"  th:value="*{name}"><br><br>
          年龄:<input type="text" name="age"  th:value="*{age}"><br><br>
          性别:<input type="radio" name="gender"    th:checked="*{gender}"  >男
          <input type="radio" name="gender"   th:checked="*{!gender}" >女<br><br>
          班级:<input type="text" name="cid" th:value="*{cid}"><br><br>
          生日:<input type="text" name="birth" th:value="*{#dates.format(birth,'yyyy-MM-dd')}"><br><br>
          <input type="submit" value="编辑">
        </form>
      </body>
    </html>

Controller

/**
         * 根据id来修改数据
         * 我们首先得先根据id把数据查询出来，然后把数据展示出来
         * 用户再进行编辑，用户编辑完并且提交以后，跳转到学生管理系统画面，展示所有数据
         * @return
         */
        @RequestMapping("/edit")
        public String edit(@RequestParam("id") Integer id,Model model){
        
            System.out.println("id"+id);
            try {
        
                Stu stu=stuService.queryById(id);
                model.addAttribute("stu",stu);
            } catch (Exception e) {
        
                e.printStackTrace();
            }
    
            return "stu-edit";
        }

Service

public interface StuService  {
        
        /**
         * 查询所有学生信息
         * @return
         */
        List<Stu> queryAllStu() throws Exception;
    
        /**
         * 根据id来删除学生信息
         * @param id
         * @throws Exception
         */
        void deleteByid(Integer id) throws Exception;
    
        /**
         * 根据id来查询对应学生信息
         * @param id
         * @return
         * @throws Exception
         */
        Stu queryById(Integer id) throws Exception;
    }

Service实现类

Mapper

@Mapper
    public interface StuMapper {
        
        /**
        * 查询所有学生信息
        * @return
        * @throws Exception
        */
        @Select("select * from stu")
        List<Stu> queryAllStu() throws Exception;
        @Delete("delete from stu where id=#{id}")
        void deleteById( Integer id);
        @Select("select * from stu where id=#{id}")
        Stu queryById(Integer id) throws Exception;
    }

![在这里插入图片描述][3ae9dc2079eb449ca5e2ca2fdf8dd085.png]

比如在序号为4中，点击编辑  
![在这里插入图片描述][c9e0350ab2384542b5465c83c01a64fd.png]

### 用户登录 ###

登录页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2>用户登录</h2>
        <form action="/login" method="post">
            账号:<input type="text" name="username"><br><br>
            密码:<input type="password" name="password"><br><br>
            <input type="submit" value="登录">
        </form>
    
    
    </body>
    </html>

因为需要判断用户是否存在，这是从数据库进行查询的，所以要准备对应的管理员表

# 创建管理员表
    CREATE TABLE admin(
    	id INT PRIMARY KEY AUTO_INCREMENT,
    	username VARCHAR(20),
    	`password` VARCHAR(20)
    ); 
    
    INSERT INTO admin VALUES
    	(DEFAULT,'aaa',111),
    	(DEFAULT,'bbb',222),
    	(DEFAULT,'ccc',333);
    # 查询测试
    SELECT * FROM admin;

准备对应的实体类

@Data
    public class Admin {
        
        private String username;
        private String password;
    }

Controller

@Controller
    @SessionAttributes(names = {
        "admin"})
    public class AdminController {
        
        @Autowired
        private AdminService adminService;
    
        /**
         * 显示登录页面
         * @return
         */
        @RequestMapping(value = "/loginUi")
        public String loginUi(){
        
            return "login";
        }
        @RequestMapping(value = "/login",method = RequestMethod.POST)
        public String login(String username, String password, Model model){
        
            try {
        
                Admin admin = adminService.login(username, password);
                //用户名存在说明登录成功
                if (admin!=null){
        
                    //存放到session域中
                    model.addAttribute("admin",admin);
                    return "redirect:/stu/stusUi";
                }
            } catch (Exception e) {
        
                e.printStackTrace();
            }
            return "redirect:/loginUi";
        }
    
    }

Service

public interface AdminService {
        
        Admin login(String username,String password) throws Exception;
    }

Service对应的实现类

@Service
    public class AdminServiceImpl implements AdminService {
        
        @Autowired
        private AdminMapper adminMapper;
        @Override
        public Admin login(String username, String password) throws Exception {
        
            return adminMapper.queryByUsernameAndPassword(username,password);
        }
    }

Mapper

@Mapper
    public interface AdminMapper {
        
        @Select("select * from admin where username=#{username} and password=#{password}")
        Admin queryByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
    }

![在这里插入图片描述][e213ea5696d1405faf1d3fda52e018da.png]

![在这里插入图片描述][9ed47235a7b2413db8d3f3a420eebc3a.png]

<!DOCTYPE html>
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .tb-stus{
          
                width: 900px;
                margin: 0 auto;
                border: black 1px solid;
                border-collapse: collapse;
            }
            .tb-stus th,td{
          
                padding: 10px;
                text-align: center;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <h2 align="center">学生管理系统</h2>
        <h2 th:if="${session.admin!=null}" th:text="${session.admin.username}">用户名</h2>
        <a th:unless="${session.admin!=null}" href="/loginUi">登录</a>
        <a th:if="${session.admin!=null}" href="/logout">注销用户</a>
    <table class="tb-stus">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="stu,status: ${stuList}">
            <td th:text="${stu.id}">1</td>
            <td th:text="${stu.name}">aa</td>
            <td th:text="${stu.age}">22</td>
    
            <td th:if="${stu.gender}">男</td>
            <td th:unless="${stu.gender}">女</td>
            <td th:text="${stu.cid}">计科1班</td>
            <td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3</td>
            <td>
    
    
                
                <a th:href="@{/stu/delete(id=${stu.id})}">删除</a>
                <a th:href="@{/stu/edit(id=${stu.id})}">编辑</a>
            </td>
        </tr>
        </tbody>
    </table>
    
    </body>
    </html>

![在这里插入图片描述][d472a95092d048c592b8c100fdea2a8f.png]  
![在这里插入图片描述][11f8b455b508414f929a7ad4b0fe8c3f.png]

![在这里插入图片描述][acfc13fe772546ce95fb1a06b5f3ff51.png]

### 用户注销 ###

注销的话，我们把session域中的用户对象取消，然后这个时候就得重新登录，应该要跳转到登录画面

@RequestMapping("/logout")
        public String logout(HttpSession session){
        
            session.removeAttribute("admin");
            return "redirect:/loginUi";
        }

![在这里插入图片描述][ed1318ed6deb43d3a0da34a8b5fecb7b.png]

点击注销用户  
![在这里插入图片描述][58e7ab1c5bfe4144bc108e253fb9881e.png]

[Link 1]: https://blog.csdn.net/qq_52797170?spm=1010.2135.3001.5343
[Link 2]: https://www.nowcoder.com/link/pc_csdncpt_pkq_sf
[freemarker]: https://so.csdn.net/so/search?q=freemarker&spm=1001.2101.3001.7020
[https_www.thymeleaf.org]: https://www.thymeleaf.org/
[f0d16432638f49f8b8d056942cc23451.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/aa0e6d5731484301a3d75fffb9f7f903.png
[865c5ede659a4c72b9fe507c332b7035.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/8b32454a31f24068a0540b689a1fd38f.png
[IDEA_Thymeleaf_ th_]: https://blog.csdn.net/qq_43446147/article/details/108000547
[b67d3d4d110649dcbb8dc7a7aa2f625a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/28136d2ac8f541ea929d52a6dae7fa28.png
[ebb1118115c342a4b83a1856cfa3a127.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/8392b9a242374b3aa3281d91d074dee2.png
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f7c1c53219f8469f9b2eb4a191d3a4bb.png
[cdd2ce262f1a44838412f9796ef1ae4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f7b22aab135a41b5a2cbf909f7977c97.png
[3b580364bfd64b6396f011b2437d452e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/70d234c1c36f4c65825363241e06988d.png
[10e4141334464e488213679ee2a1e39a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/456faeadf68f4578a6b56eae25319a15.png
[e36646b5995b4508b1f128609ee8f5c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/dc3f0d9dfdc74b989c75ebc11e4faa91.png
[e44e3fe231104029b466e6ef2baf8d56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/ee4f99ebfef149fabc561a45be0017e4.png
[3ae9dc2079eb449ca5e2ca2fdf8dd085.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/ee3ca2480f524f4686ca4e71d5d1dd45.png
[c9e0350ab2384542b5465c83c01a64fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/b0e3a71015e04c5d965b51553382a72a.png
[e213ea5696d1405faf1d3fda52e018da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/3c4ec758c0a349fd92ae4fbb9af4bea7.png
[9ed47235a7b2413db8d3f3a420eebc3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/2d22e585ad2546018235f56befed7f09.png
[d472a95092d048c592b8c100fdea2a8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/31d205b1364c4f1baba719ffb819cc49.png
[11f8b455b508414f929a7ad4b0fe8c3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/b007c38321944e94b856ad7c21d36a78.png
[acfc13fe772546ce95fb1a06b5f3ff51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/556ae94ce0274c3b9d93a708ab75dadf.png
[ed1318ed6deb43d3a0da34a8b5fecb7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/10e9d120dcb14679bc1d874fd38e2eb6.png
[58e7ab1c5bfe4144bc108e253fb9881e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/b08ed69a7f44404dbc80cc27892693f0.png