(计算机毕设)基于Vue和Spring Boot的宠物救助网站设计与实现

• 萌宠菠菠乐园
• 2024-10-09 05:39

第1章　绪  论

1.1 课题背景

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

1.2 目的与意义

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

1.3 论文研究主要内容

本文主要研究如何设计与实现基于Vue.js和Spring Boot为基础的宠物救助网站，具体内容分为六部分。第一部分：通过网上调查的方式，深入了解宠物救助网站的现实需求和国内外对同类网站的研究现在，明确本网站开发的背景和目的。第二部分：主要对国内外技术进行分析，选择一套适合宠物救助网站的技术路线。第三部分：这一阶段主要是明确网站各类用户的功能需求，并且依此绘制出部分界面原型图，同时还要对网站开发环境进行选择，选择一套适合本网站的开发环境。第四部分：首先是明确本网站采用的系统架构模式，然后依照用户需求设计出对应的数据库表，并且设计出前后台的功能顺序图。第五部分：主要明确前后台的功能设计，进行网站的前后端具体实现。第六部分：对本网站各功能模块进行功能测试，以及网站的性能和安全性测试。

1.4 国内外研究现状 

1.4.1国内现状分析

近年来，随着国内宠物市场的蓬勃发展，宠物救助网站作为连接宠物救助组织与潜在领养者的桥梁，逐渐受到社会各界的关注。在国内，基于Spring Boot和Vue的宠物救助网站已经取得了一定的进展。

在技术研究方面，国内学者和开发者积极探索将Spring Boot与Vue结合应用于网站的开发中。例如，郭建卫在其研究中提出了基于Spring Boot+Mybatis+Vue的学生德育量化考核系统设计与实现，为宠物救助网站的开发提供了技术参考[1]。

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

1.4.2国外现状分析

一些国外的研究者和开发者积极探索了如何将最新的前端技术应用于宠物救助网站的开发中，以提升用户体验和网站的交互性。

与国内相比，国外的宠物救助网站在用户体验和数据库管理方面表现更为出色。这主要得益于国外在Web技术和数据库管理技术方面的深厚积累和创新应用。然而，国外的宠物救助网站也存在一些不足，如针对不同文化背景的适应性不强、本地化服务不够等问题完善。

第2章　关键技术介绍

2.1 Spring Boot框架

Spring Boot是一个基于Spring框架的开发框架，旨在快速构建应用程序。它简化了Spring应用程序的配置和部署过程，使开发人员能够更专注于业务逻辑的编写而不是繁琐的配置工作。此外，Spring Boot集成了依赖管理工具Maven，自动管理项目所需的依赖关系，简化了项目的构建和维护过程。同时，它支持使用外部配置文件（如.properties）来配置应用程序的属性，使得配置信息与代码分离，便于管理和维护。总之，Spring Boot是一个能够快速构建后端系统的技术框架。

2.2 Vue.js框架

Vue.js是一款备受欢迎的JavaScript前端框架，专注于构建用户界面和单页面应用程序。它采用了响应式数据绑定的概念，使得视图能够自动更新以反映数据变化，从而简化了应用程序状态的管理和维护，提升了开发效率。Vue将用户界面拆分为独立可复用的组件，每个组件都封装了自身的状态和行为，这种组件化的开发方式使得代码更易于管理、测试和重用，同时也提高了开发效率。值得一提的是，Vue拥有庞大而活跃的生态系统，包括丰富的插件、组件库和工具，例如Element Plus和Ant Design组件库。

2.3 MyBatis Generator

MyBatis Generator, 作为MyBatis框架的一部分，它能够根据数据库表结构自动生成对应的Java持久层代码（包括DAO接口、Mapper接口和实体类）以及相关的XML映射文件。这一工具大幅减少了手动编写代码的工作量，并提高了开发效率。MyBatis Generator与常见的集成开发环境（IDE），如Eclipse和IntelliJ IDEA等紧密集成，使代码生成过程更为便捷。生成的代码完全兼容MyBatis框架，可直接用于执行持久层操作。

第3章　需求分析

3.1 功能性需求分析

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

