基于Vue的寻亲互联网平台-计算机毕设 附源码98418

基于Vue的寻亲互联网平台

摘  要

随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势或改善自身的缺点，互联网的发展也给寻亲家庭带来了福音。寻亲互联网平台是以实际运用为开发背景，运用软件工程原理和开发方法，采用Java技术构建的一个线上系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结，得出系统中存在的不足及需要改进的地方，为以后的系统维护提供了方便，同时也为今后开发类似系统提供了借鉴和帮助。这种个性化的网上系统管理特别注重交互协调与管理的相互配合。

该平台采用的数据库是Mysql，Vue框架，使用Java技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。

关键词：寻亲互联网平台，Vue框架，Java技术，Mysql 

Vue-based Internet platform for finding relatives

Abstract

   With the rapid development of science and technology, all aspects of society and all walks of life are striving to integrate with modern advanced technology, through scientific and technological means to improve their own advantages or improve their own shortcomings, the development of the Internet has also brought good news to families looking for relatives. The Internet platform is an online system built with Java technology based on practical application as the development background, using software engineering principles and development methods. The whole development process first analyzes the requirements of the software system to derive the main functions of the system. The overall design and detailed design of the system are then carried out. The overall design mainly includes system function design, system overall structure design, system data structure design and system security design; The detailed design mainly includes the implementation of system database access, the specific implementation of the main functional modules, and the key code of the module implementation. Finally, the functional test of the system is carried out, and the test results are analyzed and summarized to obtain the shortcomings and areas that need to be improved in the system, which provides convenience for future system maintenance, and also provides reference and help for the development of similar systems in the future. This kind of personalized online system management pays special attention to the interaction of coordination and management.

The database used by the platform is Mysql, the Vue framework, developed using Java technology. In the design process, the system code is fully guaranteed to have good readability, practicality, easy extensibility, versatility, easy maintenance, convenient operation and concise pages.

Keywords: platform for finding relatives, Vue framework, Java technology, Mysql

目 录

摘  要 I

Abstract II

目 录 III

第1章 绪论 1

1.1背景及意义 1

1.2 国内外研究概况 1

1.3 研究的内容 1

第2章 相关技术 2

2.1 开发技术 2

2.2 MVVM模式 2

2.3 MySQL数据库 2

2.4 B/S结构 3

2.5 spring boot框架介绍 3

2.6 Vue.js 主要功能 4

第3章 系统分析 5

3.1 需求分析 5

3.2 系统可行性分析 5

3.2.1技术可行性：技术背景 5

3.2.2经济可行性 6

3.2.3操作可行性： 6

3.3 项目设计目标与原则 6

3.4系统流程分析 7

3.4.1操作流程 7

3.4.2添加信息流程 8

3.4.3删除信息流程 9

第4章 系统设计 10

4.1 系统体系结构 10

4.2开发流程设计 11

4.3 数据库设计原则 11

4.4 数据表 12

第5章 系统详细设计 16

5.1管理员功能模块 16

5.2用户前台功能模块 21

第6章  系统测试 25

6.1系统测试的目的 25

6.2系统测试方法 25

6.3功能测试 25

结  论 27

致  谢 28

参考文献 29

第1章 绪论

1.1背景及意义

据统计,我国每年有20万到30万的孩子会被拐卖或者走失,但是找回来的孩子大概却只占0.1%左右。且随着老龄化的加剧，身患阿尔兹海默症的老人不断增多，走失问题也愈发严峻。但是通过传统的寻人启事寻找亲人效率低下,种种困难导致寻亲之路很难顺利。除了依靠政府之力，民间也应该凝聚力量尽一份微薄之力。基于Vue的寻亲互联网平台为寻找失踪亲友、被拐卖的妇女儿童等亲属搭建多渠道的网络寻亲平台帮助更多走失人口回归家庭、回归正常生活。

1.2 国内外研究概况

随着国内经济形势的不断发展，中国互联网进入了一个难得的高峰发展时期。互联网的发展也对寻找走失人口起到非常重要的作用。目前，政府有较为专业的基因数据库，完善的全国公安网，但由于我国幅员辽阔，各地经济发展程度不一。在偏远地区并不能发挥其强大的作用。近年来网络和智能手机的普及很好的弥补了这一点，政府无法覆盖到的地方有千千万万网友存有。这时候民间力量结合政府的这些手段能提高寻亲信息实时性和广泛传播性从而提高寻亲的成功率。 因此，有必要开发一个寻亲互联网平台。

