【项目】仿牛客网社区开发第1章初识Spring Boot 开发社区首页 6 开发社区首页

一时失言乱红尘 2024-03-22 10:19 34阅读 0赞

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

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

*   *  【项目】仿牛客网社区开发
     *   *  第1章 初识Spring Boot 开发社区首页
         *   *  6 开发社区首页

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

#### 第1章 初识Spring Boot 开发社区首页 ####

##### 6 开发社区首页 #####

*  开发流程
    
     *  1次请求的执行过程
 *  分步实现
    
     *  开发社区首页，显示前10个帖子
     *  开发分页组件，分页显示所有的帖子

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

现在的帖子表

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

实体类：

package com.nowcoder.community.entity;
    
    import java.util.Date;
    
    /**
     * @Projectname: community
     * @Classname: DiscussPost
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 14:54
     */
    
    public class DiscussPost {
        
    
        private int id;
        private int userId;
        private String title;
        private String content;
        private int type;
        private int status;
        private Date createTime;
        private int commentCount;
        private double score;
    
        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 getTitle() {
        
            return title;
        }
    
        public void setTitle(String title) {
        
            this.title = title;
        }
    
        public String getContent() {
        
            return content;
        }
    
        public void setContent(String content) {
        
            this.content = content;
        }
    
        public int getType() {
        
            return type;
        }
    
        public void setType(int type) {
        
            this.type = type;
        }
    
        public int getStatus() {
        
            return status;
        }
    
        public void setStatus(int status) {
        
            this.status = status;
        }
    
        public Date getCreateTime() {
        
            return createTime;
        }
    
        public void setCreateTime(Date createTime) {
        
            this.createTime = createTime;
        }
    
        public int getCommentCount() {
        
            return commentCount;
        }
    
        public void setCommentCount(int commentCount) {
        
            this.commentCount = commentCount;
        }
    
        public double getScore() {
        
            return score;
        }
    
        public void setScore(double score) {
        
            this.score = score;
        }
    
        @Override
        public String toString() {
        
            return "DiscussPost{" +
                    "id=" + id +
                    ", userId=" + userId +
                    ", title='" + title + '\'' +
                    ", content='" + content + '\'' +
                    ", type=" + type +
                    ", status=" + status +
                    ", createTime=" + createTime +
                    ", commentCount=" + commentCount +
                    ", score=" + score +
                    '}';
        }
    
    }

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

DiscussPostMapper.java

package com.nowcoder.community.dao;
    
    import com.nowcoder.community.entity.DiscussPost;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    
    import java.util.List;
    
    /**
     * @Projectname: community
     * @Classname: DiscussPostMapper
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 14:56
     */
    
    @Mapper
    public interface DiscussPostMapper {
        
    
        List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);
    
        // @Param注解用于给参数取别名,
        // 如果只有一个参数,并且在<if>里使用,则必须加别名.
        int selectDiscussPostRows(@Param("userId") int userId);
    
    }

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

discusspost-mapper.xml 映射文件

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.nowcoder.community.dao.DiscussPostMapper">
    
        <sql id="selectFields">
            id
            , user_id, title, content, type, status, create_time, comment_count, score
        </sql>
    
        <select id="selectDiscussPosts" resultType="DiscussPost">
            select
            <include refid="selectFields"></include>
            from discuss_post
            where status != 2
            <if test="userId!=0">
                and user_id = #{userId}
            </if>
            order by type desc, create_time desc
            limit #{offset}, #{limit}
        </select>
    
        <select id="selectDiscussPostRows" resultType="int">
            select count(id)
            from discuss_post
            where status != 2
            <if test="userId!=0">
                and user_id = #{userId}
            </if>
        </select>
    
    </mapper>

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

测试一下

@Autowired
        private DiscussPostMapper discussPostMapper;
    
        @Test
        public void testSelectPosts() {
        
            List<DiscussPost> list = discussPostMapper.selectDiscussPosts(0, 0, 10);
            for (DiscussPost discussPost : list) {
        
                System.out.println(discussPost);
            }
    
            int rows = discussPostMapper.selectDiscussPostRows(0);
            System.out.println(rows);
        }

查询结果

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

看看数据库

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

没问题的 ，加上userId

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

没问题【数据层就是这样 了 】

接下来看看业务层

DiscussPostService.java

package com.nowcoder.community.service;
    
    import com.nowcoder.community.dao.DiscussPostMapper;
    import com.nowcoder.community.entity.DiscussPost;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    /**
     * @Projectname: community
     * @Classname: DiscussPostService
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 15:09
     */
    
    @Service
    public class DiscussPostService {
        
    
        @Autowired
        private DiscussPostMapper discussPostMapper;
    
        public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit) {
        
            return discussPostMapper.selectDiscussPosts(userId, offset, limit);
        }
    
        public int findDiscussPostRows(int userId) {
        
            return discussPostMapper.selectDiscussPostRows(userId);
        }
    
    }

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

