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

基于Web平台以及微信小程序的校园厕所环境监测系统设计与实现摘要针对传统校园厕所较为突出的问题，即第一，校园厕所流量具有“潮汐变化”的特点，上下课高峰期，如厕需求量较大，不能很好的选择人少的厕所如厕；第二，校园厕所是一个禁止吸烟的场所，但在校园的厕所里有很多烟头以及吸烟的现象还是很常见的，不能及时的发现处理吸烟问题；第三，厕所空气质量不好的问题，影响如厕心情。由此可见，设计开发校园厕所环境以及坑位等待监测系统是非常有必要。本文主要介绍了校园厕所环境以及坑位等待监测系统，该系统主要由Web平台以及微信小程序端组成，Web平台主要为平台管理员使用，主要有设备地图、数据展示、数据分析、通知公告以及信息反馈等，方便平台管理员监测查看数据、及时了解用户需求，前端主要采用的技术有：HTML、CSS、js、JavaScript技术，后端采用JAVA语言编写；微信小程序端主要面向普通用户使用，普通用户可登录该小程序查看厕所环境的数据、了解厕所等待人数情况、及时收到管理员发布的通知公告以及反馈信息给管理员该系统解决了传统校园厕所带来的问题，实时的数据监测大大提高了管理员的管理效率，及时了解厕所有无人抽烟，也极大的提高了如厕的舒适性。关键词：校园厕所环境监测；人数等待；Web平台；微信小程序端；NB-IOT技术目录TOC\o"1-3"\h\u11328第一章前言 1163111.1课题研究背景 1245231.2课题研究意义 1258781.3课题研究内容 11488第二章系统相关技术及工具 3118372.1系统相关核心技术介绍 3184702.2系统相关工具介绍 426823第三章系统需求分析 6181993.1可行性分析 6246103.2系统功能需求分析 6175743.3非功能需求分析 77396第四章系统总体设计 8104214.1系统总体架构 8118624.2系统软件架构设计 8118194.3数据库设计 105340第五章系统的主要功能模块设计与实现 1497165.1Web系统平台 1464205.2微信小程序端 3025894第六章系统测试 40324236.1系统测试环境 4094486.2系统功能测试 402309第七章总结与展望 4526387.1总结 45233217.2展望 4526803参考文献 46前言1.1课题研究背景厕所，在这一个不登大雅之堂的场所，就是我们生活中最离不开的场所。进入现代社会，厕所的健康水平，是评价一个社会文明水平的主要标准。同样，在师生们的每天生活学习的校园里，配备干净卫生的厕所，逐渐成为文明校园建设的重要内容。在以前，由于公共卫生管理专业人员技术能力较低，工作难度则会增大，增加了精细化管理作业难度，学校卫生间气味过大的情况往往无法有效处理，而学校厕所吸烟的现象往往也无法及时发现,极大的不便于教师对学校吸烟情况的有效控制,也导致学校如厕环境的空气质量不好,严重影响了人们的如厕体验。课间十分钟，由于学校学生如厕需求量较大，学校也无法确定在卫生间内等待人员的多少,学生无法合理的选择在卫生间如厕,从而造成学校部分卫生间内无人如厕,学校部分卫生间如厕需要量大,在课间时间内无法有效处理学生如厕情况。随着社会经济的发展，人们的生活水平有了很大提升，对公厕在内的公共环境卫生的要求也越来越高REF_Ref355\w\h[1]。因此，推动校园厕所环境监测的智能化建设尤为重要。1.2课题研究意义为了方便学校对校园厕所的管理，大量减少人力物力以及财力的投入，提升公共服务质量，实现数据可视化，解决传统厕所带来的问题，为此，设计了校园厕所环境以及等待人数监测系统。校园厕所环境以及坑位等待监测系统可以在校园的每个厕所安装设备，可以实时监测厕所环境的温度、湿度、氨气、烟雾、等待人数等，采用NB-IOT技术传输数据，并及时存入数据库中方便管理员调用，平台读取数据库中的数据进行分析并显示，管理员可实时查看监测点的数据。该系统优点众多，平台管理员可通过本系统查看各监测点的实时数据，从而了解监测点的情况，方便管理员管理，避免学生在标有禁止吸烟的校园厕所吸烟，以及为了给学生一个舒适的如厕环境；普通用户可以通过搜索厕所名称了解该厕所的情况，避免在厕所前着急排队的现象，浏览管理员发布的通知公告，普通用户也可以反馈问题给平台管理员，让管理员即使了解管理员暂未了解到的情况以及建议，做到人性化管理。相比于传统的校园厕所，本系统提高了管理员的管理效率，提高了如厕的舒适性。1.3课题研究内容本课题主要对校园厕所环境以及等待人数监测系统进行研究，该系统对监测点设备的温度、湿度、氨气、烟雾等数据进行监测和传输，通过NB-IOT无线传输技术，对数据存储至阿里云服务器数据库，应用平台读取并分析数据库数据实时可视化展示。本文主要是Web平台和微信小程序端的设计和实现。第二章系统相关技术及工具2.1系统相关核心技术介绍本课题主要研究实现校园厕所环境及等待人数监测系统平台Web端以及微信小程序端的软件开发，Web端与下位机的数据传输主要通过NB-IOT技术传输，需设计数据库用于存储下位机设备监测的数据。使用若依框架作为后台管理系统，同时引用了Echart图表技术对数据更直观的展示，为了对实现监测点的地图定位展示，引用了百度地图的API来实现。小程序前端使用ColorUIcss组件库开发，通过API接口与Web端后台进行数据交互。2.1.1若依框架Ruoyi是一个基于经典技术组合的企业级JavaEE快速开发平台。基本技术采用SpringBoot、ApacheShiro和MyBatis。其优点是技术难度低，节省人力，缩短项目周期，提高软件安全质量，界面简单美观。SpringBoot是一个开箱即用，没有代码生产无需XML配置的框架，其简单、快速、方便！SpringBoot是一些库的集合，框架中的框架，只要导入相应依赖，它就能够被任意项目的构建系统所使用REF_Ref1100\w\h[2]。SpringBoot可以在主程序执行mian主函数运行，也可以以jar包形式通过java–jarxx.jar来运行，内嵌servlet容器，降低对环境的要求，自动配置Spring，可以不用或只需很少的配置文件，它使用习惯优于配置理念，内置Tomcat启动方便，并提供一切注解方便开发。ApacheShiro是一个强大而灵活的开源安全框架，提供身份验证、授权、加密和会话管理。它可以在JavaSE或JavaEE环境中使用。对于任何应用程序，Shiro都可以提供全面的安全管理服务REF_Ref3781\w\h[3]，Shiro比其他安全框架简单得多。Shiro的三个主要组件：主体Subject、安全管理组件SecurityManager和安全实体数据源Realm。Shiro在身份认证和授权管理过程中至少需要一个Realm来实现相关功能REF_Ref4453\w\h[4]。MyBatis是一个支持动态SQL语句的持久层框架，支持普通SQL查询，存储过程和高级映射，整体构造由数据源配置文件、SQL映射文件、会话工厂、会话、执行器和底层封装对象组成REF_Ref5694\w\h[5]，功能架构分为三层：API接口层、数据处理层和基础支持层。在MyBatis框架中，可通过写SqlMapConfig.xml文件来配置数据库连接池，能避免反复创建和释放资源REF_Ref5727\w\h[6]。2.1.2Echarts图表技术Echarts是一个免费的、功能强大的、可视化的，基于Canvas的，纯Javascript的图表库，底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互、可高度个性化定制的数据可视化图表REF_Ref8614\w\h[7]。2.1.3JSONJSON是一种以JavaScript为基础的轻型数据交换形式，其文字形式与其他语言无关，不管使用哪种开发语言编写，JSON都可以用于跨网络进行数据交互和处理数据，几乎每一种编程语言都拥有良好的库或者第三方的工具来为JSON提供API的基础，所以可以轻松的使用自己所喜爱的任意一种语言来实现JSON的数据。JSON格式具有简洁和清晰的层次结构，易于开发人员编写、阅读和检查，也易于机器解析和生成，传输速度快，支持JSON格式的编程语言多，因此JOSN格式正迅速成为Web上最流行的数据交换格式之一REF_Ref8917\w\h[8]。2.1.4百度地图定位百度地图为开发人员提供一一系列的百度地图API，它是一种由JavaScrip语言编写的应用程序接口，可以帮助我们构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于PC或移动设备端基于浏览器的开发REF_Ref11458\w\h[9]。2.1.5NB-IOT技术NB-IoT技术是基于蜂窝的窄带物联网，是IoT领域的一个新兴领域，由于NB-IoT技术支持低功耗设备在广域网的蜂窝数据连接，也被叫做叫做低功耗广域网（LPWAN）。具有广覆盖、大连接、低功耗、低成本的优势，解决了传统物联网存在的技术碎片化、覆盖不足的问题，极大提升了物联网的应用能力，获得了业内的广泛支持，将成为物联网主流技术REF_Ref12689\w\h[10]。NB-IOT四大主要特点如下表2-1所示。表2-1NB-IOT主要特点广覆盖在同样的频段下，NB-IOT比现有网络增益20dB，覆盖面积扩大100倍海量连接NB-IOT一个人扇区能够支持10万个连接，支持低延时敏感度、超低的设备成本、低设备功耗和优化的网络架构低功耗NB-IOT终端模块的待机时间可长达10年低成本预期NB-IOT模块单价5美元左右2.2系统相关工具介绍2.2.1intelliJIDEA简介IDER全称IntelliJIDEA，是用于java语言开发的集成环境（也可用于其他语言），是公认为最好的java开发工具之一。其特色功能有智能选取、丰富的导航模式、历史记录功能、JUnit的完美支持、对重构的优越支持、编码辅助、灵活的排版功能、XML的完美支持、动态语法监测、代码检查、对JSP的完全支持、智能编辑、EJB支持、列逻辑模式、预置模板、完美的自动代码生成、版本控制完美支持、不使用代码的检查、智能代码、正则表达式的查询和替换功能、JavaDoc预览支持、程序员意图支持等REF_Ref13528\w\h[11]。最突出的功能是调试，可以对Java代码、JavaScript、JQuery、Ajax等技术进行调试。2.2.2微信开发者小程序介绍微信开发者工具是微信官方提供的针对微信小程序的开发工具，是一种全新的连接用户与服务的方式，集成了开发、调试、预览、上传等功能，为开发人员提供了一个简单高效的应用开发框架，并包含了大量的组件及API，极大的方便了开发者开发和调试。视图层包括.wxml和.wxss文件，其中.wxml文件主要用来构建基础元素类似于HTML,.wxss文件类似于CSS负责页面样式和布局，主要的业务逻辑由.js文件来实现REF_Ref20988\w\h[12]。2.2.3MySQL简介MySQL是一个真正的多用户、多线程SQL数据库服务器，开发者为瑞典MySQLAB公司，是世界上最流行的和标准化的数据库语言，它使得存储、更新和存取信息更容易。MySQL数据库是一种开源性数据库系统,其数据传输速度快,体积小,目前正广泛应用于普通网站、Web数据库、嵌入式应用以及大数据等多方互联网领域REF_Ref20918\w\h[13]。MySQL软件运用较为广泛,可同时运行Windows、Linux以及Macos等多个系统平台,且能够保持数据传输、处理以及存储等基本功能的一致性REF_Ref20918\w\h[14]。MySQL优点如下：1、性能快捷、优化SQL语言；2、容易使用；3、多线程和可靠性；4、多用户支持；5、可移植性和开放源代码；6、遵循国际标准和国际化支持；7、为多种编程语言提供API。

