流浪动物救助系统设计与实现（Vue.js+Spring Boot+Maven+Idea）

水深无声 2024-03-17 19:19 80阅读 0赞

目 录  
摘 要 I  
Abstract II  
1 前言 1  
2 流浪动物救助系统 2  
2.1 流浪动物救助系统简介 2  
2.2 系统组织结构 2  
2.3 系统角色划分 3  
3 系统设计要求 7  
3.1 设计原则 7  
3.1.1 技术平台选型 7  
3.1.2 系统扩展性 8  
3.1.3 系统性能 8  
3.2 系统概念结构设计 8  
3.2.1 系统 ER 图 8  
3.2.2 关系模型 9  
3.2.3 数据库设计需求 10  
4 系统实现 14  
4.1 系统架构 14  
4.2 前台门户系统 15  
4.2.1 登录模块 17  
4.2.2 首页简介 23  
4.2.3 咨询模块 25  
4.3.4 救助模块 26  
4.2.5 领养模块 29  
4.2.6 寻宠模块 32  
4.2.7 帮助模块 35  
4.3 后台管理系统 36  
4.3.1 登录模块 37  
4.3.2 首页简介 37  
4.3.3 用户模块 38  
4.3.4 领养模块 40  
4.3.5 新闻通知模块 41  
4.3.6 设置模块 42  
5 结论 44  
5.1 总结 44  
5.2 系统不足 47  
5.3 系统展望 47  
致 谢 49  
参考文献 50  
前端主要架构为：Vue.js、Node.js、axios、jQuery、Bootstrap、Element UI。  
后端主要架构为：Spring、Spring Boot、MyBatis Plus、Nginx、JWT、Redis。  
项目运行环境：JDK 1.8、Tomcat 9、Maven 3.6.1、MySQL 5.6.  
开发工具：Idea 2018.3.3、Navicat for MySQL。

2 流浪动物救助系统  
2.1 流浪动物救助系统简介  
流浪动物救助系统主要是为了解决城市中流浪动物的信息管理问题的平台。该平台主要分为三种用户操作，普通游客端：可以浏览页面发布的公告及流浪动物信息、也可注册成为一名爱心人士；注册用户端：用户的注册、登录、修改个人信息等功能，既可以登记自己发现的流浪动物信息，也可以查询、申请领养救助平台上的流浪动物，并发布其被领养救助动物的日常生活状态；管理员端：管理员端的用户注册、登录、修改密码等功能；管理员可以发布公告、对注册用户及被救助动物进行管理、登记、审核相关信息以及查询统计等功能。  
2.2 系统组织结构  
开发流浪动物救助系统，游客可以在页面浏览救助、寻宠、领养、咨询等各种信息，也可以注册成为平台用户。注册用户具备信息发布和评论留言的功能，可以发布寻宠、领养、救助等信息，通过管理员的后台审核之后，就可以展示在页面 上。而管理员端则可以对所有的注册用户进行增、删、改、查、修改密码等基础操作。同时对于注册用户发布的信息、评论留言等可以进行审核、修改、删除等操 作。平台的主要意义是为流浪动物的救助信息、丢失宠物的寻找信息等进行发布共享，让更多的爱心人士参与到救助中来。

