基于Vue和SpringBoot前后端分離的寵物服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

龐嵩昊　李盈　趙藝　蘇盼盼　田新志

關(guān)鍵詞：寵物服務(wù)；SpringBoot；MyBatis；Java；MySQL

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2023）21-0042-04

0 引言

《2022年中國(guó)寵物消費(fèi)報(bào)告》中提到，2022年城鎮(zhèn)寵物（犬貓）主7043萬人，較2021年增長(zhǎng)2.9%，2022年城鎮(zhèn)寵物（犬貓）消費(fèi)市場(chǎng)規(guī)模為2706億元，較2021年增長(zhǎng)8.7%。可見養(yǎng)寵人數(shù)在不斷增長(zhǎng)，且報(bào)告中指出飼養(yǎng)異寵的人群中主要以95 后寵物主為主，占比33.7%。學(xué)歷主要集中在本科，占比52.2%。這群人更愿意以互聯(lián)網(wǎng)為媒介獲取準(zhǔn)確、快捷、方便的寵物相關(guān)知識(shí)及分享萌寵與主人之間的快樂日常等，故相應(yīng)的寵物服務(wù)也需要順應(yīng)這種潮流，以互聯(lián)網(wǎng)為載體使寵物服務(wù)更加智能化和信息化[1]。因此，構(gòu)建一款互聯(lián)網(wǎng)背景下的寵物服務(wù)平臺(tái)是非常有必要的，借助互聯(lián)網(wǎng)的便捷性可以給寵物主帶來更優(yōu)質(zhì)的服務(wù)。

1 相關(guān)知識(shí)及技術(shù)

寵物服務(wù)平臺(tái)采用基于Vue和SpringBoot前后端分離的開發(fā)模式[2]，將前端和后端的項(xiàng)目業(yè)務(wù)進(jìn)行分離，可以做到更好解耦合。前端項(xiàng)目和后端項(xiàng)目運(yùn)行在不同服務(wù)器上，前端和后端的服務(wù)器之間通過通信獲取數(shù)據(jù)，此項(xiàng)目前端采用Vue，運(yùn)行在Nginx服務(wù)器上。后端項(xiàng)目使用SpringBoot，運(yùn)行在Tomcat服務(wù)器上，其中前后端進(jìn)行通信采用Vue中的Axios技術(shù)，是對(duì)Ajax的一個(gè)封裝增強(qiáng)。綜上所述前端職責(zé)為向后端服務(wù)器接口發(fā)送Ajax請(qǐng)求并獲取數(shù)據(jù)，使用Vue框架將數(shù)據(jù)渲染在頁面上。后端職責(zé)為編寫API接口，接受前端請(qǐng)求，將查詢出來的數(shù)據(jù)封裝起來返回給前端服務(wù)器[3]，技術(shù)方面使用到高級(jí)框架SpringBoot、Spring及MyBatis。前后端分離開發(fā)模式如圖1所示。

1.1 Vue

Vue 是一款流行的前端JavaScript 框架，它采用MVVM模式，通過雙向數(shù)據(jù)綁定將視圖與數(shù)據(jù)模型關(guān)聯(lián)起來。Vue主要特點(diǎn)是易學(xué)易用，具有高效的性能和擴(kuò)展性，支持組件化開發(fā)，提供了豐富的指令和插件，能夠快速構(gòu)建交互豐富的Web應(yīng)用程序。Vue的核心是響應(yīng)式系統(tǒng)，它能夠自動(dòng)追蹤數(shù)據(jù)變化并更新視圖。通過使用指令和組件，Vue提供了豐富的功能，例如條件渲染、循環(huán)渲染、事件處理、樣式綁定等。Vue還提供了一套完整的路由和狀態(tài)管理機(jī)制，可以幫助開發(fā)者更好地組織代碼和管理狀態(tài)。

1.2 Spring

