若依前后端分离版，快速上手

分手后的思念是犯贱 2024-05-23 18:51 52阅读 0赞

![168c1abc67f4402ebfc99ff077a3e4da.gif][]

> 哈喽~大家好，这篇来看看若依前后端分离版，快速上手（肝了挺久的）。
> 
> ?个人主页：[个人主页][Link 1]
> 
> ? 系列专栏：[【Springboot和Vue全栈开发】][Springboot_Vue]
> 
> ?与这篇相关的文章：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>JAVA进程和线程</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/125690885?spm=1001.2014.3001.5501" title="JAVA进程和线程-CSDN博客" rel="nofollow">JAVA进程和线程-CSDN博客</a></td> 
>   </tr> 
>   <tr> 
>    <td>HttpClient 入门使用示例</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/133146295?spm=1001.2014.3001.5501" title="HttpClient 入门使用示例-CSDN博客" rel="nofollow">HttpClient 入门使用示例-CSDN博客</a></td> 
>   </tr> 
>   <tr> 
>    <td>Spring Task 快速入门</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/133363077?spm=1001.2014.3001.5501" title="Spring Task 快速入门-CSDN博客" rel="nofollow">Spring Task 快速入门-CSDN博客</a></td> 
>   </tr> 
>  </tbody> 
> </table>

**目录**

一、前言

1、什么是若依？

二、验证码

1、验证码前端实现

2、验证码后端实现

3、反向代理

三、登录后端实现

四、获取用户角色和权限

1、getInfo前端实现

2、getInfo后端实现

五、获取动态菜单路由

1、前端实现

2、后端实现

六、首页数据加载

七、用户数据分页

八、部门树状图

九、添加用户数据

1、回显数据

2、新增操作

十、修改用户信息

十一、删除用户

十二、异步任务管理器

十三、代码自动生成器

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

## 一、前言 ##

### **1、什么是若依？** ###

> **若依框架（RuoYi）是一套基于Java开发的快速开发框架，它提供了许多常用的功能模块和工具**，包括用户管理、部门管理、角色管理、菜单管理、字典管理、系统监控、定时任务等。若依框架采用了MVC（Model-View-Controller）的架构模式，使用了Spring Boot、MyBatis等流行的开源框架，可以帮助开发者快速搭建企业级的后台管理系统。**若依框架还提供了许多可视化的操作界面，使得开发者可以方便地进行系统配置和管理。**

## 二、验证码 ##

### 1、验证码前端实现 ###

在运行成功之后前端会自动进入到后台管理系统界面，然后发送一个验证码的一个请求“captchaImage”，打开前端代码login.vue里面的created方法。

![934f1c57e892470b966d9cd4c4ed213c.png][]

之后执行getCodeImg生成一张图片显示在网页上。

**验证码的验证规则是怎样的呢？**

> 在后端会直接生成一个表达式，例如：1+1=2，那么就会将这个格式转换为 1+1=?@2 ，1+1=? 转成图片，传到前端进行展示，而将2 存入 Reids里面，我们看看后端代码。

### 2、验证码后端实现 ###

在CaptchaController控制器类中的getCode方法大哥断点，这里就显示的将1+1=2的格式转为1+1=?@2。

![08302f98500849d3af3e8df07d5b6f6f.png][]

然后将key（就是verifyKey）与value（是code）还有设置验证码有效期（分钟）、存储到redis里面，前端验证验证码就直接从redis里面进行验证。

![dac95a93819b466089c7843cfbc139e6.png][]

![246ade074f5d4555ae097921a9ddd359.png][]

### 3、反向代理 ###

前端代码是80端口，后台代码是8080端口，但是我们F12打开控制台来查看，为什么localhost没有带端口号呢？为什么又多了一个dev-api的路径呢？

![be8a4d49794d4573a7e6d046aaf2361f.png][]

在前端的vue.config.js文件当中，这里的作用是反向代理，路径重写。