<!DOCTYPE html>
    <html xmlns:javascript="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Bootstrap 模板</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <script src="https://code.jquery.com/jquery.js"></script>
        
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        
        <link rel="stylesheet" href="css/navigation.css">
    
        
        <script src="js/bootstrap.min.js"></script>
        
        <script src="js/modal.js"></script>
    
    
        
        <link rel="stylesheet" type="text/css" href="css/search_css/normalize.css"/>
        <link rel="stylesheet" href="css/search_css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/search_css/demo.css">
        <link rel="stylesheet" href="css/search_css/style.css">
    
        
        <link rel="stylesheet" href="css/index_style.css">
        <link rel="stylesheet" href="css/login_style.css">
        <link rel="stylesheet" href="css/adopt_style.css">
    
        
        <script src="./js/vue/vue.js"></script>
        <script src="./js/axios.min.js"></script>
        <script src="./js/common.js"></script>
    
        
        <link rel="stylesheet" href="static/element-2.12.0/index.css">
        <script src="static/element-2.12.0/index.js"></script>
    
        
        <script src="js/my_js/index.js"></script>
    
    </head>
    <body>
    <div class="header" id="header-top">   
        <shotcut2/>   
    </div>
    <script type="text/javascript">
        var indexVm = new Vue({
        
            el: "#header-top",
            components: {
        
                shotcut2: () => import('./js/pages/shotcut2.js'),
            }
        });
    </script>
    
    
    <div class="container">
        
        <div>
            <img src="img/sa_logo.png">
        </div>
    
        
        <div id="nav-1">
            <ul class="nav">
                <li class="slide1"></li>
                <li class="slide2"></li>
                <li><a class="active" href="index.html">首页</a></li>
                <li><a href="news.html">资讯</a></li>
                <li><a href="rescue.html">救助</a></li>
                <li><a href="adopt.html">领养</a></li>
                <li><a href="search.html">寻宠</a></li>
                <li><a href="help.html">帮助</a></li>
                <li><a href="about-us.html">关于我们</a></li>
                
                <p>           
                      
                </p>
                <li>
                    <div class="search d7">
                        <form>
                            <input type="text" placeholder="搜索从这里开始...">
                            <button type="submit"></button>
                        </form>
                    </div>
                </li>
            </ul>
        </div>
        <br>  
        <br>  
        <div class="news">
            
            <div class="news-left">
                
                <div class="news-left-photo">
                    <div style="width: 94%;margin: 0 auto">
                        <div style="height: 10px"></div>
                        <div id="myCarousel" class="carousel slide">
                            
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            
                            <div class="carousel-inner">
                                <div class="item active">
                                    <a href="news-details.html?id=15">
                                        <img src="img/movie/movie01.jpg" alt="First slide">
                                        <div class="carousel-caption">主人养了一条狗，后来嫌弃狗老了，便抛弃了。后来狗竟然... ... ... ... ... ...
                                        </div>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="news-details.html?id=14" style="color: black">
                                        <img src="img/movie/movie02.jpg" alt="Second slide">
                                        <div class="carousel-caption">猫咪中毒输狗血续命 原来猫狗之间也有爱!</div>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="news-details.html?id=12" style="color: black">
                                        <img src="img/movie/movie03.jpg" alt="Third slide">
                                        <div class="carousel-caption">小区内流浪猫叼着猫皮，路人嫌弃远离，保安说出原由所有人哭了 ...</div>
                                    </a>
                                </div>
                            </div>
                            
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
    
                
                <div style="width: 96%;margin: 0 auto">
                    <div style="height: 10px"></div>
                    <div class="news-left-hot">
                        
                        <div style="height: 50px;width: 100%; text-decoration:none">
                            <a href="javascript:void(0);" style="text-decoration:none">
                                <span style="color: red">[热点]</span>
                                <strong style="font-size: large;color: black">杭州一妈妈自曝被小区内不牵狗绳男主人骑身上打至骨折！</strong>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a  href="news-details.html?id=12" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">小区内流浪猫叼着猫皮，路人嫌弃远离......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=14" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">猫咪中毒输狗血续命 原来猫狗之间也有爱!</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=13" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px"> 有了这份《全国小动物保护组织通讯......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=15" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">主人养了一条狗，后来嫌弃狗老了，便抛弃了。后来狗竟然......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=7" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">罗志祥妈妈低调行善 为受虐待狗狗捐一月医药费......</span>
                            </a>
                        </div>
    
                    </div>
                </div>
    
                
                <div class="news-left-knowledge">
                    <div style="width: 94%;height: 160px;margin: 0 auto">
                        <div style="height: 12px"></div>
                        <div style="height: 40px;width: 100%">
                            <span style="line-height: 40px;font-size: 20px;color: #a5ce6d"><strong>养宠必学</strong></span>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=6" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">最全狗狗智商排名，你家汪排第几？......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=16" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">宠物狗狗怀孕期间护理正确方法......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=17" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">五种中华血统的「汪星人」......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="news-details.html?id=18" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">你永远不知道能在狗狗的胃里找到什么......</span>
                            </a>
                        </div>
                    </div>
                </div>
    
                
                <div class="news-left-help">
                    <div style="width: 98%;height: 160px">
                        <div style="height: 10px"></div>
                        
                        <div style="height: 50px;width: 100%; text-decoration:none">
                            <a href="rescue-details.html?id=16" style="text-decoration:none">
                                <span style="color: red">[救助]</span>
                                <strong style="font-size: large;color: black">通州区果园有一只狗狗伤的很厉害，附近人有能去救救它吗？！</strong>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="rescue-details.html?id=17" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">求助：海淀凤凰岭一只剃了毛的阿拉斯加被人当疯狗抓......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="rescue-details.html?id=18" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">转发北京求助......</span>
                            </a>
                        </div>
                        
                        <div style="height: 30px;width: 100%; text-decoration:none">
                            <a href="rescue-details.html?id=19" style="color: black;text-decoration:none">
                                <span style="font-size: 20px">·</span> <span style="line-height: 30px">北京昌平区西二旗天巢园小区门口有四只可怜的狗娃需要帮助！......</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    
            
            <div class="login-right">
                
                <div style="width: 100%;height: 60px;background-color: #e5ffc8;border-radius: 5px">
                    <div style="height: 10px"></div>
                    <div style="width: 94%;height: 40px;margin: 0 auto">
                        <a href="rescue.html#publishArea">
                            <div style="float: left;background-color: #77ce78;height: 40px;width: 31%;border-radius: 5px;text-align: center">
                                <span style="line-height: 40px;color: white"><strong>快速发帖</strong></span>
                            </div>
                        </a>
                        <div style="float: left; width: 10px;height: 40px"></div>
                        <a href="javascript:void (0)">
                            <div style="float: left;background-color: #DCAC6C;height: 40px;width: 31%;border-radius: 5px;text-align: center">
                                <span style="line-height: 40px;color: white"><strong>每日签到</strong></span>
                            </div>
                        </a>
                        <div style="float: left; width: 10px;height: 40px"></div>
                        <a href="javascript:void (0)">
                            <div style="float: left;background-color: #dd6161;height: 40px;width: 31%;border-radius: 5px;text-align: center">
                                <span style="line-height: 40px;color: white"><strong>我的空间</strong></span>
                            </div>
                        </a>
                        <div style="float: left; width: 10px"></div>
                    </div>
                </div>
                <div style="height: 15px"></div>
                <div style="border-radius: 5px;background-color: white; width: 100%;height: 325px">
                    <div style="width: 92%;height: 325px;margin: 0 auto">
                        <div style="height: 10px"></div>
                        <div style="height: 40px;width: 100%">
                            <span style="line-height: 40px;font-size: 20px;color: #a5ce6d"><strong>宠物趣闻</strong></span>
                        </div>
                        <div style="height: 5px"></div>
                        <div style="height: 85px;width: 100%">
                            <a href="news-details.html?id=19" style="color: black">
                                <div style="float: left;height: 75px;width: 30%">
                                    <img src="img/news/news005.jpg" width="75px" height="75px">
                                </div>
                                <div style="height: 75px;width: 70%;float: right">
                                    好想生个女儿并养只小狗
                                </div>
                            </a>
                            <div style="height: 10px"></div>
                        </div>
                        <div style="height: 85px;width: 100%">
                            <a href="news-details.html?id=20" style="color: black">
                                <div style="float: left;height: 75px;width: 30%">
                                    <img src="img/news/news006.jpg" width="75px" height="75px">
                                </div>
                                <div style="height: 75px;width: 70%;float: right">
                                    一天24小时，狗狗都在干嘛？
                                </div>
                            </a>
                            <div style="height: 10px"></div>
                        </div>
                        <div style="height: 85px;width: 100%">
                            <a href="news-details.html?id=21" style="color: black">
                                <div style="float: left;height: 75px;width: 30%">
                                    <img src="img/news/news007.jpg" width="75px" height="75px">
                                </div>
                                <div style="height: 75px;width: 70%;float: right">
                                    见证我16年幸福的狗狗
                                </div>
                            </a>
                            <div style="height: 10px"></div>
                        </div>
    
                    </div>
                </div>
            </div>
        </div>
        <br>  
        
        <div class="adopt-area">
            <br>
            
            <h4><strong style="color: goldenrod" style="color: goldenrod"> 我要</strong><strong
                    style="color: #7fb06a">领养</strong></h4>
            
            
            <div style="width: 94%;height: 600px;margin:auto">
                
                
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                <strong style="font-size: large"> 狗狗领养 </strong>
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                
                <div style="width: 100%;height: 170px">
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=41">
                            
                            <img width="200px" height="150px" src="img/dog/dog01.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     被遗弃的小狗急需一个家 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=42">
                            
                            <img width="200px" height="150px" src="img/dog/dog02.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     长得像边牧的小型狗领养 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=43">
                            
                            <img width="200px" height="150px" src="img/dog/dog03.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     可爱小黄狗找领养 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=44">
                            
                            <img width="200px" height="150px" src="img/dog/dog04.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     蝴蝶串串有喜欢的吗？ </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        
                        <a href="http://www.sa.com/adopt-details.html?id=45">
                            <img width="200px" height="150px" src="img/dog/dog05.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     可爱小田园犬找家了！ </strong>
                            </div>
                        </a>
                    </div>
                </div>
    
                
                <br>
                
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                <strong style="font-size: large"> 猫咪领养 </strong>
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                
                <div style="width: 100%;height: 170px">
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=46">
                            <img width="190px" height="150px" src="img/cat/cat01.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     橘哥两寻善主 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=47">
                            <img width="190px" height="150px" src="img/cat/cat02.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     温顺流浪猫求收养 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=48">
                            <img width="190px" height="150px" src="img/cat/cat03.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     四个月加菲串串求带走 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=49">
                            <img width="190px" height="150px" src="img/cat/cat04.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     可爱猫咪找新家 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=50">
                            <img width="190px" height="150px" src="img/cat/cat05.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     五个月橘猫找个家 </strong>
                            </div>
                        </a>
                    </div>
                </div>
    
                
                <br>
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                <strong style="font-size: large"> 小宠领养 </strong>
                <hr color="goldenrod" class="hrLine" style="width:43%;"/>
                
                <div style="width: 100%;height: 170px">
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=51">
                            <img width="190px" height="150px" src="img/pet/pet01.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     灰色斑鸠免费领养 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=52">
                            <img width="190px" height="150px" src="img/pet/pet02.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     小巴西龟找新家 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=53">
                            <img width="190px" height="150px" src="img/pet/pet03.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     萌萌哒小兔子免费领养 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=54">
                            <img width="190px" height="150px" src="img/pet/pet04.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     道奇兔免费赠送 </strong>
                            </div>
                        </a>
                    </div>
                    
                    <div style="width: 20%;height: 165px; float: left">
                        <a href="http://www.sa.com/adopt-details.html?id=55">
                            <img width="190px" height="150px" src="img/pet/pet05.jpg">
                            
                            <div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
                                <strong style="color: white;">
                                     豚鼠宝宝求包养 </strong>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    
    
        <br>  
        
        <div class="publish-area">
            <br>
            
            <h4><strong style="color: goldenrod" style="color: goldenrod"> 寻宠</strong><strong
                    style="color: #7fb06a">启示</strong></h4>
            
            
            <div style="width: 96%;height: 600px;margin:auto">
                
                <div style="height: 450px; width: 20%; float: left">
                    <a href="http://www.sa.com/search-details.html?id=45">
                        <img width="180px" height="330px" src="img/publish/publish01.jpg">
                        
                        <div style="width: 180px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 寻找走失一个月的萨摩 </span>
                        </div>
                    </a>
                </div>
                
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="http://www.sa.com/search-details.html?id=46">
                        <img width="150px" height="130px" src="img/publish/publish02.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="http://www.sa.com/search-details.html?id=47">
                        <img width="150px" height="130px" src="img/publish/publish03.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="http://www.sa.com/search-details.html?id=48">
                        <img width="150px" height="130px" src="img/publish/publish04.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="http://www.sa.com/search-details.html?id=49">
                        <img width="150px" height="130px" src="img/publish/publish05.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="http://www.sa.com/search-details.html?id=50">
                        <img width="150px" height="130px" src="img/publish/publish06.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱猫于2019年11月19 </span>
                        </div>
                    </a>
                </div>
                
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="javascript:void(0);">
                        <img width="150px" height="130px" src="img/publish/publish07.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="javascript:void(0);">
                        <img width="150px" height="130px" src="img/publish/publish08.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="javascript:void(0);">
                        <img width="150px" height="130px" src="img/publish/publish09.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="javascript:void(0);">
                        <img width="150px" height="130px" src="img/publish/publish10.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
                
                <div style="height: 200px; width: 16%;float: left">
                    <a href="javascript:void(0);">
                        <img width="150px" height="130px" src="img/publish/publish11.jpg">
                        
                        <div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
                            <span style="color: black"> 爱犬于2019年12月4号 </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    
    <hr>
    <div class="footer">
        <script type="text/javascript">$(".footer").load("/src/public/footer.html");</script>
    </div>
    
    
    
    <script src='js/jquery.min.js'></script>
    <script src="js/my_js/script.js"></script>
    <script type="application/javascript">
        // el: "#Vue-app"
    </script>
    </body>
    </html>