图3.1 后台用例图

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

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

用例名称

新增普通用户

参与者

管理员

用例概述

管理员使用该用例完成新增普通用户的功能

前置条件

管理员已经登录，并且进入管理普通用户页面

后置条件

系统中添加一条新增用户记录

基本事件流

参与者动作

系统响应

1.管理员在普通用户管理主页面上新建新增。

3.管理员输入普通用户信息，并确认提交。

2.系统弹出新增普通用户输入框。

4.系统检查管理员输入的信息是否符合规则。

5.系统将普通用户增加到数据库表中。

6.系统关闭新增普通用户输入框。

7.系统弹出弹窗，显示“添加用户成功”。

8.系统将该普通用户列表刷新。

备选事件流

4a.系统对管理员输入的用户信息进行非空验证和字数验证，提示管理员“用户信息为空，请重新输入”和“长度应该在3到50个字符之类”。

4b.系统对管理员输入的邮箱进行校验，不合法则提示“邮箱格式错误”

管理员登录后台后，能够修改普通用户信息，用例描述如表3.2所示。

表3.2修改普通用户用例描述

用例名称

修改普通用户

参与者

管理员

用例概述

管理员使用该用例完成修改普通用户信息的功能

前置条件

管理员已经登录，并且进入管理普通用户页面

后置条件

系统中添加一条修改用户记录

基本事件流

参与者动作

系统响应

1.管理员在普通用户管理主页面上点击修改某个用户。

3.管理员修改普通用户信息，然后提交。

2.系统弹出修改信息编辑框。

系统检查管理员提交的信息是否符合规则

5.系统将管理员提交的信息更新到数据库表中。

6.系统关闭修改普通用户对话框。

7.系统弹出弹窗，显示“修改用户成功”。

8.系统将该普通用户列表刷新。

备选事件流

4a.系统对管理员输入的用户信息进行非空验证和字数验证，提示管理员“用户信息为空，请重新输入”和“长度应该在3到50个字符之类”。

4b.系统对管理员输入的邮箱进行校验，不合法则提示“邮箱格式错误”

管理员登录后台后，能够查询想要查找的普通用户，用例描述如表3.3所示。

表3.3 查询普通用户用例描述

续表3.3查询普通用户用例描述

参与者

管理员

用例概述

管理员使用该用例完成查询普通用户的功能

前置条件

管理员已经登录，并且进入管理普通用户页面

后置条件

系统中添加一条查询用户记录

基本事件流

参与者动作

系统响应

1.管理员在普通用户管理主页面的查询框里输入查询普通用户用户名关键词，并点击查询。

2.系统在数据库里进行模糊查询，并返回对应普通用户信息，显示到列表里。

备选事件流

2a.系统在数据库中为查询到对应普通用户信息，列表显示暂无数据。

管理员登录后台后能够删除想要删除的普通用户，用例描述如表3.3所示。

表3.3删除普通用户用例描述

用例名称

删除普通用户

参与者

管理员

用例概述

管理员使用该用例完成删除普通用户的功能

前置条件

管理员已经登录，并且进入管理普通用户页面

后置条件

系统中添加一条删除用户记录

基本事件流

参与者动作

系统响应

1.管理员在普通用户管理主页面上删除对应用户。

3.管理员确认删除。

2.系统弹出确认删除对话框。

4.系统将对应普通用户信息从数据库表中删除。

5.系统弹出弹窗，显示“删除用户成功”。

备选事件流

3a.管理员点击了取消按钮，弹窗关闭。

管理员可以在后台系统添加公告，添加公告用例的用例描述如表3.4所示。

表3.4添加公告用例描述

用例名称

添加公告

参与者

管理员

用例概述

管理员使用该用例完成添加公告的功能

前置条件

管理员已经登录，并且进入管理普通用户页面

后置条件

系统中添加一条公告记录

基本事件流

参与者动作

系统响应

1.管理员在公告管理主页面上点击添加按钮。

3.管理员填写普通用户信息，点击“提交”按钮。

2.系统打开添加公告对话框。

4.系统检查管理员输入的信息是正确有效的。

