《基于微信小程序的垃圾分类系统设计与实现》8700字

II基于微信小程序的垃圾分类系统设计与实现摘要绿水青山即金山银山，所以人们在新时代建设美丽中国时也不能忘记营造绿水青山。在发展的过程中，垃圾的分类也成为一个问题。垃圾产生的根本原因是资源没被充分利用就被抛弃，而这种浪费资源的结果对于人们的损失是无法衡量的。开发的系统是一个依托于微信平台的垃圾分类系统。系统主要的功能是辨别垃圾所属的种类，包括在线测试答题、用户留言、垃圾查询、垃圾类别提示等功能，便于用户能快速对垃圾进行分类处理。整个实现过程中使用的核心技术包括JavaScript、Vue、SpringBoot、Mybatis等技术以及一定接口进行业务逻辑的开发，MySQL进行数据的存储。该系统将现代互联网的优势与保护环境结合起来，该系统上线后能够为用户提供垃圾分类帮助，加深人们对垃圾分类的了解。有助于提高资源利用率，对有害垃圾采取更加环保的处理，减少环境污染。关键词：环保；垃圾分类；微信平台；

目录1．引言 11.1项目的研究背景 11.2项目的研究意义 11.3项目的主要研究内容 11.4项目的重点和难点 22．系统可行性分析和开发技术 32.1系统可行性分析 32.2系统开发技术 42.3部署环境 53．系统整体设计 63.1系统用例图 63.2数据库设计 63.3系统页面设计 94．系统实现 114.1垃圾分类系统首页 114.2查询页面 124.3分类页面 154.4在线答题页面 164.5留言页面 205．系统测试 225.1测试目的 225.2测试内容 225.3测试用例 22总结 25参考文献 26第1．引言1.1项目的研究背景垃圾分类话题在各国都备受关注。上个世纪五六十年代，日本政府通过填埋和焚烧的方式来处理垃圾问题。那个时候，也并未全国人民参与垃圾分类中。在德国，购买饮料时需为装饮料的容器支付额外的押金，并将其归还到指定的回收机器后,才能返还押金。在巴西，为了让人们充分的处理物品,政府曾发起过"让垃圾不再是垃圾"的活动,人们可用一定量可回收垃圾兑换一定量的食物或者文具等物品。【1】根据国内外对于垃圾的处理方法来看，大多都是参考垃圾的成分、产生量，再结合当前的垃圾处理方法来进行分类。随着中国经济的飞速发展，国家的各项建设都取得了不错的成绩。人们生活水平逐渐提高,但也出现了城市生活垃圾的处理问题。【2】垃圾分类难以完成的主要原因包括人口基数大，人们的平均素质不够，垃圾的种类比较多，经济条件和监管程度也有差距。在中央财经领导小组的第十四次会议上，习总书记提到“要加快创建分类投放、收集、运输和处理的垃圾处理系统。【3】《生活垃圾分类制度实施方案》提到的三个分类：有害垃圾、易腐垃圾、可回收物。这次方案明确的说明了相关的法律法规和激励制度，但相关硬件设备，相关条款没有具体推行。1.2项目的研究意义垃圾分类不仅是对垃圾传统处理方式的革新，也是提升有效处理垃圾的一种科学方法。大家都知道垃圾是未被完全利用的资源，如果能够进行正确的分类便能够使其成为新资源。但真要将其正确分类，很多人还是会感到茫然失措。该项目基于这个问题进行开发，使用户能通过小程序对垃圾分类，从而充分利用资源。小程序与常见的APP不同点在于不需要下载，节省了手机内存空间。小程序加载速度快，用户直接微信扫码或搜索便可使用。该项目结合了垃圾分类的相关政策，并结合互联网时代智能手机普及和微信用户基数大的特点，将移动应用技术与生活垃圾处理及分类现状结合起来。该项目适宜国情垃圾处理模式和技术发展的主流趋势。如果大众都具有良好的垃圾分类意识，那么将有助于共建资源节约型和环境友好型社会，有助于进一步提高国家生态文明建设水平和新型城镇化质量。1.3项目的主要研究内容该项目是基于微信平台实现的垃圾分类小程序，主要的功能在于垃圾分类。本系统的设计指标为：首先，设计的该系统能够通过文字直接搜索对垃圾进行分类。其次，设计的该系统有一定垃圾类别数据。该系统的主要功能介绍：1．文字搜索：用户可以直接在文字搜索框内输入内容进行查询，小程序对输入的文字与后台数据进行文字匹配，并显示出查询结果。2．垃圾分类指南：用户可以选择小程序中的垃圾分类指南模块，该页面会显示湿垃圾、干垃圾、有害垃圾和可回收物的定义，主要类型和投放要求。3．在线答题：用户除了使用常用的垃圾分类功能之外，还可以通过垃圾分类在线答题来检测个人对垃圾分类情况的了解。系统随机产生有关垃圾分类的试题，用户可以选择该功能参与答题，还可分享答题情况，增加了一定的体验感。4．留言模块：用户在留言时，可以勾选留言状态为公开或者不公开。公开状态下，使用该系统的用户都可以看到该条留言。不公开状态下，仅用户本人及管理员可见该条留言。1.4项目的重点和难点该项目的重点主要是以下几点：该系统主要分为服务端和小程序端，服务端主要用Java语言，小程序端主要是vue。涉及到的软件主要是微信开发者工具、Hbuilder、IDEA等软件。首先，该系统中最主要的一个功能即垃圾分类识别功能，作为最核心的功能必须优先完成。其次是垃圾分类的有关数据处理，需准备一定的数据为项目测试做准备。该项目的难点主要是以下几点：在学习期间的主要训练是关于网站方面，缺乏微信小程序开发经验，所以在做该项目的过程中会遇到一些困难。首先是开发方面的困难，vue以及uni-app框架的使用。对vue和软件的不熟悉，平时接触的项目大多是用Java语言开发。vue的语法，微信开发者工具的配置，垃圾数据的收集获取等问题都是难点。其次是系统的推广与安全方面。该系统的用户数据需要进行隐私保护，同时后期该系统也需要推广和维护，目前没有一定的经济支持，所以也是其中的一个难点。2．系统可行性分析和开发技术2.1系统可行性分析1．技术可行性分析该系统主要分为服务端和小程序端，服务端涉及Java，小程序端涉及vue。在众多编程语言中，Java的使用较为广泛，很多技术和框架都是用Java写的，许多公司也常采用Java语言进行开发。Java具有多线程、面向对象、分布式、动态性等特点，且有良好的跨平台能力。Java封装了很多功能，比如文件的上传与下载、JSON操作库、数据库操作等功能。而uni-app是一套易适用于多端的开源框架，一套代码可生成H5，Android，微信小程序等。uni-app有较强的拓展力,支持nvue，同时也支持Android和ios的开发。虽然vue是轻量级框架，但提供的API容易理解，提供指令较便捷，很人性化。数据库选择MySQL，因为其开源且提供免费版本能降低使用成本。并且MySQL的运用范围广,跨平台性好,提供很多语言的调用API,与其他数据库相比而言，复杂程度更低，易于项目开发使用。2．社会可行性分析在生活中会产生很多垃圾，而这些垃圾会隐藏很多危害，不知不觉中影响人们的生活，甚至影响着城市的形象。垃圾分类是一件非常有必要的事情。目前垃圾分类虽然还未强制进行全国普及，但是国家已经采取了一定措施。比如试点先行，再统一标准，全国通行。无论是从现在还是未来出发，垃圾分类都是件非常有益的举措，国家也推出了相应的政策来实行垃圾分类。2019年7月1日开始实施《上海市生活垃圾管理条例》。这项举措意味着，上海的垃圾分类即将进入强制时代。【4】目前国家处于垃圾分类的初级阶段，想要更好的效果不能通过强制这种手段解决，还需要不断培养人们的垃圾分类意识。而该系统除了能够方便大家进行垃圾分类以外，同时也可以让用户了解与垃圾分类相关的知识，培养垃圾分类意识。3．经济可行性分析该系统主要是实现垃圾分类功能，一方面为了方便人们进行垃圾分类，充分发挥资源的价值。另一方面也能够培养人们的垃圾分类意识。该系统目前没有相应的经济支持，后续推广及维护该系统则需要一定的支持。首先结合目前垃圾分类的形势来看，该系统的研发角度是与之相契合的，后续将会得到一定的支持。其次，该系统可以与专门的单位进行合作，拥有特定的系统实施地的保护和一定的经济支持，实现合作共赢。2.2系统开发技术1．Javascript该项目主要使用的语言是JavaScript，其具有的跨平台特性，能在大部分浏览器的支持下，运行于不同平台。JavaScript主要是用以表现小程序中的逻辑结构，其中包含了页面的操作处理和小程序的API调用等。2．SpringBootSpringBoot在项目中的使用也很常见。通过SpringBoot可以很快构建项目。且项目无需配置集成，无外部依赖Servlet容器也可独立运行。有效的提高了开发者的开发和部署效率。SpringBoot应用程序与Spring生态系统容易集成，降低了开发的工作量。其提供的插件也降低了嵌入式和内存数据库的工作难度。3．MybatisMybatis内部封装了JDBC，是半自动化的ORM持久层框架。在项目开发时开发人员只需注意sql语句本身。Mybatis可通过使用注解或xml等方法来配置项目所需执行的各种statement。Java对象与statement的sql动态参数映射可产生最后执行的sql语句，Mabtais框架执行sql语句后将结果映射为Java对象返回。4．Uni-appuni-app与小程序中的组件和API差不多，支持微信小程序的自定义组件，且插件丰富。其使用vue.js可开发跨平台应用前端框架。使用时编写的一套代码，可同时编译到Android、iOS和小程序等多个平台。其能够跨平台发行，运行体验更好。5．MySQL关系型数据库的技术比较成熟，是目前使用得较多的数据库管理系统之一。目前常见的关系型数据库主要是Oracle、MySQL和SQLServer。而MySQL是一个多线程、多用户的数据库服务器。结合其开源特性，很多项目开发都会选择MySQL,且有很多的MySQL软件可使用。比如Navicat，在使用时有一定的经验，降低开发难度。6．Vue.jsvue.js是一套便于构建界面的渐进式框架。vue采用自底向上的增量开发设计是和其他框架不同的地方。vue较容易学习，其核心库重在关注视图层，比较便于与其它库或已有项目的整合。vue.js的核心在于响应式数据绑定系统。2.3部署环境首先准备有关开发项目所需的IDE和JDK,uni-app前端开发需要下载Hbuilder,后端开发Java需下载IDEA。其中有些功能需要使用百度的智能云平台服务，开发人员需注册并拥有应用。其次是准备数据库，创建数据库名为GarbageSort，并且建立对应的表，收集一定的数据。在开发的时候还需要新建微信小程序账号，并且下载安装微信开发者工具，完成相应的账号绑定与配置。3．系统整体设计3.1系统用例图根据系统的设计得出用户用例图如图3.1所示：图3.1用户用例图3.2数据库设计按照项目整体设计，本系统设计了垃圾题库表、挑战明细记录表、挑战结果及详情记录表、关键词及结果记录表，搜索关键词及次数记录表、留言表、图片播放表。（1）创建垃圾题库表：该表主要是为整个系统提供垃圾的相应数据。表主要是存放垃圾的ID、类别，以及垃圾的名字和备注等属性。垃圾题库表如表3.1所示：表3.1垃圾题库表列名意义类型长度索引类型不是nullquestion_id垃圾idint11主键否garbage_type垃圾类别tinyint2无是garbage_name垃圾名称varchar50唯一索引是analysis解析varchar255无是remark备注varchar200无是（2）创建挑战明细记录表：该表主要是用于存放用户在线答题的详情。其中设计一个字段记录用户是否回答正确。挑战明细记录表如表3.2所示：表3.2挑战明细记录表列名意义类型长度索引类型不是nullid挑战idint11主键否whether是否正确；1:正确；0:错误tinyint4无是question_id问题idint11无是garbage_name垃圾名称varchar100无是garbage_type垃圾类别tinyint4无是selected_typetinyint4无是（3）创建挑战结果及详情记录表：该表主要是用于记录用户的在线答题挑战结果。其中包括用户挑战分数、挑战结果以及挑战时间等信息。挑战结果及详情记录表如表3.3所示：表3.3挑战结果及详情记录表列名意义类型长度索引类型不是nullid挑战idint11主键否score挑战分数int11无是result挑战结果json0无是times挑战时间timestamp0无否user_name用户名称varchar100无是（4）创建关键词及结果记录表：该表中设计了keyword字段用于进行关键词搜索，以及记录搜索结果和时间。关键词及结果记录表如表3.4所示：表3.4关键词及结果记录表列名意义类型长度索引类型不是nullididint11主键否keyword关键词varchar100无是result搜索结果json0无是times搜索时间timestamp0无否（5）创建搜索关键词及次数记录表：该表主要是用于存放垃圾被经常搜索的次数。搜索关键词及次数记录表如表3.5所示：表3.5搜索关键词及次数记录表列名意义类型长度索引类型不是nullid挑战idint11主键否keyword关键词varchar100无否num搜索次数int11无是times搜索时间timestamp0无否（6）创建留言表：该表中主要存放的是用户的留言信息。其中包含了用户留言的状态，公开或非公开等信息。留言表如表3.6所示：表3.6留言表列名意义类型长度索引类型不是nullididint11主键否content留言内容varchar2048无是type留言状态；1公开；0不公开tinyint1无是create_time留言时间timestamp0无是nick_name留言的用户varchar255无是open_id留言用户的idvarchar255无是（7）创建图片播放表：该表中主要存放的是系统所需的一些图片。图片播放表如表3.7所示：表3.7图片播放表列名意义类型长度索引类型不是nullslideidint11主键否user_id是否启用varchar1无是sort_id排序idtinyint11无是image_url图片地址timestamp200无是skip_url跳转的链接地址varchar200无是（8）创建用户表：该表中主要存放用户的一些信息。用户表如表3.8所示：表3.8用户表列名意义类型长度索引类型不是nulluser_id用户idint11主键否nick_name用户昵称varchar100无是gender用户性别tinyint4无是3.3系统页面设计1．垃圾分类系统首页用户进入本系统后会默认显示垃圾查询界面，用户可通过在文本框输入文字进行搜索识别。本页面主要功能是提供查询垃圾种类，所以整个界面主要是以文字输入查询为主。除此之外，该页面还设置了几种常见垃圾种类，用户通过点击不同的类别即可跳转到对应的页面。在该系统页面底部放置了垃圾分类、在线答题、留言等板块，用户点击对应的模块可跳转到该页面。该页面设计简洁，操作相对简单，符合用户设计规范。2．查询页面用户在首页点击查询后会进入垃圾分类查询页面，在识别页面显示出查询结果，并提醒投放要求。如用户输入的是苹果，点击查询后显示苹果属于湿垃圾，并提示与湿垃圾有关的投放要求。3．分类页面在该页面，主要是提供了四种基本垃圾种类，其中包括湿垃圾、干垃圾、有害垃圾和可回收垃圾。除了相应的垃圾类别解释外，还有与之对应的常见垃圾数据。用户能够在该页面直接看到某类垃圾下有哪些常见的垃圾。4．在线答题页面在该系统中，用户能使用常见的垃圾分类处理功能，还能通过系统的在线答题功能检测自己对于垃圾分类有关知识的理解情况。点击在线答题这个模块后，该页面会产生十道有关垃圾分类的题目，用户通过答题功能可以提升对垃圾分类的了解。用户可以在空闲的时候进行在线答题，答题结束后，该页面会显示用户的答题情况，用户可以巩固错题，并且可以进行成绩分享或者继续挑战。5．留言页面留言页面提供的留言功能能够让用户充分发表自己的看法。包括用户对垃圾分类系统功能的使用情况反馈和自己系统中垃圾分类知识的疑惑等方面。用户点击留言板块后，在文本框内输入想要的留言信息，同时可以选择公开或不公开，公开状态下，所有使用该系统的用户都可以看到。不公开的状态下，只有管理员和用户可以看到。该模块设计从一定程度上保证了用户的隐私。