![在这里插入图片描述][e4976ecee12f4520849d87548fb16751.png_pic_center]  
![在这里插入图片描述][2d518d062b09420ea2d8554aed8afd31.png_pic_center]  
![在这里插入图片描述][16f0ab4456af4a2183751b6c428e8a8b.png_pic_center]  
![在这里插入图片描述][deea9eeb97b54e2a989615659cabd844.png_pic_center]  
![在这里插入图片描述][d24ac235ceb7437394962c494b3e0e08.png_pic_center]  
![在这里插入图片描述][8d45b702ef8f464487f7fc65e8bfd4b6.png_pic_center]  
![在这里插入图片描述][05732a2f95294076a632b77e4e397fab.png_pic_center]  
![在这里插入图片描述][e0d27bc325a3422299962d7ba9a34beb.png_pic_center]  
![在这里插入图片描述][51dfd553b78b4faf9db5cc477a3a068f.png_pic_center]  
![在这里插入图片描述][61b8c3119ff04502bafd96c713e3536e.png_pic_center]  
![在这里插入图片描述][7185ce401d334ec69245151857f48feb.png_pic_center]  
![在这里插入图片描述][123eba63081744f6b3c53d253774b4eb.png_pic_center]  
![在这里插入图片描述][04afc2dbe91a43e38e866d277687e8b9.png_pic_center]  
![在这里插入图片描述][6bfca5e48f4a48daa2795e99ed5821e1.png_pic_center]  
![在这里插入图片描述][f371ad8387fe4b028a6c6f42e0cfe99a.png_pic_center]  
![在这里插入图片描述][1d116120c21c4a5cb5af237a047fa9f3.png_pic_center]  
![在这里插入图片描述][2c303a8b0a63453496763524a1547caf.png_pic_center]  
![在这里插入图片描述][0d923fa123694037a343c80e36b0bd7a.png_pic_center]  
![在这里插入图片描述][36eeb2efff27416285875161490084dc.png_pic_center]  
![在这里插入图片描述][c5844fc0b7e1468eb9db04ef243cde21.png_pic_center]  
![在这里插入图片描述][04c3f64ad2864ab4900cdf6d50d402ea.png_pic_center]  
![在这里插入图片描述][00314fd4a49a4e4586deb0dae15baa30.png_pic_center]  
![在这里插入图片描述][eac2bb19af3d40dfbc74846b0fc86995.png_pic_center]  
![在这里插入图片描述][ca10be6be6d8431ebc105ba0e7c6c8f7.png_pic_center]  
![在这里插入图片描述][a2c1ff40ebfe4681a7289087ef30913c.png_pic_center]  
![在这里插入图片描述][565870abe6824a22a50b7cde8abf07e3.png_pic_center]  
![在这里插入图片描述][3e89ef66be174419be6b96b08424f8e1.png_pic_center]  
![在这里插入图片描述][188f8868fd5c4e56b8cba488682c6a62.png_pic_center]  
![在这里插入图片描述][997a418effaf4ec5a6aa5a232d79d555.png_pic_center]  
![在这里插入图片描述][3637a22e9d90462ba3037a14b952116c.png_pic_center]  
![在这里插入图片描述][3f1bdaeee5f74d81b8fef2f7c8e59182.png_pic_center]  
![在这里插入图片描述][638983f5af2d4db78d556e4a3a3db546.png_pic_center]  
![在这里插入图片描述][c9748aae293a4ae78f4a89d170ba017f.png_pic_center]  
![在这里插入图片描述][9c082c22dd3644c692380b547986d5a5.png_pic_center]  
![在这里插入图片描述][af171e8ff8544bd494bd1c5cc6291069.png_pic_center]  
![在这里插入图片描述][16d2656821e84e43974460e12fca22a7.png_pic_center]  
![在这里插入图片描述][14ac5b5f5ae64c5a90f1c54972b24722.png_pic_center]  
![在这里插入图片描述][551dfa4d46754e2db024982b8f954861.png_pic_center]  
![在这里插入图片描述][6455017cd5e84163a34535bc9601526d.png_pic_center]  
![在这里插入图片描述][674e405f7f7048d78d3efd99ab5ecde5.png_pic_center]  
![在这里插入图片描述][f92f53ec241b44378ec8a3c364110ebc.png_pic_center]  
![在这里插入图片描述][f24997d098ec4a449d5b3b22d6b35eb6.png_pic_center]