Spring是一款流行的Java企業(yè)級(jí)開發(fā)框架，它提供了一系列的工具和特性，使得Java應(yīng)用程序的開發(fā)變得更加容易和高效。Spring框架的核心是IoC（控制反轉(zhuǎn)）和AOP（面向切面編程）兩個(gè)概念。IoC模式通過將對(duì)象的創(chuàng)建和依賴關(guān)系的管理轉(zhuǎn)交給Spring容器來實(shí)現(xiàn)，從而解耦了應(yīng)用程序中的各個(gè)組件。AOP 模式則通過在應(yīng)用程序中插入切面來實(shí)現(xiàn)橫向切面的關(guān)注點(diǎn)分離，提高了代碼的可復(fù)用性和可維護(hù)性。

1.3 SpringBoot

SpringBoot是一款流行的基于Spring框架的開發(fā)框架，它旨在簡(jiǎn)化Spring應(yīng)用程序的開發(fā)和部署。Spring?Boot提供了自動(dòng)配置、快速開發(fā)、無代碼生成和微服務(wù)等特性，使得開發(fā)者可以更加快速地搭建Web應(yīng)用程序。SpringBoot采用約定優(yōu)于配置的方式，通過自動(dòng)配置和自動(dòng)裝配來減少應(yīng)用程序的代碼量[4]。SpringBoot 支持多種部署方式，例如嵌入式Web容器、Docker容器等，使得應(yīng)用程序的部署變得更加靈活和方便。

1.4 MyBatis

MyBatis是一款流行的持久層框架，它支持自定義SQL、存儲(chǔ)過程和高級(jí)映射等特性，使得Java應(yīng)用程序的數(shù)據(jù)訪問變得更加容易和高效。MyBatis會(huì)把數(shù)據(jù)庫表映射成Java對(duì)象，使得開發(fā)者可以更加方便地操作數(shù)據(jù)庫。MyBatis還提供了一些常用的特性，例如緩存、批量操作、動(dòng)態(tài)SQL等，使得Java應(yīng)用程序的數(shù)據(jù)訪問性能得到了提升。另外，MyBatis還支持多種數(shù)據(jù)庫，例如MySQL、Oracle、SQL Server等，使得開發(fā)者可以根據(jù)自己的需求選擇最適合的數(shù)據(jù)庫。

2 系統(tǒng)需求分析

近年來，養(yǎng)寵的人數(shù)急劇增大，如何正確養(yǎng)寵物以及與寵物相關(guān)的知識(shí)不斷成為人們?cè)掝}的焦點(diǎn)?；赟pringBoot+Vue前后端分離的寵物服務(wù)系統(tǒng)提供了與寵物有關(guān)的服務(wù)，比如日常分享模塊，即寵主可登錄本系統(tǒng)發(fā)布自己寵物的日常，查看與寵物有關(guān)的知識(shí)詳情，從而使得寵物主人可以快速了解到養(yǎng)寵知識(shí)，比如公共場(chǎng)合的養(yǎng)寵文明，規(guī)范自身和寵物行為。此系統(tǒng)主要有二類參與者，分別是萌寵用戶和管理員，其中萌寵用戶包含未注冊(cè)用戶與注冊(cè)用戶，管理員主要是對(duì)系統(tǒng)信息的維護(hù)。根據(jù)用戶對(duì)系統(tǒng)的需求，畫出用戶的用例圖如圖2所示。

3 系統(tǒng)總體設(shè)計(jì)

