随着中国互联网的迅猛发展，传统宠物救助领域面临着信息管理繁琐、辐射范围有限、信息传播受限、丢失宠物找回几率较小等问题。为了应对这些挑战，本文采用了Vue.js和Spring Boot技术，开发了一款旨在利用电脑的高效、可靠性以及互联网的传播速度和辐射范围等优势，以弥补传统宠物救助的不足之处的宠物救助网站。

本文首先详细介绍了宠物救助网站的设计与实现过程，本网站以B/S为基础架构，采用Vue.js、Spring Boot、MySQL、MyBatis等技术实现了宠物救助网站。使用Spring Boot框架简化了Java应用程序的开发和部署流程，通过Mybatis Generator根据数据库表自动生成Java Model、Mapper和XML文件，极大提高了工作效率。本网站包括普通用户和管理员两个角色，用以上技术技术实现了用户信息管理、宠物领养发布、宠物领养申请、信息查询、信息评论、信息收藏等主要功能。

经过充分测试，本网站运行稳定，同时具备良好的性能和可扩展性。本网站能够实现各地用户领养宠物，以及用户寻找丢失宠物的功能。总而言之，本网站能够有效提升宠物救助的效率和质量，满足了用户对于快捷、广泛的宠物救助的需求。

关键词：Spring Boot，Vue.js，MyBatis，宠物救助

With the rapid development of the Chinese internet, the traditional field of pet rescue faces challenges such as cumbersome information management, limited outreach, restricted information dissemination, and a low probability of retrieving lost pets. In response to these challenges, this thesis adopts Vue.js and Spring Boot technologies to develop a pet rescue website aimed at leveraging the efficiency, reliability of computers, as well as the speed and reach of the internet to address the shortcomings of traditional pet rescue.

This thesis first elaborates on the design and implementation process of the pet rescue website. The website is based on a B/S architecture and utilizes technologies such as Vue.js, Spring Boot, MySQL, and MyBatis to implement the pet rescue website. The Spring Boot framework simplifies the development and deployment process of Java applications, while Mybatis Generator automatically generates Java Model, Mapper, and XML files based on database tables, greatly improving work efficiency. The website includes two roles: ordinary users and administrators, and implements main functions such as user information management, pet adoption posting, pet adoption application, information retrieval, information commenting, and information bookmarking using the mentioned technologies.

After thorough testing, the website runs stably, while also possessing good performance and scalability. The website enables users from various locations to adopt pets and also provides the functionality for users to find lost pets. In conclusion, the website effectively enhances the efficiency and quality of pet rescue, meeting users' demands for quick and widespread pet rescue.

Key words: Spring Boot，Vue.js，MyBatis，Pet Rescue

摘  要

Abstract

第1章　绪  论

1.1 课题背景

1.2 目的与意义

1.3 论文研究主要内容

1.4 国内外研究现状

1.4.1国内现状分析

1.4.2国外现状分析

第2章　关键技术介绍

2.1 Spring Boot框架

2.2 Vue.js框架

2.3 MyBatis Generator

第3章　需求分析

3.1 功能性需求分析

3.2 系统原型

3.2.1 用户首页

3.2.2 用户列表页

3.2.3 管理员列表页

3.2.4 管理员添加页

3.3 系统开发环境

3.4 系统可行性分析

3.4.1 技术可行性分析

3.4.2 安全可行性分析

第4章　系统设计

4.1 体系结构设计

4.2.1 概念结构设计

4.2.2 逻辑设计和物理设计

4.3 后台功能模块设计

4.3.1 新增普通用户功能实现

4.3.2 修改普通用户功能实现

4.3.3 查询普通用户功能实现

4.3.4 新增公告功能实现

4.4 前台功能模块设计

4.4.1 查看宠物详情功能实现

4.4.2 评论宠物功能实现

4.4.3 申请宠物申请领养功能实现

第5章　系统实现

5.1 后台功能模块实现

5.1.1 新增普通用户功能模块实现

5.1.2 修改普通用户功能模块实现

5.1.3 查询普通用户功能模块实现

5.1.4 新增公告功能模块实现

5.2 前台功能模块实现

5.2.1 查看宠物详情功能模块实现

5.2.2 评论宠物功能模块实现

5.2.3 申请宠物申请领养功能模块实现

第6章　系统测试

6.1 功能测试

6.1.1 前台部分模块测试

6.1.2 后台部分模块测试