UserService.java

package com.nowcoder.community.service;
    
    import com.nowcoder.community.dao.UserMapper;
    import com.nowcoder.community.entity.User;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    /**
     * @Projectname: community
     * @Classname: UserService
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 15:11
     */
    
    @Service
    public class UserService {
        
    
        @Autowired
        private UserMapper userMapper;
    
        public User findUserById(int id) {
        
            return userMapper.selectById(id);
        }
    
    }

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

OK，业务层完成，接下来视图层：

这下要用到老师提供的静态资源文件了

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

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

OK，这样放就行

先来一个封装分页相关的信息 实体类

Page.java

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

HomeController.java

package com.nowcoder.community.controller;
    
    import com.nowcoder.community.entity.DiscussPost;
    import com.nowcoder.community.entity.Page;
    import com.nowcoder.community.entity.User;
    import com.nowcoder.community.service.DiscussPostService;
    import com.nowcoder.community.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * @Projectname: community
     * @Classname: HomeController
     * @Author: Ding Jiaxiong
     * @Date:2023/4/17 15:16
     */
    
    @Controller
    public class HomeController {
        
    
        @Autowired
        private DiscussPostService discussPostService;
    
        @Autowired
        private UserService userService;
    
        @RequestMapping(path = "/index", method = RequestMethod.GET)
        public String getIndexPage(Model model, Page page) {
        
            // 方法调用前,SpringMVC会自动实例化Model和Page,并将Page注入Model.
            // 所以,在thymeleaf中可以直接访问Page对象中的数据.
            page.setRows(discussPostService.findDiscussPostRows(0));
            page.setPath("/index");
    
            List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());
            List<Map<String, Object>> discussPosts = new ArrayList<>();
            if (list != null) {
        
                for (DiscussPost post : list) {
        
                    Map<String, Object> map = new HashMap<>();
                    map.put("post", post);
                    User user = userService.findUserById(post.getUserId());
                    map.put("user", user);
                    discussPosts.add(map);
                }
            }
            model.addAttribute("discussPosts", discussPosts);
            return "/index";
        }
    
    }

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

接下来就是处理模板

index.html 要修改一下，资料只是真的静态资源

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <title>牛客网-首页</title>
    </head>
    <body>
    <div class="nk-container">
        
        <header class="bg-dark sticky-top">
            <div class="container">
                
                <nav class="navbar navbar-expand-lg navbar-dark">
                    
                    <a class="navbar-brand" href="#"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="index.html">首页</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link position-relative" href="site/letter.html">消息<span
                                        class="badge badge-danger">12</span></a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="site/register.html">注册</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical">
                                <a class="nav-link" href="site/login.html">登录</a>
                            </li>
                            <li class="nav-item ml-3 btn-group-vertical dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle"
                                         style="width:30px;"/>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item text-center" href="site/profile.html">个人主页</a>
                                    <a class="dropdown-item text-center" href="site/setting.html">账号设置</a>
                                    <a class="dropdown-item text-center" href="site/login.html">退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <span class="dropdown-item text-center text-secondary">nowcoder</span>
                                </div>
                            </li>
                        </ul>
                        
                        <form class="form-inline my-2 my-lg-0" action="site/search.html">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
                            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                        </form>
                    </div>
                </nav>
            </div>
        </header>
    
        
        <div class="main">
            <div class="container">
                <div class="position-relative">
                    
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">最新</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">最热</a>
                        </li>
                    </ul>
                    <button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal"
                            data-target="#publishModal">我要发布
                    </button>
                </div>
                
                <div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="publishModalLabel">新帖发布</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="recipient-name" class="col-form-label">标题：</label>
                                        <input type="text" class="form-control" id="recipient-name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="col-form-label">正文：</label>
                                        <textarea class="form-control" id="message-text" rows="15"></textarea>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="publishBtn">发布</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="hintModalLabel">提示</h5>
                            </div>
                            <div class="modal-body" id="hintBody">
                                发布完毕!
                            </div>
                        </div>
                    </div>
                </div>
    
                
                <ul class="list-unstyled">
                    <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
                        <a href="site/profile.html">
                            <img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像"
                                 style="width:50px;height:50px;">
                        </a>
                        <div class="media-body">
                            <h6 class="mt-0 mb-3">
                                <a href="#" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>
                                <span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
                                <span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
                            </h6>
                            <div class="text-muted font-size-12">
                                <u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b
                                    th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15
                                15:32:18</b>
                                <ul class="d-inline float-right">
                                    <li class="d-inline ml-2">赞 11</li>
                                    <li class="d-inline ml-2">|</li>
                                    <li class="d-inline ml-2">回帖 7</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
                
                <nav class="mt-5" th:if="${page.rows>0}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item">
                            <a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
                        </li>
                        <li th:class="|page-item ${page.current==1?'disabled':''}|">
                            <a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>
                        <li th:class="|page-item ${i==page.current?'active':''}|"
                            th:each="i:${#numbers.sequence(page.from,page.to)}">
                            <a class="page-link" href="#" th:text="${i}">1</a>
                        </li>
                        <li th:class="|page-item ${page.current==page.total?'disabled':''}|">
                            <a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    
        
        <footer class="bg-dark">
            <div class="container">
                <div class="row">
                    
                    <div class="col-4 qrcode">
                        <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail"
                             style="width:136px;"/>
                    </div>
                    
                    <div class="col-8 detail-info">
                        <div class="row">
                            <div class="col">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">关于我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">加入我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">意见反馈</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">企业服务</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">联系我们</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">免责声明</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-light" href="#">友情链接</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <ul class="nav btn-group-vertical company-info">
                                    <li class="nav-item text-white-50">
                                        公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                                    </li>
                                    <li class="nav-item text-white-50">
                                        联系方式：010-60728802(电话)    admin@nowcoder.com
                                    </li>
                                    <li class="nav-item text-white-50">
                                        牛客科技©2018 All rights reserved
                                    </li>
                                    <li class="nav-item text-white-50">
                                        京ICP备14055008号-4     
                                        <img src="http://static.nowcoder.com/company/images/res/ghs.png"
                                             style="width:18px;"/>
                                        京公网安备 11010502036488号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script th:src="@{/js/global.js}"></script>
    <script th:src="@{js/index.js}"></script>
    </body>
    </html>

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