proxy: { // 反向代理，8080 -> 80
          // detail: https://cli.vuejs.org/config/#devserver-proxy
          [process.env.VUE_APP_BASE_API]: {
            target: `http://localhost:8080`,
            changeOrigin: true,
            pathRewrite: { // 路径重写
              ['^' + process.env.VUE_APP_BASE_API]: '' // 替换为空，然后再映射
            }
          }
        },

其中里面有一块是VUE\_APP\_BASE\_API，这个开发环境，在其后面添加路径为 /dev-api 。

![ff70ed76aeb5457b93dd8581d9aa7072.png][]

## 三、登录后端实现 ##

> 找到login方法，首先它会进行验证码校验，对当期的用户名进行验证，首先先判断验证码是否为空，然后转载redis里面拿出键值，进行用户输入的验证码与redis取出来的进行对比，输入错误抛出异常，然后发出一个异步请求来记录登录信息（记录打印信息到日志、获取客户端操作系统、获取客户端浏览器、对象）然后将数据插入进去。

![8ec251a462b14e64a015050a78e158b8.png][]

![c47be16b762c425fa3e0c74e377a6098.png][]

然后登录前置校验，检验（用户名或密码为空、密码如果不在指定范围内、IP黑名单校验）。

登录操作查询出来用户存在（账号与密码都正确），然后插入当前用户的操作、记录登录信息、生成token（返回给前端）。

![cb325bff771a4201a485a3c804d38972.png][]

## 四、获取用户角色和权限 ##

在输入完正确的用户名、密码、验证码，我们可以看到一个名为getInfo的请求。

### 1、getInfo前端实现 ###

![0455a03d7cc64b14a3d319a5570f2e2a.png][]

这其实是个全局获取当用户登录之后会立即发送，作用是获取当前用户的角色和权限信息，并且存储到 Vuex 中，这个在permission.js 文件当中。

![83a1c2a774904037a09f3af12554d814.png][]

**扩：vue中 router.beforeEach() 的作用——router.beforeEach 是全局钩子函数，它是在路由跳转之前所调用的函数，在实际开发中页面进度条的加载、设置页面标题、判断用户是否已经登录过了等等都可以在该函数中执行。**

点击GetInfo进去看看，GetInfo是一个方法其作用是获取用户信息。

![7f2195e9522d421c8fdcb210c6cce341.png][]

货到最上面getInfo是来自/api/login文件下的，进去看看，这里就是发起请求的路径了，方式为get。

![97513df68d2f4c45818673f458dd5c97.png][]

![23a28db80896416ab2d58689feed83e8.png][]

### 2、getInfo后端实现 ###

进入到控制层getInfo方法。

![4846f3568553496eb3182562a3089c9a.png][]

getRolePermission：查询当前用户的角色信息，是管理员add("admin")，不是的话，去数据库里面查找用户。

![a12ef479ce0347e9b0293f94b3c10334.png][]

getMenuPermission：查询用户的权限信息。

![cb03566cb56d435b889a2e4fb9b38abc.png][]

如果是管理员就是 \*:\*:\* （获取全部的权限，菜单：目录：按钮）,不是的话去数据库里面查找权限。

然后将获取到的user、roles、permissions封装到AjaxResult里面返回给前端。

**前端如何解析后端返回的数据呢？**

> 在之前的GetInfo方法里面的commit（将值存储到vuex里面），将信息解析出来，渲染到页面上面。

![1eedbc824bf344da8c2d75113c2bd62d.png][]

## 五、获取动态菜单路由 ##

我们看到左边的菜单栏是动态生成的，不是直接写死在页面上面，不同的用户有不同的权限，就有不同的菜单，这个是如何实现的呢？

![57f0981dfa124024b6a4a23f654684ca.png][]

### 1、前端实现 ###

控制台有一个getRouters请求，很明显这个就是实现动态菜单的请求了，而且这个貌似与上面的getInfo一样，是全局路由？

打开permission.js文件很明显GenerateRoutes这个就是我们要找的，进去看看，同样的生成路由，从后端获取信息解析。

![5bcd97c4294b4ee893b7e4e7660332bf.png][]

但是getRouters是在/api/menu目录下的，去看看，一个发起请求的路径。

![eb68e62da6554bb4b76798c98b79f82e.png][]

### 2、后端实现 ###