6.4 测试结论

第7章　结　论

参考文献

致  谢

随着互联网的普及和发展，中国各行业正逐步摆脱传统的信息管理模式，转向更加便捷高效的电子信息化管理模式。与传统模式相比，基于互联网的电子信息化管理具有无可比拟的优势。在过去，宠物救助领域的相关信息管理和救助主要是在线下进行，导致宠物救助效率低下。宠物主人若要寻找走失的宠物，也只能依靠自己的努力。同时，随着人们生活水平的提高，对宠物的关注和需求不断增加。鉴于传统宠物救助方式的低效性和局限性，以及人们对宠物的关注度不断提升和互联网技术的发展，传统的宠物救助模式已经无法满足当前的需求。因此，开发一款宠物救助网站是十分必要的。

本文旨在设计一个以Vue.js和Spring Boot为基础的宠物救助网站，目的是解决现有救助模式存在的问题，提升救助工作的效率和范围，并降低相应的成本。用户可通过本网站便捷地进行宠物领养、学习宠物养护知识、寻找走失宠物以及查看宠物医院信息等。管理员则能更有效地管理宠物领养和求助信息。宠物救助网站的设计和实现旨在为宠物救助提供一个高效、便捷的平台，对传统宠物救助模式进行整合和升级。与传统线下宠物救助相比，该网站整合了全国各地的宠物救助信息和资源，带来显著的优势。通过这一平台，宠物救助信息的管理难度大幅降低，工作效率得到提高，同时宠物救助成本也得到降低。宠物救助网站改变了宠物救助信息的传播方式，借助互联网的快速传播、广泛覆盖、高可靠性、大存储容量和易管理的优势，该网站极大地提高了宠物救助的辐射范围和参与人数。通过该网站，实现了宠物救助信息的集中管理和求助信息的集中传播，进一步提高了宠物救助的效率和质量，减少了宠物的痛苦和流浪现象，同时促进了社会的和谐发展。

然而，现有的宠物救助网站仍存在一定的问题。一方面，部分网站在用户界面设计方面缺乏吸引力，色彩运用不够合理，导致用户体验不佳[2]。另一方面，一些网站在数据库管理方面存在不足，如数据安全性、数据备份与恢复等方面的问题，影响了网站的稳定性和可靠性[3]。

管理员用户登录网站后台后，能够查看后台的各类信息，能够新增信息，能够删除需要删除的信息，同时能够修改想要修改的信息。后台用例图如图3.1所示。

图3.1 后台用例图

管理员登录后台后，能够新增普通用户，用例描述如表3.1所示。

表3.1 新增普通用户用例描述

本项目所采用的技术栈全面展示了其在实际应用中的可行性。Vue.js与Spring Boot的完美结合，构成了现代化且高效的前后端开发框架，为项目提供了稳健的技术支撑。Tomcat 9作为Web服务器，以及MySQL作为数据库服务器，均展现了出色的稳定性和可靠性，确保了项目在运行过程中的顺畅与安全。而IDEA这一开发工具，以其强大的集成开发环境，为项目的编码、调试和部署提供了便利。整个技术栈的搭配协调，确保了项目的顺利开发与高效维护。

本项目采用MD5加密算法对用户密码进行加密处理，确保用户密码以密文形式安全存储于数据库中。为提升系统安全性，后端精心配置了高效的拦截器，有效防止恶意访问和非法请求。同时，前端实施了严格的状态管理机制，对页面导航进行严密守护，防止未经授权的用户通过直接输入地址来访问已登录界面。此外，系统还实施了精细的用户权限管理，严格限制普通用户进入后台系统，确保后台资源的安全性和机密性。综上所述，该系统在安全性方面具有高度的可行性和可靠性。

基于Spring Boot和Vue的宠物管理项目采用了B/S架构和MVC架构，结合MyBatis作为持久层框架来自动生成代码，从而提高了开发效率和代码质量。下面将详细阐述该项目的体系结构。

在项目实现中，本网站采用MVC架构用于分离业务逻辑、数据处理和用户界面，提高代码的可读性和可维护性。模型层负责数据存储和处理，MyBatis通过自动生成Mapper接口和XML映射文件实现对宠物管理相关数据的持久化操作，定义数据结构和关系，并与数据库交互，完成增删改查等操作。视图层负责用户界面的展示和交互，使用Vue.js框架构建前端页面，通过组件化方式实现页面的动态渲染和交互，通过API接口与模型层通信获取数据并展示给用户，同时接收用户输入并发送请求给控制器层处理。Controller层负责接收用户请求并调用相应模型进行处理，将结果返回给视图展示。架构图如下图4.1