第三章系统需求分析在软件工程中，需求分析是一个重要的流程，软件需求分析就是在软件计划期间对建立的软件可行性分析求精和细化，分析各种可能的解法，并且分配给各个软件元素。需求分析是软件定义阶段中的最终环节，它决定了系统需要做的事情，即要求系统的完整、准确、清晰和具体。3.1可行性分析在本系统中的可行性分析主要包括以下几个方面的内容：技术可行性分析：本系统主要有Web端和微信小程序端，Web端采用Springboot+SpringMvc+MyBatis+Shiro+Thymeleaf技术开发，使用JAVA语言编程，Java是一种通用的程序语言，是软件开发的重要语言之一，它被广泛地应用于计算机软件的开发中REF_Ref23074\w\h[15]。前端是基于thymeleaf的HTML和Jquery，简单易学，易上手；小程序端使用微信者开发工具，系统结构浅显易懂。后台数据库使用的是MySQL数据库，通过Mybatis实现与后台数据库的访问。2.经济可行性分析：本系统使用IntelliJIDEA软件开发Web端，使用微信者开发工具开发小程序，使用NavicatPremium开发工具存储数据，所使用的开发软件免费开发，无需额外付费。3.管理可行性分析：本系统由管理员和一般使用者组成，不同的角色具有各自的权限，便于不同角色管理。3.2系统功能需求分析3.2.1系统角色用例分析功能模块需求分析主要设计分析需要实现哪几个功能模块以及该功能模块能够提供什么样的功能REF_Ref24735\w\h[16]。本课题主要研究校园厕所监测以及人数等待进行开发，下面将对管理员和普通用户进行简单用例介绍：1.管理员：管理员为Web平台的使用者，主要可以对厕所环境进行监测以及厕所等待人数监测，对设备进行管理，下发通知公告，查看普通用户所反馈的信息；管理员的用例图如图3-1所示。图3-1管理员用例图2.普通用户：普通用户是我们移动端主要面向用户，主要可以查看数据展示，通知公告浏览，反馈信息，个人资料浏览，普通用户的用例图如图3-2所示。图3-2普通用户用例图3.3非功能需求分析非功能需求指的是，为了满足客户的业务需求，软件产品除了功能需求之外，还需要其他一些特性，这直接关系到产品能否持续、稳定、有效地提供服务。该平台系统的主要面向对象是平台管理员和普通用户，用户人数众多，所以在应用时必须满足下列非功能需求：1.性能需求：性能方面主要是页面跳转时间，精确搜索反馈结果时间，本平台系统精确搜索反馈结果时间主要指数据查询、数据图表显示以及地图加载时间，因此对网络方面有一定要求。2.安全性需求：本系统主要提供给学校管理员使用，平台管理员可查询每个操作日志、登录日志，保障了系统的安全性。3.可维护性：本系统功能分模块化开发，不同模块对应不同功能，方便后期管理和维护，减少重复开发量。4.易用性：即易学习性，易操作性，用户错误防御机制，用户界面美观。