在当今高度发达的信息中，信息管理改革已成为一种更加广泛和全面的趋势。寻亲互联网平台是基于Vue框架，采用Javajishu ，Mysql数据库，在JSP程序设计的基础上实现的。同时，随着信息社会的快速发展，寻亲互联网平台面临着越来越多的信息，因此很难确保其真实性，如何使用方便快捷的方式使查询者在广阔的寻亲互联网平台信息中查询，存储，管理和共享信息方面有效，对找寻走失人口具有重要的现实意义。

1.3 研究的内容

本选题则旨在通过标签分类管理等方式，实现系统首页、站点管理（轮播图、公告栏）、用户管理（管理员、注册用户）、内容管理（新闻资讯、新闻分类列表）、更多管理（登记人信息、走失人口信息、走失人亲属、悬赏信息、走失人口统计、留言反馈、走失地分类、籍贯分类）等详细的管理功能，从而达到对寻亲互联网平台信息的有效运营。

第2章 相关技术

2.1 开发技术

本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型。后端部分：采用springboot作为开发框架，同时集成MyBatis、Redis等相关技术。

2.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

2.3 MySQL数据库

科技的进步，给日常带来许多便利：教室的投影器用到了虚拟成像技术，数码相机用到了光电检测技术，比如超市货物进出库的记录需要一个信息仓库。这个信息仓库就是数据库，而这次的寻亲互联网平台设计与实现系统也需要这项技术的支持。

用MySQL这个软件，是因为它能接受多个使用者访问，而且里面存在Archive等。它会先把数据进行分类，然后分别保存在表里，这样的特别操作就会提高数据管理系统自身的速度，让数据库能被灵活运用。MySQL的代码是公开的，而且允许别人二次编译升级。这个特点能够降低使用者的成本，再搭配合适的软件后形成一个良好的网站系统。虽然它有缺点，但是综合各方面来说，它是使用者的主流运用的对象。

2.4 B/S结构

B/S（Browser/Server）比前身架构更为省事的架构。它借助Web server完成数据的传递交流。只需要下载浏览器作为客户端，那么工作就达到“瘦身”效果， 不需要考虑不停装软件的问题。

2.5 spring boot框架介绍

Spring框架是Java平台上的一种开源应用框架，提供具有控制反转特性的容器。尽管Spring框架自身对编程模型没有限制，但其在Java应用中的频繁使用让它备受青睐，以至于后来让它作为EJB（EnterpriseJavaBeans）模型的补充，甚至是替补。Spring框架为开发提供了一系列的解决方案，比如利用控制反转的核心特性，并通过依赖注入实现控制反转来实现管理对象生命周期容器化，利用面向切面编程进行声明式的事务管理，整合多种持久化技术管理数据访问，提供大量优秀的Web框架方便开发等等。Spring框架具有控制反转（IOC）特性，IOC旨在方便项目维护和测试，它提供了一种通过Java的反射机制对Java对象进行统一的配置和管理的方法。Spring框架利用容器管理对象的生命周期，容器可以通过扫描XML文件或类上特定Java注解来配置对象，开发者可以通过依赖查找或依赖注入来获得对象。Spring框架具有面向切面编程（AOP）框架，SpringAOP框架基于代理模式，同时运行时可配置；AOP框架主要针对模块之间的交叉关注点进行模块化。Spring框架的AOP框架仅提供基本的AOP特性，虽无法与AspectJ框架相比，但通过与AspectJ的集成，也可以满足基本需求。Spring框架下的事务管理、远程访问等功能均可以通过使用SpringAOP技术实现。Spring的事务管理框架为Java平台带来了一种抽象机制，使本地和全局事务以及嵌套事务能够与保存点一起工作，并且几乎可以在Java平台的任何环境中工作。Spring集成多种事务模板，系统可以通过事务模板、XML或Java注解进行事务配置，并且事务框架集成了消息传递和缓存等功能。Spring的数据访问框架解决了开发人员在应用程序中使用数据库时遇到的常见困难。它不仅对Java:JDBC、iBATS/MyBATIs、Hibernate、Java数据对象（JDO）、ApacheOJB和ApacheCayne等所有流行的数据访问框架中提供支持，同时还可以与Spring的事务管理一起使用，为数据访问提供了灵活的抽象。Spring框架最初是没有打算构建一个自己的WebMVC框架，其开发人员在开发过程中认为现有的StrutsWeb框架的呈现层和请求处理层之间以及请求处理层和模型之间的分离不够，于是创建了SpringMVC。

 2.6 Vue.js 主要功能

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