这里猜一下，菜单实现的方法是什么？——递归，我们找的getRouters，来看看。

![1c1d0e1959364147b21717a9985bea90.png][]

> **selectMenuTreeAll：**查找管理员的权限对应的菜单数据。
> 
> **selectMenuTreeByUserId：**查找不是管理员的权限对应的菜单数据。

![383d3f461e7a40a1808a627c27c39562.png][]

一直追踪selectMenuTreeAll 一直到mapper文件，找到sql，直接cv到navicat 运行看看啥效果。

![bff563d1d41b4428b90a90fe8dc58f45.png][]

其中sys\_menu 这张表有menu\_id与parent\_id，这两个就是分辨哪个是哪个的子菜单，parent\_id为0的就是父菜单，最最顶上面的。

将查出来的值menus与0（0的值就是parentId，先查找父菜单）传到getChildPerms方法里面。

迭代list里面的值的getParentId，如果等于parentId值，那就是父菜单。

![e68da738c77f4ef78fb689041c968a11.png][]

然后开始递归（方法为recursionFn），思路一样，如果list里面的值的getParentId，如果等于parentId值，那就是找到了对应的父菜单；这样一级一级的组成一个类似链表的一个结构，最后返回给控制层一个List<SysMenu>类型的数据，封装成AjaxResult，返回给前端。

前端将AjaxResult一个一个组装成路由字符串，转换为组件对象。

![11f7f9d2e86f42f1b0bdf77eb7c99356.png][]

## 六、首页数据加载 ##

登录完成之后，会直接进入到首页这个是怎么实现的呢？

![cd78c14757a34ebcb24505aaa003a555.png][]

在handleLogin方法里面，当用户登录成功之后直接重定向到“/”。

![3617ba5396cd438aa078a760c5b36462.png][]

**这个路径对应到哪呢？**

> 其实是router里面的index.js文件。

![1568cc9562604ed89d2db83c4a79dead.png][]

点击进去看看

<navbar/> 导航栏

<app-main/>首页

![2bac47ee2ba6468d8311c580d556a714.png][]

找到Sidebar文件的index.js，里面可以看到有一个v-for，这个就是之前的，动态菜单后端传来的数据通过循环一个一个渲染到页面上面的。

![6580382b4cd54e80aaece0c14aaa741f.png][]

## 七、用户数据分页 ##

进入到页面之后，我们点击用户管理，其中会发送一个list请求加上分页信息pageNum=1&pageSize=10，这个是如何实现的呢？

![811e74e77d8a444fa6939e9025bec256.png][]

找到对应的index文件。

![90ff52de06164b7796169cb75313df5b.png][]

数据在页面加载的时候就出来了，这肯定一初始化有关（created()方法）。

> **this.getList()：**获取用户管理数据。
> 
> **this.getDeptTree()：**获取旁边的部门信息。

listUser向后端发起请求，后端接收。

![4bf3e7bbcbb44cea87d058d9c59bc9af.png][]

找到list。

> **startPage（）：**设置请求分页数据。
> 
> **selectUserList（）：**查找用户信息。
> 
> **getDataTable（）：**响应请求分页数据

![b45df161a8f243109c564aa2390d9c80.png][]

利用分页插件（PageHelper）将响应请求分页数据返回给前端。

其中：

> **1、startPage()**
> 
> PageHelper 中的 reasonable 对参数进行逻辑处理，保 证参数的正确性， pageNum = 0/-1，pageNum = 1
> 
> **2、userService.selectUserList(user);**
> 
> 注解 @DataScope(deptAlias = "d", userAlias = "u") 给表设置别名的，sys\_dept d，sys\_user u

## 八、部门树状图 ##

在前面写到，当页面初始化的时候，会直接加载三个方法，其中getDeptTree就是查出所有的部门数据。

![c6b5d578b500460880c52dbf517b1623.png][]

![a2f11606e9cd444badba134af03a4848.png][]

进入user.js里面，路径是/system/user/deptTree，直接到后端查找。

![93e6ca92aebe436682ce2f7a963b69c6.png][]

进入控制层进入到selectDeptTreeList里面看看。