表4.8 提问求助表

申请表存储着申请的关键信息，主要包含提问申请者id、发布宠物这ID、内容、等信息，主要用于关联该申请是那个用户发布的，需要由那个用户审批，以及显示申请等功能。详细信息如表4.9所示。

表4. 9申请表

续表4.9 申请表

管理员登录网站后，能够在普通用户页新增普通用户，主要顺序是管理员新增用户信息，前端校验后，向后端发起请求，后端将数据存入数据库。新增普通用户功能模块的顺序图如图4.2所示。

图4.2添加普通用户功能顺序图

管理员登录系统后能够修改想要修改的普通用户信息，管理员在前端页面修改普通用户信息后，前端校验信息后，向后端发起请求，后端会将修改的信息在数据库中更新。修改普通用户功能时序图如图4.3所示

图4.3修改普通用户功能顺序图

普通用户登录网站后，能够查看喜欢的信息，能够申请领养喜欢的宠物，也能够评论感兴趣的信息，同时还能将自己救助的宠物发布到网站上，所以前台功能模块主要设计了查看宠物领养、养护常识、公告等信息功能，以及发布宠物领养、申请领养、评论信息、收藏信息、管理用户个人信息等功能。

查看宠物详情功能实现了普通用户登录前台系统后查看宠物详细信息的功能。普通用户登录后，在宠物领养页点击对应宠物，系统会从数据库中查到对应id的宠物详细信息显示到宠物详情页。查看宠物详情功能模块的顺序图如图4.6所示。

图4.6查看宠物详情功能顺序图

评论功能实现了普通用户登录前台系统后对宠物信息进行评论留言。普通用户登录后，在宠物详情页在评论框内输入评论信息，然后点击提交，系统会将评论信息添加到数据库中。评论宠物信息功能模块的顺序图如图4.7所示。

图4.7评论宠物信息功能顺序图

管理员登录后台系统后，能够新增后台的信息，能够修改后台现有的信息，并且能够删除想要删除的信息，在查看信息时能够通过搜索的方式查询需要的信息。

管理员能够新增普通用户，能够删除普通用户，能够修改普通用户，也能够查询普通用户。以下用新增普通用户来说明，在普通用户管理页面，点击新增按钮进入新增用户信息编辑框，如图5.1所示。

图5.1 新增普通用户界面

新增普通用户功能核心代码如下，controller层接受前端的post请求，调用service层中的add方法，add方法调用userMapper中的insert方法将用户信息插入到普通用户数据表中，完成后返回结果。

 @PostMapping("/add")

    public CommonResp add(@RequestBody UserSaveReq req){

        CommonResp resp = new CommonResp<>();

        userService.add(req);

        return resp;

    }

public void add(UserSaveReq req){

        User user = CopyUtil.copy(req,User.class);

        //新增

        userMapper.insert(user);

    }

管理员能够新增普通用户，能够删除普通用户，能够更新普通用户，也能够查询普通用户。以下用修改普通用户来说明，在普通用户管理页面，点击更新按钮进入修改用户信息编辑框，如图5.2所示。

图5.2 修改普通用户界面

修改普通用户功能核心代码如下，controller层接受前端的put请求，service层调用updateUser方法，updateUser方法调用userMapper中的updateByPrimaryKey方法将用户信息修改信息在普通用户数据表中修改，完成后返回结果。

  @PutMapping("/updateUser")

    public CommonResp updateUser(@RequestBody UserSaveReq req){

        CommonResp resp = new CommonResp<>();

        userService.updateUser(req);

        return resp;

    }

public void updateUser(UserSaveReq req){

        User user = CopyUtil.copy(req,User.class);

        userMapper.updateByPrimaryKey(user);

    }

管理员能够新增公告，能够删除公告，能够修改公告，也能够查询公告。以下用新增公告来说明，在公告管理页面，点击新增进入新增公告编辑框，如图5.4所示。

图5.4新增公告界面

新增公告功能核心代码如下，controller层接受前端的post请求，调用service层中的add方法，add方法调用 announcementsMapper中的insert方法将公告信息插入到公告数据表中，完成后返回结果。

 @PostMapping("/add")