第3章 系统分析

3.1 需求分析

寻亲互联网平台主要是为了提高走失人口信息的收集、查询、传播。更好存储所有数据信息及快速方便的检索功能，对系统的各个模块是采用许多较为完善的技术，做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。

系统所要实现的功能分析，对于现在网络方便的管理，系统要实现用户可以直接在平台上进行查看所有数据信息，根据需求可以进行在线更新走失人口信息信息，为加快扩散寻亲信息的提供了系统支持。

3.2 系统可行性分析

3.2.1技术可行性：技术背景

本企业网站在Windows操作系统中进行开发，并且目前PC机的性能已经可以胜任普通网站的web服务器。系统开发所使用的技术也都是自身所具有的，也是当下广泛应用的技术之一。

系统的开发环境和配置都是可以自行安装的，系统使用JSP开发工具，使用比较成熟的Mysql数据库进行对系统前台及后台的数据交互，根据技术语言对数据库，结合需求进行修改维护，可以使得网站运行更具有稳定性和安全性，从而完成实现网站的开发。

（1）硬件可行性分析

寻亲互联网平台及信息分析的设计对于所使用的计算机没有什么硬性的要求，计算机只要可以正常的使用进行代码的编写及页面设计就可行，主要是对于服务器有些要求，对于平台搭建完成要上传的服务器是有一定的要求的，服务器必须选择安全性比较高的，然后就是在打开网站必须顺畅，不能停顿太长时间；性价比高；安全性高。

（2）软件可行性分析

开发整个系统使用的是云计算，流量的可扩展性和基于流量的智能调整云计算的优点就是流量的可扩展性和基于流量的智能调整，保障系统的安全及数据信息的及时备份。

因此，我们从两个方面进行了可行性研究，可以看出系统的开发没有问题。

3.2.2经济可行性

在寻亲互联网平台开发之前所做的调研活动及考察其他的相关系统，都是没有任何费用的，都是通过开发者自己的努力，所有的工作的都是自己亲力亲为，在碰到自己比较难以解决的问题，大多是通过同学和指导老师的帮助进行相关信息的解决，所以对于寻亲互联网平台的开发在经济上是完全可行的，没有任何费用支出的。

使用比较成熟的技术，系统是基于Java的开发，采用Mysql数据库。所以系统在开发人力、财力要求不高，具有经济可行性。

3.2.3操作可行性： 

可操作性主要是对寻亲互联网平台设计完成后，用户的使用体验度，以及管理员可以通过系统随时管理相关的数据信息，并且对于管理员、注册用户两个用户角色，都可以简单明了的进入到自己的系统界面，通过界面导航菜单可以简单明了地操作功能模块，方便用户信息的操作需求和管理员管理数据信息，对于系统的操作，不需要专业人员都可以直接进行功能模块的操作管理，所以在系统的可操作性是完全可以的。本系统的操作使用的也是界面窗口进行登录，所以操作人员只要会简单的电脑操作就完全可以的。

3.3 项目设计目标与原则

1、关于寻亲互联网平台的基本要求

（1）功能要求：首页、站点管理（轮播图、公告栏）、用户管理（管理员、注册用户）、内容管理（新闻资讯、新闻分类列表）、更多管理（登记人信息、走失人口信息、走失人亲属、悬赏信息、走失人口统计、留言反馈、走失地分类、籍贯分类）等功能模块。

（2）性能：在不同操作系统上均能无差错实现在不同类型的用户登入相应界面后能不出差错、方便地进行预期操作。

（3）安全与保密要求：用户都必须通过身份验证才能进入系统，并且用户的权限也需要根据用户的类型进行限定。

（4）环境要求：支持多种平台，可在Windows系列、Vista系统等多种操作系统下使用。

2、开发目标

寻亲互联网平台的主要开发目标如下：

