基于VUE的校园失物招领系统设计与实现

在校园生活当中，我们经常需要携带书本、学习用品、钥匙、饭卡、学生证、身份证等生活用品，由于自己的小疏忽导致物品的丢失，并且这种现象频繁发生。随着学校的各项管理制度的不断健全，学校的各项工作也逐渐走上了正轨，校园中的失物招领处理方案也需要进一步完善^[1]。当我们发现自己物品不见的时候，会使用各种方式去寻找自己的物品，比如QQ寻物群、告白墙、微信朋友圈、饭堂失物处等等，但这些渠道方式太过于分散，导致寻物效率低下。一旦丢失较为贵重的物品，就必须要上报，但上报的程序比较繁琐，时间也比较长，寻物的成功率也比较低，这造成了很大的资源浪费^[2]。因此，可以发现，当前各学校非常缺少功能完善的线上校园失物招领。

本文将设计一个基于VUE框架技术开发的校园招领系统，本校园失物招领服务系统主要的服务人群为学生和教师等校园生活人群，其目的在于为丢失物品或寻物的人提供一个发布失物招领或寻物启事的系统服务平台。

本文重点研究的内容是失物信息的发布和视图展示，将系统的前端和后端进行分离开发，后端负责从数据库提取和处理数据并整理成接口文档供前端使用，前端根据后端的接口文档设计UI布局和实现各信息的展示。

使用该系统需要以游客和登录用户两种身份进行使用，游客的使用权限仅可以查看物品列表和物品详情，登录用户可以使用该系统的全部功能。用户使用手机号注册后，可以对自己的信息进行管理，也可以发布物品信息；用户填写物品信息、拾物地点、联系方式、选择物品类型和上传物品图片等发布寻物启事和失物招领信息；用户发布信息后，系统会给每个用户发送该物品信息的消息，并且当用户给某一个物品留言的时候，系统会自动将该条消息发送给物品发布者，用户可以在消息系统中查看系统消息、寻物消息等；各种物品通过不同的物品类型分栏分页展示，用户在搜索栏中输入关键字进行搜索，点击物品框查看物品详情信息。浏览者可以在物品详情页发表自己对该物品的留言，也可以将页面以链接的形式分享给朋友。

网络技术和信息科学的快速发展，Web应用开发已经完全取代了传统的桌面应用开发并成为当前软件应用系统的发展主流^[3]。Web技术从简单的浏览器页面开发到移动端应用开发，系统全栈开发，包括在不同层次上管理操作多样化的工件，如网页和数据库等，Web在互联网技术中扮演着重要角色，发挥着越来越重的作用^[4]。Web工程需要操作处理Python、JavaScript、Java、HTML等文件，也管理JSON和XML这些数据序列化语言^[5]。目前在国内或国外最常用的前端的框架为Angular、React和Vue三大主流框架，其前二者主要为国外开发人员使用，并且以外语编写设计文档，对国内编程人员而言较为困难。Vue身为国内前端开发框架的领先者，与其他框架不同的点在于其被设计为组件化和自下而上的组成代码应用，并且国内大部分系统都是以其作为客户端开发框架。

由于HTML是作为文档对象模型树在浏览器中进行解析的，需要通过使用JavaScript不停操作DOM元素来改变HTML的结构，进一步完成数据回流和重绘，但是传统的MVC模式会降低Web服务的性能，所以提出了其升级版设计模式为MVVM模式^[6]。前谷歌工程师基于前辈的设计理念，提出了MVVM的架构模式，该模式为视图与脚本建立了双向通信的桥梁，使得视图也可以反过来通知脚本进行状态的更新^[7]。使用双向绑定数据采用MVVM模式的架构，控制模型数据的变化以改变客户端显示的视图，改变视图以改变数据参数。