基于對(duì)市面上現(xiàn)有寵物服務(wù)系統(tǒng)分析研究，本系統(tǒng)是基于傳統(tǒng)的B/S架構(gòu)，系統(tǒng)開發(fā)語言采用Java，為目前使用最為廣泛的編程語言之一，其特性有面向?qū)ο蟆⑵脚_(tái)無關(guān)性、簡(jiǎn)單、解釋執(zhí)行、對(duì)線程、分布式、健壯性、高性能等。此系統(tǒng)使用IDEA開發(fā)平臺(tái)進(jìn)行后端代碼的編寫，Web服務(wù)器使用Apache Tomcat8.0，并配置JDK1.8 環(huán)境，數(shù)據(jù)庫使用輕量級(jí)數(shù)據(jù)庫MySQL5.6。技術(shù)上使用了SpringBoot和Vue作為系統(tǒng)的基本骨架[5]。寵物服務(wù)系統(tǒng)的使用者可以登錄本系統(tǒng)發(fā)布自己的寵秀信息，系統(tǒng)把發(fā)布的信息存入后臺(tái)的數(shù)據(jù)庫中，方便用戶實(shí)現(xiàn)隨時(shí)地對(duì)自己發(fā)布的信息進(jìn)行修改和刪除，以及實(shí)時(shí)展示。系統(tǒng)共分為五層，視圖層、控制層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層和數(shù)據(jù)庫層[6]，系統(tǒng)架構(gòu)圖如圖3 所示，并對(duì)各層進(jìn)行詳細(xì)解說。

視圖層（View） ：本層有兩部分組成，分別是萌寵用戶視圖和系統(tǒng)管理員視圖。萌寵用戶視圖主要包含了用戶登錄注冊(cè)和寵秀信息的發(fā)布、修改、查看、刪除，同時(shí)用戶還可對(duì)個(gè)人的萌寵信息進(jìn)行管理、發(fā)布養(yǎng)寵經(jīng)驗(yàn)、查看個(gè)人信息、AI動(dòng)物識(shí)別以及信息反饋。系統(tǒng)管理員視圖主要為對(duì)用戶、寵物、影片等信息進(jìn)行管理。從概念上解說此層展示了一個(gè)友好的人機(jī)交互頁面，結(jié)構(gòu)上隔離了底層原理，技術(shù)方面使用前端基本語法html5、css3及JavaScript完成頁面的布局，同時(shí)還使用到前端高級(jí)框架，比如Vue、bootstrap、La?yui等[7]。

控制層（Controller）：本層主要職責(zé)為接受前端發(fā)來的請(qǐng)求，調(diào)用業(yè)務(wù)邏輯層的服務(wù)，將業(yè)務(wù)邏輯層返回的數(shù)據(jù)傳給前端，同時(shí)傳回的數(shù)據(jù)利用@Reponse?Body注解可將Java對(duì)象轉(zhuǎn)為Json數(shù)據(jù)，可更好地將數(shù)據(jù)渲染在前端頁面。

業(yè)務(wù)邏輯層（Service） ：本層主要是對(duì)視圖層的功能進(jìn)行具體的實(shí)現(xiàn)，其中包含用戶登錄時(shí)的賬戶信息判斷、基本信息的管理以及AI動(dòng)物識(shí)別等。從概念上解讀此層對(duì)業(yè)務(wù)邏輯進(jìn)行封裝，組合數(shù)據(jù)持久層中的基本功能，形成復(fù)雜的業(yè)務(wù)邏輯功能，此層采用輕量級(jí)框架Spring簡(jiǎn)化開發(fā)。

數(shù)據(jù)訪問層（Dao） ：系統(tǒng)通過Dao層實(shí)現(xiàn)與數(shù)據(jù)庫的交互，系統(tǒng)開發(fā)采用輕量級(jí)框架MyBatis，提升了數(shù)據(jù)訪問的性能和穩(wěn)定性。

數(shù)據(jù)庫層：存儲(chǔ)系統(tǒng)數(shù)據(jù)的地方，使用MySQL5.0數(shù)據(jù)庫，同時(shí)為了提高訪問速度，采用緩存Redis，其數(shù)據(jù)留在內(nèi)存當(dāng)中，有持久化的特點(diǎn)，主要用作備份恢復(fù)。

3 系統(tǒng)組成及實(shí)現(xiàn)

3.1 寵物服務(wù)系統(tǒng)界面組成