5.系统将公告添加到数据库中。

6.系统关闭添加公告对话框。

7.系统提示“添加公告成功”。

8.系统刷新公告列表界面。

续表3.4添加公告用例描述

备选事件流

4a.系统对管理员输入的公告信息进行非空验证和字数验证，提示管理员“用户信息为空，请重新输入”和“长度应该在3到50个字符之类”。

普通用户登录网站前台页面后，其主要功能需求包括浏览宠物信息、查找寻宠信息、了解流浪动物基地的详情，以及获取养护常识等内容。此外，用户还可以收藏感兴趣的信息、发表评论，并申请领养宠物。同时，用户也拥有修改个人信息的权限。前台用例图如图3.2所示。

图3.2 前台用例图

普通用户登录网站后能够查看宠物详情，用例描述如表3.5所示。

表3.5 查看宠物详情用例描述

用例名称

查看宠物详情

参与者

普通用户

用例概述

普通用户使用该用例完成查看宠物详情功能

前置条件

普通用户已经登录，并且进入宠物领养页面

后置条件

系统中添加一条查看宠物详记录

基本事件流

参与者动作

系统响应

1.普通用户在宠物领养页面面上点击宠物信息。

2.系统从宠物领养页跳转到宠物详情页面。

3.系统在数据库中查询对应宠物的详细信息。

4.系统将信息渲染到宠物详情页面。

备选事件流

普通用户能够评论本网站的宠物信息，用例描述如表3.6所示。

表3.6评论宠物用例描述

用例名称

评论宠物

参与者

普通用户

用例概述

普通用户使用该用例完成评论宠物的功能

前置条件

普通用户已经登录，并且进入宠物详情页面页面

后置条件

系统中添加一条评论宠物记录

基本事件流

参与者动作

系统响应

1.普通用户在宠物详情页评论输入框输入评论并点击“确认”。

2.系统校验信息长度是否符合规则。

3.系统将评论信息添加到数据库表中。

4.系统弹出弹窗，显示“评论成功！”。

5.系统将该宠物评论列表刷新。

备选事件流

2a.系统提示“评论信息长度超过400，无法提交！”。

普通用户可以在本网站提交宠物领养申请，用例描述如表3.7所示。                 

表3.7申请宠物领养用例描述

用例名称

申请宠物领养

参与者

普通用户

用例概述

普通用户使用该用例完成申请宠物领养的功能

前置条件

普通用户已经登录，并且进入宠物详情页面

后置条件

系统中添加一条申请宠物领养记录

续表3.7申请宠物领养用例描述

基本事件流

参与者动作

系统响应

1.普通用户在宠物详情页面点击申请。

3.普通用户输入申请详细内容，并提交申请。

系统弹出申请信息输入框。

4.系统校验申请信息是否符合规则。

5.系统关闭申请信息输入框。

6.系统将申请信息添加到数据库表中。

7.系统弹出弹框，显示“提交成功！”。

备选事件流

4a.系统提示“申请信息违反规则，请重新输入”。

3.2 系统原型

3.2.1 用户首页

用户首页主要布局为：顶部左边显示网站名字，右边显示首页导航栏；内容部分从上往下依次显示养护常识、宠物滚动图、公告，部分等待领养的宠物，部分宠物基地信息；底部显示欢迎来到宠物救助网站。

3.2.2 用户列表页

用户列表页主要布局为：首先顶部为前台的导航栏，可以通过导航栏进入不同的功能模块，其中宠物领养功能模块整个页面显示一个tab选项卡，通过选项卡可以展示不同种类的宠物，每一个选项里显示宠物信息卡片，同时卡片下面配有分页。

3.2.3 管理员列表页

管理员列表页布局从上至下依次分布搜索和新增模块、表单显示模块。其中表单显示模块包含列表显示和分页控件。

3.2.4 管理员添加页

管理员添加页为一个弹出框，从上至下分为三部分，第一部分显示弹窗标题为新增用户，第二部分显示需要添加的数据；第三部分显示操作按钮：确认和取消。

3.3 系统开发环境 

