【项目】仿牛客网社区开发第2章 Spring Boot 实践开发社区登录模块 5 开发登录、退出功能

左手的ㄟ右手 2024-03-22 10:57 38阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第2章 Spring Boot 实践 开发社区登录模块
         *   *  5 开发登录、退出功能

![在这里插入图片描述][93d2f4e18f2147d08fc6eb4225423044.png_pic_center]

#### 第2章 Spring Boot 实践 开发社区登录模块 ####

##### 5 开发登录、退出功能 #####

*  访问登录页面
    
     *  点击顶部区域内的链接，打开登录页面。
 *  登录
    
     *  验证账号、密码、验证码。
     *  成功时，生成登录凭证，发放给客户端。
     *  失败时，跳转回登录页。
 *  退出
    
     *  将登录凭证修改为失效状态。
     *  跳转至网站首页。

![在这里插入图片描述][1a69586d51f14e3ba33294c64726a290.png_pic_center]

后面代码重构再换成Redis，现在暂时用MySQL 来保存用户登录凭证。

![在这里插入图片描述][47ebcda48f3c482eaca6c4b178741c7b.png_pic_center]

先来一个登录凭证实体类

package com.nowcoder.community.entity;
    
    import java.util.Date;
    
    /**
     * @Projectname: community
     * @Classname: LoginTicket
     * @Author: Ding Jiaxiong
     * @Date:2023/4/18 10:00
     */
    
    public class LoginTicket {
        
    
        private int id;
        private int userId;
        private String ticket;
        private int status;
        private Date expired;
    
        public int getId() {
        
            return id;
        }
    
        public void setId(int id) {
        
            this.id = id;
        }
    
        public int getUserId() {
        
            return userId;
        }
    
        public void setUserId(int userId) {
        
            this.userId = userId;
        }
    
        public String getTicket() {
        
            return ticket;
        }
    
        public void setTicket(String ticket) {
        
            this.ticket = ticket;
        }
    
        public int getStatus() {
        
            return status;
        }
    
        public void setStatus(int status) {
        
            this.status = status;
        }
    
        public Date getExpired() {
        
            return expired;
        }
    
        public void setExpired(Date expired) {
        
            this.expired = expired;
        }
    
        @Override
        public String toString() {
        
            return "LoginTicket{" +
                    "id=" + id +
                    ", userId=" + userId +
                    ", ticket='" + ticket + '\'' +
                    ", status=" + status +
                    ", expired=" + expired +
                    '}';
        }
    }

![在这里插入图片描述][c426836cbdf14ebfb3d444f191ca2e84.png_pic_center]

数据层接口

package com.nowcoder.community.dao;
    
    import com.nowcoder.community.entity.LoginTicket;
    import org.apache.ibatis.annotations.*;
    
    /**
     * @Projectname: community
     * @Classname: LoginTicketMapper
     * @Author: Ding Jiaxiong
     * @Date:2023/4/18 10:02
     */
    
    @Mapper
    public interface LoginTicketMapper {
        
    
        @Insert({
        
                "insert into login_ticket(user_id,ticket,status,expired) ",
                "values(#{userId},#{ticket},#{status},#{expired})"
        })
        @Options(useGeneratedKeys = true, keyProperty = "id")
        int insertLoginTicket(LoginTicket loginTicket);
    
        @Select({
        
                "select id,user_id,ticket,status,expired ",
                "from login_ticket where ticket=#{ticket}"
        })
        LoginTicket selectByTicket(String ticket);
    
        @Update({
        
                "<script>",
                "update login_ticket set status=#{status} where ticket=#{ticket} ",
                "<if test=\"ticket!=null\"> ",
                "and 1=1 ",
                "</if>",
                "</script>"
        })
        int updateStatus(String ticket, int status);
    
    }

来个测试类，测一下

@Autowired
        private LoginTicketMapper loginTicketMapper;
    
        @Test
        public void testInsertLoginTicket() {
        
            LoginTicket loginTicket = new LoginTicket();
            loginTicket.setUserId(101);
            loginTicket.setTicket("abc");
            loginTicket.setStatus(0);
            loginTicket.setExpired(new Date(System.currentTimeMillis() + 1000 * 60 * 10));
    
            loginTicketMapper.insertLoginTicket(loginTicket);
        }
    
        @Test
        public void testSelectLoginTicket() {
        
            LoginTicket loginTicket = loginTicketMapper.selectByTicket("abc");
            System.out.println(loginTicket);
    
            loginTicketMapper.updateStatus("abc", 1);
            loginTicket = loginTicketMapper.selectByTicket("abc");
            System.out.println(loginTicket);
        }

