基于Vue和SpringBoot前后端分离的宠物服务系统的设计与实现

庞嵩昊　李盈　赵艺　苏盼盼　田新志

关键词：宠物服务；SpringBoot；MyBatis；Java；MySQL

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2023）21-0042-04

0 引言

《2022年中国宠物消费报告》中提到，2022年城镇宠物（犬猫）主7043萬人，较2021年增长2.9%，2022年城镇宠物（犬猫）消费市场规模为2706亿元，较2021年增长8.7%。可见养宠人数在不断增长，且报告中指出饲养异宠的人群中主要以95 后宠物主为主，占比33.7%。学历主要集中在本科，占比52.2%。这群人更愿意以互联网为媒介获取准确、快捷、方便的宠物相关知识及分享萌宠与主人之间的快乐日常等，故相应的宠物服务也需要顺应这种潮流，以互联网为载体使宠物服务更加智能化和信息化[1]。因此，构建一款互联网背景下的宠物服务平台是非常有必要的，借助互联网的便捷性可以给宠物主带来更优质的服务。

1 相关知识及技术

宠物服务平台采用基于Vue和SpringBoot前后端分离的开发模式[2]，将前端和后端的项目业务进行分离，可以做到更好解耦合。前端项目和后端项目运行在不同服务器上，前端和后端的服务器之间通过通信获取数据，此项目前端采用Vue，运行在Nginx服务器上。后端项目使用SpringBoot，运行在Tomcat服务器上，其中前后端进行通信采用Vue中的Axios技术，是对Ajax的一个封装增强。综上所述前端职责为向后端服务器接口发送Ajax请求并获取数据，使用Vue框架将数据渲染在页面上。后端职责为编写API接口，接受前端请求，将查询出来的数据封装起来返回给前端服务器[3]，技术方面使用到高级框架SpringBoot、Spring及MyBatis。前后端分离开发模式如图1所示。

1.1 Vue

Vue 是一款流行的前端JavaScript 框架，它采用MVVM模式，通过双向数据绑定将视图与数据模型关联起来。Vue主要特点是易学易用，具有高效的性能和扩展性，支持组件化开发，提供了丰富的指令和插件，能够快速构建交互丰富的Web应用程序。Vue的核心是响应式系统，它能够自动追踪数据变化并更新视图。通过使用指令和组件，Vue提供了丰富的功能，例如条件渲染、循环渲染、事件处理、样式绑定等。Vue还提供了一套完整的路由和状态管理机制，可以帮助开发者更好地组织代码和管理状态。

1.2 Spring

Spring是一款流行的Java企业级开发框架，它提供了一系列的工具和特性，使得Java应用程序的开发变得更加容易和高效。Spring框架的核心是IoC（控制反转）和AOP（面向切面编程）两个概念。IoC模式通过将对象的创建和依赖关系的管理转交给Spring容器来实现，从而解耦了应用程序中的各个组件。AOP 模式则通过在应用程序中插入切面来实现横向切面的关注点分离，提高了代码的可复用性和可维护性。

1.3 SpringBoot

SpringBoot是一款流行的基于Spring框架的开发框架，它旨在简化Spring应用程序的开发和部署。Spring?Boot提供了自动配置、快速开发、无代码生成和微服务等特性，使得开发者可以更加快速地搭建Web应用程序。SpringBoot采用约定优于配置的方式，通过自动配置和自动装配来减少应用程序的代码量[4]。SpringBoot 支持多种部署方式，例如嵌入式Web容器、Docker容器等，使得应用程序的部署变得更加灵活和方便。

1.4 MyBatis

MyBatis是一款流行的持久层框架，它支持自定义SQL、存储过程和高级映射等特性，使得Java应用程序的数据访问变得更加容易和高效。MyBatis会把数据库表映射成Java对象，使得开发者可以更加方便地操作数据库。MyBatis还提供了一些常用的特性，例如缓存、批量操作、动态SQL等，使得Java应用程序的数据访问性能得到了提升。另外，MyBatis还支持多种数据库，例如MySQL、Oracle、SQL Server等，使得开发者可以根据自己的需求选择最适合的数据库。