项目的硬件开发环境包括以下几个方面：首先，本项目选用了Intel(R) Core(TM) i5-9300H CPU作为中央处理器，主频为2.40GHz。这款处理器提供了出色的性能和效率，为项目开发提供了稳定的计算基础。其次，为了确保系统的流畅运行，本项目配置了8GB的RAM。这一内存容量足以应对大多数开发任务，确保程序运行的稳定性。再者，作为外存，本项目采用了512GB的固态硬盘。这种存储方式不仅读写速度快，而且为项目文件提供了充足的存储空间。最后，在开发过程中，本项目利用手机热点作为网络连接方式。尽管速度可能不如固定宽带，但其便携性为本项目在不同地点进行开发提供了便利。

3.4 系统可行性分析

3.4.1 技术可行性分析 

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

3.4.2 安全可行性分析 

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

第4章　系统设计

4.1 体系结构设计

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

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

图4.1数据库设计

4.2.1 概念结构设计 

本项目数据库概念结构设计考虑系统主要有普通用户和管理员两种用户，针对两种用户不同的功能，考虑到普通用户可以发布宠物、提问求助、评论申请领养等功能，所以主要设计了宠物表、提问求助表、评论表、领养申请表等。管理员用户主要功能是管理后台数据，对用户信息、宠物基地信息、公告信息等进行管理，所以设计了普通用户表、宠物基地信息表、公告表等。如图4.1所示。

图4.1 系统E-R图

图4.1是本系统E-R图，主要结构为8个实体和它们对应的属性和相互之间的关系组成。实体之间关系主要是普通用户以及管理员这两个实体和其他属性之间的对应关系。8个实体分别为普通用户、管理员、宠物、寻宠、宠物基地、养护常识、提问求助、公告。

4.2.2 逻辑设计和物理设计

项目数据库逻辑结构设计思路是基于不同用户的功能，分析出需要哪些数据库表和对应属性，以及它们之间的关系。本项目数据库主要设计了宠物表、寻宠信息表、提问求助表、评论表、收藏表、领养申请表、管理员表、普通用户表、宠物基地信息表、养护常识表、公告表等表结构。

普通用户表存储着网站普通用户的关键信息，主要存储着用户在网站的用户名、密码和联系方式，用于用户登录网站和联系用户。详细信息如表4.1所示。

表4.1 普通用户表

字段名

名称

数据类型

约束

user_id

 普通用户ID

INT                

PK，AUTO_INCREMENT

name

登录名

VARCHAR(30)

not null,UNIQUE

Nick_name

昵称

VARCHAR(25)

not null

password

密码

CHAR(32)

not nul

email

邮箱

VARCHAR(26)

not null

phone_number

电话号码

VARCHAR(16)

not null

address

用户地址

TEXT

not null

gender

性别

TINYINT

not null

avatar_url

头像

VARCHAR(40)

无

registration_date

注册时间

TIMESTAMP

not null

管理员表存储着网站管理员的关键信息，主要存储了用户的ID以及登录名、密码和联系方式，用来用户登录网站和联系用户。详细信息如表4.2所示。

表4.2 管理员表

字段名

名称

数据类型

约束

admin_id

    管理员ID

INT                

PK，AUTO_INCREMENT

name

登录名

VARCHAR(30)

not null,UNIQUE

nick_name

昵称

VARCHAR(25)

not null

password

密码

CHAR(32)

not nul

email

邮箱

VARCHAR(26)

not null

phone_number

电话号码

VARCHAR(16)

not null

续表4.2 管理员表

address

用户地址

TEXT

not null

gender

性别

TINYINT

not null

avatar_url

头像

VARCHAR(40)

registration_date

注册时间

TIMESTAMP

not null

宠物表存储着宠物的关键信息，主要包含普通用户的宠物id、种类、宠物描述、领养状态、宠物图片、领养条件、领养地址等信息，主要用于查看对应宠物详细信息、分类显示宠物等功能。详细信息如表4.3所示。

表4.3 宠物表

字段名

名称

数据类型

约束

pet_id

     宠物ID

INT                

PK，AUTO_INCREMENT

name

宠物姓名