將寵物有關(guān)服務(wù)進(jìn)行整合建立了基于Vue 和SpringBoot前后端分離的寵物服務(wù)平臺(tái)，該平臺(tái)主要由兩部分組成，分別是前臺(tái)頁面和后臺(tái)頁面。前臺(tái)是萌寵用戶所使用的功能界面，包括主界面、寵秀專區(qū)、寵窩專區(qū)、生活服務(wù)以及個(gè)人中心。后臺(tái)是管理員所使用的功能界面，主要是對(duì)系統(tǒng)信息的維護(hù)。系統(tǒng)組成詳細(xì)信息如圖4所示。

1）前臺(tái)主界面

寵物服務(wù)平臺(tái)采用B/S模式，用戶直接在瀏覽器輸入地址即可直接訪問，進(jìn)入寵物服務(wù)平臺(tái)的登錄界面。首先開始瀏覽網(wǎng)站，進(jìn)行用戶注冊(cè)登錄成功后，便可以進(jìn)行微型的調(diào)查問卷填寫，收集用戶現(xiàn)在的情況，比如是否是第一次養(yǎng)寵物、對(duì)寵物的一些看法和養(yǎng)寵物的生活小常識(shí)等問題，最后后臺(tái)根據(jù)所做的調(diào)查問卷，分析出用戶的愛心程度（是否真心養(yǎng)寵物，有著一個(gè)愛寵物之心），每個(gè)注冊(cè)的用戶都會(huì)有一次問卷調(diào)查，填寫問卷調(diào)查后，會(huì)有一個(gè)是否合格養(yǎng)寵物證書（分?jǐn)?shù)在0～100） ，由此進(jìn)入主界面如圖5所示。

AI動(dòng)物識(shí)別，用戶可上傳自己萌寵的網(wǎng)絡(luò)或本地照片，根據(jù)用戶上傳的照片，識(shí)別圖片中動(dòng)物的品種名稱（可識(shí)別180個(gè)犬類和40余個(gè)貓類品種識(shí)別，標(biāo)注品種詳細(xì)信息），同時(shí)可配合其他識(shí)圖能力對(duì)識(shí)別的結(jié)果進(jìn)一步細(xì)化，根據(jù)識(shí)別結(jié)果，給你的愛寵建立檔案，如圖6所示，識(shí)別你的愛寵的品種為美國(guó)短毛貓。技術(shù)上使用Java語言連接百度AI開放平臺(tái)的接口實(shí)現(xiàn)動(dòng)物識(shí)別，用戶上傳寵物圖片，系統(tǒng)自動(dòng)識(shí)別圖片中動(dòng)物的名稱，可配合其他識(shí)圖能力對(duì)識(shí)別的結(jié)果進(jìn)一步細(xì)化，提升用戶體驗(yàn)。

2）寵秀專區(qū)

寵秀信息的發(fā)布與查看是此模塊的核心功能，用戶可查看來自各地的寵友發(fā)布的寵物動(dòng)態(tài)，并對(duì)其進(jìn)行評(píng)論、點(diǎn)贊等操作。用戶可發(fā)布自己寵物的生活動(dòng)態(tài)（萌照、趣圖、私密照）及萌寵與主人之間的趣事，并且查看自己發(fā)布的所有寵秀。其中寵秀專區(qū)細(xì)分為：編輯推薦、人氣最高、最新萌寵、語音涂鴉、我的喜愛。

3）寵窩專區(qū)

用戶可查看養(yǎng)寵知識(shí)百科，并且可在寵窩留言專區(qū)發(fā)表自己平時(shí)養(yǎng)寵物的經(jīng)驗(yàn)。其中養(yǎng)寵知識(shí)百科主要分為以下方面：寵物品種大全、室內(nèi)飼養(yǎng)、戶外活動(dòng)和預(yù)防疾病。

4）生活服務(wù)

寵物電影展示：用戶可查看與寵物有關(guān)的電影，并在每個(gè)電影觀看區(qū)下面有個(gè)用戶評(píng)論區(qū)，用戶可在此評(píng)論區(qū)中輸入自己的觀后感及想法。