[e4976ecee12f4520849d87548fb16751.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9a7131626bd742859de0b7254dd35b96.png
[2d518d062b09420ea2d8554aed8afd31.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/91338679f7f74c84bcac337d8984698b.png
[16f0ab4456af4a2183751b6c428e8a8b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/098e5d5927ac4a7ca6c50a658e61f5c2.png
[deea9eeb97b54e2a989615659cabd844.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/66c26e85365a4bf9b71bf6836dbea3ff.png
[d24ac235ceb7437394962c494b3e0e08.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2316d126c6dd4c7d9887a1fe5e6def45.png
[8d45b702ef8f464487f7fc65e8bfd4b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/59246b32a0f746e3b364cc3c68f00ef7.png
[05732a2f95294076a632b77e4e397fab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/eb2681f3163b48ba9e2197009b60e133.png
[e0d27bc325a3422299962d7ba9a34beb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/047ba46d21a5481bb507c263fd0d40ba.png
[51dfd553b78b4faf9db5cc477a3a068f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/800200b628f54eed8b3994102572b3f1.png
[61b8c3119ff04502bafd96c713e3536e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bb007b9c0c494464be8c9acaa58bb641.png
[7185ce401d334ec69245151857f48feb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1b82f83c63444a4a950740cc0a0e506c.png
[123eba63081744f6b3c53d253774b4eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/927940264730490690ad2dbf032be033.png
[04afc2dbe91a43e38e866d277687e8b9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2f880ee13d7a45de8857b5e7f51696a4.png
[6bfca5e48f4a48daa2795e99ed5821e1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9b0ddf7f687f40159a6a6df80d6a0a8a.png
[f371ad8387fe4b028a6c6f42e0cfe99a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/de895516c5124f58ae9aaf9e4ae51891.png
[1d116120c21c4a5cb5af237a047fa9f3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9b63320df9f74991b7e8665fc160c7cd.png
[2c303a8b0a63453496763524a1547caf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/32b3969da024448388196f9fbfa446f3.png
[0d923fa123694037a343c80e36b0bd7a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/acf8e81082cb4d3eaeb17d62035f9cec.png
[36eeb2efff27416285875161490084dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/93ac6528c9a449af9feadef385b4d3b0.png
[c5844fc0b7e1468eb9db04ef243cde21.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d7da28b162804c2681264d07b22e44f4.png
[04c3f64ad2864ab4900cdf6d50d402ea.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/936b3020b238485f96e8ad457c48c529.png
[00314fd4a49a4e4586deb0dae15baa30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1086e77d7c594e57b8b49a2e768bbfe3.png
[eac2bb19af3d40dfbc74846b0fc86995.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6ecf2db6f6184fc0873109fc9cc48f48.png
[ca10be6be6d8431ebc105ba0e7c6c8f7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9f135ebe7f054fcd9f04e44d3ebda90d.png
[a2c1ff40ebfe4681a7289087ef30913c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3e5274b8fb964f38840c410bcecda60b.png
[565870abe6824a22a50b7cde8abf07e3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/998dfc7afa79442da2a2493b69a1678e.png
[3e89ef66be174419be6b96b08424f8e1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/680a1379a1d246e78df937ab9079820c.png
[188f8868fd5c4e56b8cba488682c6a62.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/98bafe87263b47acb82c786bc685a773.png
[997a418effaf4ec5a6aa5a232d79d555.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c82d7e2289c34d75942c6f735762565d.png
[3637a22e9d90462ba3037a14b952116c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6eb4dce339824a3eaf993ac2aa9c8dbb.png
[3f1bdaeee5f74d81b8fef2f7c8e59182.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bc81fc739d7e43adadaebbc5ddc16d2c.png
[638983f5af2d4db78d556e4a3a3db546.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bbe47557939c491589b44c1f4e18b710.png
[c9748aae293a4ae78f4a89d170ba017f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9619977f1d3a4e8b91037e4881823b89.png
[9c082c22dd3644c692380b547986d5a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/00c5a22e0879490cad0bcdb36783429f.png
[af171e8ff8544bd494bd1c5cc6291069.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/02baab6fa91643f8a8987a465e2a0f15.png
[16d2656821e84e43974460e12fca22a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1bd0d82be9894bf1a8b092b267ce21ae.png
[14ac5b5f5ae64c5a90f1c54972b24722.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4de973c6cf9e45b38850c1ca63de1052.png
[551dfa4d46754e2db024982b8f954861.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6da0428bff7c49a28b5fdc3d9ad5c98f.png
[6455017cd5e84163a34535bc9601526d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a11c1d35cccc4aecab8a9405abf7ab4d.png
[674e405f7f7048d78d3efd99ab5ecde5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5d2af28ba2384951aff199cdb995e79e.png
[f92f53ec241b44378ec8a3c364110ebc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9ad38a63ce0f49f58c6777d9781f8005.png
[f24997d098ec4a449d5b3b22d6b35eb6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d16796ea011a4027956005be8c54f593.png