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快速開發平臺?；炯夹g采用方便!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+百度地圖