基于HTML5智能垃圾分类回收系统的研究与设计

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《基于HTML5智能垃圾分类回收系统的研究与设计》，欢迎阅读！

基于HTML5智能垃圾分类回收系统的研究与设计

作者：王丽娜 汝晨 李青穗

来源：《科技创新导报》2020年第05期



摘 ; 要：“移动互联网”+智慧生活，本研究以HTML5技术及移动智能客户端（APP）为基础进行智能垃圾分类回收系统的设计，包括基础信息管理、分类指南以及数据分析等，对系统的技术架构进行设计。通过智能垃圾回收装置实现垃圾的智能分类回收，本系统的研究与设计提高人们对垃圾分类回收的观念，同时可有助于智慧城市建设。 关键词：HTML5 ;智能回收 ;物联网

中图分类号：X799.3 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;文献标识码：A ; ; ; ; ; ; ; ; ; ; ; 文章编号：1674-098X（2020）02（b）-0122-02

“移动互联网”+技术迅速发展，智慧城市、智慧生活是当前城市发展倡导的主题。垃圾的分类回收是每个城市角落中不可或缺的元素，目前，在国内生活废品主要是个体从业人员或垃圾回收站点进行回收，之后进行再次利用。此流程中过程繁多，管理不规范从而影响市容市貌，并与当前的智慧城市发展互不协调。因此，本文对垃圾智能分类回收问题进行研究，结合基于物联网技术的智能回收装置，研究设计一个基于移动终端的垃圾智能分类回收系统，促进全民垃圾分类意识的增强，来改变城市垃圾的分类、收集方式，完善城市生活垃圾处理手段，建立绿色循环经济。系统结合HTML5、CSS等前端开发技术，实现友好的用户交互界面。 1 ;HTML5技术基础


HTML5技术是当前移动前端实现的主流技术，利用HTML5技术能够实现移动智能终端设备上的分辨率自适应，其具有以下特征：（1）语义结构化标签，HTML5的hgroud， header， footer，section标签，更有助于编程人员对于页面布局架构的设计实现，同时页面的层次清晰性大大提高;（2）HTML5的离线缓存功能，HTML5本身携带一个小型数据库locaStorage，没有时间限制的数据存储，同时HTML5还具有sessionStorage针对一个session的数据存储。HTML5使网页在不影响网站性能情况下存储大量数据成为可能。并且通过IndexedDB模块对复杂数据进行储存，能够实现数据的离线缓存，在无网络环境下用户也可以对系统进行简单操作。（3）HTML5技术在实页面中加载音频或视频时可通过audio和video直接实现，同时能够优化界面的图形功能。 2 ;系统功能架构分析

系统在设计理念上以环保行业的需求为基础，运用基于智能物联网的智能回收装置，基于移动互联网技术将垃圾回收这一传统的行业与最新的信息化技术相结合，建设一个综合性的集用户管理、信息管理、交互、数据分析等综合信息管理平台。该技术平台基于Android智能终端、物联网大屏智能终端实现。在本系统业务逻辑中可实现垃圾信息采集，垃圾回收至再次利用的过程跟踪，还可以通过连接第三方接口实现支付功能，可跟支付宝支付平台、微信支付平台进行连接实现垃圾所换价值的支付。能够方便快捷的为市民提供便利的垃圾处理方式，同时也服务了低碳环保事业。本系统的系统架构采用传统三层模式：客户交互层、业务处理层以及数据层，其中客户交互层基于移动智能终端实现，以App或微信小程序的形式作为与用户的的交互接口。业务层是系统的核心，根据系统的功能需求分析，包括以下几个模块：分类回收指南、投递指南、上门回收、扫码投递、个人中心、后台服务管理等功能模块。

后台服务管理模块包括：用户信息管理模块，管理用户的账号密码等基本信息、用户角色分类信息、用户权限等;信息统计模块：可实现跟踪记录用户的投递信息，包括垃圾投递时间、投递垃圾的分类信息以及用户的投递次数。用户资金积分管理模块：在用户投递完成以后，系统会根据用户投递垃圾的分类情况以及当前市场价格向用户返回一定的现金或者积分（积分可实现兑换现金，或参与其他兑换活动），此模块记录用户的所有已获资金情况，编程实现过程中连接第三方支付平台接口。回收站监控模块：监控回收站的投递情况;二维码管理模块：实现手机端与服务大屏的交互，在后台管理中采用动态生成二维码技术，实现用户信息的安全性。还有数据同步模块。系统的总体框架如图1所示。 3 ;关键技术实现

移动互联网技术发展迅速，移动智能终端设备层出不穷且多样化，本系统基于移动智能终端设备展现，因此系统终端页面的自适应性是在系统开发过程中需解决的一个问题。系统基于HTML5技术设计实现，根据HTML5技术特点，系统可实现跨平台部署，后台业务层管理模块只需要提供相应的一些数据接口，由智能前端进行调用。在技术架构中，终端设计可结合开


源框架PhonGap的混合模式进行设计，PhonGap是集成HTML+CSS+JavaScript的终端设计框架。

为使数据能更好的展现在移动智能终端，在终端与后台数据交互中采用JSON数据封装进行数据传输。JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。这种格式易于开发人员编写和阅读，同时也易于计算机解析和生成。基于HTML5的离线缓存技术，将轻量级的JSON数据封装包缓存至页面，同时移动终端也可将JSON数据离线下载到本地，实现在不交互的情况下，用户可进入系统进行浏览信息。

确保智能分类回收系统中实现离线功能，在前端技术框架中添加缓存清单文件。此清单文件涵盖了离线状态下移动应用中所需要的所有离线数据，数据通过移动智能终端调用后台服务接口，将数据下载到本地文件，以JSON数据格式进行存储。断网状态下，用户登录时会根据对应清单文件下载，系统首先解析离线存储到本地的JSON数据，进行终端页面展示。通过应用离线功能，即使用户断开网络，也可以根据缓存清单文件有效使用系统应用提供的各项服务。 4 ;结语

本系统基于城市生活垃圾的处理提出了智能回收解决方法，基于HTML5等终端技术给出了系统功能设计与系统技术框架，以及在开发中智能终端的技术解决路线。能够基本实现智能垃圾分类回收系统的功能设计。本研究有利于城市生活垃圾的进一步利用和管理发展。但智慧生活主题使我们今后生活的方向，如需垃圾智能分类回收解决方案有突破性进展，还需更深入的研究。 参考文献

[1] 冯娟.实现生活垃圾分类回收再利用[N].中国环境报，2018-02-05.

[2] 徐卉.基于HTMLS的垃圾分类宣传方式研究与实践[J].电脑知识与技术，2018，7（14）：180-182.

[3]吴新华.“互联网+”模式下生活垃圾分类的研究与分析[J].无线互联科技，2019，7（13）：126-128.

[4]吳碧程，邓详恩，张子憧.基于卷积神经网络的智能垃圾分类系统[J].物理实验，2019，11（39）：44-49.

本文来源：https://www.wddqxz.cn/0fe7b0bea617866fb84ae45c3b3567ec112ddcc7.html