运行一下 ，启动服务器

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

访问首页 http://localhost:8080/community/index

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

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

分页

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

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

没问题【当到达第一页时，上一页按钮不可用，到达最后一页时，下一页按钮不可用】

OK，这就是首页的开发了

[aa5336cc3d3b4418b2b135a9ba6ee0b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cc3fc25eddf34a25b950e2dc545c8ba6.png
[d65fd6aea6ee4d64aaca2ed570147d9b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a882582002b440e4a2a4fa4939d92545.png
[26706ae51cfb4b229d2ef1ddd767dd69.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9e121d76549944cf91d1d3b9d40d3ce5.png
[15b60fad931549208ad8482b78f39513.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f38f761eaa814e0d82d5ed5a8f26dc66.png
[228d221d88a84f21a86c6a452a38b58a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cf606c60e71546d08a749f672fd65c8f.png
[2fa89c3b94084881ac8dfeb35cf6a2c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/11a995915fe1403189a10db40e36ec42.png
[859c931f365e4a3699907983bf193c2a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1a0fb711cb944afc9e55fa761b974b9a.png
[e5e7aec8682a4c0ba28434c58819bec1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6eea92b06d9d403da71ad9d374a1ddfa.png
[f17eeb4434054a12a8b16562dc5cc19a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7b76ac4cda624f9899d2e8bd5107bbca.png
[52c31316be6b4bf8bc40d55dbfa34ae3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fa3aa964269e46ccbc60482c537f59ff.png
[fe06f809d39e4394a522a340700adfe2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0f58cf903c3a45c48cde795115b22aaa.png
[812f660be31a4fbd8ffe1efc9d971412.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bc0ae5a214684e27a011d8233d13d34a.png
[946cf7f3697d4712b58c1be72702fd01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d169430fe4d140ad9aa89ecc5077e5d9.png
[e22832dd148947cc81c1730b8245e1c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e94ca9b43da340699351ee96be012990.png
[9c033a4a7df84c639012c461beea0922.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fbb3ceba750b4d6fa09a8893a9a8d7c6.png
[7c5dbe1883f646ca977c4e6459a7fe19.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/11ce20d77e79417a9fc3cfb9c7f57286.png
[9ea68783f8464ec7a636955927a29887.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3c33cd8d7e834ff6aafb96d8a2764f22.png
[0257673b95f94525a3995c5666e3df4c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c9aa634b3810418482d1e635c196b18d.png
[fe17cf9376b84a3b838948437bc78e86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f94adff2ab6e44588d8374be1806b49d.png
[ce1da43872ad40baa0195299bcc964a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/88e71bc9783a4f30af275b100182a6d6.png
[7ce95153f85749db808799b0ad600da6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bf739712344d43f48db81f9998b44e2b.png