运行结果

![在这里插入图片描述][db9bb37f87c74254a627327f03697c55.png_pic_center]

看看数据库

![在这里插入图片描述][41d20cb204de4247b7f1a84243929595.png_pic_center]

OK， 没问题

![在这里插入图片描述][85f7ac2681d04511b2ab71cab3cedfc1.png_pic_center]

查看数据库

![在这里插入图片描述][32b8c13c72c04e3dbd5a1c5abe3ddfc2.png_pic_center]

没问题，这就是数据层了，下面接着看业务层

直接在 Userservice 中改

![在这里插入图片描述][34a81a6d878647f39777b4eb4b82de61.png_pic_center]

先注入进来

public Map<String, Object> login(String username, String password, int expiredSeconds) {
        
            Map<String, Object> map = new HashMap<>();
    
            // 空值处理
            if (StringUtils.isBlank(username)) {
        
                map.put("usernameMsg", "账号不能为空!");
                return map;
            }
            if (StringUtils.isBlank(password)) {
        
                map.put("passwordMsg", "密码不能为空!");
                return map;
            }
    
            // 验证账号
            User user = userMapper.selectByName(username);
            if (user == null) {
        
                map.put("usernameMsg", "该账号不存在!");
                return map;
            }
    
            // 验证状态
            if (user.getStatus() == 0) {
        
                map.put("usernameMsg", "该账号未激活!");
                return map;
            }
    
            // 验证密码【对密码和盐进行再次加密，如果结果一致，密码才正确】
            password = CommunityUtil.md5(password + user.getSalt());
            if (!user.getPassword().equals(password)) {
        
                map.put("passwordMsg", "密码不正确!");
                return map;
            }
    
            // 生成登录凭证
            LoginTicket loginTicket = new LoginTicket();
            loginTicket.setUserId(user.getId());
            loginTicket.setTicket(CommunityUtil.generateUUID());
            loginTicket.setStatus(0);
            loginTicket.setExpired(new Date(System.currentTimeMillis() + expiredSeconds * 1000));
            loginTicketMapper.insertLoginTicket(loginTicket);
    
            map.put("ticket", loginTicket.getTicket());
            return map;
        }

【其实这里就相当于用MySQL 实现了session 的功能】

![在这里插入图片描述][87a30c89786f4c1aa6607b6e66d5b023.png_pic_center]

业务层过后就是控制器了

先定义两种新码

![在这里插入图片描述][e9749e1814a843b081f641271d1d8b45.png_pic_center]

在logincontroller 中加上接口

@Value("${server.servlet.context-path}")
        private String contextPath;
    
        @RequestMapping(path = "/login", method = RequestMethod.POST)
        public String login(String username, String password, String code, boolean rememberme,
                            Model model, HttpSession session, HttpServletResponse response) {
        
            // 检查验证码
            String kaptcha = (String) session.getAttribute("kaptcha");
            if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {
        
                model.addAttribute("codeMsg", "验证码不正确!");
                return "/site/login";
            }
    
            // 检查账号,密码
            int expiredSeconds = rememberme ? REMEMBER_EXPIRED_SECONDS : DEFAULT_EXPIRED_SECONDS;
            Map<String, Object> map = userService.login(username, password, expiredSeconds);
            if (map.containsKey("ticket")) {
        
                Cookie cookie = new Cookie("ticket", map.get("ticket").toString());
                cookie.setPath(contextPath);
                cookie.setMaxAge(expiredSeconds);
                response.addCookie(cookie);
                return "redirect:/index";
            } else {
        
                model.addAttribute("usernameMsg", map.get("usernameMsg"));
                model.addAttribute("passwordMsg", map.get("passwordMsg"));
                return "/site/login";
            }
        }

下面就是修改登录页面模板

![在这里插入图片描述][dd3c9fe2153c478e9ec3d793f2d61759.png_pic_center]

OK， 直接启动服务器，测试登录

![在这里插入图片描述][e69f98fa8c374f4293daed6d6f7ba29d.png_pic_center]

初次点击登录，啥也没有，验证码可刷新

先注册一个新的，没有激活的新账号

![在这里插入图片描述][286575ea99384f678b7ad2c19e0ceea5.png_pic_center]

![在这里插入图片描述][e51e4ab4cad14cb4997f8c7267c6ae97.png_pic_center]

OK， 尝试登录

![在这里插入图片描述][0c7cf2d566824366bae40551f7178849.png_pic_center]

首先判断验证码

![在这里插入图片描述][99189c00cca64dd887bc10ddaaabad8e.png_pic_center]

再判断账号

