基于SpringBoot+Vue+Uni-app框架的校园失物招领系统

2022-11-12朱志慧蔡洁

电子技术与软件工程 2022年17期

朱志慧蔡洁

（南京城市职业学院江苏省南京市 211200）

1 引言

在大学校园内, 丢失物品现象非常普遍, 同学们经常会丢失书本、校园卡、准考证、优盘以及身份证等生活物品，如不及时找到遗失的物品，会影响学生的正常生活。学校内，更多的是依赖于QQ群、QQ表白墙、微信朋友圈等平台发布失物招领的信息，但这些方式都属于人工管理方式，存在传播性差、消息滞后、效率低等弊端[1]。随着互联网技术的发展，当代大学生更能够接受网络信息的交流，于是很多的失物招领的网站应运而生，但是通过对比分析发现现有的失物招领网站存在很多的弊端：

（1）大部分失物招领网站的功能比较简单，没有客服咨询等模块；

（2）失物招领的网站面向的群体比较繁杂，专门针对高校的失物招领网站很少，大部分高校的学生是依赖于其他平台发布失物招领信息；

（3）网站上广告模块也比较多，安全性得不到保证，平台上信息繁杂且使用人群数量受限，失物招领的实际效果有待提高；

（4）系统开发的技术也比较老化，维护起来比较困难。

综上，开发一个符合当代大学生校园的失物招领系统是一件迫在眉睫的事情。本论文设计并开发了一个基于SpringBoot+Vue+Uni-app框架的校园失物招领系统，为寻找丢失物品、归还拾得物品提供一个高效、安全的平台。

2 校园失物招领创新模块简述

本论文开发的校园失物招领系统特色的模块体现在：一是增加了双方认领确认功能点，双方用户登录系统后失主和拾主都可以在系统中发布自己丢失的物品或者拾取的物品，若失主在系统中找寻到了自己遗失的物品时，点击认领时，系统会向发布人的账号绑定的微信和邮箱发布一条认领信息，通过双方确认完成失物招领的流程，可避免恶意认领现象的发生，提高安全性。反之，当用户在系统上发布丢失物品的信息，若有人拾取该物品，在系统平台上浏览时点击确认拾取后，失主会收到系统的提醒信息，进行失物认领，增加信息提醒的方式提高了失物招领的效率。二是系统增加了爱心模块，当用户点击爱心模块时会弹出一个消息对话框，学生在工作、生活中遇到问题或者困难时，可以在这个爱心功能模块发布，寻求帮助，营造和谐的校园生活。三是除了PC端还特意增加了手机端失物招领平台，用户可以随时随地的访问系统，不受时间和空间、条件的限制，大大提高了效率和系统使用频率。

3 开发环境与技术介绍

失物招领系统采用Tomcat9和MySQL5.6作为服务器和数据库，开发平台借助于Windows平台，选择B/S开发模式，前端采用Vue和Uni-app开发界面，后端采用基础开发框架SpringBoot，开发环境为JDK8，开发工具采用HBuider、IntelliJ IDEA、Navicat、WebStorm和微信开发者工具，编程的语言包括Vue、css 、JavaScript 、uniapp、java，Photoshop CS4为主要的美工设计，项目代码交由git管理。

SpringBoot 框架：Spring是Java EE开发中最重要的设计层框架之一，开源、能够很好地处理业务逻辑层和其余层之间的松散耦合关系，SpringBoot 框架继承了 Spring 的优良特性，简化 Spring 应用的开发及搭建过程，实现了自动配置，使程序员全身心地投入到业务逻辑代码的编写中去，还能更快捷的部署和监控系统，是后端开发的优势工具，很大程度的提高开发效率。本失物招领系统利用SpringBoot的优势进行后台管理系统的设计[2]。

Vue框架：本系统的前端框架选择目前较流行的Vue框架。它是一个轻量级的渐进式框架，基于数据驱动和组件化的思想构建前端页面，它的核心库只关注视图层，有很多简单、易于理解的API供用户使用，运行效率高、语言简洁、占用空间小、上手容易等特点，深受开发者喜爱，是目前前端首选框架[2]。

Uni-app：是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）等多个平台。

系统在开发过程中，注意保证链接位的预留，以方便今后新功能的加入，同时每个功能以模块方式处理，预留足够的冗余空间，方便系统的扩展。在设计系统的每个模块的时候,将每个模块都分别独立开来, 对于一些页面，我们将其做成了模板,在使用的时候进行母版页加载即可。这样可以集中精力放在代码块的构造与实现上。避免了一些不必要的困扰。在代码设计过程中，尽可能的减少模块之间的耦合性。做到模块和模块之间的分离。这样，日后的维护具有较好的方便性。

4 系统设计与实现

4.1 系统框架结构设计

本次开发的校园失物招领系统分为四大部分：

（1）前台子系统：基于Vue+Vue-router+Element-ui技术开发，分为注册、登录、发布信息、找寻物品几个模块。

（2）后端：基于企业级框架Springboot开发，包括用户信息管理、首页轮播图、首页展示的物品信息、寻物类别、物品详情页信息、招领信息、待招领物品详情信息。

（3）后台管理系统：基于vue-element-admin技术开发。

（4）微信小程序：基于Uni-app技术开发，包括首页、寻失物、发布信息、寻失主、个人中心等模块。

本平台基于SpringBoot框架搭建后端，Vue和Uni-App技术设计前端，MySQL数据库存储数据。总体设计按“前后端分离”方式，当浏览器请求页面或静态资源时，HTTP Server直接响应；当浏览器请求数据时，该请求仍然先发给HTTP Server，经Server转发至Web APP Server。Web APP Server业务处理后将结果数据返回给HTTP Server，最终返回浏览器。在此过程中，Web APP Server返回的仅仅是数据（json格式），没有任何与显示（视图）相关的信息，做到了完全的前后端分离，前端负责页面与展示，后端负责业务处理与数据。整个系统框架结构如图1所示。

图1：系统框架结构图

4.2 系统功能设计

系统用户权限表，如表1所示。

表1：用户权限分析表

5 系统主要功能逻辑设计及实现

5.1 用户登录功能

前端发起登录请求，请求中携带登录帐号和输入密码，经过HTTP Server转发到后端，后端Controller接收到该请求后，调用Service处理该请求，Service通过DAO拿到该登录帐号对应数据，核对密码，若密码正确，生成令牌，并将用户基本信息（包括令牌）返回给前端。生成的令牌具有时效性，默认24小时，可以通过配置文件修改。用户登录功能图如图2所示。

图2：用户登录功能图

5.2 用户身份验证拦截

验证登录信息是否正确，用户身份验证功能图如图3所示。

图3：用户身份验证功能图

5.3 前台子系统

当用户访问pc端系统时，可以通过用户注册成为系统的用户，账号是用户的工号或者学号，密码自行设置。注册成功后即可登录，登录成功后，可以浏览系统的主页，查看是否有遗失的物品，也可以通过顶部导航栏进行快速搜索想要搜索的物品，增加搜索功能易于帮助师生们快速找到想要的物品。图4展示的是失物招领系统PC端认领界面。

图4：失物招领系统PC端认领界面

随着手机的普及，大家追求的是便捷化，基于此现象，本论文还开发了微信小程序，用户可以在微信上搜索寻物小程序，便可以直接进入小程序访问寻物系统。用户可以通过分类进行查找遗失的物品，也可以在微信小程序上发布遗失物品的信息。增加了微信小程序体现了本系统的多终端特点，大大增加了系统便捷性。同时，微信小程序还有拨打电话的功能，给失主和拾主的联系提供了方便，如图5、图6和图7所示。