基于微信小程序、Express与MongoDB的校园失物招领系统设计

基于微信小程序、Express与MongoDB的校园失物招领系统设计

**技术说明：**本文围绕校园失物招领微信小程序进行全栈开发复盘，重点整理小程序原生API、Node.js与Express后端、MongoDB数据模型、失物与招领信息发布、分类检索、收藏、认领流程、权限控制及系统测试等技术要点。内容用于移动应用、校园信息系统和文档型数据库方法交流，不涉及商业服务推广或个人信息收集。

摘  要

校园失物招领小程序旨在提升大学生失物认领效率，对于大多数学校采用的手工管理，受限于学生人数、校园规模，同时信息量也越来越庞大，人工管理已无法适应这一变化，而校园失物招领小程序可以轻松解决这一问题。为有效降低寻找失主、失物管理的经济成本与时间成本，开发校园失物招领小程序1。校园失物招领小程序既可以提升丢失物品被找回的成功率，又能提高闲置物品的利用率，使校园生活更加丰富多彩2。

小程序分别采用微信开发者工具和Visual Studio Code、MongoDB数据库作为小程序端和后台数据库的开发工具。系统体系使用Express框架，围绕"寻主"和"寻物"两个主线功能，具有用户登录、失物信息的发布、搜索、查询及失物认领等功能。提高了失物招领效率并节约了人力物力财力成本，实现了失物招领的数字化、规范化，使得各项工作更加准确方便和快捷。

本文简要介绍了校园失物招领小程序所用到的主要的技术，包括Node.js，小程序原生API等；同时，对小程序中的关键模块进行了详细的描述并且展示了部分代码的实现过程。

关键词：校园失物招领；微信小程序；数据库

ABSTRACT

The campus lost and found mini-program aims to improve the efficiency of lost item claim for college students. For most schools that adopt manual management, it is limited by the number of students and the scale of the campus. At the same time, with the increasingly huge amount of information, manual management can no longer adapt to this change. However, the campus lost and found mini-program can easily solve this problem. In order to effectively reduce the economic and time costs of finding the owner of lost items and managing lost items, the campus lost and found mini-program is developed.

The campus lost and found mini-program can not only increase the success rate of retrieving lost items, but also improve the utilization rate of idle items, making campus life more colorful. The mini-program uses WeChat Developer Tools, Visual Studio Code, and MongoDB database as the development tools for the mini-program side and the background database respectively. The system architecture uses the Express framework. Centering around the two main functions of "finding the owner" and "finding the lost item", it has functions such as user login, release, search, query of lost item information, and lost item claim. This improves the efficiency of lost and found, saves human, material and financial resources, realizes the digitization and standardization of lost and found, and makes all tasks more accurate, convenient and fast.

This article briefly introduces the main technologies used in the campus lost and found mini-program, including node.js, the native API of the mini-program, etc. At the same time, it gives a detailed description of the key modules in the mini-program and shows the implementation process of some codes. By using these technologies and functions, the campus lost and found mini-program can better serve college students, providing them with a more convenient and efficient platform for handling lost and found items. It helps to establish a more orderly and harmonious campus environment, and promotes the rational use of resources on campus. In conclusion, the development and application of this mini-program have great practical significance for campus management and students' daily life.

Key Words：Campus lost and found; WeChat mini program; Database

第一章 绪论

1.1引言

在当今数字化时代背景下，高校信息化建设已成为教育现代化发展的重要趋势。随着移动互联网技术的快速普及和智能手机的广泛应用，微信小程序以其"无需下载、即用即走"的独特优势，正在深刻改变着传统服务模式的形态和效率。校园作为人员密集、流动性强的特殊场所，失物招领服务一直是困扰师生日常生活的痛点问题。

当前，大多数高校仍采用传统的失物招领方式，如公告栏张贴、校园网站发布等，这些方式普遍存在信息更新不及时、传播范围有限、查询效率低下等问题。此外，大量遗失物品长期滞留招领处，既造成了资源浪费，也给失主带来了诸多不便。与此同时，移动互联网技术的蓬勃发展为解决这一问题提供了新的思路和方案。

1.2研究的背景意义

随着高校规模的扩大和学生活动的日益频繁，校园内物品丢失现象屡见不鲜。传统的失物招领方式（如公告栏、校园墙等）存在信息分散、更新滞后、管理效率低下等问题。尤其在信息化时代，管理系统都趋向于智能化、系统化，微信小程序校园失物招领也不例外3。小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验4。学生更倾向于通过移动终端快速获取服务，而传统方式已无法满足高效、便捷的失物招领需求。微信小程序凭借其轻量化、即用即走的特点，成为解决这一问题的理想载体。