第四章系统总体设计4.1系统总体架构如图4-1所示，系统由上位机和下位机两部分组成，上位机包含Web端和微信小程序端。下位机由STM32单片机开发板+NB-IOT传输模块+各种传感器组成。STM32单片机对各个传感器的采集模块进行数据处理，然后通过串口将数据传输给NB-IOT通信模块，由NB-IOT网络将所接收到的数据传送给Socket搭建的即时通讯服务器，远程服务器会自动解析并保存该数据至阿里云服务器数据库中。上位机Web连接阿里云服务器获取下位机监测的数据进行处理展示，小程序端通过API接口调取Web端数据进行展示。图4-1系统架构示意图4.2系统软件架构设计 该系统采用了经典MVC的设计模式如图4-2，它将整个的系统分为三层，即Model（数据持久层）、View（视图层）和Controller（业务逻辑控制层）三个层次，也就是将用户视图与业务处理隔离开，并且通过控制器连接起来，从而达到性能与逻辑的解耦，是一个标准的软件分层架构REF_Ref29675\w\h[17]。MVC模式的三个模块的工作是清晰的，而且是独立的。View是一个界面，它被使用者看见并且可以与它进行互动，本系统视图层基于若依框架开发，使用HTML元素组成界面。业务逻辑层是用对程序进行业务逻辑处理，以避免界面与数据库的直接交互，使程序便于维护、可扩展，实现界面与数据持久层的解耦。数据持久层用于对数据库进行操作，并与数据库进行了直接的交互。MVC体系结构是由控制器等待使用者的输入，由使用者输入的指令及数据库传送至业务模型，再由业务逻辑判断和数据库存取，根据业务逻辑选择不同的视图将结果反馈给用户。图4-2MVC架构示意图4.3系统功能模块设计系统有Web端和微信小程序端构成，Web端使用对象为平台管理员，微信小程序端使用对象为普通用户，即在校学生或老师等，系统功能模块图如图4-3所示。图4-3系统功能模块图4.3数据库设计数据库是一个系统的重要组成部分，本系统的MySQL数据库是搭建在阿里云远程主机上，用于存储下位机监测的数据，由上位机存取数据库中的数据进行分析和展示。该系统是对校园厕所环境监测以及等待人数监测，采集的数据包括温度、湿度、烟雾、氨气以及厕所等待人数等。4.3.1系统数据库需求分析本系统各个功能的实现都是基于数据库的增删查改操作，根据系统平台的要求和需求，设计了如下所需的数据项和数据结构：1、平台管理员数据实体：用户ID、部门ID、登录账号、用户昵称、用户类型、用户邮箱、手机号码、用户性别、头像路径、登录密码、盐加密、账号状态、创建时间。2、普通用户数据实体：用户ID、部门ID、登录账号、用户昵称、用户类型、用户邮箱、手机号码、用户性别、头像路径、登录密码、盐加密、账号状态、创建时间。3、部门数据实体：部门ID、部门名称、联系电话、邮箱、部门状态、创建者、创建时间、更新时间。4、角色数据实体：角色ID、角色名称、角色状态、创建者、创建时间、更新时间。5、菜单数据实体：菜单ID、菜单名称、父菜单ID、请求地址、菜单类型、菜单状态、是否刷新、菜单图标、创建者、创建时间、更新时间、备注。6、通知公告数据实体：公告ID、公告标题、公告类型、公告内容、公告状态、创建者、创建时间、更新者、更新时间。7、监测数据实体：编号、厕所位置、等待人数、温度、湿度、氨气、烟雾、创建时间。8、信息反馈数据实体：编号、姓名、班级、反馈内容、创建时间。4.3.2数据的概念结构设计在数据库的总体设计中，概念设计是一个重要的环节，在需求分析的基础上，对数据进行分类、组织，确定实体、实体属性、关联类型，形成的E-R图如图4-4所示。图4-4数据库E-R图4.3.3数据库表的设计主要数据库表如下所示：（1）sys_user（用户信息表），存放用户信息，如表4-1。表4-1用户信息表字段name数据类型（长度）主键是否可为空描述user_idbigint（20）是否用户IDdept_idvarchar(20)否否部门IDlogin_namevarchar(30)否否登录账号user_namevarchar(30)否否用户昵称user_typevarchar(2)否否用户类型emailvarchar(50)否否用户邮箱phonenumbervarchar(11)否否手机号码sexchar（1）否否用户性别avatarvarchar(100)否否头像路径passwordvarchar(50)否否登录密码saltvarchar(50)否否盐加密statuschar（1）否否账号状态create_timedatetime否否创建时间（2）sys_dept（部门管理信息表），记录部门信息，如表4-2。表4-2部门管理信息表字段name数据类型（长度）主键是否可为空描述dept_idbigint（20）是否部门IDdept_namevarchar(50)否否部门名称phonevarchar(11)否否手机号码emailvarchar(50)否否用户邮箱statuschar（1）否否部门状态create_byvarchar(50)否否创建者create_timedatetime否否创建时间update_timedatetime否否更新时间（3）sys_role（角色管理信息表）：记录角色信息，如表4-3。表4-3角色管理信息表字段name数据类型（长度）主键是否可为空描述role_idbigint（20）是否角色IDrole_namevarchar(50)否否角色名称statuschar（1）否否角色状态create_byvarchar(50)否否创建者create_timedatetime否否创建时间update_timedatetime否否更新时间（4）sys_menu（菜单数据表）：存放菜单数据，如表4-4。表4-4菜单数据表字段name数据类型（长度）主键是否可为空描述menu_idbigint（20）是否菜单IDmenu_namevarchar(50)否否菜单名称parent_idbigint（20）否否父菜单IDurlvarchar(200)否否请求地址menu_typechar（1）否否菜单类型visiblechar（1）否否菜单状态is_refreshchar（1）否否是否刷新iconvarchar(100)否否菜单图标create_byvarchar(50)否否创建者create_timedatetime否否创建时间update_timedatetime否否更新时间remarkvarchar(500)否否备注（5）sys_notice（公告信息表）：存放平台管理员发布的通知公告，如表4-5。表4-5公告信息表字段name数据类型（长度）主键是否可为空描述notice_idbigint（20）是否公告IDnotice_titlevarchar(50)否否公告标题notice_typechar（1）否否公告类型notice_contentvarchar(2000)否否公告内容statuschar（1）否否公告状态create_byvarchar(50)否否创建者create_timedatetime否否创建时间update_timedatetime否否更新时间（6）dygetdata（监测数据表）：存放下位机监测的数据，如表4-6。表4-6监测数据表字段name数据类型（长度）主键是否可为空描述idbigint（20）是否编号positionvarchar(50)否否厕所位置watingvarchar(50)否否等待人数temperaturevarchar(30)否否温度humidityvarchar(30)否否湿度NH3varchar(30)否否氨气smogvarchar(30)否否烟雾create_timedatetime否否创建时间（7）dymessage（信息反馈表）：存放普通用户上发的信息反馈，如表4-7。表4-7信息反馈表字段name数据类型（长度）主键是否可为空描述idbigint（20）是否编号subnamevarchar(50)否否厕所位置subclassroomvarchar(50)否否等待人数subcontentvarchar(2000)否否温度create_timedatetime否否创建时间