2 系统需求分析

近年来，养宠的人数急剧增大，如何正确养宠物以及与宠物相关的知识不断成为人们话题的焦点。基于SpringBoot+Vue前后端分离的宠物服务系统提供了与宠物有关的服务，比如日常分享模块，即宠主可登录本系统发布自己宠物的日常，查看与宠物有关的知识详情，从而使得宠物主人可以快速了解到养宠知识，比如公共场合的养宠文明，规范自身和宠物行为。此系统主要有二类参与者，分别是萌宠用户和管理员，其中萌宠用户包含未注册用户与注册用户，管理员主要是对系统信息的维护。根据用户对系统的需求，画出用户的用例图如图2所示。

3 系统总体设计

基于对市面上现有宠物服务系统分析研究，本系统是基于传统的B/S架构，系统开发语言采用Java，为目前使用最为广泛的编程语言之一，其特性有面向对象、平台无关性、简单、解释执行、对线程、分布式、健壮性、高性能等。此系统使用IDEA开发平台进行后端代码的编写，Web服务器使用Apache Tomcat8.0，并配置JDK1.8 环境，数据库使用轻量级数据库MySQL5.6。技术上使用了SpringBoot和Vue作为系统的基本骨架[5]。宠物服务系统的使用者可以登录本系统发布自己的宠秀信息，系统把发布的信息存入后台的数据库中，方便用户实现随时地对自己发布的信息进行修改和删除，以及实时展示。系统共分为五层，视图层、控制层、业务逻辑层、数据访问层和数据库层[6]，系统架构图如图3 所示，并对各层进行详细解说。

视图层（View） ：本层有两部分组成，分别是萌宠用户视图和系统管理员视图。萌宠用户视图主要包含了用户登录注册和宠秀信息的发布、修改、查看、删除，同时用户还可对个人的萌宠信息进行管理、发布养宠经验、查看个人信息、AI动物识别以及信息反馈。系统管理员视图主要为对用户、宠物、影片等信息进行管理。从概念上解说此层展示了一个友好的人机交互页面，结构上隔离了底层原理，技术方面使用前端基本语法html5、css3及JavaScript完成页面的布局，同时还使用到前端高级框架，比如Vue、bootstrap、La?yui等[7]。

控制层（Controller）：本层主要职责为接受前端发来的请求，调用业务逻辑层的服务，将业务逻辑层返回的数据传给前端，同时传回的数据利用@Reponse?Body注解可将Java对象转为Json数据，可更好地将数据渲染在前端页面。

业务逻辑层（Service） ：本层主要是对视图层的功能进行具体的实现，其中包含用户登录时的账户信息判断、基本信息的管理以及AI动物识别等。从概念上解读此层对业务逻辑进行封装，组合数据持久层中的基本功能，形成复杂的业务逻辑功能，此层采用轻量级框架Spring简化开发。

数据访问层（Dao） ：系统通过Dao层实现与数据库的交互，系统开发采用轻量级框架MyBatis，提升了数据访问的性能和稳定性。

数据库层：存储系统数据的地方，使用MySQL5.0数据库，同时为了提高访问速度，采用缓存Redis，其数据留在内存当中，有持久化的特点，主要用作备份恢复。

3 系统组成及实现

3.1 宠物服务系统界面组成

将宠物有关服务进行整合建立了基于Vue 和SpringBoot前后端分离的宠物服务平台，该平台主要由两部分组成，分别是前台页面和后台页面。前台是萌宠用户所使用的功能界面，包括主界面、宠秀专区、宠窝专区、生活服务以及个人中心。后台是管理员所使用的功能界面，主要是对系统信息的维护。系统组成详细信息如图4所示。

1）前台主界面

宠物服务平台采用B/S模式，用户直接在浏览器输入地址即可直接访问，进入宠物服务平台的登录界面。首先开始浏览网站，进行用户注册登录成功后，便可以进行微型的调查问卷填写，收集用户现在的情况，比如是否是第一次养宠物、对宠物的一些看法和养宠物的生活小常识等问题，最后后台根据所做的调查问卷，分析出用户的爱心程度（是否真心养宠物，有着一个爱宠物之心），每个注册的用户都会有一次问卷调查，填写问卷调查后，会有一个是否合格养宠物证书（分数在0～100） ，由此进入主界面如图5所示。