![在这里插入图片描述][edb1fbebf1c048ed94c5e983d15957eb.png_pic_center]

OK，账号未激活，现在给它激活

![在这里插入图片描述][72f682a1eb6c4a7d97b3ccb63b9c324b.png_pic_center]

OK，再来一次

![在这里插入图片描述][d169b3ab29204b328beedd39ced1d431.png_pic_center]

OK， 账号对了，给一个错误的密码。OK，最后一次来真的了

![在这里插入图片描述][55676ef60fef4b60adac45645798b754.png_pic_center]

登录成功后，就跳转到首页index 了

![在这里插入图片描述][38f0ee79bfd84233ac0e3b34a5a9cc51.png_pic_center]

登录凭证就是这样了，超时时间是12 小时之后

最后就是退出了

业务层

public void logout(String ticket) {
        
            loginTicketMapper.updateStatus(ticket, 1);
        }

表现层控制器

@RequestMapping(path = "/logout", method = RequestMethod.GET)
        public String logout(@CookieValue("ticket") String ticket) {
        
            userService.logout(ticket);
            return "redirect:/login";
        }

当然现在我们还没有实现登录成功后对首页页面展示的修改，只能看cookie的存在情况

![在这里插入图片描述][0431d001efb94abeb9f424fa669ed245.png_pic_center]

这个值和我们数据库里面的凭证

![在这里插入图片描述][11e6c9976f874c10a9e1abdbed97d261.png_pic_center]

是对得上的，而且超时时间是三个月后

OK，修改一下页面，在index的登出操作

![在这里插入图片描述][5e1bba616593443e88a52741983ed57d.png_pic_center]

OK，重启服务器，测试

![在这里插入图片描述][f927cdc5099d4db79dc64f83ffdc3353.gif_pic_center]

没问题，

![在这里插入图片描述][ecdab4c1b12f45e8a077d995d8b7cb38.png_pic_center]

登录凭证已经失效了。就是这样。

【这节课后老师让自己实现 “忘记密码的功能”】

首先肯定就是点击“忘记密码” 按钮，可以跳转到对应的页面

// 忘记密码页面
        @RequestMapping(path = "/forget", method = RequestMethod.GET)
        public String getForgetPage() {
        
            return "/site/forget";
        }

![在这里插入图片描述][b22d055257834b11bfdd3815c3bcfa3a.png_pic_center]

然后在login 页面中去调它

![在这里插入图片描述][f77c05510f144f4cb1bdd0869716cfd3.png_pic_center]

![在这里插入图片描述][b09e3d45deef474bb882b5cb39e620dd.png_pic_center]

OK， 可以过来，但是样式好像有点问题，所以要修改一下forget.html 的模板

![在这里插入图片描述][38169acd91f0483fa62213a2eff35ad5.png_pic_center]

同样本地的js 文件也是

![在这里插入图片描述][2c85dc07c5764ab1b6b3ebd27a3368a3.png_pic_center]

头部复用

![在这里插入图片描述][16c848b5758e4172845ccc24ec658db4.png_pic_center]

再看一次

![在这里插入图片描述][496aa423f06843d2888c47dafa965f84.png_pic_center]

反正这首页、注册、登录、忘记密码这几个界面可以正常跳就行了

接下来就是实现这个功能了

首先是获取验证码：

![在这里插入图片描述][c17377f55b8445309d52653513f01259.png_pic_center]

先给这个按钮来一个id

然后新建一个 `forget.js`文件

$(function () {
        
        $("#verifyCodeBtn").click(getVerifyCode);
    });
    
    function getVerifyCode() {
        
        var email = $("#your-email").val();
    
        if (!email) {
        
            alert("请先填写您的邮箱！");
            return false;
        }
    
        $.get(
            CONTEXT_PATH + "/forget/code",
            {
        "email": email},
            function (data) {
        
                data = $.parseJSON(data);
                if (data.code == 0) {
        
                    alert("验证码已发送至您的邮箱,请登录邮箱查看!");
                } else {
        
                    alert(data.msg);
                }
            }
        );
    }

然后就是实现这个业务

首先是实现`/forget/code` 这个接口

先来几个工具方法

public static String getJSONString(int code, String msg, Map<String, Object> map) {
        
            JSONObject json = new JSONObject();
            json.put("code", code);
            json.put("msg", msg);
            if (map != null) {
        
                for (String key : map.keySet()) {
        
                    json.put(key, map.get(key));
                }
            }
            return json.toJSONString();
        }
    
        public static String getJSONString(int code, String msg) {
        
            return getJSONString(code, msg, null);
        }
    
        public static String getJSONString(int code) {
        
            return getJSONString(code, null, null);
        }