意見反饋：在前臺(tái)提供一個(gè)用戶反饋的輸入框，可對(duì)使用情況進(jìn)行反饋，并且用戶反饋的內(nèi)容直接發(fā)送給后臺(tái)，后臺(tái)根據(jù)用戶反饋的內(nèi)容對(duì)現(xiàn)階段系統(tǒng)進(jìn)行調(diào)整。

關(guān)于我們：展示系統(tǒng)開發(fā)者的具體信息，便于維護(hù)系統(tǒng)。

5）個(gè)人中心

個(gè)人和寵物信息的維護(hù)，以及我的養(yǎng)寵證書。① 用戶基本信息有昵稱、頭像實(shí)名身份認(rèn)證、號(hào)碼綁定 出生年月等。②寵物信息主要包括基本資料（名字、性別、年齡、絕育）和養(yǎng)成日常（打疫苗、體外驅(qū)蟲、體內(nèi)驅(qū)蟲、狂犬疫苗）。

3.2 寵物服務(wù)系統(tǒng)后臺(tái)

管理員用戶通過登錄身份驗(yàn)證，可進(jìn)入到寵物服務(wù)后臺(tái)管理系統(tǒng)的主界面，主要包含用戶管理、寵物信息管理、寵秀和寵窩信息管理、影片信息管理及用戶反饋這五大部分。

用戶管理：管理員可查看寵物服務(wù)平臺(tái)用戶的登錄信息，設(shè)置用戶賬號(hào)的狀態(tài)，即禁用或啟用，還提供索引功能，即管理員可通過關(guān)鍵詞搜索到對(duì)應(yīng)的用戶信息。

寵物信息管理：管理員可查看每個(gè)萌寵用戶所養(yǎng)寵物的信息。

寵秀和寵窩信息管理：管理員可查看信息基本情況，同時(shí)還可以進(jìn)行批量導(dǎo)入和導(dǎo)出，比如寵秀分為編輯推薦、人氣最高、最新萌寵、語音涂鴉、我的喜愛這五個(gè)分區(qū)，管理員可根據(jù)分類，將寵秀信息導(dǎo)入某個(gè)分區(qū)，或者將某個(gè)分區(qū)中的數(shù)據(jù)導(dǎo)出，生成一個(gè)Ex?cel文件，并在瀏覽器上彈出文件下載的對(duì)話框。

影片信息管理：管理員可對(duì)影片信息進(jìn)行維護(hù)操作。

用戶反饋：管理員可查看前臺(tái)用戶反饋的信息。

從后臺(tái)用戶、服務(wù)器以及數(shù)據(jù)庫方面對(duì)后臺(tái)管理系統(tǒng)架構(gòu)做了分析設(shè)計(jì)，根據(jù)用戶需求及業(yè)務(wù)邏輯對(duì)后臺(tái)管理系統(tǒng)中的主要功能做了詳細(xì)設(shè)計(jì)及頁面設(shè)計(jì)。其主界面如圖7所示。

4 結(jié)束語

此項(xiàng)目的宗旨是給養(yǎng)寵的人群以及寵物提供更好的服務(wù)，即養(yǎng)寵人群可在此平臺(tái)上分享自己寵物的趣事趣照、了解到一些養(yǎng)寵小知識(shí)等一系列服務(wù)。在此設(shè)計(jì)一款基于SpringBoot+Vue前后端分離的寵物服務(wù)平臺(tái)，寵物服務(wù)系統(tǒng)主要采用目前流行的輕量級(jí)SpringBoot和Vue框架，極大地簡(jiǎn)化了編程工作，同時(shí)提高了代碼的擴(kuò)展性和維護(hù)性。最后對(duì)此系統(tǒng)進(jìn)行測(cè)試，其寵物服務(wù)系統(tǒng)的測(cè)試環(huán)境：Window10操作系統(tǒng)，運(yùn)行環(huán)境IDEA，數(shù)據(jù)庫MySQL5.0，經(jīng)過測(cè)試此系統(tǒng)可正常運(yùn)行，且現(xiàn)階段基本實(shí)現(xiàn)了預(yù)期的功能和目標(biāo)且試運(yùn)行良好。