（1）实现管理系统信息关系的系统化、规范化和自动化；

（2）减少维护人员的工作量以及实现用户对信息的控制和管理。

（3）方便查询信息及管理信息，考虑到用户多样性特点，要求界面简单，操作简便；

（4）通过网络操作，改善处理问题的效率，提高发布和扩散效率；

3、设计原则

该平台采用Java技术，Mysql数据库开发，充分保证了系统稳定性、完整性。

寻亲互联网平台的设计与实现的设计思想如下：

1. 操作简单方便、系统界面安全、简单明了的页面布局、方便查询走失人口的相关信息。

2、即时可见：对走失人口信息的处理将立马在对应地点可以查询到，从而实现“即时发布、即时见效”的系统功能。

3、功能的完善性：站点管理（轮播图、公告栏）、用户管理（管理员、注册用户）、内容管理（新闻资讯、新闻分类列表）、更多管理（登记人信息、走失人口信息、走失人亲属、悬赏信息、走失人口统计、留言反馈、走失地分类、籍贯分类）等操作。

3.4系统流程分析

3.4.1操作流程

系统登录流程图，如图所示：

 

图3-1登录流程图

3.4.2添加信息流程

添加信息流程图，如图所示：

 

图3-2添加信息流程图

3.4.3删除信息流程

删除信息流程图，如图所示：

 

图3-3删除信息流程图

第4章 系统设计

4.1 系统体系结构

寻亲互联网平台的结构图4-1所示：

 

图4-1 系统结构

系统结构图，如图4-2所示：

 

图4-2 系统结构图

4.2开发流程设计

系统流程的分析是通过调查系统所涉及问题的识别、可行性、可操作性、系统分析处理能力等具体环节来调节、整理系统的设计方案以确保系统能达到理想的状态。这些操作都要从注册、登录处着眼进行一系列的流程测试保证数据库的完整，从而把控系统所涉及信息管理的安全、保证信息输入、输出正常转换。然后，通过实际操作完成流程图的绘制工作。

寻亲互联网平台的开发对管理模块和系统使用的数据库进行分析，编写代码，系统测试，如图4-3所示。

 

图4-3开发系统流程图

4.3 数据库设计原则

学习编程，我们都知道数据库设计是基于需要设计的系统功能，我们需要建立一个数据库关系模型，用于存储数据信息，这样当我们在程序中时，就没有必要为程序页面添加数据，从而提高系统的效率。数据库存储了很多信息，可以说是信息管理系统的核心和基础，数据库还提供了添加、删除、修改和检查，使系统能够快速找到自己想要的信息，而不是在程序代码中找到。数据库中信息表的每个部分根据一定的关系精确地组合，排列和组合成数据表。

通过寻亲互联网平台的功能进行规划分成几个实体信息，实体信息将通过ER图进行说明，本系统的主要实体图如下：

管理员信息属性图如图4-4所示。

 

图4-4 管理员信息实体属性图

4.4 数据表

将数据库概念设计的E-R图转换为关系数据库。在关系数据库中，数据关系由数据表组成，但是表的结构表现在表的字段上。