这里用到了一个新包，fastjson

![在这里插入图片描述][d5d1f9f8c41445e6b520bc2c607db664.png_pic_center]

记得刷一下

![在这里插入图片描述][c800d417a7eb448c8fe2f4c4abfdab45.png_pic_center]

实现获取验证码的接口

// 获取验证码
        @RequestMapping(path = "/forget/code", method = RequestMethod.GET)
        @ResponseBody
        public String getForgetCode(String email, HttpSession session) {
        
            if (StringUtils.isBlank(email)) {
        
                return CommunityUtil.getJSONString(1, "邮箱不能为空！");
            }
    
            // 发送邮件
            Context context = new Context();
            context.setVariable("email", email);
            String code = CommunityUtil.generateUUID().substring(0, 4);
            context.setVariable("verifyCode", code);
            String content = templateEngine.process("/mail/forget", context);
            mailClient.sendMail(email, "找回密码", content);
    
            // 保存验证码
            session.setAttribute("verifyCode", code);
    
            return CommunityUtil.getJSONString(0);
        }

接着是修改邮件模板

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
    	<meta charset="utf-8">
    	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    	<title>牛客网-忘记密码</title>
    </head>
    <body>
    <div>
    	<p>
    		<b th:text="${email}">xxx@xxx.com</b>, 您好!
    	</p>
    	<p>
    		您正在找回牛客账号的密码，本次操作的验证码为 <b th:text="${verifyCode}">u5s6dt</b>，请您及时设置新密码!
    	</p>
    </div>
    </body>
    </html>

控制层向session 中存入了修改密码的验证码

用户拿到验证码后，输入验证码以及新密码后，就要发起“重置密码” 的请求了

![在这里插入图片描述][fe8720f4c92149338fdf2628f206a1bb.png_pic_center]

一个post 接口，业务层就是根据用户传过来的密码更新数据库

// 重置密码
        public Map<String, Object> resetPassword(String email, String password) {
        
            Map<String, Object> map = new HashMap<>();
    
            // 空值处理
            if (StringUtils.isBlank(email)) {
        
                map.put("emailMsg", "邮箱不能为空!");
                return map;
            }
            if (StringUtils.isBlank(password)) {
        
                map.put("passwordMsg", "密码不能为空!");
                return map;
            }
    
            // 验证邮箱
            User user = userMapper.selectByEmail(email);
            if (user == null) {
        
                map.put("emailMsg", "该邮箱尚未注册!");
                return map;
            }
    
            // 重置密码
            password = CommunityUtil.md5(password + user.getSalt());
            userMapper.updatePassword(user.getId(), password);
    
            map.put("user", user);
            return map;
        }

然后是控制器

// 重置密码
        @RequestMapping(path = "/forget/password", method = RequestMethod.POST)
        public String resetPassword(String email, String verifyCode, String password, Model model, HttpSession session) {
        
            String code = (String) session.getAttribute("verifyCode");
            if (StringUtils.isBlank(verifyCode) || StringUtils.isBlank(code) || !code.equalsIgnoreCase(verifyCode)) {
        
                model.addAttribute("codeMsg", "验证码错误!");
                return "/site/forget";
            }
    
            Map<String, Object> map = userService.resetPassword(email, password);
            if (map.containsKey("user")) {
        
                return "redirect:/login";
            } else {
        
                model.addAttribute("emailMsg", map.get("emailMsg"));
                model.addAttribute("passwordMsg", map.get("passwordMsg"));
                return "/site/forget";
            }
        }

这里会将用户传过来的code 和 从session 里面拿的code 进行比对，比对正确后，笔者这里是直接让它重定向到 登录页面，并且从session 中移除code。

最后实现效果如下动图所示：

![在这里插入图片描述][fc3933605dcf413fb64f6b96d1f8bb2d.gif_pic_center]

我当前dingjiaxiong 用户的密码是1234567，可以正常实现登录登出操作。

接下来修改密码

![在这里插入图片描述][2a68b2e4e22848e1bd551c110be50940.gif_pic_center]

我把密码改成了123

再试一次登录

![在这里插入图片描述][b52e7655d28648eb8d90f3dc1ba138a9.gif_pic_center]

OK， 原密码已经成功更改。就这样。

