基于Web平台以及微信小程序的校园厕所环境监测系统设计与实现13000字论文

1基于Web平台以及微信小程序的校园厕所环境监测系统设计与实摘要所是一个禁止吸烟的场所，但在校园的厕所里有很多烟头以及吸烟的现象还是很常见微信小程序端主要面向普通用户使用，普通用户可登录该小程序查看厕所环境的数据、了解厕所等待人数情况、及时收到管理员发布的通知公告以及关键词：校园厕所环境监测；人数等待；Web平台；微信小程序端；NB-IOT技术目录 21.1课题研究背景 21.2课题研究意义 2 3 32.1系统相关核心技术介绍 3 5 63.1可行性分析 6 63.3非功能需求分析 7 84.1系统总体架构 84.2系统软件架构设计 84.3数据库设计 25.1Web系统平台 5.2微信小程序端 第六章系统测试 406.1系统测试环境 6.2系统功能测试 第七章总结与展望 7.1总结 447.2展望 44参考文献 46第一章前言1.1课题研究背景厕所，在这一个不登大雅之堂的场所，就是我们生活中最离不开的场所。进入现代社会，厕所的健康水平，是评价一个社会文明水平的主要标准。同样，在师生们的每天生活学习的校园里，配备干净卫生的厕所，逐渐成为文明校园建设的重要内容。在以前，由于公共卫生管理专业人员技术能力较低，工作难度则会增大，增加了精细化管理作业难度，学校卫生间气味过大的情况往往无法有效处理，而学校厕所吸烟的现象往往也无法及时发现，极大的不便于教师对学校吸烟情况的有效控制，也导致学校如厕环境的空气质量不好，严重影响了人们的如厕体验。课间十分钟，由于学校学生如厕需求量较大，学校也无法确定在卫生间内等待人员的多少，学生无法合理的选择在卫生间如法有效处理学生如厕情况。随着社会经济的发展，人们的生活水平有了很大提升，对公厕在内的公共环境卫生的要求也越来越高[1]。因此，推动校园厕所环境监测的智能化建设尤为重要。1.2课题研究意义为了方便学校对校园厕所的管理，大量减少人力物力以及财力的投入，提升公共服务质量，实现数据可视化，解决传统厕所带来的问题，为此，设计了校园厕所环境以及等待人数监测系统。校园厕所环境以及坑位等待监测系统可以在校园的每个厕所安装设备，可以实时监测厕所环境的温度、湿度、氨气、烟雾、等待人数等，采用NB-IOT技术传输数据，并及时存入数据库中方便管理员调用，平台读取数据库中的数据进行分析并显示，管理员可实时查看监测点的数据。该系统优点众多，平台管理员可通过本系统查看各监测点的实时数据，从而了解监测点的情况，方便管理员管理，避免学生在标有禁止吸烟的校园厕所吸烟，以及为了给学生一个舒适的如厕环境；普通用户可以通过搜索厕所名称了解该厕所的情况，避免在厕所前着急排队的现象，浏览管理员发布的通知公告，普通用户31.3课题研究内容的温度、湿度、氨气、烟雾等数据进行监测和传输，通过NB-IOT无线传输技术，对数第二章系统相关技术及工具2.1系统相关核心技术介绍序端的软件开发，Web端与下位机的数据传输主要通过NB-IOT技术传输，需设计数据图表技术对数据更直观的展示，为了对实现监测点的Ruoyi是一个基于经典技术组合的企业级JavaEE快速开发平台。基本技术采用方便!SpringBoot是一些库的集合，框架中的框架，只要导入相应依赖，它就能够被以jar包形式通过java-jarxx.jar来运行，内嵌servlet容器，降低对环境的要求，自动5低功耗低成本预期NB-IOT模块单价5美元左右IDER全称IntelliJIDEA,是用于java语言开发的集成环境(也可用于其他语言),是公认为最好的java开发工具之一。其特色功能有智能选取完美支持、动态语法监测、代码检查、对JSP的完全支持、智能编辑、EJB支持、列逻能代码、正则表达式的查询和替换功能、JavaDoc预览支持、程序员意图支持等[。最单高效的应用开发框架，并包含了大量的组件及API,极大的方便了开发者开发和调试。视图层包括.wxml和.wxss文件，其中.wxml文件主要用来构建基础元素类似于1、性能快捷、优化SQL语言；7、为多种编程语言提供API。7公告浏览，反馈信息，个人资料浏览，普通用户的用例图如图3-2所示。3.3非功能需求分析9将结果反馈给用户将用户输入的指令和数据择不同的视图图4-2MVC架构示意图4.3系统功能模块设计使用对象为普通用户，即在校学生或老师等，系统功能模块图如图4-3所示。个人中心平面地图个人中心平面地图信息反馈通知公告数据展示通知公告信息反馈数据分析数据展示设备地图图4-3系统功能模块图4.3.3数据库表的设计(1)sys_user(用户信息表),存放字段name数据类型(长度)是否可为空是否否否否否登录账号否否用户昵称否否用户类型否否用户邮箱否否手机号码否否用户性别否否头像路径否否登录密码否否盐加密否否账号状态否否创建时间(2)sys_dept(部门管理信息表),记录部门信息，如表4-2。字段name数据类型(长度)是否可为空是否否否部门名称否否手机号码否否用户邮箱否否部门状态否否否否创建时间否否更新时间字段name数据类型(长度)是否可为空是否角色ID否否角色名称否否角色状态否否否否创建时间表4-7信息反馈表字段name数据类型(长度)是否可为空是否编号否否否否等待人数否否温度否否创建时间第五章系统的主要功能模块设计与实现5.1.1登录模块查询dygetdata数据表，判断是否用这个用户，如果有该用户，就会调用createLoginUser()方法来返回LoginUser类，LoginUser类查询出用户信息，填充在LoginUser中，菜单权限查询成功，异步打印日志，更新用户登录ip、日期，最后生成t用户进入登录界面用户进入登录界面端行用户验证validateCaptcha验口图5-1登录流程图aa图5-2登录界面效果图图(3)点击搜索。平台管理员可通过厕所名称、时间进行检索，通过@RequiresPermissions获取权限，根据厕所名称或时间对dygetdata数据列表进行检索，实现代码如下。{dvgetdataServiceselectDvgetdataList(dygetdata);retumgetDataTable(list);}流程图如图5-10所示。返回查询到的数据显示在页面根据厕所名称、创建时通过startPage(方法实现自动分页通过RequiresPermissions获得相应权限理Post请求实现效果图如图5-11所示。2数距示☑日志世理[填写功能名称]0+添加☑修改*n开始时间a11三2211数据分析主要为数据图表显示，该系统中采用折线图的形式对温度、湿度进行数据展示，采用柱状图的形式对氨气、烟雾进行数据展示，平台管理员可根据需要移动到相进行@GetMapping("")注释来接收图表数据信息，前端通过ajax技术对后端数据解析并显示在界面上。折线图部分代码如下，<scripttype="textjavtemperatureList=newArrayO//温度humidityList=newArrayO//湿度url:"http:/localhost:8008temperatureListpush(data.rows[i].temperaturehumidityListpush(data.rows[i]hum}/**温度、湿度开始*/varlineChart=varlineoption={title:{text:温度、湿度变化'},tooltip:{trigger:'a5.1.4信息反馈模块(1)查看信息反馈。平台管理员可查看由用户反馈的信息反馈内容，通过@RequiresPermissions获得查看信息反馈内容权限，使用startPage(方法配合前端完成自动分页，实现代码如下。publicTableDataInfolistDymessagedymessage){List<Dymessage>list=dymessageServiceselectDymessageList(dymessage);}流程图如图5-22所示。返回查询到的数据显示返回查询到的数据显示在页面通过selectDymessageList根据姓名、班级查询通过startPageO方法实现自动分页理Post请求给搜索按钮绑定搜索事件通过RequiresPermissions获得相应权限实现效果图如图5-23所示。2□varthat=this;url:"/pages/notice/detail/detail?myObdecodeURIComponent(JSONstingifv(myOb公告列表后端主要实现代码如下：publicQueryWrappernoticeList(S{List<SysNotice>list=noticeServiceselectNotice}?公告详情前端实现主要代码如下：varcurrentObi=JSONparse(decodeURIComponent(oconstparams={paramsnoticeld=currenoticeDetail(params).then(rvarhtmlTpl=res.entitynoticeContentWxParsewxParse('artide'."html',htmlTpl,that,5);{JSONObjectitemJSONObj=JSONObject(itemJSONObigetLong("noticeld");}}Promise封装res)请求接口N返回500,提示查询失败@RequestBody接受查询notice表Y返回查询列表，小程序列表显示查询内容then(then(res)请求接口使用JSON.parse()方法将数据转换为对象返回500,提示查询公告详情页接收父页传过来的参数jdct获取noticeld的值转换为JSON字符串的noticeld值图5-28公告查看流程图公告详情温馨提醒：2018-07-01若依新版本发布啦维护通知：2018-07-01若依系统凌层维护进修通知：2021-12-15科技楼八楼厕所维修admin发表于2021-12-14通知公告图5-29通知公告效果图图5-30公告详情效果图5.2.3信息反馈模块馈给管理员，实现人性化平台。前端通过formSubmit(e)请求用户输入的参数，@RequestBody接受数据，使用parseObject()方法将data解析成JSONObject对象保存至dymessage数据表中，流程图如图5-31所示。3paramssubname=e.detail.valuesubname:paramssubclassroom=e.detail.params.subcontent=e.detail.value.subco//请求接口-保存addMessage(params).if(res.entity=="200"){title:'提交成功',}publicQueryWrapperaddM{JSONObjectitemJSONObj=JSONObiectparseObiect(data);Dymessagedymessage=newdxmessagesetSubname(itemJdymessagesetSubclassroom(itemJSONObjget("subclassroom")+"");dymessagesetSubcontent(itemJSONObjget("subcontent")+"");dvmessagesetCreateTidymessageServiceinsertDvm心}}返回500,提示保存失败PostMapping处理HTTPPOST请求据保存至dymessage创建Dymessage对象对象法将data解析成JSONObject对象返回200,提示提交成功数信息反馈效果图如图5-32所示。图5-32信息反馈效果图5.2.4平面图片模块电榜口技楼效果图如图5-33所示，明理楼效果图如图5-34所示。平面地图…|◎口△口图5-33科技楼平面图图5-34明理楼平面图平面地图·ZIII17Z又△下又又△5.2.5个人中心模块if(res.authSetting[scope.userInfo'l){if(this.userInfoReadyCallback){thisuserInfoReadyCallbaY将code存在本地，并将code传给后台本地存储后台返回的数据Ywx.getuserlnfo()带登录态，获取用户信息，将用户信息保存在全局用户未授权，需再次授权已授权，可获检测用户的授是否存在图5-35微信授权登录流程图WeChat个人中心用户姓名hqh用户学号用户性别男手机号码用户状态9图5-36个人中心效果图第六章系统测试6.2.1Web平台功能测试用例编号测试目的测试平台管理员是否只有输入正确的账号、密码以及验证码才可以登录成功测试步骤1.用户进入登录界面2.输入账号、密码以及验证码3.点击登录按钮期望结果系统显示系统首页实际结果系统显示系统首页员能否对设备数据进行增加、删除、查询以及修改等操作，测试用例如表6-2所示；数据分析测试的主要目的是图表能否正常展示数据信息，测试用例如表6-3所示。用例编号测试目的测试平台管理员能否对设备数据进行增加、删除、查询以及修改等操作测试步骤1.管理员用户进入系统并登陆成功进入首页2.点击设备数据管理展开，点击数据展示3.输入厕所名称或检索时间，点击搜索按钮，查询到对应数据4.点击添加按钮，跳转至添加界面，输入添加信息，点击确定，系统页面跳转至数据展示页面并更新添加内容5.点击删除按钮，弹出系统提示，点击确认，页面自动刷新并更新数据期望结果平台管理员能对设备数据进行增加、删除、查询以及修改等操并且数据库随着管理员的操作要求随之改变实际结果与期望结果一致用例编号测试目的测试图表能否正常展示数据信息测试步骤1.管理员用户进入系统并登陆成功进入首页2.点击设备数据管理展开，点击数据分析3.温度、湿度折线图表示，氨气、烟雾柱状图表示期望结果图表能正常展示数据信息且与数据库数据一致实际结果与期望结果一致3.通知公告模块通知公告模块测试的主要目的是测试平台管理员能否发布、修改、查询以及删除通知公告，其测试用例如表6-4所示。用例编号测试目的测试平台管理员能否发布、修改、查询以及删除通知公告测试步骤1.管理员用户进入系统并登陆成功进入首页2.点击系统管理展开，点击通知公告3.点击新增按钮，跳转至添加公告界面，输入要发布的信息，点击确定，系统页面跳转至通知公告页面并更新添加内容5.输入公告标题、操作人员或公告类型，点击搜索按钮，查询到对应信息6.点击删除按钮，弹出系统提示，点击确认，页面自动刷新并更新信息期望结果测试平台管理员能发布、修改、查询以及删除通知公告，并且数据库随着管理员的操作要求随之改变实际结果与期望结果一致4.信息反馈模块信息反馈模块是检测系统管理员是否能够正确地浏览和删除用户的反馈信息。其测试用例表如表6-5所示。用例编号测试目的测试平台管理员能否正常查看或删除反馈信息列表测试步骤1.管理员用户进入系统并登陆成功进入首页2.点击信息反馈，跳转至信息反馈页面3.输入姓名或班级，点击搜索，查询到对应信息4.点击删除按钮，弹出系统提示，点击确认信息期望结果测试平台管理员能正常查看或删除反馈信息列表实际结果测试平台管理员能正常查看或删除反馈信息列表1.数据展示模块数据展示模块主要测试用户通过搜索厕所名称能否展示数据，其厕所用例如表6-6所示。用例编号测试目的测试用户通过搜索厕所名称能否展示数据测试步骤1.用户微信授权登录，进入小程序首页2.输入厕所名称，点击搜索，页面数据更新期望结果测试用户通过搜索厕所名称能展示数据实际结果测试用户通过搜索厕所名称能展示数据2.公告查看模块公告查看模块主要测试用户能否查看平台管理员发布的通知公告内容，其测试用例如表6-7所示。用例编号测试目的测试用户能否查看平台管理员发布的通知公告内容测试步骤1.用户微信授权登录，进入小程序首页2.点击公告查看，跳转至公告查看页面3.点击要查看的公告，显示该公告内容期望结果测试用户能查看平台管理员发布的通知公告内容实际结果测试用户能查看平台管理员发布的通知公告内容3.信息反馈模块信息反馈模块主要测试用户能否正常提交反馈内容，其测试用例如表6-8所示。用例编号测试目的测试用户能否正常提交反馈内容测试步骤1.用户微信授权登录，进入小程序首页2.点击信息反馈，跳转至信息反馈页面3.输入姓名、班级以及反馈内容，点击提交期望结果测试用户能正常提交反馈内容实际结果测试用户能正常提交反馈内容4.平面地图模块平面地图模块主要测试能否正常显示平面图，包括科技楼平面图和明理楼平面图其测试用例如表6-9所示。用例编号测试目的测试能否正常显示平面图测试步骤1.用户微信授权登录，进入小程序首页2.点击平面地图，跳转至平面地图页面3.根据用户需要点击科技楼或明理楼查看期望结果测试能正常显示平面图实际结果测试能正常显示平面图个人中心模块主要测试能否正常显示个人信息，包括用户微信头像、昵称、用户姓名、用户学号、用户性别、邮箱、手机号码、用户状态等，其测试用例如表6-10所示。用例编号测试目的测试能否正常显示个人信息测试步骤1.用户微信授权登录，进入小程序首页期望结果能正常显示个人信息实际结果能正常显示个人信息第七章总结与展望本系统设计了一种应用于校园厕所的环境以及等待人数监测平台，该平台由Web端和微信小程序组成。本课题主要使用了微信开发者工具、IntelliJIDEA2017.1.4以及NavicatPremium工具进行开发，且之前未接触过，通过三个月的努力，百度查阅资料以及在老师的帮助下，完成了该系统的开发。针对传统校园厕所较为突出的问题，即第一，校园厕所流量具有“潮汐变化”的特点，上下课高峰期，如厕需求量较大，不能很好的选择人少的厕所如厕；第二，校园厕所是一个禁止吸烟的场所，但在校园的厕所里有很多烟头以及吸烟的现象还是很常见的，不能及时的发现处理吸烟问题；第三，厕所空气质量不好的问题，影响如厕心情。在该系统中，采用STM32F103ZET6作为主控芯片，使用NB-IOT技术进行组网，通过各传感器对校园厕所环境进行监测，并采集数据上传至阿里云服务器数据库，再用Springboot+shiro+MyBatis+Thymeleaf+Echarts+JSON+百度地图