VARCHAR(25)

not null

species

种类

VARCHAR(50)

not null

species_number

种类编号

TINYINT

Not null

gender

性别

TINYINT

not nul

age

年龄

INT

无

description

宠物描述

TEXT

无

rescue_date

被救助日期

DATE

无

adoption_status

领养状态

ENUM

DEFAULT 'Available'

adopter_id

领养者ID

INT

FOREIGN KEY

publisher_id

发布者ID

INT

FOREIGN KEY

pictures

宠物图片

JSON

无

adoption_requirements

领养条件

TEXT

无

adoption_address

领养地址

VARCHAR(100)

无

neutered_status

绝育状态

TINYINT

无

vaccinated_status

疫苗状态

TINYINT

无

compensation_status

有偿无偿

TINYINT

无

宠物基地表存储着宠物基地的关键信息，主要包含宠物基地id、宠物基地名称、宠物基地地址、城市、省、宠物基地介绍、联系电话等信息，主要用于显示对应宠物基地的详情、分地区显示宠物基地、用户联系宠物基地等功能。详细信息如表4.4所示。

表4.4 宠物基地表

字段名

名称

数据类型

约束

shelter_id

    宠物基地ID

INT                

PK，AUTO_INCREMENT

name

宠物基地名称

VARCHAR(100)

not null

address

地址

VARCHAR(20)

not null

city

城市

VARCHAR(20)

not nul

state

省

VARCHAR(20)

not null

续表4.4 宠物基地表

description

宠物基地介绍

TEXT

无

admin_id

发布者ID

INT

not null

phone_number

联系电话

VARCHAR(20)

not null

Official_account

公众号

VARCHAR(50)

无

admin_id

发布者ID

INT

not null，FOREIGN KEY

shelter_img

基地图片

VARCHAR(40)

无

养护常识表存储着养护常识的关键信息，主要包含养护常识id、标题、内容、发布日期等信息，主要用于显示养护常识详情等功能。详细信息如表4.5所示。

表4.5 养护常识表

字段名

名称

数据类型

约束

tip_id

    养护常识ID

INT                

PK，AUTO_INCREMENT

title

标题

VARCHAR(100)

not null

content

内容

TEXT

not null

publisher_id

发布者ID

INT

FOREIGN KEY

publisher_type

发布者类型

ENUM

not null

publish_date

发布日期

TIMESTAMP

not null

img

图片

VARCHAR(40)

无

公告存储着公告的关键信息，主要包含ID以及对应的标题和内容，用来显示公告详情。详细信息如表4.6所示。

表4.6公告表

字段名

名称

数据类型

约束

announcement_id

    公告ID

INT                

PK，AUTO_INCREMENT

title

标题

VARCHAR(100)

not null

content

内容

TEXT

not null

publisher_id

发布者ID

INT

not nul

publish_date

过期时间

TIMESTAMP

not null

expiration_date

发布日期

TIMESTAMP

not null

寻宠表存储着寻宠的关键信息，主要包含宠物形象id、宠物信息标题、宠物姓名、宠物种类、信息类型、详细描述、发布者id等信息，主要用于显示宠物形象详情、分类显示寻宠信息、联系发布者等功能。详细信息如表4.7所示。

表4.7 寻宠表

字段名

名称

数据类型

约束

id

     宠物信息ID

INT                

PKAUTO_INCREMENT

title

宠物信息标题

VARCHAR(40)

not null

续表4.7 寻宠表

name

宠物姓名

VARCHAR(25)

not null

category

宠物种类

VARCHAR(10)

not null

gender

宠物性别

ENUM

not nul

type

信息类型（寻宠，寻主）

ENUM

无

reward

悬赏金额

DECIMAL(10, 2)

无

lost_area

走失区域

VARCHAR

无

publisher_id

发布者ID

INT

FOREIGN KEY

details

详细描述

TEXT

not nul

images

宠物图片

JSON

无

publish_time

发布时间

TIMESTAMP

无

寻宠表存储着寻宠的关键信息，主要包含提问求助id、内容、发布者id等信息，主要用于显示提问求助详情、显示发布者自己发布的提问等功能。详细信息如表4.8所示。