chart
字段名称	类型	长度	不是null	主键	字段说明
chart_id	int	10	否	主键	聊天ID
user_id	int	11	否		用户ID
title	varchar	64	是		标题
content	longtext	0	否		内容
nickname	varchar	32	否		昵称
avatar	varchar	255	是		头像
create_time	timestamp	0	否		创建时间
update_time	timestamp	0	否		更新时间
reply_id	int	11	否		回复ID
collect
字段名称	类型	长度	不是null	主键	字段说明
collect_id	int	10	否	主键	收藏ID
user_id	int	10	否		收藏人ID
source_table	varchar	255	是		来源表
source_field	varchar	255	是		来源字段
source_id	int	10	否		来源ID
title	varchar	255	是		标题
img	varchar	255	是		封面
create_time	timestamp	0	否		创建时间
update_time	timestamp	0	否		更新时间
comment
字段名称	类型	长度	不是null	主键	字段说明
comment_id	int	11	否	主键	评论ID
user_id	int	11	否		评论人ID
reply_to_id	int	11	否		回复评论ID
content	longtext	0	是		内容
nickname	varchar	255	是		昵称
avatar	varchar	255	是		头像地址
create_time	timestamp	0	否		创建时间
update_time	timestamp	0	否		更新时间
source_table	varchar	255	是		来源表
source_field	varchar	255	是		来源字段
source_id	int	10	否		来源ID
lost_ground_classification
字段名称	类型	长度	不是null	主键	字段说明
lost_ground_classification_id	int	11	否	主键	走失地分类ID
lost_ground	varchar	64	是		走失地
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
lost_population_information
字段名称	类型	长度	不是null	主键	字段说明
lost_population_information_id	int	11	否	主键	走失人口信息ID
user_no	int	11	是		用户编号
title	varchar	64	是		标题
name_of_lost_person	varchar	64	是		走失人姓名
photo	varchar	255	是		照片
physiognomy_characteristics	varchar	64	是		样貌特征
registered_residence	varchar	64	是		户籍地
state	varchar	64	是		状态
lost_ground	varchar	64	是		走失地
lost_time	datetime	0	是		走失时间
name_of_registrant	varchar	64	是		登记人姓名
contact_number	varchar	64	是		联系电话
detailed_description	longtext	0	是		详情描述
hits	int	11	否		点击数
praise_len	int	11	否		点赞数
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
lost_population_statistics
字段名称	类型	长度	不是null	主键	字段说明
lost_population_statistics_id	int	11	否	主键	走失人口统计ID
particular_year	varchar	64	是		年份
province	varchar	64	是		所属省份
total_number_of_people_lost	int	11	是		走失总人数
number_of_people_recovered	int	11	是		已找回人数
number_of_people_not_recovered	varchar	64	是		未找回人数
remarks	varchar	64	是		备注
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
message_feedback
字段名称	类型	长度	不是null	主键	字段说明
message_feedback_id	int	11	否	主键	留言反馈ID
user_no	int	11	是		用户编号
full_name	varchar	64	是		姓名
title	varchar	64	是		标题
feedback_time	date	0	是		反馈时间
content_description	text	0	是		内容描述
examine_state	varchar	16	否		审核状态
examine_reply	varchar	16	是		审核回复
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
native_place_classification
字段名称	类型	长度	不是null	主键	字段说明
native_place_classification_id	int	11	否	主键	籍贯分类ID
registered_residence	varchar	64	是		户籍地
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
notice
字段名称	类型	长度	不是null	主键	字段说明
notice_id	mediumint	8	否	主键	公告id
title	varchar	125	否		标题
content	longtext	0	是		正文
create_time	timestamp	0	否		创建时间
update_time	timestamp	0	否		更新时间
registered_user
字段名称	类型	长度	不是null	主键	字段说明
registered_user_id	int	11	否	主键	注册用户ID
user_no	varchar	64	否		用户编号
full_name	varchar	64	是		姓名
gender	varchar	64	是		性别
examine_state	varchar	16	否		审核状态
recommend	int	11	否		智能推荐
user_id	int	11	否		用户ID
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
registrant_information
字段名称	类型	长度	不是null	主键	字段说明
registrant_information_id	int	11	否	主键	登记人信息ID
user_no	int	11	是		用户编号
name_of_registrant	varchar	64	是		登记人姓名
gender	varchar	64	是		性别
age	varchar	64	是		年龄
id_no	varchar	255	是		身份证号
contact_number	varchar	64	是		联系电话
place_of_registration	varchar	64	是		登记所在地
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
relatives_of_the_lost
字段名称	类型	长度	不是null	主键	字段说明
relatives_of_the_lost_id	int	11	否	主键	走失人亲属ID
user_no	int	11	是		用户编号
name_of_lost_person	varchar	64	是		走失人姓名
name_of_relative	varchar	64	是		亲属姓名
contact_number	varchar	64	是		联系电话
residence	varchar	64	是		居住地
relationship_description	text	0	是		关系描述
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间
reward_information
字段名称	类型	长度	不是null	主键	字段说明
reward_information_id	int	11	否	主键	悬赏信息ID
user_no	int	11	是		用户编号
reward_title	varchar	64	是		悬赏标题
cover	varchar	255	是		封面
reward_amount	varchar	64	是		悬赏金额
release_time	date	0	是		发布时间
name_of_registrant	varchar	64	是		登记人姓名
contact_number	varchar	64	是		联系电话
detailed_description	longtext	0	是		详情描述
hits	int	11	否		点击数
praise_len	int	11	否		点赞数
recommend	int	11	否		智能推荐
create_time	datetime	0	否		创建时间
update_time	timestamp	0	否		更新时间