大学生丢失物品是一个普遍存在的现象，传统的失物招领方式，如食堂里的失物招领点、校园墙上发布的失物招领消息，失物信息分散不集中5。针对学生物品易丢失但不易找回的问题，设计一款失物招领微信小程序6。校园失物招领小程序是一个帮助大学生寻找失物的高效便捷的平台，既可以让"失物"尽快回到主人身边，也能让"失主"收获失而复得的喜悦。因此开发一个校园实物招领小程序具有很大的实用价值，极大提高了失物招领的效率和便捷性，为大学生提供诸多方便。

1.3国内外研究现状

目前，国内外已有部分失物招领平台，如"物语寻物"小程序和"民航旅客遗失物品查询平台"，但其功能多局限于基础的信息发布，缺乏动态分类、智能检索等深度交互功能。此外，现有系统在安全性（如身份核验）和扩展性（如社交化功能）方面仍有不足。

1.4本设计的目的和主要内容

本项目是一个基于微信小程序的失物招领系统，围绕"寻主"和"寻物"两个主线功能，为用户提供登录、失物与招领信息发布、失物与招领信息查询、失物与招领信息收藏、获取发布者联系方式、讨论区、失物认领等服务，同时，本系统通过互联网实现信息发布和接收的实时性、失物招领工作的高效性，并且符合可持续发展的要求，除数据外不会产生多余的成本 7。主页展示失物帖，包括失物描述、联系信息、遗失物认领状态等8。失主可以通过该小程序找到失物信息，拾主也可以发布物品相关信息，减少了传统失物招领中的多余路程成本，同时系统对发布的遗失物品进行分类并增加搜索功能，易于帮助师生们快速找到想要的物品，实现了物品网上管理和提高寻物寻主便捷性的优点9。微信小程序简化了信息系统的开发难度，并为开发者提供了开放的平台。校高校失物招领微信小程序为广大高校学生提供便利10。

本研究基于微信小程序生态，结合Node.js后端与MongoDB数据库，设计并实现一个功能完善的校园失物招领系统。参照目前已经有一部分人使用的失物招领的微信小程序，如物语寻物小程序、民航旅客遗失物品小程序，如图1.1和图1.2，本项目设计的主要内容如下：

(1)本项目包含首页、分类、发布、收藏夹和我的五个标签页面，点击标签就会显示对应的标签界面。

(2)首页标签在pages文件夹下，包括两个模块，分别为寻主和寻物。点击"寻主"可以显示寻主帖对应的内容，点击"寻物"可以显示寻物帖对应的内容，首页默认显示寻主贴的内容，在某一模块内点击某个帖子可以在新的页面里查看该帖子相应的详情。

(3)分类标签在pages文件夹下，包含对寻主帖和寻物帖的一个二级分类。

(4)发布标签在pages文件夹下， 包含寻主帖和寻物帖的信息发布。

(5)收藏标签在pages文件夹下，包括用户收藏的寻主帖或寻物帖信息。

(6)我的标签在pages文件夹下，包括登录用户的发布信息、收藏信息、个人信息、意见反馈以及退出登录。

图1.1 物语寻物小程序主界面图	图1.2 民航旅客遗失物品小程序主界面

第二章 相关技术简介

2.1开发环境的介绍

2.1.1 前端 微信开发者工具

创建一个新项目，启动微信开发者工具，如图2.1。

图2.1 微信开发者工具主界面

单击"+"创建小程序，项目名称为校园失物招领小程序，输入自己的AppID，如图2.2。

图2.2 创建校园失物招领小程序

单击"新建"后，将出现如图2.3所示的界面，这是开发时的主界面。在目录树左上角单击"+"，如图2.3。

图2.3 校园失物招领小程序

2.1.2 后端 VSCode

创建一个项目

启动VSCode，如图2.4所示。

图2.4 VSCode启动页面

新建文件夹，例如serve文件夹，如图2.5所示。

图2.5 新建serve文件夹

然后在VSCode里面打开自己所创建的文件夹 serve，如图2.6、2.7所示。

图2.6 打开文件夹

图2.7 打开自己所创建的文件夹 serve

2.1.3 数据库 MongoDB

1、MongoDB数据库的环境配置

（1）找到"环境变量"里面的"系统变量"，编辑path,如图2.8所示。

图2.8 编辑path