表4.8 提问求助表

字段名

名称

数据类型

约束

id

    提问求助ID

INT                

PK，AUTO_INCREMENT

title

标题

VARCHAR(40)

not null

details

内容

TEXT

not null

publisher_id

发布者ID

INT

FOREIGN KEY

images

图片

JSON

无

publish_time

发布日期

TIMESTAMP

not null

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

表4. 9申请表

字段名

名称

数据类型

约束

Application_ID

    申请ID

INT                

PK，AUTO_INCREMENT

Applicant_ID

申请者ID

INT 

FOREIGN KEY

Publisher_ID

宠物发布者ID

INT 

FOREIGN KEY

Gender

性别

VARCHAR(10)

FOREIGN KEY

Age

年龄

INT 

not null

Experience

养宠经验

ENUM

not null

Housing_Status

住房情况

ENUM

not null

Marital_Status

婚姻状况

ENUM

not null

City

城市

VARCHAR(30)

not null

Occupation

职业

VARCHAR(10)

not null

续表4.9 申请表

Phone_Number

手机号

VARCHAR(20)

not null

Wechat

微信

VARCHAR(30)

not null

Adoption_Reason

领养理由

TEXT

not null

Submission_Time

申请提交时间

TIMESTAMP

not null

4.3 后台功能模块设计

后台网站主要展示了宠物，用户，养护常识，公告等信息，管理员登录网站后，能够查看后台的所有信息，能够新增各类信息，能够删除需要删除的信息，同时还能够通过搜索来查询想要查找的信息。

4.3.1 新增普通用户功能实现

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

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

4.3.2 修改普通用户功能实现

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

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

4.3.3 查询普通用户功能实现

查询普通用户功能可以实现管理员登录后在普通用户页面查询想要寻找的用户。网站会根据输入的用户名在数据库里进行模糊查询。查找普通用户功能时序图如图4.4所示

图4.4查找普通用户功能顺序图

4.3.4 新增公告功能实现

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

图4.5新增公告功能顺序图

4.4 前台功能模块设计

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

4.4.1 查看宠物详情功能实现

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

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

4.4.2 评论宠物功能实现

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

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

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

申请领养宠物功能实现了普通用户登录后申请想要领养的宠物。普通用户登录系统后在宠物详情页点击申请按钮，系统弹出申请编辑框，用户编辑申请，系统效验信息是否合法，系统将申请添加到数据库申请表中。申请领养宠物功能模块的顺序图如图4.8所示。

图4.8申请领养宠物功能顺序图

第5章　系统实现

5.1 后台功能模块实现

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

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

管理员能够新增普通用户，能够删除普通用户，能够修改普通用户，也能够查询普通用户。以下用新增普通用户来说明，在普通用户管理页面，点击新增按钮进入新增用户信息编辑框，如图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.1.2 修改普通用户功能模块实现

管理员能够新增普通用户，能够删除普通用户，能够更新普通用户，也能够查询普通用户。以下用修改普通用户来说明，在普通用户管理页面，点击更新按钮进入修改用户信息编辑框，如图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.1.3 查询普通用户功能模块实现

管理员登录后能够新增普通用户、删除普通用户、更新普通用户信息、查询普通用户信息。以下用查找普通用户来说明，在普通用户页面，在查询输入框输入信息，点击查询，可以查出对于信息，如图5.3所示。

图5.3 查询普通用户界面