第五章系统的主要功能模块设计与实现5.1Web系统平台5.1.1登录模块登录模块：进入登录界面，用户输入username、password、code（验证码），提交login接口，验证验证码是否正确，调用securityapi来进行验证用户信息，根据username查询dygetdata数据表，判断是否用这个用户，如果有该用户，就会调用createLoginUser()方法来返回LoginUser类，LoginUser类查询出用户信息，填充在LoginUser中，菜单权限查询成功，异步打印日志，更新用户登录ip、日期，最后生成token，返回给前端，前端登录成功，即跳转至平台首页，登录流程图如图5-1所示，登录界面效果图如图5-2所示。图5-1登录流程图图5-2登录界面效果图图5.1.2设备地图模块设备地图模块：设备地图即为平台首页，设备地图模块是基于百度地图JavaScriptAPI开发，要申请密钥(ak)才可使用，通过newBMapGL.Map('container')创建地图对象，newBMapGL.Point()创建坐标点，newBMapGL.Marker(newBMapGL.Point(111.324383,23.504107))创建指定经纬度添加标记点，为marker添加点击事件和提示窗口，点击该标记点显示该楼的厕所平面图，主要实现代码如下。流程图如图5-3所示。图5-3设备地图流程图设备地图效果图如图5-4所示。图5-4设备地图效果图5.1.2设备数据管理模块数据展示数据展示主要为对下位机获取的数据进行展示以及dygetdata表进行增删查改的实现，数据展示效果图如图5-5所示。图5-5设备数据展示效果图点击添加。平台管理员可根据需要增加设备数据信息，通过@RequiresPermissions注解使该页面拥有添加的权限，通过@GetMapping获取页面添加的信息，保存到dygetdata表中，实现代码如下。