添加MongoDB的bin地址（自己电脑安装的MongoDB的bin地址），图2.9所示。

图2.9 添加MongoDB的bin地址

创建数据库文件的存放位置，在data文件夹下创建db 文件夹，如图2.10所示。

图2.10 创建db 文件夹

启动 MongoDB 服务（Win+R键），输入cmd，如图2.11所示。

图2.11 打开系统命令行窗口

进入命令编辑模式，找到db文件，如图2.12所示。

图2.12 进入命令编辑模式

（6）输入命令，来启动MongoDB 服务

mongod --dbpath D:\MongoDB\data\db

编辑mongo.log文件，用记事本打开编辑即可，如图2.13所示。

图2.13 编辑mongo.log

以管理员身份打开命令行，启动MongoDB 服务，启动 MongoDB 命令为：net start MongoDB，如图2.14所示。

图2.14 启动MongoDB 服务

至此，在浏览器中输入地址和端口号为：http://localhost:27017，显示如下，说明 MongoDB 服务已启动，如图2.15所示。

图2.15 MongoDB 服务已启动

2. MongoDB数据库的可视化工具------MongoDBCompass

配置数据库连接

启动MongoDBCompass后主界面如下图，点击Fill in connection fields individually按钮配置数据库连接，如图2.16所示。

图2.16 配置数据库连接

新建连接，在HostName选项卡中可以直接使用默认配置的连接host地址、端口号和权限认证方式等直接连接，也可以自己配置连接方式，在MOre Options选项卡中可以配置复制集合、读取优先权、安全套接字协议、SSH轨道等信息，如图2.17所示。

图2.17 新建连接

2.2相关技术

1、Node.js

（1）Node.js介绍

Node.js 就是运行在服务端的 JavaScript，使用Node.js编写后端逻辑代码，处理来自微信小程序客户端的请求，进行数据处理、逻辑计算等操作，Node.js与数据库进行交互，实现数据的读取、写入、更新、删除等操作，保证数据的持久化存储11。

（2）Node.js 特点

跨平台支持：Node.js 可以在 Windows、Linux 和 macOS 等多个操作系统上运行。

庞大的生态系统：Node.js 拥有一个名为 npm（Node Package Manager）的生态系统，其中有丰富的第三方库和模块，可以用来扩展功能和加速开发。

2、Express框架

（1）Express介绍

Express是一个保持最小规模的灵活的Web应用程序开发框架，为Web和移动应用程序提供一组强大的功能和丰富的 HTTP 工具，使用 Express 可以快速地搭建一个完整功能的网站12。

（2）Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。

定义了路由表用于执行不同的 HTTP 请求动作。

可以通过向模板传递参数来动态渲染 HTML 页面。

（3）安装 Express

安装 Express 并将其保存到依赖列表中：

图2.18 安装 Express

3、MongoDB

（1）MongoDB介绍

MongoDB 是一个文档型数据库，数据以类似 JSON 的文档形式存储，它的设计理念是为了应对大数据量、高性能和灵活性需求，MongoDB使用集合（Collections）来组织文档（Documents），每个文档都是由键值对组成的13。

（2）MongoDB特点

文档导向的存储：MongoDB 是一个面向文档的数据库，它以 JSON-like 的格式存储数据，使得数据结构更加灵活和丰富。

索引优化查询：MongoDB 允许用户为文档中的任意属性创建索引，例如 FirstName 和 Address，从而提高查询效率和排序性能。

强大的查询语言：MongoDB 使用 JSON 格式的查询语法，支持复杂的查询表达式，包括对内嵌对象和数组的查询。

数据更新：利用 update() 命令，MongoDB 能够替换整个文档或更新指定的数据字段，提供了灵活的数据更新方式。

第三章 系统设计

3.1系统框架设计

1、系统整体框架

图3.1 系统整体框架图

2、详细模块分解

（1）前端模块

首页：核心交互界面，集成轮播图、分类导航、搜索功能。

分类页：支持二级分类动态联动（如一级分类"电子产品"→二级分类"手机/耳机"）。

发布页：通过picker-view组件实现滚动选择器。

个人中心页：包含微信登录、我的发布/收藏/个人信息、意见反馈、退出登录功能。

图3.2 前端模块图

（2）后端模块

基于Express框架提供API接口（如/api/lostItems）。

处理前端请求并与MongoDB交互。

图3.3 后端模块图

数据库模块

数据库表：

Lose：丢失物品表

Collection：收藏物品表

User：用户账号表