查询普通用户功能核心代码如下，controller层接受前端的get请求，service层调用list方法，list方法中创建一个UserExample对象构建查询条件，使用PageHelper插件进行分页，并调用 userMappe中的selectByExampleWithBLOBs方法执行查询，完成后返回结果。

 @GetMapping(value = "/list")

    public CommonResp list(UserReq req){

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

        PageResp<UserResp> list = userService.list(req);

        resp.setContent(list);

        return resp;

    }

   public PageResp<UserResp> list(UserReq req) {

        UserExample userExample = new UserExample();

        UserExample.Criteria criteria = userExample.createCriteria();

//        ObjectUtils.isEmpty() 是一个用于检查对象是否为空的实用方法

        if(!ObjectUtils.isEmpty(req.getLoginname())){

            criteria.addNameLike("%" + req.getLoginname() + "%");

        }

        PageHelper.startPage(req.getPage(),req.getSize());

            List<User> userList = userMapper.selectByExampleWithBLOBs(userExample);

        PageInfo<User> pageInfo = new PageInfo<>(userList);

        LOG.info("总行数：{}",pageInfo.getTotal());

        LOG.info("总页数：{}",pageInfo.getPages());

        List<UserResp> respList = CopyUtil.copyList(userList, UserResp.class);

        PageResp<UserResp> pageResp = new PageResp<>();

        pageResp.setTotal(pageInfo.getTotal());

        pageResp.setList(respList);

        return pageResp;

    }

5.1.4 新增公告功能模块实现

管理员能够新增公告，能够删除公告，能够修改公告，也能够查询公告。以下用新增公告来说明，在公告管理页面，点击新增进入新增公告编辑框，如图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.2 前台功能模块实现

普通用户登录网站后，能够在网站上查看前台页面的信息，能够申请领养宠物，也可以评论自己感兴趣的信息，通时也可以查看自己的个人信息。

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

普通用户能够在宠物领养页跳转到对应详情页，查看相关宠物的信息。如图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.2.2 评论宠物功能模块实现

普通用户登录后可以在宠物信息详情页发表用户对于对于宠物信息的评论，用户在评论区域评论后发布，评论就会存入数据库中，然后系统会刷新评论。如图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);

    }

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

普通用户登录后可以在宠物信息详情页点击申请领养，点击领养按钮后填写申请，然后点击立即创建，该申请就会存入数据库，并将该申请显示到宠物发布者的申请处理列表里，等待发布者处理。如图5.6所示。

图5.6 浏览宠物详情界面

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

 @PostMapping("/add")

    public CommonResp add(@RequestBody ApplySaveReq req){

        CommonResp resp = new CommonResp<>();

        ApplyService.add(req);

        return resp;

    }

public void add(ApplySaveReq req){

        Apply  apply = CopyUtil.copy(req,Apply.class);

            applyMapper.insert(apply);

}

第6章　系统测试

6.1 功能测试

6.1.1 前台部分模块测试

普通用户可以在前台宠物领养页面查看宠物详情。浏览宠物详情功能测试用例如表6.1所示。

表6.1 浏览宠物详情功能测试用例

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览宠物领养页面

进入前台首页后点击“宠物领养”

页面跳转至宠物领养页

正确

User _02

浏览宠物详情页

进入后宠物领养页后并点击宠物信息

页面跳转至宠物详情页

正确

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

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

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览宠物领养页面

进入前台首页后点击“宠物领养”按钮

页面跳转至宠物领养页

正确

User _02

浏览宠物详情页

进入后宠物领养页后并点击宠物信息

页面跳转至宠物详情页

正确

User _03

进入评论对话框

进入宠物详情页后点击“评论”按钮

页面弹出评论信息输入框

正确

User_04

提交评论

输入信息后点击“提交”按钮

提示“评论成功”，

正确

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

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

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览宠物领养页面

进入前台首页后点击“宠物领养”按钮

页面跳转至宠物领养页

正确

User _02

浏览宠物详情页

进入后宠物领养页后并点击宠物信息

页面跳转至宠物详情页

正确

User _03

浏览宠物领养申请页

进入宠物详情页后点击宠物信息

页面跳转至宠物申请页

正确

User_04

提交申请

输入信息后点击“提交”按钮

提示“成功提交申请”，页面跳转至宠物详情页

正确

6.1.2 后台部分模块测试

管理员可以在普通用户界面点击新增，然后输入新增用户信息。管理员新增普通用户功能测试用例如表6.4所示。

表6.4新增普通用户功能测试用例

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览管理普通用户页面

进入后台首页后点击“管理普通用户”按钮

页面跳转至管理普通用户页

正确

User _02

进入添加用户信息输入框

进入管理普通用户页后点击新增

页面弹出添加普通用户信息输入框