第5章 系统详细设计

5.1管理员功能模块

管理员登录寻亲互联网平台，在登录页面输入账号、密码进行登录，如图5-1所示。

 

图5-1管理员登录界面图

      

    管理员进入系统后台可以查看功能：首页、站点管理（轮播图、公告栏）、用户管理（管理员、注册用户）、内容管理（新闻资讯、新闻分类列表）、更多管理（登记人信息、走失人口信息、走失人亲属、悬赏信息、走失人口统计、留言反馈、走失地分类、籍贯分类）等功能，还可进行相应的操作，如图5-2所示。

 

图5-2管理员功能界面图

公告栏管理，在公告栏管理页面可以看到公告消息的标题、创建时间、更新时间。进行查询、添加、重置、删除等操作，如图5-3所示。

 

图5-3公告栏管理界面图

用户管理，在注册用户管理页面可以查看用户信息：昵称、用户名、用户编号、姓名、性别、创建时间、更新时间等内容，还可在该页面对用户进行查询、重置、添加、删除等操作，如图5-4所示。

 

图5-4用户管理管理界面图

更多管理-走失人口信息，在该页面可以看到用户编号、登记人姓名、性别、年龄、身份证号码、联系电话、登记地等信息、进行查询、重置、添加、删除等操作，如图5-5所示。

 

图5-5走失人口审核界面图

更多管理-悬赏信息，在该页面可以查看悬赏金额、发布时间、登记人姓名、联系电话、详情描述等信息、并进行查询、重置、添加、删除等操作，如图5-6所示。

 

图5-6悬赏信息审核界面图

更多管理-走失人口统计，在该页面可以查看年份、所属省份、走失人总数、已找回人数、未找回人数、备注、创建时间等信息、进行查询、重置、添加、删除等操作，如图5-7所示。

 

图5-7走失人口统计管理界面图

5.2用户前台功能模块

用户注册，在用户注册页面中可以填写注册信息：账号、密码、昵称、邮箱、手机、身份等内容进行注册，如图5-8所示。

 

图5-8用户注册界面图

用户登录，在登录页面输入用户名、密码进行登录，如图5-9所示。

 

图5-9用户登录界面图

走失人口信息查看页面，如图5-10所示。

 

图5-10走失人口信息页面图

走失人口详情，可以查看用户编号、标题、寻人类型、走失人姓名、样貌特征、户籍地、状态、走失地、走失时间、登记人姓名、联系电话等信息，如图5-11所示。

 

图5-11走失人口详情页面图

发布走失人口信息，更多管理中的走失人口信息中输入用户编号、标题、走失人姓名、照片、样貌特征、户籍地、状态、走失地、走失时间、登记人姓名、联系电话、详情描述等信息，如图5-13所示。

 

图5-13走失人口发布界面图

发布悬赏信息，在更多管理中的悬赏信息中输入用户编号、悬赏标题、上传封面、悬赏奖金、发布时间、登记人姓名、联系电话、详情描述等信息，如图5-14所示。

 

图 5-14发布悬赏信息界面图

第6章  系统测试

6.1系统测试的目的

程序设计不能保证没有错误，这是一个开发过程，在错误或错误的过程中都是难以避免的。虽然这是不可避免的，但我们不能使这些错误始终存在于系统中，错误可能会造成无法估量的后果，如系统崩溃，安全信息泄露，系统无法正常启动等，为了避免这些问题，我们需要测试程序，再测试过程中发现问题，并纠正它们，从而使系统更长时间稳定成熟。本章的作用是发现这些问题，并对其进行修改，虽然耗时费力，但对于长期使用而言是非常重要和必要系统的开发。

软件在设计后必须进行测试，调试过程中使用的方法是软件测试方法。在开发新软件时，系统测试是检查软件是否合格的关键步骤，以及是否符合设计目标的参考。测试主要是查看软件中数据的准确性，正确的操作与否，以及操作的结果，还有哪些方面需要改进。