Admin：管理员账号表

Adcive：意见反馈表

Banner：轮播图表

图3.4 数据库表

数据表的字段信息：

图3.5 Lose表

表3-6 Lose表字段信息

字段	_id	openid	type	classify1	classify2	name
字段 信息	该条数据的唯一标识	用户在该小程序下的唯一标识	"寻主"或"寻物"类型	一级分类名	二级分类名	物品 名称

续表3-6 Lose表字段信息

字段	date	region	phone	desc	imgList	time
字段 信息	物品丢失/拾取时间	物品丢失/拾取地点	发帖人联系方式	物品描述	物品照片	信息发布时间

续表3-6 Lose表字段信息

字段	commentList	claimInfo
字段 信息	物品评论信息	失物招领信息

图3.7 Collection表

表3-8 Collection表字段信息

字段	_id	openid	id
字段 信息	该条数据的唯一标识	用户在该小程序下的唯一标识	收藏该条数据的用户唯一标识

图3.9 User表

表3-10 User表字段信息

字段	_id	openid	username	password	date
字段 信息	该条数据的唯一标识	用户在该小程序下的唯一标识	用户名	用户密码	用户注册时间

图3.11 Admin表

表3-12 Admin表字段信息

字段	_id	username	password	create_time	role	nickname
字段 信息	该条数据的唯一标识	管理员名	管理员密码	管理员创建时间	管理员角色	昵称

图3.13 Advices表

表3-14 Advices表字段信息

字段	_id	openid	phone	advice_content	create_time
字段 信息	该条数据的唯一标识	用户在该小程序下的唯一标识	联系方式	意见反馈内容	发布意见反馈时间

图3.15 Banner表

表3-16 Banner表字段信息

字段	_id	Image_url	index	title	create_time
字段 信息	该条数据的唯一标识	轮播图地址	轮播图索引	轮播图主题	新增轮播图时间

3.2项目文件组织结构

components: 自定义组件文件夹

custom-tab-bar:底部导航栏

images:图片文件夹

pages:页面文件夹

utils:工具类文件夹

app.js:小程序逻辑

app.json:小程序配置文件

app.wxss:小程序公共样式表

图3.17 项目文件组织结构图

3.3系统功能图

1、校园失物招领小程序功能图

图3.18 校园失物招领小程序功能图

2、失物招领后台管理系统功能图

图3.19 失物招领后台管理系统主界面

图3.20 失物招领后台管理系统功能图

第四章 校园失物招领小程序的实现

4.1标签导航的实现

1、实现目标：

通过底部导航栏实现首页、分类、发布、收藏夹和"我的"五个功能模块的无缝切换，提升用户体验。

2、技术方案：

使用微信小程序的 custom-tab-bar 自定义组件，结合 app.json 配置页面路由。通过 wx.switchTab API 实现标签页跳转，确保页面加载效率。

3、项目成果展示：

首页顶部有一个搜索栏，中间是一个轮播图，页面下方展示"寻主"和"寻物"两大模块，如图4.1。用户可通过顶部搜索栏通过模糊查询快速查找失物信息，如图4.2。轮播图动态更新图片，用户可通过轮播图浏览校园失物招领公告，如图4.3。"寻主"和"寻物"两大模块展示失物信息，如图4.4。

图4.1 首页标签对应的界面	图4.2 搜索栏
图4.3 轮播图	图4.4 失物详情页

支持二级分类动态联动（如"数码产品→手机/耳机"），帮助用户精准筛选，如图4.5。发布页：集成表单提交功能，用户可上传失物图片、填写详细描述，如图4.6。个人中心页：用户可以查看我的发布、我的收藏、我的信息，具有提交意见反馈及退出登录功能，如图4.7、图4.8。

图4.5 分类页	图4.6 发布页
图4.7 个人中心页	图4.8 退出登录

4、代码实现

为了实现点击页面底部的"分类"标签，显示"分类"标签对应界面；点击页面底部的"+"（即发布）标签，显示"+"（即发布）标签对应界面；点击页面底部的"收藏夹"标签，显示"收藏夹"标签对应界面；点击页面底部的"我的"标签，显示"我的"标签对应界面。首先要对app.json文件进行编辑，添加第5行到第8行代码，即 "pages/classify/classify"、 "pages/publish/publish"、 "pages/collection/collection"、"pages/me/me"，如附录图1所示。

接下来将首页、分类、发布、收藏、我的页面对应的图标复制到本项目中images文件夹下。