[93d2f4e18f2147d08fc6eb4225423044.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7342aa279eac43a8a8404eb98ec114c1.png
[1a69586d51f14e3ba33294c64726a290.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/72cdf8b28d9a4fc4a05d00f54954efe3.png
[47ebcda48f3c482eaca6c4b178741c7b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b7c35418d82541c48540493e19230a84.png
[c426836cbdf14ebfb3d444f191ca2e84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/25ff7268519e4d9eb14e09ab0d80ed61.png
[db9bb37f87c74254a627327f03697c55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5b282d624d7f4acd86130e93f0b32fa1.png
[41d20cb204de4247b7f1a84243929595.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/480c80db159344579204ce60b273bff3.png
[85f7ac2681d04511b2ab71cab3cedfc1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/81fca0330cad41468575999a0e9d2982.png
[32b8c13c72c04e3dbd5a1c5abe3ddfc2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7c342bbe93ef47479565c23cb9fbc2f1.png
[34a81a6d878647f39777b4eb4b82de61.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c2ddcb2b4f124a67b128d1fc05aad72c.png
[87a30c89786f4c1aa6607b6e66d5b023.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/610620de9ccd417d9d92c4f70de6141c.png
[e9749e1814a843b081f641271d1d8b45.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f75759d9a9d2479da265d419c5684ce5.png
[dd3c9fe2153c478e9ec3d793f2d61759.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ee74166e90464737911fb70a493f308e.png
[e69f98fa8c374f4293daed6d6f7ba29d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8b6d46a1a5d2488787dea970851a0347.png
[286575ea99384f678b7ad2c19e0ceea5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6463fcbdae674e35b49f671979ebeeba.png
[e51e4ab4cad14cb4997f8c7267c6ae97.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f88f198968834127835beb1f7b546f65.png
[0c7cf2d566824366bae40551f7178849.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1f3cf831b30d470e93589b191c352c3d.png
[99189c00cca64dd887bc10ddaaabad8e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ce9b9a14476a401ca220079092c292be.png
[edb1fbebf1c048ed94c5e983d15957eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e798dce8cc024c21892c09b64df4e64b.png
[72f682a1eb6c4a7d97b3ccb63b9c324b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1aed9ce5cbfb448ca7f3018223c64ca7.png
[d169b3ab29204b328beedd39ced1d431.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/96c161218a3848b4bb85b7bb662632b4.png
[55676ef60fef4b60adac45645798b754.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cf37326de2674c72b4e0397d27f00de7.png
[38f0ee79bfd84233ac0e3b34a5a9cc51.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/84cf1725a83941cf98081d7051cbba2c.png
[0431d001efb94abeb9f424fa669ed245.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1bac193842c346e9b284b3ea04952f97.png
[11e6c9976f874c10a9e1abdbed97d261.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b5c437aa90e9467c8b8176f2c3cebaaf.png
[5e1bba616593443e88a52741983ed57d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1bbd2b94e5de4f80a898ae30371f7259.png
[f927cdc5099d4db79dc64f83ffdc3353.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4c3f8153ad344408a610d2a51dcddbe9.png
[ecdab4c1b12f45e8a077d995d8b7cb38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8fedcda415714e62aad4b44b964a0545.png
[b22d055257834b11bfdd3815c3bcfa3a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fa88606307fc4bfe87805e9703ed904b.png
[f77c05510f144f4cb1bdd0869716cfd3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f878e21147ed49fc9633bed1818a1109.png
[b09e3d45deef474bb882b5cb39e620dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9fbe2fa3ba7c4f758b5a6f381550454d.png
[38169acd91f0483fa62213a2eff35ad5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/851896e32ec54c729da56ace67eadc59.png
[2c85dc07c5764ab1b6b3ebd27a3368a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/80ff481678c14dfaa4f8e12de6366bdd.png
[16c848b5758e4172845ccc24ec658db4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/98ad0408ed894032a3252fed72ad6767.png
[496aa423f06843d2888c47dafa965f84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b76f05be951547919097051f6812dfea.png
[c17377f55b8445309d52653513f01259.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7edc7d30f95b43c8b8389944573f9497.png
[d5d1f9f8c41445e6b520bc2c607db664.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a7cecb8aad3b4e4b9be3dc0a5ca3fff4.png
[c800d417a7eb448c8fe2f4c4abfdab45.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9a3a3a72867e4f6bb8f9129750bb993f.png
[fe8720f4c92149338fdf2628f206a1bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b0c6872bfe204a7db0ae110c9f885ab8.png
[fc3933605dcf413fb64f6b96d1f8bb2d.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3d1a5c1796864977845ae1eff770832d.png
[2a68b2e4e22848e1bd551c110be50940.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/aa362fab428345d0b4d300556ed7624b.png
[b52e7655d28648eb8d90f3dc1ba138a9.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0ce4b7e8fd8746e49b4563d784a6798c.png