摘  要

 

随着计算机技术的不断发展，web的开发过程也在不断细化。由于页面的功能需求越来越多，涉及的范围越来越广，前端的重要性也逐渐凸显出来。我们学习计算机技术，就是为了更好地解决生活中遇到的问题。而在在经济快速增长的今天，人们对宠物的需求也在增大，这不仅使得宠物市场的规模不断提升，也造成了越来越多的流浪宠物威胁到公共卫生与安全。所以建立一条有效并可靠的宠物收养渠道是非常有必要的，将计算机网络的技术，与现实的社会问题结合起来，能更加便捷地解决这些问题。

前端的开发，自然要用到目前最热门的前端开发HTML5技术。HTML5技术作为最新的HTML标准，它不仅加入了一些如canvas的新元素，同时做了一些功能方面的革新，这就使得用户在浏览网页时更加快捷方便。前端开发是网站开发中的一个独立模块，现在，越来越多的技术人员为了简化前端开发的过程，纷纷投入到了前端框架的研究工作中来，Vue.js框架作为目前主流的MVVM模式的前端开发框架，在省时省力、提高效率方面有不俗的表现。

近几年来，陆续出现了许多宠物相关的APP，但真正面向流浪宠物的网站和应用却是少之又少，例如在搜索引擎查找宠物网站，找到的基本都是家养宠物的购物网站，也有一些专门科普宠物相关知识的网站，却几乎找不到与收养流浪宠物相关的网站，所以流浪宠物收养网站的设计实现，可以说是一个冷门又比较新颖的想法。

本文通过对流浪宠物资料的查找、收容所的实际走访，以及流浪宠物市场的需求分析，设计了一套集收养流浪宠物，宠物品种、养护、疾病知识的科普，查看宠物美图与新闻为一体的网站系统，名为爱宠收容所。本文详细介绍爱宠收容网站的需求分析、系统前端的设计思路、网站实现方法、使用的技术等等。后端仅做简略介绍。

 

关键词：系统，宠物领养，前端，Vue.js

目  录

 

摘要

Abstract

第一章 绪论 1

1.1 选题背景 1

1.2 实践意义 1

1.3 国内外研究现状 2

1.4 系统设计目标 2

第二章 系统开发所使用的技术 3

2.1 HTML5简介 3

2.2 Vue.js简介 3

2.3 JAVA简介 3

2.4 Mysql简介 4

2.5 Spring boot简介 4

2.6 Axios简介 4

第三章 宠物救助系统需求分析 5

3.1 需求分析 5

3.2 运行环境需求 5

3.2.1 硬件需求 5

3.2.2 软件需求 5

3.3 功能需求 6

3.4 系统结构图 6

3.5 可行性分析 6

3.5.1 经济可行性分析 6

3.5.2 技术可行性分析 7

3.5.3 操作可行性分析 7

3.6 未来的需求 7

第四章 系统前端设计 8

4.1 设计思路 8

4.2 设计作品特色 8

4.3 部分设计介绍 9

4.3.1 导航栏设计 9

4.3.2 首页设计 9

4.3.3 疾病百科模块设计 9

4.3.4 精彩瞬间点赞设计 10

4.3.5 爱宠趣闻设计 10

4.4 设计感想 11

第五章 系统前端实现 12

5.1 通用组件的实现 12

5.1.1 页码组件的实现 12

5.1.2 弹窗插件的实现 14

5.1.2.1 layer插件的实现 14

5.1.2.2 带我回家预约弹窗的实现 15

5.1.2.3 疾病百科常见问题部位弹窗的实现 18

5.1.3 搜索框组件的实现 20

5.1.4 element UI框架的使用 22

5.2 模块页面的实现 22

5.2.1 首页的实现 22

5.2.2 带我回家模块的实现 24

5.2.3 汪星人和喵星人模块的实现 26

5.2.4 养护知识模块的实现 28

5.2.6 精彩瞬间模块的实现 32

5.2.7 爱宠趣闻模块的实现 34

5.2.8 合作资源模块的实现 35

5.2.9 在线留言模块的实现 36

5.3 路由的实现 38

5.4 axios封装的实现 40

第六章 总结 43

参考文献 44

致  谢 45