继续对app.json文件进行编辑，在25行之后添加附录图2、附录图3所示的第26行到第54行代码。

修改完成后，底部界面将如图4.9所示。

图4.9 修改app.json文件的底部界面

至此，标签导航已经实现，此时若点击页面底部的"分类"标签，将显示"分类"标签对应界面，如图4.10所示。

若点击页面底部的"+"（即发布）标签，将显示"+"（即发布）标签对应界面，如图4.11所示。若点击页面底部的"收藏夹"标签，将显示"收藏夹"标签对应界面，如图4.12所示。若点击页面底部的"我的"标签，将显示"我的"标签对应界面，如图4.13所示。

图4.10 分类标签对应的界面	图4.11 "+"（即发布）标签对应的界面

图4.12 收藏夹标签对应的界面	图4.13 我的标签对应的界面

4.2搜索功能的实现

1、实现目标：

支持用户通过关键词模糊查询失物信息，提升检索效率，搜索栏的模糊查询是对失物名称的模糊检索，如用户在搜索栏输入书包，下方列表显示红色书包和一个书包挂件的失物。为了能在首页的搜索栏中实现按失物名称进行模糊查询，由于搜索栏在首页和分类页中都需要用到，所以将搜索栏功能模块抽象成自定义组件，以便在首页、分类页中被重复使用，避免多次重复定义。

2、技术方案：

前端使用 SearchInput 自定义组件，后端通过 MongoDB 的 $regex 实现模糊匹配。搜索结果页采用分页加载，避免数据过多导致的性能问题。

3、项目成果展示：

用户输入"书包"后，系统返回包含关键词的所有失物信息，搜索界面下方出现失物名称中有"书包"两个字的所有失物，在本次搜索中，系统返回书包和书包挂件两个失物，如图4.14。搜索结果按时间倒序排列，点击搜索结果跳转至失物详情界面，点击书包标签，跳转至书包的失物详情界面，如图4.15。

图4.14 搜索界面	图4.15 跳转后的失物详情界面

4、代码实现

为了能在首页的搜索栏中实现按失物名称进行模糊查询，由于搜索栏在首页和分类页中都需要用到，所以将搜索栏功能模块抽象成自定义组件，以便在首页、分类页中被重复使用，避免多次重复定义。

自定义一个SearchInput组件。首先创建一个components组件文件夹，新建SearchInput页面，如附录图4所示。

为了实现点击搜索栏后，能够跳转到新的搜索页面，需要在app.json中添加第15行代码，新建一个页面，即 "pages/search/search"，如附录图5所示。

接下来分别对index.wxml、index.json、index.js、SearchInput.wxml、SearchInput.wxss、SearchInput.js、SearchInput.json、search.wxml、search.wxss、search.js文件进行编辑。

编辑index.wxml，打开index.wxml文件，引入自定义组件SearchInput,添加bindtap事件，如附录图6所示的第3行代码。

编辑index.json打开index.json文件，通过usingComponents字段声明组件的路径，输入第3行代码如附录图7所示。

编辑index.js，点击搜索栏，使用bindtap事件绑定指令，toSearch函数实现从首页跳转到新的搜索页面，如附录图8所示。

编辑SearchInput.wxml，编写SearchInput组件模版，将SearchInput.wxml文件内默认的内容修改为如附录图9所示的内容。

图4.16 修改后的搜索栏

编辑SearchInput.js，使用 Component() 来注册SearchInput组件，如附录图10所示。

编辑SearchInput.json在SearchInput.json文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件），如附录图11所示。

编辑search.wxml，将search.wxml文件内默认的内容修改为如附录图12、附录图13所示的内容。

编辑search.js，继续打开文件search.js进行编辑，输入如附录图14所示的代码。

图4.17 搜索页面

4.3轮播图与动态数据展示

1、实现目标：

通过轮播图展示热门失物或公告，增强用户关注度。为了在首页实现图片自动切换的动态效果，需要使用swiper滑块视图容器。

2、技术方案：

使用微信小程序的 swiper 组件，结合后端 API 动态加载轮播图数据。数据存储于 MongoDB 的 Banner 表，支持管理员后台更新。

3、项目成果展示：

轮播图自动切换，首页展示失物招领公告，如图4.18，失物详情页展示失物图片，如图4.19。

图4.18 首页轮播图	图4.19 失物详情页轮播图

4、代码实现

为了在首页实现图片自动切换的动态效果，需要使用swiper滑块视图容器，分别对index.wxml、index.wxss和index.js这三个文件进行编辑。