寻亲互联网平台的实现，对于系统中功能模块的实现及操作都必须通过测试进行来评判系统是否可以准确的实现。在寻亲互联网平台正式上传使用之前必须做的一步就是系统测试，对于测试发现的错误及时修改处理，保证系统准确无误的供给用户使用。

6.2系统测试方法

在对寻亲互联网平台进行测试的时候在找到问题的情况下必须在第一时间找到解决问题的办法，不要存在侥幸的心理，这样才能让寻亲互联网平台开发的质量可以过关，并且开发的周期会大大缩短，还有就是在测试时，不要出现重复性的错误，遇到一个错误问题，要将整个寻亲互联网平台开发所牵扯的该问题都必须一一解决，提高寻亲互联网平台平台的安全性、稳定性。

白盒测试与黑盒测试是测试中比较常用的两种方法。

①结构测试俗称白盒测试：这种测试是在对程序的处理过程与结构都有详尽谅解的前提下，顺从程序内部的逻辑而完成的系统测试，以确定系统中所有的通路都能够遵照设计要求正常工作，不出现任何偏差。

②功能测试又成黑盒测试：主要是针对程序功能能够按照设计正常实现的一种检测，在程序接口处进行，检测程序手法数据是否正常，与外部信息的交换是否完整。

6.3功能测试

用户登录测试：

模块名称	测试用例	预期结果	实际结果	是否通过
登录模块	用户名：admin   密码：123	弹出错误提示，提示密码错误	弹出错误提示，提示密码错误	通过
登录模块	用户名：123    密码：admin	弹出错误提示，提示用户名错误	弹出错误提示，提示用户名错误	通过
登录模块	用户名：admin    密码：admin	管理员登录成功	管理员登录成功	通过

删除分类测试：

模块名称	测试用例	预期结果	实际结果	是否通过
删除分类模块	分类名：最新通知	删除成功、页面自动跳转	删除成功、页面自动跳转	通过

修改密码测试：

模块名称	测试用例	预期结果	实际结果	是否通过
修改密码模块	原密码：666 新密码：123 确认密码：123	弹出错误提示，提示原密码错误	弹出错误提示，提示原密码错误	通过
修改密码模块	原密码：admin   新密码：123 确认密码：333	弹出错误提示，提示确认密码不一致	弹出错误提示，提示确认密码不一致	通过
修改密码模块	原密码：admin   新密码：123 确认密码：123	密码修改成功	密码修改成功	通过

通过对功能的测试，寻亲互联网平台的基本功能都是可行的，不管是系统里面的功能，还是界面的设计都是可值得推广宣传的。

结  论

此时项目已经完成，即使实施的时间不是很长，但是这个过程中需要准备很长的一段时间去对系统设计开发所实际到的技术进行学习。在学习的过程中，我逐渐认识得到了我自身存在的一些不足。对于一些控制是必要的应用技能，能够理解，整个过程中仅仅是一个掌握了常用的性能和控制方法，我觉得挺容易的。从该系统中，系统的分析和设计的调查数据，并且已经经历了几个月，并努力几个月，该系统已经完成。很显然，该系统仍有很多不成熟，在系统设计过程中有许多技术缺陷存在。在设计的过程中也涉及到了很多自己无法解决的问题，主要通过找专业的网站和论坛来解决这些问题，对于圆满完成我的毕业设计，他们也贡献了很大一部分力量。系统的开发环境和配置都是可以自行安装的，系统使用Java开发工具，使用比较成熟的Mysql数据库进行对系统前台及后台的数据交互，根据技术语言对数据库，结合需求进行修改维护，可以使得系统运行更具有稳定性和安全性，从而完成实现系统的开发。

回顾毕业设计的整个过程，既付出汗水也收获了很多。虽然经历了各种各样的困难，自己的不断研究探索，系统的实现仍有不足之处。

在以后的学习及工作中，我仍然继续学习计算机方面的技术，让我在后期的平台开发中可以更好更快的实现需求功能。我相信我可以让更多的好工作，做出更大的贡献。

致  谢

寻亲互联网平台的完成，如何实现的更好，其中付出的努力是很大的，这段时光将会终身难忘。

首先要感谢我的指导老师，谢谢您在设计和论文中给我的指导。在您的细心指导下我才能快速的掌握系统的相关功能，在您的大力帮助下我才能将课本上的知识与自己的项目结合，真正的做到学以致用。感谢您经常牺牲自己的休息时间，利用其丰富的教学和项目经验对我进行指导。