流程图如图5-6所示。图5-6设备数据添加流程图实现效果图如图5-7所示。图5-7添加设备数据页面点击删除。平台管理员可对设备数据进行删除，通过@RequiresPermissions获取删除权限，根据id进行删除该id的所有数据，实现代码如下。流程图如图5-8所示。图5-8设备数据删除流程图实现效果图如图5-9所示。图5-9删除设备数据页面点击搜索。平台管理员可通过厕所名称、时间进行检索，通过@RequiresPermissions获取权限，根据厕所名称或时间对dygetdata数据列表进行检索，实现代码如下。流程图如图5-10所示。图5-10设备数据搜索流程图实现效果图如图5-11所示。图5-11搜索设备数据页面

（4）点击修改。平台管理员可对设备数据信息进行修改，通过@RequiresPermissions获取修改权限，根据id对dygetdata表进行数据删除，实现代码如下。流程图如图5-12所示。图5-12设备数据删除流程图实现效果图如图5-13所示。图5-13修改数据页面数据分析数据分析主要为数据图表显示，该系统中采用折线图的形式对温度、湿度进行数据展示，采用柱状图的形式对氨气、烟雾进行数据展示，平台管理员可根据需要移动到相应的折线图、柱状图进行数据的详情展示。后端撰写DyEchartsController类通过Controller进行@GetMapping("")注释来接收图表数据信息，前端通过ajax技术对后端数据解析并显示在界面上。折线图部分代码如下，数据图表展示效果图如图5-14所示。图5-14数据图表展示5.1.3通知公告模块平台管理员可编辑发布通知或公告，也可对发布的通知公告进行修改或删除，方便普通用户及时收到有关信息，实现效果图如图5-15所示。图5-15通知公告效果图（1）添加公告。平台管理员可根据需要添加公告，通过@RequiresPermissions获得添加公告权限，封装AjaxResult返回数据，实现代码如下。流程图如图5-16所示。图5-16添加公告流程图实现效果图如图5-17所示。图5-17添加公告效果图修改公告。平台管理员可根据需要修改公告，通过@RequiresPermissions获得添加修改权限，封装AjaxResult返回数据，实现代码如下。流程图如图5-18所示。图5-18修改公告流程图实现效果图如图5-19所示。图5-19修改公告效果图删除公告。平台管理员可根据需要删除公告，通过@RequiresPermissions获得删除公告权限，封装AjaxResult返回数据，实现代码如下。流程图如图5-20所示。图5-20删除公告流程图实现效果图如图5-21所示。图5-21删除公告效果图5.1.4信息反馈模块查看信息反馈。平台管理员可查看由用户反馈的信息反馈内容，通过@RequiresPermissions获得查看信息反馈内容权限，使用startPage()方法配合前端完成自动分页，实现代码如下。流程图如图5-22所示。图5-22搜索信息反馈流程图实现效果图如图5-23所示。图5-23信息反馈效果图删除信息反馈。平台管理员可根据需要对用户反馈的信息进行删除，通过@RequiresPermissions获得删除信息反馈内容权限，封装AjaxResult返回数据，实现代码如下。流程图如图2-24所示。图5-24删除信息反馈流程图实现效果图如图5-25所示。图5-25删除信息反馈效果图5.2微信小程序端微信小程序是一款不需要下载安装就能使用的软件用，通过微信客户端作为寄生宿主、利用微信提供的基础能力，实现了轻量级的应用、达到了“来之可用，用完即走”的极致用户体验REF_Ref20988\w\h[18]。在微信中打开该小程序，底部导航栏有数据展示、公告查看、信息反馈、平面地图以及个人中心，用户可根据导航栏选择要显示的界面。5.2.1数据展示模块用户可通过搜索厕所名称，显示出该厕所监测到的厕所等待人数、温度、湿度、氨气、烟雾以及监测时间等。用户输入厕所名称，前端通过wx.request({})发起HTTPS网络请求，后端接收前端传来的厕所名称，后端根据厕所名称查询dygetdata表查询该厕所的数据并返回前端，前端页面显示该数据，从而实现通过模糊查询厕所名称获取后台数据，若查询不到数据则显示暂无搜索内容。前端主要实现代码如下：后端接口主要实现代码如下：图5-26数据展示流程图数据展示效果图如图5-27所示。图5-27数据展示效果图5.2.2公告查看模块用户可以查看管理员发布的通知公告，方便用户及时收到信息。通过Promise函数封装wx.request请求数据，使用module.exports将noticeList:(params)=>request('system/notice/noticeList','POST',params)、noticeDetail:(params)=>request('system/notice/noticeDetail','POST',params)方法暴露出去使得在其他js文件中使用该方法，首先公告列表前端请求后台接口，后台接收到请求后查询相关数据，列表显示查询到的公告，点击所要查看的公告内容，公告详情页面接收父页面传来的参数noticeId，后台通过noticeId查询该公告的内容，wxParse解析数据，解析出来的数据将在页面上显示。主要实现代码如下。公告列表前端实现代码如下：公告列表后端主要实现代码如下：公告详情前端实现主要代码如下：公告详情后端主要实现代码：图5-28公告查看流程图图5-29通知公告效果图图5-30公告详情效果图5.2.3信息反馈模块用户可自愿对该平台给出意见或建议，对厕所的管理或对厕所环境的不满意进行反馈给管理员，实现人性化平台。前端通过formSubmit(e)请求用户输入的参数，addMessage(params).then((res)请求接口，@PostMapping处理HTTPPOST请求，@RequestBody接受数据，使用parseObject()方法将data解析成JSONObject对象保存至dymessage数据表中，流程图如图5-31所示。前端主要实现代码如下：后端接口实现代码如下：图5-31信息反馈流程图信息反馈效果图如图5-32所示。图5-32信息反馈效果图5.2.4平面图片模块平面图有科技楼平面图和明理楼平面图，为了方便用户寻找每栋楼层厕所位置，科技楼效果图如图5-33所示，明理楼效果图如图5-34所示。图5-33科技楼平面图图5-34明理楼平面图5.2.5个人中心模块个人中心显示该登录用户的用户姓名、用户学号、用户性别、邮箱、手机号码、用户状态以及微信授权登录的个人头像及昵称等个人信息，微信授权登录流程图如图5-21所示，wx.getUserInfo为获取用户信息的网络请求，调用getUserInfo()接口搭配button让用户主动授权获取头像昵称。主要实现代码如下：图5-35微信授权登录流程图图5-36个人中心效果图系统测试系统测试是软件开发过程中的最后环节，其目地是发现系统在开发和设计过程中存在的问题和错误，并对其进行改进。6.1系统测试环境测试的环境信息如下：操作系统：Windows10企业版LTSC、华为nova7SE处理器：Intel(R)Core(TM)i5-5200UCPU@2.20GHz、HUAWEIKirin820E运行内存：8G内存软件环境：MySQL5.7、JDK1.8、Tomcat8开发工具：IntelliJIDEA2017.1.4、微信开发者工具、Navicat客户端浏览器：谷歌浏览器、Android手机6.2系统功能测试功能测试是对该系统的各个功能进行测试和验证，确保该系统正常运行。6.2.1Web平台功能测试1.登录模块测试登录模块测试的主要目的是平台管理员是否只有输入正确的账号、密码以及验证码才可以登录成功，其测试用例如下。表6-1登录模块测试用例用例编号module01测试目的测试平台管理员是否只有输入正确的账号、密码以及验证码才可以登录成功测试步骤用户进入登录界面输入账号、密码以及验证码点击登录按钮期望结果系统显示系统首页实际结果系统显示系统首页设备数据管理模块设备数据管理模块包括数据展示和数据分析，数据展示测试的主要目的是平台管理员能否对设备数据进行增加、删除、查询以及修改等操作，测试用例如表6-2所示；数据分析测试的主要目的是图表能否正常展示数据信息，测试用例如表6-3所示。表6-2数据展示测试用例用例编号module02测试目的测试平台管理员能否对设备数据进行增加、删除、查询以及修改等操作测试步骤管理员用户进入系统并登陆成功进入首页点击设备数据管理展开，点击数据展示输入厕所名称或检索时间，点击搜索按钮，查询到对应数据点击添加按钮，跳转至添加界面，输入添加信息，点击确定，系统页面跳转至数据展示页面并更新添加内容点击删除按钮，弹出系统提示，点击确认，页面自动刷新并更新数据点击修改按钮，跳转至修改界面，输入要修改的内容，点击确定，系统页面跳转至数据展示页面并更新修改内容期望结果平台管理员能对设备数据进行增加、删除、查询以及修改等操作，并且数据库随着管理员的操作要求随之改变实际结果与期望结果一致表6-3数据分析测试用例用例编号module03测试目的测试图表能否正常展示数据信息测试步骤管理员用户进入系统并登陆成功进入首页点击设备数据管理展开，点击数据分析温度、湿度折线图表示，氨气、烟雾柱状图表示查看图表显示数据与数据库数据是否一致期望结果图表能正常展示数据信息且与数据库数据一致实际结果与期望结果一致通知公告模块通知公告模块测试的主要目的是测试平台管理员能否发布、修改、查询以及删除通知公告,其测试用例如表6-4所示。表6-4通知公告测试用例用例编号module04测试目的测试平台管理员能否发布、修改、查询以及删除通知公告测试步骤管理员用户进入系统并登陆成功进入首页点击系统管理展开，点击通知公告点击新增按钮，跳转至添加公告界面，输入要发布的信息，点击确定，系统页面跳转至通知公告页面并更新添加内容点击修改按钮，跳转至修改界面，输入要修改的内容，点击确定，系统页面跳转至通知公告页面并更新修改内容输入公告标题、操作人员或公告类型，点击搜索按钮，查询到对应信息点击删除按钮，弹出系统提示，点击确认，页面自动刷新并更新信息期望结果测试平台管理员能发布、修改、查询以及删除通知公告，并且数据库随着管理员的操作要求随之改变实际结果与期望结果一致信息反馈模块信息反馈模块是检测系统管理员是否能够正确地浏览和删除用户的反馈信息。其测试用例表如表6-5所示。表6-5信息反馈测试用例用例编号module05测试目的测试平台管理员能否正常查看或删除反馈信息列表测试步骤管理员用户进入系统并登陆成功进入首页点击信息反馈，跳转至信息反馈页面输入姓名或班级，点击搜索，查询到对应信息点击删除按钮，弹出系统提示，点击确认，页面自动刷新并更新信息期望结果测试平台管理员能正常查看或删除反馈信息列表实际结果测试平台管理员能正常查看或删除反馈信息列表6.2.2微信小程序功能测试1.数据展示模块数据展示模块主要测试用户通过搜索厕所名称能否展示数据，其厕所用例如表6-6所示。表6-6数据展示测试用例用例编号module06测试目的测试用户通过搜索厕所名称能否展示数据测试步骤用户微信授权登录，进入小程序首页输入厕所名称，点击搜索，页面数据更新期望结果测试用户通过搜索厕所名称能展示数据实际结果测试用户通过搜索厕所名称能展示数据公告查看模块公告查看模块主要测试用户能否查看平台管理员发布的通知公告内容，其测试用例如表6-7所示。表6-7公告查看测试用例用例编号module07测试目的测试用户能否查看平台管理员发布的通知公告内容测试步骤用户微信授权登录，进入小程序首页点击公告查看，跳转至公告查看页面点击要查看的公告，显示该公告内容期望结果测试用户能查看平台管理员发布的通知公告内容实际结果测试用户能查看平台管理员发布的通知公告内容信息反馈模块信息反馈模块主要测试用户能否正常提交反馈内容，其测试用例如表6-8所示。表6-8信息反馈测试用例用例编号module08测试目的测试用户能否正常提交反馈内容测试步骤用户微信授权登录，进入小程序首页点击信息反馈，跳转至信息反馈页面输入姓名、班级以及反馈内容，点击提交期望结果测试用户能正常提交反馈内容实际结果测试用户能正常提交反馈内容平面地图模块平面地图模块主要测试能否正常显示平面图，包括科技楼平面图和明理楼平面图其测试用例如表6-9所示。表6-9信息反馈测试用例用例编号module09测试目的测试能否正常显示平面图测试步骤用户微信授权登