正确

User_04

确认添加

输入信息后点击“确认”按钮

提示“添加成功”

正确

更新普通用户功能可以实现管理员更新普通用户信息的功能。管理员更新普通用户信息功能的测试用例见表6.5。

表6.5更新普通用户信息功能测试用例

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览管理普通用户页面

进入后台首页后点击“管理普通用户”按钮

页面跳转至管理普通用户页

正确

User _02

进入更新用户信息输入框

进入管理普通用户页后点击更新

页面弹出更新普通用户信息输入框

正确

User_04

确认更新

输入信息后点击“确认”按钮

提示“更新成功”

正确

查询普通用户的功能能够通过输入普通用户的用户名，实现查询对应用户。管理员查询普通用户的测试示例如表6.6所示。

表6.6查询普通用户功能测试用例

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览管理普通用户页面

进入后台首页后点击“管理普通用户”按钮

页面跳转至管理普通用户页

正确

User _02

查询用户

进入管理普通用户页后在查询输入框内输入信息然后点击查询

显示查询结果表单

正确

管理员可以在公告界面点击新增，然后输入公告信息。管理员新增公告功能测试用例如表6.7所示。

表6.7新增公告功能测试用例

用例编号

用例描述

操作过程及数据

预期结果

实际结果

User_01

浏览管理公告页面

进入后台首页后点击“管理公告”按钮

页面跳转至管理公告页

正确

User _02

进入添加公告输入框

进入管理公告页后点击新增

页面弹出添加公告信息输入框

正确

User_04

确认添加

输入信息后点击“确认”按钮

提示“添加成功”

正确

6.4 测试结论

经过对系统进行全面的测试，本人针对用户和管理员的核心功能进行了深入的分析和验证。测试主要聚焦于查看宠物详情、评论和申请宠物领养的操作，以及管理员添加新用户、更新用户信息和查询用户的功能。在测试过程中，本人发现了一些需要改进的细节。首先，系统对于两类用户的使用场景略显单一，未能充分考虑到用户可能遇到的各种实际需求和场景。这可能导致在某些特殊情况下，系统的使用体验不够理想。

此外，本人注意到系统的界面设计和操作流程还有进一步优化的空间。部分界面元素的布局和提示信息可能不够直观，增加了用户的操作难度。同时，某些操作流程的步骤较为繁琐，不利于用户快速完成操作。尽管存在这些不足，但整体而言，系统在运行上并未出现重大的逻辑问题或核心功能的失效。系统的稳定性和性能表现良好，能够满足基本的使用需求。然而，本人仍然认为系统需要进行逐步的改进和优化。这包括但不限于丰富用户的使用场景、优化界面设计和操作流程、提升用户体验等方面。通过不断的迭代和改进，本人相信系统能够更好地满足不断变化的用户需求和市场趋势。

综上所述，虽然系统在细节方面还有待完善，但整体表现良好，具备进一步发展的潜力。本人将继续关注用户反馈和市场需求，持续优化系统功能，为用户提供更好的体验和服务。

第7章　结　论

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

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

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

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

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

相关知识

(计算机毕设)基于Vue和Spring Boot的宠物救助网站设计与实现
基于spring boot和vue的宠物相亲网站的设计与实现
【毕设精选】基于SpringBoot和Vue的相关系统
毕设项目：宠物网站的设计与实现(JSP+java+springmvc+mysql+MyBatis)
基于Spring Boot的宠物咖啡馆平台的设计与实现
Spring Boot宠物购物商城网站系统设计与实现
基于Spring Boot的宠物医院管理系统设计与实现
【计算机毕设选题】2025年软件工程/计算机科学与技术专业最全的毕业设计选题推荐
基于二维码技术的宠物救助网站的设计与实现毕设论文.doc
Spring Boot宠物医院管理系统设计与实现

网址: (计算机毕设)基于Vue和Spring Boot的宠物救助网站设计与实现 https://m.mcbbbk.com/newsview353633.html

上一篇: 第10届雄鹰京宠展圆满落幕，精彩

下一篇: 统计2022活跃人数【宠物森林吧