将index.wxml文件内默认的内容修改为如附录图15所示的内容。

继续打开文件index.js进行编辑，输入如附录图16所示的第9行代码。

由于轮播图来源于失物招领后台管理系统中轮播图管理功能中的上传，所以需要从数据库获取轮播图数据，在Node.js后端处理，添加如附录图17所示代码。

至此，首页的轮播图已经实现，如图4.20所示。

图4.20 轮播图

4.4失物详情页的实现

1、实现目标：

提供完整的失物信息展示，如失物的图片、名称、丢失/拾取时间、丢失/拾取地点、描述，用户可以再实物详情页的评论区进行评论，并支持用户联系发布者，同时，用户具有认领和收藏失物的功能。

2、技术方案：

前端通过 wx.navigateTo 跳转详情页，后端根据 _id 查询 MongoDB 返回数据。

3、项目成果展示：

详情页包含物品图片、描述、丢失地点/时间、评论区、发布者联系方式、认领状态、收藏状态，如图4.21。用户可在评论区提交评论，如图4.22。用户可点击"联系发布者"按钮，获取发布者的联系方式，如图4.23。用户可点击认领按钮进行失物认领，认领时需要用户输入失物描述和图片证明，如图4.24，此时失物的认领状态变为认领中，如图4.25，管理员在后台管理系统审核认领，如图4.26，若审核通过，此时失物的认领状态变为已认领，如图4.27。

图4.21 失物详情页	图4.22 失物详情页评论区

图4.23 获取发布者的联系方式	图4.24 认领

图4.25 认领中	图4.26 已认领

图4.27 管理员审核认领

4、代码实现

本节将以在首页点击名称为"相机"的失物帖为例，演示如何实现点击某一失物帖可以在新的页面里查看相应的详情。具体步骤如下：

修改小程序的公共文件app.json，为了将失物帖详情页面加入，首先修改小程序的公共app.json文件。在该文件中添加第14行代码，如附录图18所示。

在index.wxml中添加bindtap事件，在首页文件index.wxml的第15行添加代码bindtap= "toDetail"，如附录图19所示。

修改index.js，为了实现在首页页面点击名称为"相机"的失物帖，跳转到该失物帖的详情页面，还需要修改index.js文件。即在index.js中第25行后插入toDetail函数的实现代码，如附录图20第17行至第22行代码所示。

编辑infoDetail.wxml，在文件infoDetail.wxml页面中输入如附录图21所示的所有代码。

至此，已经实现在首页页面点击名称为"相机"的失物帖，其效果图如图4.28所示。

图4.28 名称为"相机"的失物帖详情

4.5发布页的二级分类设计

1、实现目标：

简化用户发布流程，通过二级分类快速选择物品类型。为了在发布页面实现二级分类检索，滚动选择一级分类，在二级分类中出现对应一级分类的细分物品，如一级分类选择生活用品，二级分类就会出现对应的水杯、雨伞、钥匙等细分物品。

2、技术方案：

使用 picker-view 组件实现滚动选择器，数据通过 JavaScript 动态绑定。一级分类（如"电子产品"）与二级分类（如"手机/耳机"）联动更新。

3、项目成果展示：

用户选择"生活用品→雨伞"后，表单自动填充分类字段，如图4.29。提交数据时，后端校验必填项并返回操作结果提示，如图4.30。

图4.29 二级分类	图4.30 自动填充分类字段

4、代码实现

为了在发布页面实现二级分类检索，滚动选择一级分类，在二级分类中出现对应一级分类的细分物品，需要使用嵌入页面的滚动选择器picker-view，分别对publish.wxml、publish.wxss和publish.js文件进行编辑。

编辑publish.wxml，编辑publish.wxml文件，添加如附录图22第14行到25行代码。

编辑publish.js，编辑publish.js实现动态数据的显示，如附录图23所示。

至此，已经实现了发布界面二级分类检索滚动选择，运行效果图如图4.31所示。

图4.31 发布界面二级分类检索滚动选择效果图

第五章 总结与展望

5.1研究成果总结

从微信小程序的入门、选题、开发到完成整个项目，期间经历了很多坎坷，遇到很多困难，通过一步步的学习积累，逐步克服技术问题，在摸爬滚打中逐步推进项目，到今天整个项目的完成，我收获满满。通过成功开发出一个功能较完善且性能稳定的校园失物招领小程序，无论是在技术方面，还是在研究经验方面，我都学到了很多的东西。首先，在技术收获方面，掌握了微信小程序开发技术，包括前端与后端开发，学习了数据库设计与优化，提升系统的性能。其次，在研究经验方面，通过项目实践，积累了系统开发与测试经验，提升了项目管理能力。