4．系统实现4.1垃圾分类系统首页该页面中包含view视图容器，index目录下用css、vue文件设置页面的相关属性。系统首页的页面布局从上到下依次是：轮播图、查询输入框、提示栏、导航区。其中首页轮播图的实现需要调用组件swiper，可以用indicator-dots属性显示轮播图的指示点，而interval属性可以用以设置轮播图的自动切换时间间隔。其中的swiper-item标签包含了轮播图的每一个子项。在轮播图的下面提供了一个通告栏，目前用于友好信息的提示。系统首页效果图如图4.1所示：图4.1首页效果图系统首页轮播部分代码如图4.2所示：图4.2首页轮播部分代码图4.2查询页面查询页面主要是实现垃圾查询功能。该页面使用view将页面分为几个板块，从上往下依次是：查询框、历史搜索、热门搜索。用户通过主页的查询按钮可跳转到这个页面。用户未输入时，以水印方式显示在输入框，不输入内容搜索会默认搜索关键字，也可以自己输入内容点击查询，根据查询内容显示出对应的信息。历史搜索记录可以选择删除，热门搜索可以选择隐藏。查询页面效果图如图4.3所示：图4.3查询页面效果图查询结果效果图如图4.4所示：图4.4查询结果效果图输入查询部分代码图如图4.5所示：图4.5输入查询部分代码图历史搜索、热门搜索部分代码图如图4.6所示：图4.6历史搜索、热门搜索部分代码图4.3分类页面该页面主要提供了常用的几种垃圾类别以及对应的垃圾数据。布局上运用view分为两个板块。利用view的class属性设置样式。左侧主要是垃圾类别，右侧是垃圾类别的解释。my-popup是一个JavaScript弹出层，弹窗和对话框组件。该页面使用my-popup弹窗组件，针对不同种类垃圾显示与之对应的数据。分类页面效果图如图4.7所示：图4.7分类页面效果图分类页面部分代码图如图4.8所示：图4.8分类页面部分代码图my-popup弹窗部分代码图如图4.9所示：图4.9my-popup弹窗部分代码图4.4在线答题页面在线答题页面提供垃圾答题测试功能。页面从上到下依次为：挑战题目，答案选择，题目计数。用户通过点击图片回答问题，系统记录用户答案并显示挑战结果页面。在线答题页面效果图如图4.10所示：图4.10在线答题页面效果图答题页面效果图如图4.11所示：图4.11答题页面效果图挑战结果页面效果图如图4.12所示：图4.12挑战结果页面效果图挑战题目部分代码图如图4.13所示：图4.13挑战题目部分代码图答案选择部分代码图如图4.14所示：图4.14答案选择部分代码图题目计数部分代码图如图4.15所示：图4.15题目计数部分代码图挑战结果部分代码图如图4.16所示：图4.16挑战结果部分代码图4.5留言页面留言页面主要分为两个部分，首先是将系统中公开的留言显示，其次是进行留言。用户通过点击留言主页的图片触发navigateTo()方法，跳转到留言界面进行留言。留言页面效果图如图4.17所示：图4.17留言页面效果图不同状态留言效果图如图4.18所示：图4.18不同状态留言效果图留言页面部分代码图如图4.19所示：图4.19留言页面部分代码图不同状态留言部分代码图如图4.20所示：图4.20不同状态留言部分代码图

