基于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%?？梢婐B寵人數在不斷增長，且報告中指出飼養異寵的人群中主要以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 系統需求分析

近年來，養寵的人數急劇增大，如何正確養寵物以及與寵物相關的知識不斷成為人們話題的焦點?；赟pringBoot+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，經過測試此系統可正常運行，且現階段基本實現了預期的功能和目標且試運行良好。