在开始选题时，由于刚接触微信小程序开发，对于未来自己要开发什么项目没有任何头绪，感觉到无从下手，通过在网上查询信息，最终确定做校园失物招领小程序，做这个项目的初衷是想到自己在大学期间经常丢东西，雨伞丢过一把，校园卡丢过一次，小风扇丢过两次，我试图去找回它们，但是每次都以失败告终，经常在路上、楼道里、食堂座椅上、教室的桌子里看到遗失的物品，即使想帮失物归还这些失物，但却找不到这些失物的主人，只能熟视无睹，袖手旁观，联想到在校园里的种种丢失物品的现象，我痛并思痛，决定做一个校园失物招领小程序，减轻大学生丢失物品，无处寻找的困难，为大学生招领失物提供一个便捷的平台。

在完成项目的过程中，面临的困难不只是完成项目要解决的技术问题，还要平衡考研和开发项目的时间和精力分配。在考研的这段日子里，总感觉时间如白马过隙，悄然而逝，每天自己的时间被数学、英语、政治和专业课占据，留给做作业的时间被严重压榨，少之又少，考研的压力让我身心俱疲，我已无暇顾及其他事情，但是作业是我必须要完成的任务，我像挤海绵里的水一样，每周挤出一些时间来完成我的项目，好在老师非常体谅我们，在督促我们推进项目的过程过中，总是给予我们照顾，宽限考研同学的任务检查时间节点，为考研的我们争取了更多的时间去投入到备考中，非常感谢老师的宽容和谅解，缓解了我们的压力和焦虑。

5.2系统不足与改进方向

路漫漫兮其修远兮，吾将上下而求索。收到主客观因素的影响，该小程序业务需求方面存在一定的欠缺，尚需要完善和改进的地方有很多，在以下几方面我还需要进一步做出努力。第一，整个项目的功能仅仅围绕寻主和寻物，缺乏丰富的社交功能，比如说开放的社交讨论区；第二，开发小程序使用的技术栈不够丰富，前端仅使用了wxml、wxss、js、微信小程序原生API,后端使用Express框架、MongoDB数据库等；第三、增加在线地图数据服务，并新增推送和奖励模块，提高人们归还物品的积极性14；第四，失物认领功能不够安全完善，应加强认领身份鉴定，比如增加人脸识别功能，避免恶意认领，提升失物认领的准确性和安全性15。第五，增加基于图像文字识别技术设计失物招领微信小程序，该程序能够拍照识别证件中的文字信息，实现失物信息的自动填充，有效提高了失物招领信息发布的效率16。后续会继续优化和完善数据库，提升表查询效率，创建多个表来高效管理自己的数据，使用更加丰富的技术，来丰富自己的失物招领小程序的功能，比如说添加社交讨论区等等来增加用户的交互功能，最后还需要在页面的美观度和协调度上做进一步的努力，增强用户的体验感；

参考文献

王怡素,王小雨."互联网+"运输服务热线信息系统的设计与应用J.大众科技,2024,26(01):1-4+13.

秦彬,李冰,樊续徳,等.校园失物招领小程序的设计与开发J.无线互联科技,2022,19(20):84-88.

田格斯,罗立源.茫崖：数字赋能城市建设发展N.柴达木日报,2025-04-01(003).

张光河.微信小程序开发实战入门M.清华大学出版社:北京, 2022: 1-2.

Shailer D.Lost and Found: Why are only some "lost" species recovered?J.Scientific American,2024,330(4):8.

宋龙生,倪胜巧.校园失物招领微信小程序的设计与实现J.计算机时代,2021,(10):86-89.DOI:10.16644/j.cnki.cn33-1094/tp.2021.10.022.

王尚杰.高校失物招领网络平台的发展与管理J.广东蚕业,2018,52(12):139+141.

Chargerback, Inc.; Patent Issued for Centralized Lost and Found System (USPTO 9367527)J.Journal of Engineering,2016: 1-2.

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

张李鹏,李旭,李香菊,等.高校失物招领在微信小程序中的实现J.电子制作,2022,30(08):50-53.DOI:10.16589/j.cnki.cn11-3571/tn.2022.08.028.

白歌,张妍,张芳建,等."同途"微信小程序的设计J.科技资讯,2024,22(23):75-78.DOI:10.16661/j.cnki.1672-3791.2406-5042-1336.