在国外，失物招领体系建立得比较早，而且投资也比较大，如Missing Money系统^[8]。国内虽然在这方面起步较晚，也存在不同方面对于失物招领系统方面的研究，其使用的技术层出不穷，如基于单片机失物招领平台、基于图像识别的失物招领微信小程序、区块链技术在失物招领平台的前景分析等等。前人在不同领域使用不同技术对失物招领功能进行不同的探索，为我们提供了多方面的技术参考、研究难题和解决方案。因此可见，失物招领系统可以作为各技术领域作为研究的一个重要方向，研究设计一个失物招领系统是非常重要的。

1. 创新点:

1  解决丢失物品寻找范围广，难度大的问题:

许多学生、教职工或工作人员在校园生活中经常发生自己的物品不见的事件，并且因为学校范围较大，人员较多，如果通过传统的个人寻物、告白墙、QQ空间等方式，能够找到自己物品的概率较低。所以，有必要建立一套适用于校园的“失物招领”系统是非常必要的。在这个系统中，学校的各类人员可以查找他们的丢失的物品，统一寻物渠道，缩小寻物范围，扩大信息范围，进一步提高寻物效率。

2.项目特色:

1. 经济成本低，无需花费大量经费维护:

由于本系统面向广大网络用户，需要通过网络才可以使用，因此需要租用服务器挂载后端服务端和客户端域名访问，系统所使用的OSS存储和短信服务也需要购买对应套餐。通过计算租用服务器费用和购买套餐费用，本系统花费的费用较少。并且系统的维护只需要一到两人进行管理，不需要投入其他的人力或物力。本系统可以减少失主的损失，改善校园失物找不到的环境，提高校园生活的团结感。

2. 操作简单，切合用户需求:

本系统使用较为简单，主要功能为发布信息和失物展示，用户操作较为便利，只需要根据客户端的文字介绍就可以使用。代码较为规范和模块化，维护管理人员只需要在对应的组件代码中修改就可以完全样式的改变，每个数据模块有不同的区域，哪个功能代码出了问题，直接找到对应的模块代码便可更改，操作复杂度较低。

3. 利于管理者维护:

服务平台主要使用Vue作为客户端开发，SpringBoot作为服务端开发，这二者框架是最常用的前后端开发技术，在学习编程的过程中不时需要使用到，对其技术掌握程度较熟练。MySQL数据库管理只要掌握了一些基本的语句，就可以对数据进行处理和管理。因此，本系统所使用的大部分技术都是最常用的技术，在实现系统的过程中能够熟练使用，不涉及复杂以及陌生技术。

登录模块

用户登录

注册

失物招领模块

查看失物列表

失物详情

搜索失物功能

寻物启事模块

查看寻物物品列表

寻物信息详情

搜索寻物列表等功能

物品发布模块

发布失物招领

寻物启事功能

用户中心模块

用户管理信息

用户发布的寻物启事

用户发布的失物招领列表

用户消息列表

切换系统主题功能

用户模块

用户登录

注册

管理用户信息等接口

失物招领和寻物启事模块

提供对应的查询物品列表

查询物品详情

发布物品

修改物品信息功能接口

留言模块

提供发布物品留言

获取留言的接口

消息模块

判断是否有无消息

查询不同类型的消息

修改消息已读状态

查询消息详情接口

短信模块

提供了一个发送移动设备的验证代码功能接口

2. 拟解决问题

1. 失主可以随时实地查看自己的物品是否被找到

   失主可以随时随地关注商品信息是否出现自己丢失的商品，不需要多余的奔波劳累。

2. 丢失物品范围广，寻找难度大的问题

   丢失物品范围广，当遗忘的时候，想不起在何处丢失，人多力量大，当别人找到的时候，有一个平台告知失主

3. 预期成果

完成《基于VUE的校园失物招领系统设计与实现》的设计。

n  研究报告一份，可运行的算法源代码一份

n  发表学术论文1篇

n  算法优化文档：技术实验说明、算法优化过程中的各类文档

n  利用改项目在大学生创新创业训练计划取得一定的成绩