这是之前为校学生会和网络协会制作的一个失物招领系统,主要功能如下:
![laf_1](https://static-img.0xffff.one/fNWnad9In-JTU4jRQ3cO8j0MxjhO8n3YoPSmegvBvWo/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl8xLnBuZw.jpg)
失物招领的整体流程如下:
![laf_2](https://static-img.0xffff.one/cJ50qBPXOOeMfpM0xeguayu9T4QElKoblc0z_6Ulndk/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl8yLnBuZw.jpg)
由于是大二时的作品,设计有点稚嫩,数据库中表的构建略为冗杂,你可以进行改进;前端打包生成的app.js约1.3M, 可以进一步优化。此外,因为是和校学生会合作的项目,因此是线上线下结合的,你也可以稍作修改,编成纯线上作品。
失物招领web端
这一部分包括系统展示页和后台管理页、企业号自动通知和微博同步功能。
系统展示页
系统展示页包括学校名称、各学院名称、失物简介、证件类与非证件类的查看、搜索框、失物详情。如下图所示
![laf_3](https://static-img.0xffff.one/9F8JKYr3YC6OlBOkAR33rHrWwUOf_Sxi7UHlktR1nrY/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl8zLnBuZw.jpg)
后台管理页
包括超级系统管理页面、分校区管理页面。其中超级系统管理页面需要设定学校名称,及各校区基本情况。以及配置微博信息和企业号信息。如下图所示。
![laf_4](https://static-img.0xffff.one/qL6jW8Ud-VCXJfmaXVfxlCbTT9Zte4w9RKAVqN8-9p4/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl80LnBuZw.jpg)
分校区后台管理页面包括失物基本信息上传和修改,设置已领取、已领取人的信息等功能,如下图所示(建议放大查看)
![laf_5](https://static-img.0xffff.one/xte_NVRSm4pYM43IhUwWh1Nnt2LVvoFQ6Ji96dQPDqo/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl81LnBuZw.jpg)
![laf_6](https://static-img.0xffff.one/uc1pzbYoklsfgSysuQCmJJA7w04OfjOzDIQzktxW5DI/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl82LnBuZw.jpg)
企业号自动通知与微博同步功能
为确保同学们能及时收到失物信息,我们设计了卡类失物微信自动通知功能和非卡类失物微博同步功能,如下图所示。
![laf_7](https://static-img.0xffff.one/wqWkNAEuUcySSKNqqUD2A5XyBTYtC8LWTl2tC85SqQs/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl83LnBuZw.jpg)
![laf_8](https://static-img.0xffff.one/6oLPmHC1szz-LcQwDGyv_WUwQaoeJJGq966SFy_MY38/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl84LnBuZw.jpg)
失物招领小程序端
从同学们的调查问卷结果中我们可以知道,90%的同学通过微信来获取信息,因此抓住手机端的优势非常重要,所以我们开发了小程序端来相应同学们的需求。如下图所示。
其所有数据和web端是同步的。
![laf_9](https://static-img.0xffff.one/AkzcdtH7WNM4z2Mwf89u0uTeQTi094fqd38OtY7IElY/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl85LnBuZw.jpg)
软件架构和开发环境
本系统采用前后端分离的形式进行设计、前端使用的框架是Vue、后端使用的
框架是Laravel. 数据库采用MySQL. 开发环境是macOS, 使用的软件是PHPstorm和DataGrip.
前端
采用Vue组件化设计、使用了两个组件库:Muse-ui和iview配合设计。
后端
采用Laravel典型的MVC设计搭配数据库MySQL。其中本系统开发并使用了6个模型和11个控制器。
技术架构如图所示。其中包括上传在内共有14个数据接口。
![laf_10](https://static-img.0xffff.one/XpkBXwO7JBoerwthdve7WyfYyuaRAAXyhRKoPPQdELo/q:90/w:800/rt:fit/aHR0cHM6Ly9odWFu/eGlhbmdrZS5jb20v/c3RvcmFnZS9hcHAv/bWVkaWEvTm93L2xh/Zl8xMC5wbmc.jpg)
本原创文章首发于幻象客( https://huanxiangke.com )公众号和网站,如转载,请注明出处。