AI动物识别，用户可上传自己萌宠的网络或本地照片，根据用户上传的照片，识别图片中动物的品种名称（可识别180个犬类和40余个猫类品种识别，标注品种详细信息），同时可配合其他识图能力对识别的结果进一步细化，根据识别结果，给你的爱宠建立档案，如图6所示，识别你的爱宠的品种为美国短毛猫。技术上使用Java语言连接百度AI开放平台的接口实现动物识别，用户上传宠物图片，系统自动识别图片中动物的名称，可配合其他识图能力对识别的结果进一步细化，提升用户体验。

2）宠秀专区

宠秀信息的发布与查看是此模块的核心功能，用户可查看来自各地的宠友发布的宠物动态，并对其进行评论、点赞等操作。用户可发布自己宠物的生活动态（萌照、趣图、私密照）及萌宠与主人之间的趣事，并且查看自己发布的所有宠秀。其中宠秀专区细分为：编辑推荐、人气最高、最新萌宠、语音涂鸦、我的喜爱。

3）宠窝专区

用户可查看养宠知识百科，并且可在宠窝留言专区发表自己平时养宠物的经验。其中养宠知识百科主要分为以下方面：宠物品种大全、室内饲养、户外活动和预防疾病。

4）生活服务

宠物电影展示：用户可查看与宠物有关的电影，并在每个电影观看区下面有个用户评论区，用户可在此评论区中输入自己的观后感及想法。

意见反馈：在前台提供一个用户反馈的输入框，可对使用情况进行反馈，并且用户反馈的内容直接发送给后台，后台根据用户反馈的内容对现阶段系统进行调整。

关于我们：展示系统开发者的具体信息，便于维护系统。

5）个人中心

个人和宠物信息的维护，以及我的养宠证书。① 用户基本信息有昵称、头像实名身份认证、号码绑定 出生年月等。②宠物信息主要包括基本资料（名字、性别、年龄、绝育）和养成日常（打疫苗、体外驱虫、体内驱虫、狂犬疫苗）。

3.2 宠物服务系统后台

管理员用户通过登录身份验证，可进入到宠物服务后台管理系统的主界面，主要包含用户管理、宠物信息管理、宠秀和宠窝信息管理、影片信息管理及用户反馈这五大部分。

用户管理：管理员可查看宠物服务平台用户的登录信息，设置用户账号的状态，即禁用或启用，还提供索引功能，即管理员可通过关键词搜索到对应的用户信息。

宠物信息管理：管理员可查看每个萌宠用户所养宠物的信息。

宠秀和宠窝信息管理：管理员可查看信息基本情况，同时还可以进行批量导入和导出，比如宠秀分为编辑推荐、人气最高、最新萌宠、语音涂鸦、我的喜爱这五个分区，管理员可根据分类，将宠秀信息导入某个分区，或者将某个分区中的数据导出，生成一个Ex?cel文件，并在浏览器上弹出文件下载的对话框。

影片信息管理：管理员可对影片信息进行维护操作。

用户反馈：管理员可查看前台用户反馈的信息。

从后台用户、服务器以及数据库方面对后台管理系统架构做了分析设计，根据用户需求及业务逻辑对后台管理系统中的主要功能做了详细设计及页面设计。其主界面如图7所示。

4 结束语

此项目的宗旨是给养宠的人群以及宠物提供更好的服务，即养宠人群可在此平台上分享自己宠物的趣事趣照、了解到一些养宠小知识等一系列服务。在此设计一款基于SpringBoot+Vue前后端分离的宠物服务平台，宠物服务系统主要采用目前流行的轻量级SpringBoot和Vue框架，极大地简化了编程工作，同时提高了代码的扩展性和维护性。最后对此系统进行测试，其宠物服务系统的测试环境：Window10操作系統，运行环境IDEA，数据库MySQL5.0，经过测试此系统可正常运行，且现阶段基本实现了预期的功能和目标且试运行良好。