5．系统测试5.1测试目的系统测试即在一定的条件下对程序进行操作，以此来发现程序的错误，评估程序是否满足设计要求。系统测试常见方法为黑白盒测试。在本次开发过程中，主要测试系统的功能板块与整体性。5.2测试内容测试内容主要分为：功能测试：根据系统设计的功能板块为主，然后进行细化，尽可能覆盖系统每个功能的测试点。UI页面测试：通过测试尽可能确保小程序UI符合预期的效果图，以及页面是否美观，页面交互操作是否友好，是否易操作。兼容性测试：根据官方文档可知，微信小程序在Android和ios上的运行是不同的。所以在测试的时候要尽可能覆盖这两个系统。由于微信小程序SDK的API版本更新快，导致SDK的API有可能出现兼容性问题。5.3测试用例根据测试内容主要设计了以下几个测试用例：表5.1轮播功能测试表操作预期情况实际情况是否修改不控制轮播图片轮播图片自动切换和预期情况一致未发现问题无需修改控制轮播图片滑动方向轮播图按控制滑动方向切换和预期情况一致未发现问题无需修改表5.2查询功能测试表操作预期情况实际情况是否修改文本框不输入内容点击查询显示默认的内容所属类别和预期的测试情况一致未发现问题无需修改文本框输入内容点击查询显示输入的内容所属类别显示输入内容的所属类别，未加载对应图片修改对应板块的image组件的路径表5.3分类页面功能测试表操作预期情况实际情况是否修改点击分类页面显示分类页面及数据，默认第一类别和预期的测试情况一致未发现问题无需修改点击分类页面中的某一类别显示对应类别图片及对应数据未显示对应数据检查数据库连接文件点击类别下面的某一物品显示该物品所属类别和预期的测试情况一致和预期的测试情况一致表5.4在线答题功能测试表操作预期情况实际情况是否修改点击物品正确的所属类别显示下一题和预期的测试情况一致未发现问题无需修改点击物品错误的所属类别提示错误信息，显示下一题和预期的测试情况一致未发现问题无需修改点击继续挑战回到在线答题页面和预期的测试情况一致和预期的测试情况一致点击考考别人出现分享页面和预期的测试情况一致和预期的测试情况一致表5.5留言功能测试表操作预期情况实际情况是否修改点击留言页面显示非公开留言信息显示出了非公开的留言从数据库获取数据的语句加入留言状态条件限制点击按钮进行留言跳转到用户留言页面和预期的测试情况一致未发现问题无需修改输入留言信息，勾选是否公开后点击保存显示新增加的留言信息和预期的测试情况一致未发现问题无需修改输入留言信息，不勾选是否公开后点击保存不显示新增加的留言信息和预期的测试情况一致未发现问题无需修改总结在该系统的开发中没有特别严重的问题，主要的问题还是在于技术的使用。由于缺乏小程序的开发经验，所以在项目开始前看了许多相关文档。其中包括小程序开发文档，uni-app框架，vue如何使用。理论还需与实际结合。在实际写代码的时候，基本上按照文档来编写，对于文档的理解不够到位，缺乏