![fb36eb437061455e9bc408a29158e1d1.png][]

其中selectDeptList方法是查询部门管理数据，buildDeptTreeSelect是构建前端所需要下拉树结构，将selectDeptList查询出来的结果depts传给buildDeptTreeSelect。

![ff3a306e809c48abacf701c18f9364ba.png][]

![a36ce994797f4a2dbd95a86c1c8f9ee5.png][]

其中buildDeptTree是构建前端所需要树结构，里面看到了老面孔——recursionFn，逻辑与前面一样，如果父节点等于子节点，那么子节点就是父节点的子菜单。

> **recursionFn：**递归列表。

![95ff29d7cb524cd6b8fee9d84d5a5410.png][]

然后将结果返回给前端，前端再解析出来。

## 九、添加用户数据 ##

### 1、回显数据 ###

在user/index.vue里面找到新增按钮的方法，其中里面有一个名为reset，他的作用是在打开的新增表单重置。

![e773591936f44894927474a7857f4b55.png][]

![fbdf66e5fcd44d1fb37b5448d0063d20.png][]

![2ae0707bb5254dc398442ddcf6e283b8.png][]

然后里面getUser方法，点进去，很熟悉前面讲过的，只是后面加了个参数（userId），路径为/system/user/userId，传给后端。

![df29ca3830e74fb5b44aaf566aff9aae.png][]

后端控制层找到方法GetMapping，接受无路径与有路径为userId

![c01853afe1e94f0ea0264d3553da4c05.png][]

> **checkUserDataScope：**校验用户是否有数据权限。
> 
> **selectRoleAll：**查询所有角色。
> 
> **selectPostAll：**查询所有岗位。

将这些数据回显到页面上去，也就是现在我们能看到的归属部门、岗位、角色所选的下拉列表。

然后再根据用户ID查询用户（selectUserById），然后将数据封装返回给前端。

### 2、新增操作 ###

将基本信息填写完成之后，点击确定按钮数据提交给后端。

![f442fe7809d64d0d8d96dd7bf052c9d2.png][]

通过点击事件找到方法

![f1cb6ec0e9c84499a91d2efe13aa0a75.png][]

新增与修改请求路径如下。

![ae85af3946bb47e09da753c3299c2dbd.png][]

控制层先做判断（登录账号已存在、手机号码已存在、邮箱账号已存在），然后设置登录用户名、对密码进行加密（密码默认的是123456）。

![93c9a6b180f2455b971448e63015f114.png][]

然后直接向DB（sys\_user表）插入数据。

![fa1f3abf3f874cbf9f375bebae3c5b8e.png][]

然后新增用户岗位关联（insertUserPost）、新增用户与角色管理（insertUserRole）

![803f4ac6e5b747bbb3c1b3053121d732.png][]

![3f454e4963d448b1bc4b074673c3dadf.png][]

其实就是对三张表进行新增操作（sys\_user、sys\_user\_post、sys\_user\_role）。

![efb767207f53439682d4def3625ed9ba.png][]

![0ea0df3280a142798bcc0824d785e0bd.png][]

![c3789221cd1744c0a92d005d588fd658.png][]

## 十、修改用户信息 ##

找到修改按钮然后找到对应的点击事件方法——updateUser，同样的数据回显查询用户详细数据，然后数据回显在页面上，这里就不做过多的描述了。

![29cc44f5d8704163aa213c2bc091cd95.png][]

点击确定，触发updateUser，携带数据到后端路径为/system/user。

![04fc3b21083e4557b58a6532f0480b2e.png][]

点击updateUser，进入到业务层，发现这个不是和新增操作一样吗？对修改的逻辑就是先删除=后进行新增操作。

![a0a0597413c54b34b9c03adbac74b471.png][]

## 十一、删除用户 ##

找到删除的点击事件——handleDelete，路径为/system/user/userId，发送给后端，后端接收请求。

![097606573a8a4f91aa5293dc6148d096.png][]

首先先判断是否为当前正在操作的用户（也就是本人，本人操作肯定是不能删除的了）。

![377c4626b2c84291a833e44cbd814ef0.png][]