public CommonResp add(@RequestBody AnnouncementsSaveReq req){
    CommonResp resp = new CommonResp<>();
    announcementsService.add(req);
    return resp;
}

public void add(AnnouncementsSaveReq req){
    Announcements announcements = CopyUtil.copy(req,Announcements.class);

    //新增
    announcementsMapper.insert(announcements);

}

普通用户能够在宠物领养页跳转到对应详情页，查看相关宠物的信息。如图5.4所示。

图5.4 浏览宠物详情界面

普通用户浏览宠物详情功能核心代码如下，controller层接受前端的get请求，service层调用list方法,list方法调用petsMapper中的selectByPrimaryKey方法在宠物数据表中对点击的宠物通过id进行查询，完成后返回结果。

  @GetMapping(value = "/list")

    public CommonResp list(PetsReq req){

        CommonResp<PageResp<PetsResp>> resp = new CommonResp<>();

        PageResp<PetsResp> list = petsService.list(req);

        resp.setContent(list);

        return resp;

    }

     public PageResp<PetsResp> list(PetsReq req) {

         List<Pets>petsList=petsMapper.selectByPrimaryKey(req.getUserId());    

        List<PetsResp> respList = CopyUtil.copyList(petsList, PetsResp.class);    

        Return respList;

    }

普通用户登录后可以在宠物信息详情页发表用户对于对于宠物信息的评论，用户在评论区域评论后发布，评论就会存入数据库中，然后系统会刷新评论。如图5.5所示。

图5.5 浏览宠物详情界面

普通用户评论宠物功能核心代码如下，controller层接受前端的post请求，service层调用add方法，add方法调用detailMapper中的insert方法将评论信息插入到评论数据表中，完成后返回结果。

 @PostMapping("/add")

    public CommonResp add(@RequestBody DetailSaveReq req){

        CommonResp resp = new CommonResp<>();

        DetailService.add(req);

        return resp;

    }

public void add(DetailSaveReq req){

        Detail detail = CopyUtil.copy(req,Detail.class);

              detailMapper.insert(detail);

    }

评论宠物送养信息功能能够实现普通用户对对应的送养宠物进行评论留言，用户评论宠物送养功能测试用例如表6.2所示。

表6.2评论宠物送养信息功能测试用例

普通用户可以宠物详情页面申请领养宠物。用户申请领养宠物功能测试用例如表6.3所示。

表6.3申请领养宠物功能测试用例

本文主要围绕基于Spring Boot和Vue技术栈的宠物救助网站展开，通过详细的开发过程，实现了网站两类角色的核心功能。普通用户能够方便地进行宠物送养发布、领养申请、审批宠物领养申请、评论互动、收藏送养信息、查看宠物详情、获取养护常识以及了解宠物基地和系统公告。而管理员则能够高效地管理普通用户、其他管理员、宠物信息、公告内容、宠物基地精选以及养护常识的更新与维护。

从功能实现的角度来看，本网站成功地将Spring Boot的后端优势与Vue的前端灵活性相结合，为用户提供了便捷、友好的交互体验。Spring Boot的自动配置和简化部署特性极大地提高了开发效率，使得后端服务的搭建与维护变得简单快捷。而Vue的组件化开发方式和数据驱动的视图更新机制则使得前端页面能够灵活响应用户操作，提升了用户体验。

本网站的实施不仅为宠物救助提供了线上平台，促进了宠物资源的合理配置，扩大了宠物救助的范围，同时也为普通用户和管理员提供了高效的交互方式，提高了管理效率，更重要的是为普通用户与普通用户之间提供了高效的交流平台，降低了用户之间的交流成本，扩大了用户之间的交流范围。然而，在网站实施过程中，本人也发现了一些问题和不足之处。例如，在数据安全方面仍需进一步加强；用户界面的细节处理和交互设计也有待优化；此外，随着用户量的增长，网站的性能和稳定性将面临更大的挑战。

针对这些问题，本人提出了以下改进计划：首先，优化数据库设计和查询语句，提高数据访问效率；加强安全验证机制，确保系统安全稳定。其次，进一步完善用户界面和交互设计，使界面更加简洁美观，提升用户体验；

概括而言，本网站在功能实现和用户体验方面取得了显著成果，为宠物救助提供了有效的线上平台。然而，仍存在一些问题和挑战需要本人在后续工作中不断改善。通过持续的努力和创新，本网站将为宠物救助事业做出更大的贡献。