李锦路.基于Cesium的智慧工地协同平台研发D. 沈阳:沈阳工业大学,2023.DOI:10.27322/d.cnki.gsgyu.2023.001137.

韦艳.大数据时代背景下计算机信息处理技术的效果分析J.无线互联科技,2025,22(05):98-101.

Jiang L,Mao H,Kang Z.The Design of Campus Lost and Found Platform Based on Digital Map DataC//Institute of Management Science and Industrial Engineering.Proceedings of 2019 International Conference on Computer Information Analytics and Intelligent Systems(CIAIS 2019).Ya'an Polytechnic College;School of Mechatronical Engineering,Sichuan Agricultural University;,2019:69-73.

朱文静.基于人脸识别的高校证件招领系统设计与实现J.电子元器件与信息技术,2024,8(07):79-82.DOI:10.19772/j.cnki.2096-4455.2024.7.024.

梁微,钱彤,范鑫.高校失物招领平台搭建及其效果------以西南财经大学为例J.高校后勤研究,2024,(S1):123-125.

附录

校园失物招领小程序项目关键之处的代码实现：

图1 修改app.json文件（一）

图2 修改app.json文件（二）

图3 修改app.json文件（三）

图4  创建SearchInput页面

图5 修改app.json文件

图6 编辑index.wxml

图7 编辑index.json

图8 编辑index.js

图9 编辑SearchInput.wxml

图10 编辑SearchInput.js

图11编辑SearchInput.json

图12 编辑search.wxml

图13 编辑search.wxml

图14 编辑search.js

图15 编辑index.wxml

图16 编辑index.js

图17 Node.js后端处理

图18 修改app.json

图19 在index.wxml中添加toDetail事件

图20 在index.js中插入toDetail事件的实现代码

图21 编辑infoDetail.wxml

图22 编辑publish.wxml

图23 编辑publish.js

致谢

教学楼前的海棠花开了又谢，谢了如今又开，我目睹了海棠花一年四季的枯荣兴败、緑肥红瘦，海棠花也见证了我大学四载的成长蜕变、春华秋实。文行至此，我的大学生涯也该缓缓落下帷幕了，回顾大学四年的时光，总觉得时间飞逝，让人猝不及防，还清晰记得大一刚踏入校园的懵懂模样。以前觉得2025年的毕业季还很遥远，一转眼，窗外的花已经开的繁盛，空气中弥漫着阵阵花香，我伏在案前，写着我的毕业论文致谢，大学四年，说长也不长，说短也不短，期间帮助陪伴我的人很多，在这里我就不再一一列举，其中对我影响巨大的是我敬爱的论文导师------张光河老师、可爱的室友、亲爱的父母。

非常感谢我的导师，在论文推进过程中，老师非常体谅我们，总是给予我们照顾和帮助，宽限考研同学的任务检查时间节点，为考研的我们争取了更多的时间去投入到备考中，非常感谢老师的宽容和谅解，缓解了我们的压力和焦虑。同时也感谢老师的不啬赐教，不是老师的指导，我的论文也无法顺利完成，得遇恩师，如沐春光。

小小一室，共处四人，我们四个来自天南海北，有来自椰风海韵的海南，有来自人杰地灵的安徽，亦有来自苍茫壮阔的甘肃。共处的四年，我们既是和睦的室友又是亲切的朋友，在学习中，我们是共同进步，互帮互助的学习搭档，我们一起上课自习，遇到难题共同探讨，在交流中总是碰撞出灵感的火花；在生活中，我们是亲密无间的朋友，周末时一起外出游玩，享受美食带给我们的乐趣，也会在宿舍关灯后畅所欲言，聊到深夜也乐此不疲。总之非常感谢她们给予我的帮助和关照，让我的大学生活充满乐趣。

父母永远是我成长道路上最坚实的后盾，在我求学路上给予我无限的关怀和爱，他们在我的身后默默支持我，当我遇到困难时，他们殚心竭虑，为我操碎了心；当我遇到挫折和失败时，他们耐心倾听，宽慰我的同时鼓励我重拾信心；当我的选择的十字路口徘徊时，他们为我提供思路，坚定地支持我的选择。感恩父母，养育之恩，疼惜之德，终不忘。

笔停，然言有尽而意无穷，感慨人生就像坐公交，一站有一站的风景，一站有一站的人。人生不是轨道而是狂野，最后祝愿大家前途漫漫亦灿灿。

安瑞瑞

2025年4月20日