如果没有问题执行业务层，然后校验用户是否允许操作（checkUserAllowed 结果是 不允许操作超级管理员用户）、校验用户是否有数据权限（checkUserDataScope 结果是 没有权限访问用户数据）、然后删除用户与角色关联（deleteUserRole）、删除用户与岗位关联（deleteUserPost）、批量删除用户信息（deleteUserByIds）。

注意这里的批量删除用户信息不是真的删除而是一个逻辑删除，也就是修改他的状态del\_flag为2。

## 十二、异步任务管理器 ##

打开后端找到login的控制层点击login进入到业务层，在业务层中有一行这样的代码。

AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));

![73d0da8cd7b341dd8848a4b9483a7702.png][]

![810ad658ba1c4821b7486d323f9efc0e.png][]

**一看就很高级，那么他有什么作用呢？**

> **给出结论：**通过异步任务管理器记录登录日志。

**首先AsyncManager进去看看里面有啥？**一个异步任务管理器。找到me()，是个静态方法，return 了一个me，看看上面 懒汉式单例模式，分配异步任务。

![f2513d38769e4b8c94c9517ea8dc9f38.png][]

那么就是AsyncManager.me() 获取一个 AsycnManager 对象。

然后执行 execute 方法，执行任务，传入的是一个 Task 对象（就是AsyncFactory.recordLogininfor(username, Constants.LOGIN\_FAIL, MessageUtils.message("user.password.not.match")），这么大长一段，并设置操作延迟10毫秒。

![8ab0f3e6e3654dde866bec1b7e71a629.png][]

TimerTask实现了TimerTask接口，由线程 Thread 去执行。

![4b768f1c1f51422498c82a0f017a9ce3.png][]

那么recordLogininfor的作用是记录登录信息，将代码cv出来。

/**
         * 记录登录信息
         * 
         * @param username 用户名
         * @param status 状态
         * @param message 消息
         * @param args 列表
         * @return 任务task
         */
        public static TimerTask recordLogininfor(final String username, final String status, final String message,
                final Object... args)
        {
            final UserAgent userAgent = UserAgent.parseUserAgentString(ServletUtils.getRequest().getHeader("User-Agent"));
            final String ip = IpUtils.getIpAddr();
            return new TimerTask()
            {
                @Override
                public void run()
                {
                    String address = AddressUtils.getRealAddressByIP(ip);
                    StringBuilder s = new StringBuilder();
                    s.append(LogUtils.getBlock(ip));
                    s.append(address);
                    s.append(LogUtils.getBlock(username));
                    s.append(LogUtils.getBlock(status));
                    s.append(LogUtils.getBlock(message));
                    // 打印信息到日志
                    sys_user_logger.info(s.toString(), args);
                    // 获取客户端操作系统
                    String os = userAgent.getOperatingSystem().getName();
                    // 获取客户端浏览器
                    String browser = userAgent.getBrowser().getName();
                    // 封装对象
                    SysLogininfor logininfor = new SysLogininfor();
                    logininfor.setUserName(username);
                    logininfor.setIpaddr(ip);
                    logininfor.setLoginLocation(address);
                    logininfor.setBrowser(browser);
                    logininfor.setOs(os);
                    logininfor.setMsg(message);
                    // 日志状态
                    if (StringUtils.equalsAny(status, Constants.LOGIN_SUCCESS, Constants.LOGOUT, Constants.REGISTER))
                    {
                        logininfor.setStatus(Constants.SUCCESS);
                    }
                    else if (Constants.LOGIN_FAIL.equals(status))
                    {
                        logininfor.setStatus(Constants.FAIL);
                    }
                    // 插入数据
                    SpringUtils.getBean(ISysLogininforService.class).insertLogininfor(logininfor);
                }
            };
        }

其实这串代码就是封装了当前登录用户的信息（获取客户端操作系统、获取客户端浏览器等）然后封装对象。插入数据（insertLogininfor）。

**但是！这里不会执行，而是将任务交给线程对象来执行，这里只是个任务而已。**

找到execute方法，点击进去，然后点击executor，executor是一个成员变量（异步操作任务调度线程池），将我们上面封装的对象交给线程池来执行。

![a2682adc986d4566b692fd781d44fbf6.png][]

![21f1f138cd2043758c25ef1c4098444d.png][]

敲两下shift键，将scheduledExecutorService cv到搜索框中找到scheduledExecutorService的bean。

![ba8ede099aeb4f3d949992946521249f.png][]

![4fa748b3b6fe4c37bfa56b78b2a96134.png][]

也就是说AsyncManager 的executor其实就是scheduledExecutorService返回的对象，那么ScheduledThreadPoolExecutor就是在创建线程池，大小为50（corePoolSize）。

![dcf7545711c24cc3bba45a9f9fc99687.png][]

> 那么逻辑就是：**异步任务管理器，内部定义了一个线程池，然后根据业务创建添加日志的任务，交给线程池来处理，这样做到日志和业务的抽象，解耦合，日志全部统一处理。**

> 举个例子，用户登录操作将登录的信息存储日志，同步的话用户登录请求完成之后等待日志插入请求完成，然后再执行用户登录后操作，异步的话将插入日志分离了出来，这样的话，不管是啥操作，都可以通过异步任务管理器，创建一个任务，交给线程池直接去执行（就不用我们去管了，线程池分配了他线程，他就会执行）大大提高了效率。

## 十三、代码自动生成器 ##

首先先创建数据表

create table test_user(
    id int primary key auto_increment,
    name varchar(11),
    password varchar(11)
    );

建完之后打开若依运行的web，在系统工具里面的代码生成，点击导入按钮。

![33b35a812665495993708bff5e48265a.png][]

然后编辑基本信息（带\*号的一定要填）。

![85b8e1fe1ca14faba38f451dfbd7d7c6.png][]

![e5180a4637544656b71c39f834f75894.png][]

然后点击生成代码。

![1c04f36ae1684959848f84550bca3c77.png][]

将下载好的压缩包解压出来，main（Java 后端代码），vue（Vue 前端代码），SQL（菜单 SQL），导入代码，重启项目。

注：如果后端抛出 404 异常，rebuild project，重新启动。

![b4b988e3eb824ad9b89afbc7ed9137f1.png][]

效果展示

![9d2fd38e739948a8a8cab7fbfd41f97f.png][]

> **不积跬步无以至千里，趁年轻，使劲拼，给未来的自己一个交代！向着明天更好的自己前进吧！**
> 
> ![d5358fcd619443fe98143f2fd5fef762.gif][]

[168c1abc67f4402ebfc99ff077a3e4da.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9d6899b09a64476dbe28ab0e2e8f921f.gif
[Link 1]: https://blog.csdn.net/aasd23?spm=1000.2115.3001.5343
[Springboot_Vue]: https://blog.csdn.net/aasd23/category_12088582.html?spm=1001.2014.3001.5482
[934f1c57e892470b966d9cd4c4ed213c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/1826d4c2ca3b4ee69bc04a0e408cf93a.png
[08302f98500849d3af3e8df07d5b6f6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/90e65d6fe14a4108bd3f52207cab5b47.png
[dac95a93819b466089c7843cfbc139e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b281f3d05e1443dc88564222d6a0e68e.png
[246ade074f5d4555ae097921a9ddd359.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/82554233d2f643f2b1f7e4c86d1738eb.png
[be8a4d49794d4573a7e6d046aaf2361f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/5f189a8a50094b31a1d1ef2e61ebab6c.png
[ff70ed76aeb5457b93dd8581d9aa7072.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4f0b28ead9834aff8dbab65328fb6105.png
[8ec251a462b14e64a015050a78e158b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8f34a6745f4e449697a39ebdb3fcbb8d.png
[c47be16b762c425fa3e0c74e377a6098.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/544a84419537419b83b9193c7d44ce17.png
[cb325bff771a4201a485a3c804d38972.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/a7302d5211234c0ab50989fe92d1cd4f.png
[0455a03d7cc64b14a3d319a5570f2e2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/50c04ee003aa452db746d434d43087a6.png
[83a1c2a774904037a09f3af12554d814.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b1a6951d5b6f4e5da018318a6e464cc0.png
[7f2195e9522d421c8fdcb210c6cce341.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/fcbba6e61e754ae6abcb9ef25e0a9ec6.png
[97513df68d2f4c45818673f458dd5c97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/2c715e5a1a36476991f5b3c69493e5d2.png
[23a28db80896416ab2d58689feed83e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/c78783c9a1524a249de7458d22186ecb.png
[4846f3568553496eb3182562a3089c9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f48621a9c22d4516b1693141ad2ced81.png
[a12ef479ce0347e9b0293f94b3c10334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/eec9d684c3774d73b3e045f2eef1cdf2.png
[cb03566cb56d435b889a2e4fb9b38abc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/df8ec22ba05f476c99af4d82d8f359ab.png
[1eedbc824bf344da8c2d75113c2bd62d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b86e8ccdfc3e413583a25d8847648f6a.png
[57f0981dfa124024b6a4a23f654684ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/608c069a18b24b578d6927bb8d4219ee.png
[5bcd97c4294b4ee893b7e4e7660332bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4d1ef2f90475409181f9363b063c3e7c.png
[eb68e62da6554bb4b76798c98b79f82e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/94108bf0a59743e1803e7193c1440c0b.png
[1c1d0e1959364147b21717a9985bea90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/28aa52bb413246cfb9f24a3e5291653b.png
[383d3f461e7a40a1808a627c27c39562.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/c7dad6bf94b84c43b626666326694f30.png
[bff563d1d41b4428b90a90fe8dc58f45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/64c5c659d2734a829375e2e6cfbf9fcc.png
[e68da738c77f4ef78fb689041c968a11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4ae9457051bf4954ae86725e7f845b8b.png
[11f7f9d2e86f42f1b0bdf77eb7c99356.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/69ca870abb2c4557962bfa6ff56ea699.png
[cd78c14757a34ebcb24505aaa003a555.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b5d9605ebc2d4935970ca762794bbbcc.png
[3617ba5396cd438aa078a760c5b36462.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/aa22c260fa6e4b5c9bae69d46c2bc505.png
[1568cc9562604ed89d2db83c4a79dead.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/a3ea3886bd904600a5491aa5a44d45f8.png
[2bac47ee2ba6468d8311c580d556a714.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f25b205e25334816b8acb484ce8c9b33.png
[6580382b4cd54e80aaece0c14aaa741f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/ef747d00d9764b878d31d0f301e0be9d.png
[811e74e77d8a444fa6939e9025bec256.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8ab49f4d998c455d96b13d0684669af6.png
[90ff52de06164b7796169cb75313df5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/05b06df1979045a081009bc88698f74e.png
[4bf3e7bbcbb44cea87d058d9c59bc9af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f6d720914fd949008d5594600f7f3209.png
[b45df161a8f243109c564aa2390d9c80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/12681a2cd504434fa5a0677a6c8a3155.png
[c6b5d578b500460880c52dbf517b1623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4db2b59a9fdd4ea386b2a5b4752b8998.png
[a2f11606e9cd444badba134af03a4848.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/05d5ad76de90478aa905e8581e486dbd.png
[93e6ca92aebe436682ce2f7a963b69c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/28807834783c47feae4c67d54b30aa9d.png
[fb36eb437061455e9bc408a29158e1d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8ef53444dc244f868b72b633901413ab.png
[ff3a306e809c48abacf701c18f9364ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7abc41f7859f43b7acf2f54e6611bbab.png
[a36ce994797f4a2dbd95a86c1c8f9ee5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/46523b62845c420888eac58636130ddb.png
[95ff29d7cb524cd6b8fee9d84d5a5410.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/c51ac03660f04b87abe411146135ebaa.png
[e773591936f44894927474a7857f4b55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b19a3708013a414bad6ea03e77c0c78d.png
[fbdf66e5fcd44d1fb37b5448d0063d20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/eaa5c05f2931447c9048c7856adf517f.png
[2ae0707bb5254dc398442ddcf6e283b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/04c5bac087c44ffabdab9ff4efd1f46f.png
[df29ca3830e74fb5b44aaf566aff9aae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/1d1976e5c06b473b8c7e80f1066196f7.png
[c01853afe1e94f0ea0264d3553da4c05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4d2a6770ed1e40089fa40b1e0844bef9.png
[f442fe7809d64d0d8d96dd7bf052c9d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0f97bf5535a6421aa3cd60671fd9867b.png
[f1cb6ec0e9c84499a91d2efe13aa0a75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/215e41cc59644505a147677c3c61a3e7.png
[ae85af3946bb47e09da753c3299c2dbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/753fb8de11b8401c915ba617b2f5cc52.png
[93c9a6b180f2455b971448e63015f114.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/e639493adc4c4d33a37f8627d844414d.png
[fa1f3abf3f874cbf9f375bebae3c5b8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7160a762d9be4f119a2c77717437d765.png
[803f4ac6e5b747bbb3c1b3053121d732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/ce4d16d40c7041788b1aa2a8f0efef82.png
[3f454e4963d448b1bc4b074673c3dadf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4247a942a8154de5a5915b2fccb0337f.png
[efb767207f53439682d4def3625ed9ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/2fdc88d885844ecb8941923fa3b733b6.png
[0ea0df3280a142798bcc0824d785e0bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/629e803600fa4f6180aaf1f8c33fa606.png
[c3789221cd1744c0a92d005d588fd658.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/32dc66b90de54def8dfcbb38abda46d8.png
[29cc44f5d8704163aa213c2bc091cd95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/da3646a2cd3b41a3a9cedc7d2f00dd92.png
[04fc3b21083e4557b58a6532f0480b2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4feb4c23f0664880bf71816fc9d7e313.png
[a0a0597413c54b34b9c03adbac74b471.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4633310c01ac425e9caa6e3dfd8058a6.png
[097606573a8a4f91aa5293dc6148d096.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/2d26d870b26d46f8bc15a22f3eb8c8c0.png
[377c4626b2c84291a833e44cbd814ef0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0bbbc48afae2433094dd0d21e261086d.png
[73d0da8cd7b341dd8848a4b9483a7702.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/426a9ac094a74bbc96ed1d35788f8fec.png
[810ad658ba1c4821b7486d323f9efc0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9b8e173ce66143e9bf88fe3206d83952.png
[f2513d38769e4b8c94c9517ea8dc9f38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/bcc03c438bf948b792dcb2b71b1bbe46.png
[8ab0f3e6e3654dde866bec1b7e71a629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/5ea96a5701124ce0897c6db9f433f3a5.png
[4b768f1c1f51422498c82a0f017a9ce3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/34f5b0fdde2b4510b7e536f570a6f2b0.png
[a2682adc986d4566b692fd781d44fbf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b39c501176814b3dbc85a1a5805c99fd.png
[21f1f138cd2043758c25ef1c4098444d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7b1489c1aa4048bfb156933cbd8a241e.png
[ba8ede099aeb4f3d949992946521249f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/33d52db4631845f9a0542c561aa4683a.png
[4fa748b3b6fe4c37bfa56b78b2a96134.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7159fb6918f34436849c8191b6827509.png
[dcf7545711c24cc3bba45a9f9fc99687.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/92f62e048d80468d8ddac891c1d4a19e.png
[33b35a812665495993708bff5e48265a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4f7304324c8e4eb68ba4f6b48b80cb5b.png
[85b8e1fe1ca14faba38f451dfbd7d7c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/76850827c0bc409a9996d08f6c7a7434.png
[e5180a4637544656b71c39f834f75894.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f7484faadc9f421aa2ecc9ec1c9f3da7.png
[1c04f36ae1684959848f84550bca3c77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/82232eaceec942d68e39ac28fa484837.png
[b4b988e3eb824ad9b89afbc7ed9137f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8f60003b82d946a583e8a14b04067879.png
[9d2fd38e739948a8a8cab7fbfd41f97f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/3b27d39643614ab8a7665d9c89367b38.png
[d5358fcd619443fe98143f2fd5fef762.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/3da66d1b97a74dfc8e0d9b9f1164b460.gif