目 錄
摘 要 I
Abstract II
目 錄 III
圖清單 V
表清單 VII
1 緒論 1
1.1 動物領(lǐng)養(yǎng)網(wǎng)站的現(xiàn)狀與發(fā)展 1
1.2 “萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的研究內(nèi)容 2
1.3 “萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的研究目的和意義 2
1.4 本章小結(jié) 3
2 本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的分析 4
2.1 可行性分析 4
2.2 需求分析 4
2.3 框架介紹 6
2.4 本章小結(jié) 7
3 本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的概要設(shè)計 8
3.1 網(wǎng)站功能和數(shù)據(jù)設(shè)計 8
3.2 網(wǎng)站數(shù)據(jù)庫設(shè)計 22
3.3 本章小結(jié) 26
4 本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的詳細設(shè)計與實現(xiàn) 27
4.1 用戶模塊的設(shè)計與實現(xiàn) 27
4.2 動物模塊的設(shè)計與實現(xiàn) 36
4.3 領(lǐng)養(yǎng)動物模塊的設(shè)計與實現(xiàn) 38
4.4 寄養(yǎng)服務(wù)模塊的設(shè)計與實現(xiàn) 42
4.5 管理員模塊的設(shè)計與實現(xiàn) 43
4.6 本章小結(jié) 52
5 本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的運行與效果分析 53
5.1 網(wǎng)站運行效果 53
5.2 本章小結(jié) 68
6 軟件測試 69
6.1 測試簡介 69
6.2 測試進度 71
6.3 測試資源 71
6.4 測試策略 72
6.5 測試風(fēng)險 74
6.6 測試用例 74
6.7 缺陷報告 79
6.8 本章小結(jié) 79
7 總結(jié)與展望 80
7.1 總結(jié) 80
7.2 展望 80
參考文獻 82
致謝 83
2.2 需求分析
根據(jù)對國內(nèi)外動物網(wǎng)站發(fā)展現(xiàn)狀的研究，分析了國內(nèi)動物領(lǐng)養(yǎng)網(wǎng)站存在的缺陷，結(jié)合了用戶的需求，總結(jié)得到本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站在功能設(shè)計和性能要求方面的需求。
2.2.1 功能需求
(1)前端界面模塊
游客可以查看本網(wǎng)站上的“關(guān)于我們”、“領(lǐng)養(yǎng)須知”、“寵物領(lǐng)養(yǎng)”、“寵物小知識”、“寄養(yǎng)服務(wù)”、“救助站”、“我們的故事”這七個板塊內(nèi)容?！瓣P(guān)于我們”板塊較為詳細的介紹了本網(wǎng)站的發(fā)展歷程、目標(biāo)規(guī)劃等，用戶登錄后，還可在志愿者申請板塊，提交志愿者申報；“領(lǐng)養(yǎng)須知”板塊為用戶介紹了在本網(wǎng)站領(lǐng)養(yǎng)動物的必備條件及領(lǐng)養(yǎng)流程；“寵物領(lǐng)養(yǎng)”板塊展示了待領(lǐng)養(yǎng)的動物們；“寵物小知識”板塊是給沒有飼養(yǎng)經(jīng)歷的或經(jīng)驗不足的用戶提供一個飼養(yǎng)指南；在“寄養(yǎng)服務(wù)”板塊可查看寄養(yǎng)須知、條件，申請寄養(yǎng)，當(dāng)然，游客沒有提交申請寄養(yǎng)權(quán)限，需注冊登錄后方可操作；“救助站”板塊介紹了線下救助站點的位置及聯(lián)系方式；“我們的故事”板塊給用戶講述了一些關(guān)于寵物和它的“鏟屎官”之間的奇妙故事。
(2)用戶模塊
用戶在注冊登錄完成后，可自由瀏覽本網(wǎng)站的內(nèi)容，可進行線上申請領(lǐng)養(yǎng)自己心儀的動物、線上申請寄養(yǎng)服務(wù)、志愿者申報、提交留言等操作，這些申請操作都需管理員審核通過方可進入下一步。用戶可以在“個人中心”板塊，對個人信息進行修改、密碼重置，可對自己的領(lǐng)養(yǎng)動物記錄、寄養(yǎng)訂單信息、志愿者申報狀態(tài)、留言回復(fù)情況等進行查看、修改等操作。
(3)管理員模塊
本網(wǎng)站的管理員在注冊賬號后，可登錄網(wǎng)站的后端管理系統(tǒng)，登錄后可對“管理員管理”、“用戶管理”、“動物管理”、“動物類別”等幾個板塊進行查看、修改、刪除、添加操作。在管理員模塊中加入Echarts數(shù)據(jù)可視化，使繁雜的數(shù)據(jù)通過簡潔的圖標(biāo)形式展示出來，方便管理員隨時跟蹤網(wǎng)站的運行情況。后端管理員對用戶所提交的領(lǐng)養(yǎng)申請、寄養(yǎng)申請、志愿者申報要及時查看并給出審核意見，對申請的狀態(tài)信息進行修改。管理員要及時回復(fù)用戶的留言，及時幫助用戶解決問題，聽取用戶建議。
(4)寄養(yǎng)訂單模塊
前端界面的“寄養(yǎng)服務(wù)”板塊為用戶詳細介紹了寄養(yǎng)須知和寄養(yǎng)條件，用戶在同意寄養(yǎng)協(xié)議后可線上提交寄養(yǎng)訂單，并提前支付一定的押金和服務(wù)費用。寄養(yǎng)訂單在成功支付提交后，頁面跳轉(zhuǎn)到個人中心，用戶選擇“寄養(yǎng)訂單”板塊查看寄養(yǎng)訂單信息。后端管理員根據(jù)訂單的執(zhí)行情況及時對訂單狀態(tài)進行修改操作。
(5)領(lǐng)養(yǎng)動物模塊
用戶可在本動物領(lǐng)養(yǎng)網(wǎng)站上根據(jù)動物分類查看待領(lǐng)養(yǎng)的動物，可進行單擊查看動物詳情操作，對于心儀的動物，還未決定領(lǐng)養(yǎng)，可加入領(lǐng)養(yǎng)意向單隨時查看。用戶選定心儀的動物后，需仔細閱讀領(lǐng)養(yǎng)須知、領(lǐng)養(yǎng)條件等內(nèi)容，在單擊同意領(lǐng)養(yǎng)協(xié)議書單選框后方可填寫領(lǐng)養(yǎng)申請表，點擊提交申請按鈕并預(yù)付款后仍需等待管理員受理審核，審核通過后，在線下救助站點進行領(lǐng)養(yǎng)。用戶可在個人中心的“領(lǐng)養(yǎng)記錄”板塊查看領(lǐng)養(yǎng)申請的審核狀態(tài)。如果用戶不能確定是否領(lǐng)養(yǎng)，可以先將該動物加入領(lǐng)養(yǎng)意向單。
(6)動物模塊
在前端界面可以查看到線下救助站點所有的小動物，包括已領(lǐng)養(yǎng)的和待領(lǐng)養(yǎng)的動物，本網(wǎng)站還對動物的種類進行劃分，簡單分為貓咪、狗子、老鼠、其他。用戶可以根據(jù)自己想要領(lǐng)養(yǎng)的動物種類，查看想喜歡的動物。管理員會對動物信息進行及時更新，保證動物信息的真實性、實時性、可靠性。
2.2.2 性能需求
本動物領(lǐng)養(yǎng)網(wǎng)站是面對所有人，網(wǎng)站的兼容性高，穩(wěn)定性好，在各類電腦上都能夠穩(wěn)定運行，也適應(yīng)多數(shù)主流瀏覽器，因此，本網(wǎng)站滿足性能需求。
3 本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站概要設(shè)計
3.1 網(wǎng)站功能和數(shù)據(jù)設(shè)計
在對本動物領(lǐng)養(yǎng)網(wǎng)站進行編碼實現(xiàn)之前，必須要對網(wǎng)站進行整體功能分析。需要對其進行整體分析。這里，將本網(wǎng)站劃分為兩個部分，即前臺和后端管理系統(tǒng)，這兩個部分每一個里面都包含了好幾個模塊，需要對這些模塊之間的關(guān)聯(lián)關(guān)系進行整理。通過對網(wǎng)站功能進行整體功能分析，并設(shè)計出功能結(jié)構(gòu)圖，可以使本網(wǎng)站前后端功能明確，架構(gòu)層次清晰明了；在之后編碼實現(xiàn)時，也能夠分模塊進行，快速上手。后期對網(wǎng)站的維護工作也會根據(jù)模塊劃分來進行，提高工作效率。本“萬千寵愛”動物領(lǐng)養(yǎng)網(wǎng)站的整體功能結(jié)構(gòu)見圖3-1。
圖3-1 整體功能結(jié)構(gòu)圖文章來源：http://www.zghlxwxcb.cn/news/detail-439437.html
(1)算法設(shè)計思路
在本網(wǎng)站前端的任一界面的導(dǎo)航欄中都能夠看到“領(lǐng)養(yǎng)動物”，將鼠標(biāo)懸停，會彈出動物分類，選擇想要了解的一種進入該頁面，該頁面陳列展示了某一動物種類的所有待領(lǐng)養(yǎng)的動物。提前將動物的圖片存到服務(wù)器上，當(dāng)前端實現(xiàn)動物信息展示，將當(dāng)前動物類型作為參數(shù)，通過Axios向后臺發(fā)送一次請求，獲取當(dāng)前類型的動物信息，動物管理模塊的Controller控制層調(diào)用Service業(yè)務(wù)層里按類型查找動物信息的方法，Service業(yè)務(wù)層調(diào)用Mapper持久層的方法來實現(xiàn)與數(shù)據(jù)庫信息的查詢，返回的數(shù)據(jù)以List集合方式存儲在控制器，將該信息以JSON格式傳送到前端，定義一個新的List，原List將該信息賦值給新List，通過調(diào)用新建的List獲取數(shù)據(jù)。
(2)實現(xiàn)代碼
<!--動物陳列顯示-->
<ui>
<li v-for="a in animal">
<!-- Single Product Start -->
<div class="product-inner">
<div class="thumb">
<!-- 超鏈接拼接參數(shù)，跳轉(zhuǎn)到詳情界面 a.aid是該商品的id -->
<a :href="'/animaldetails.html?aid='+a.aid" class="image">
<!--圖片調(diào)用拼接參數(shù)，獲取數(shù)據(jù)庫圖片信息a.picture是該商品的圖片鏈接-->
<img class="fit-image" :src="'/img/'+ a.picture" alt="Product"/> </a>
<span class="badges"><span class="sale">-18%</span></span>
<div class="action-wrapper">
<a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view" title="Quickview">
<i class="ti-plus"></i></a>
<a href="wishlist.html" class="action wishlist" title="Wishlist">
<i class="ti-heart"></i></a>
<a href="cart.html" class="action cart" title="Cart">
<i class="ti-shopping-cart"></i></a>
</div>
</div>
<div class="content">
<h5 class="title"><a :href="'/animaldetails.html?aid='+a.aid" >{{a.aname}}</a></h5>
<span class="rating">
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i></span>
<span class="price">
<span class="new">{{a.avariety}}</span>
</span>
<!-- Cart Button Start -->
<div class="cart-btn action-btn">
<div class="action-cart-btn-wrapper d-flex">
<div class="add-to_cart">
<a class="btn btn-primary btn-hover-dark rounded-0" href="cart.html">Add to cart</a>
</div>
<a href="wishlist.html" title="Wishlist" class="action"><i class="ti-heart"></i></a>
<a href="#/" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view" title="Quickview">
<i class="ti-plus"></i></a>
</div>
</div>
<!-- Cart Button End -->
</div>
</div>
</div>
<!-- Single Product End -->
</li>
</ui>
文章來源地址http://www.zghlxwxcb.cn/news/detail-439437.html
到了這里，關(guān)于動物寵物領(lǐng)養(yǎng)網(wǎng)站的設(shè)計與實現(xiàn)（Vue+Spring Boot+Java）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