感谢所有教过我的老师，为我倾注了大量的心血，正是你们的谆谆教诲、严谨教学才使我能顺利的完成学业，再此向你们表示深深的感谢。

感谢我的同学们，对我的大力支持及帮助，正是你们不断的帮助、鼓励，给我带来了极大的动力，最终系统可以顺利的运行。我们在交流、谈论的这段时间,将是我未来的财富，我要深深地感谢你们!

毕业在即，在今后的工作和生活中，我会铭记师长们的教诲、同学们的帮助，继续不懈努力和追求，来报答所有支持和帮助过我的人!

参考文献

[1]朱志慧,蔡洁. 基于SpringBoot+Vue+Uni-app框架的校园失物招领系统[J]. 电子技术与软件工程,2022,(17):62-65.

[2]姜全坤. 基于Vue的通用后台管理系统设计与实现[J]. 现代信息科技,2022,6(08):33-35+38.

[3]李云. 基于Vue框架开发的学生管理系统[J]. 数字通信世界,2022,(03):50-53.

[4]马艳彬. 基于Node.js和Vue框架的竞赛类答题平台管理系统的设计[A]. 中国新闻技术工作者联合会.中国新闻技术工作者联合会2021年学术年会论文集[C].中国新闻技术工作者联合会:中国新闻技术工作者联合会,2021:77-82.

[5]Spence G.,Adams B.,Hurrell D.. Successful treatment of villitis of unknown etiology (Vue)[J]. BJOG-AN INTERNATIONAL JOURNAL OF OBSTETRICS AND GYNAECOLOGY,2021,128.

[6]陈鹏,韩斌,洪华军. 基于深度学习和区块链的JavaScript恶意代码检测系统[J]. 计算机系统应用,2021,30(05):99-106.

[7]邱璐璐,陈俊仁. 基于SpringBoot和Vue框架的高校代领系统设计与实现[J]. 信息技术与信息化,2021,(04):25-27.

[8]Li Nian,Zhang Bo. The Research on Single Page Application Front-end development Based on Vue[J]. Journal of Physics: Conference Series,2021,1883(1).

[9]聂圣东,刘娴,武帅文. 基于GIS技术的寻亲大数据分析平台研究[J]. 科技创新与应用,2021,(04):50-52.

[10]章凯兵. 基于GIS技术的寻亲大数据分析方法及应用[J]. 信息通信,2020,(07):61-62.

[11]仪锋,特日根. Vue框架在地理信息检索系统中的应用[J]. 中小企业管理与科技(上旬刊),2020,(05):166-168.

[12]Minghang Li,Jianghai Hu,Xianwu Lin. The Development of Web Application Front-End of Intelligent Clinic Based on Vue.js[A]. 中国自动化学会智能自动化专业委员会.2019中国智能自动化大会(CIAC 2019)论文集[C].中国自动化学会智能自动化专业委员会:中国自动化学会智能自动化专业委员会,2019:695-702.

[13]Junhui Song,Min Zhang,Hua Xie. Design and Implementation of a Vue.js-Based College Teaching System[J]. International Journal of Emerging Technologies in Learning (iJET),2019,14(13).

[14]谢涵风,蔡国宝,夏曦,王秀友. 基于SSM的寻亲互联网络平台的设计与实现[J]. 电脑知识与技术,2019,15(04):85-88.

[15]马洪亮. 基于JavaScript的恶意网页异常检测方法研究[D].北京交通大学,2018.

[16]刘健,宁玉文,孙茂,许浩,李宝娟. 基于倒排索引结构的寻亲系统的设计[J]. 信息技术,2018,42(10):73-76.

[17]焦鹏珲. 基于SpringBoot和Vue框架的电子招投标系统的设计与实现[D].南京大学,2018.

[18]赵书田,刘海姣. 基于JavaScript的动态Web应用系统设计[J]. 现代电子技术,2017,40(15):44-46+51.

[19]朱沙. 浅析JavaScript MVC框架在系统开发中的应用[J]. 通讯世界,2017,(13):284-285.

[20]刘小兵. Android平台下的寻亲智能守护App的设计与实现[D].东南大学,2016.
 

请关注点赞+私信，免费领取项目源码哦