基于Web平臺以及微信小程序的校園廁所環(huán)境監(jiān)測系統(tǒng)設(shè)計與實現(xiàn)13000字論文

1基于Web平臺以及微信小程序的校園廁所環(huán)境監(jiān)測系統(tǒng)設(shè)計與實摘要所是一個禁止吸煙的場所，但在校園的廁所里有很多煙頭以及吸煙的現(xiàn)象還是很常見微信小程序端主要面向普通用戶使用，普通用戶可登錄該小程序查看廁所環(huán)境的數(shù)據(jù)、了解廁所等待人數(shù)情況、及時收到管理員發(fā)布的通知公告以及關(guān)鍵詞：校園廁所環(huán)境監(jiān)測；人數(shù)等待；Web平臺；微信小程序端；NB-IOT技術(shù)目錄 21.1課題研究背景 21.2課題研究意義 2 3 32.1系統(tǒng)相關(guān)核心技術(shù)介紹 3 5 63.1可行性分析 6 63.3非功能需求分析 7 84.1系統(tǒng)總體架構(gòu) 84.2系統(tǒng)軟件架構(gòu)設(shè)計 84.3數(shù)據(jù)庫設(shè)計 25.1Web系統(tǒng)平臺 5.2微信小程序端 第六章系統(tǒng)測試 406.1系統(tǒng)測試環(huán)境 6.2系統(tǒng)功能測試 第七章總結(jié)與展望 7.1總結(jié) 447.2展望 44參考文獻(xiàn) 46第一章前言1.1課題研究背景廁所，在這一個不登大雅之堂的場所，就是我們生活中最離不開的場所。進入現(xiàn)代社會，廁所的健康水平，是評價一個社會文明水平的主要標(biāo)準(zhǔn)。同樣，在師生們的每天生活學(xué)習(xí)的校園里，配備干凈衛(wèi)生的廁所，逐漸成為文明校園建設(shè)的重要內(nèi)容。在以前，由于公共衛(wèi)生管理專業(yè)人員技術(shù)能力較低，工作難度則會增大，增加了精細(xì)化管理作業(yè)難度，學(xué)校衛(wèi)生間氣味過大的情況往往無法有效處理，而學(xué)校廁所吸煙的現(xiàn)象往往也無法及時發(fā)現(xiàn)，極大的不便于教師對學(xué)校吸煙情況的有效控制，也導(dǎo)致學(xué)校如廁環(huán)境的空氣質(zhì)量不好，嚴(yán)重影響了人們的如廁體驗。課間十分鐘，由于學(xué)校學(xué)生如廁需求量較大，學(xué)校也無法確定在衛(wèi)生間內(nèi)等待人員的多少，學(xué)生無法合理的選擇在衛(wèi)生間如法有效處理學(xué)生如廁情況。隨著社會經(jīng)濟的發(fā)展，人們的生活水平有了很大提升，對公廁在內(nèi)的公共環(huán)境衛(wèi)生的要求也越來越高[1]。因此，推動校園廁所環(huán)境監(jiān)測的智能化建設(shè)尤為重要。1.2課題研究意義為了方便學(xué)校對校園廁所的管理，大量減少人力物力以及財力的投入，提升公共服務(wù)質(zhì)量，實現(xiàn)數(shù)據(jù)可視化，解決傳統(tǒng)廁所帶來的問題，為此，設(shè)計了校園廁所環(huán)境以及等待人數(shù)監(jiān)測系統(tǒng)。校園廁所環(huán)境以及坑位等待監(jiān)測系統(tǒng)可以在校園的每個廁所安裝設(shè)備，可以實時監(jiān)測廁所環(huán)境的溫度、濕度、氨氣、煙霧、等待人數(shù)等，采用NB-IOT技術(shù)傳輸數(shù)據(jù)，并及時存入數(shù)據(jù)庫中方便管理員調(diào)用，平臺讀取數(shù)據(jù)庫中的數(shù)據(jù)進行分析并顯示，管理員可實時查看監(jiān)測點的數(shù)據(jù)。該系統(tǒng)優(yōu)點眾多，平臺管理員可通過本系統(tǒng)查看各監(jiān)測點的實時數(shù)據(jù)，從而了解監(jiān)測點的情況，方便管理員管理，避免學(xué)生在標(biāo)有禁止吸煙的校園廁所吸煙，以及為了給學(xué)生一個舒適的如廁環(huán)境；普通用戶可以通過搜索廁所名稱了解該廁所的情況，避免在廁所前著急排隊的現(xiàn)象，瀏覽管理員發(fā)布的通知公告，普通用戶31.3課題研究內(nèi)容的溫度、濕度、氨氣、煙霧等數(shù)據(jù)進行監(jiān)測和傳輸，通過NB-IOT無線傳輸技術(shù)，對數(shù)第二章系統(tǒng)相關(guān)技術(shù)及工具2.1系統(tǒng)相關(guān)核心技術(shù)介紹序端的軟件開發(fā)，Web端與下位機的數(shù)據(jù)傳輸主要通過NB-IOT技術(shù)傳輸，需設(shè)計數(shù)據(jù)圖表技術(shù)對數(shù)據(jù)更直觀的展示，為了對實現(xiàn)監(jiān)測點的Ruoyi是一個基于經(jīng)典技術(shù)組合的企業(yè)級JavaEE快速開發(fā)平臺?；炯夹g(shù)采用方便!SpringBoot是一些庫的集合，框架中的框架，只要導(dǎo)入相應(yīng)依賴，它就能夠被以jar包形式通過java-jarxx.jar來運行，內(nèi)嵌servlet容器，降低對環(huán)境的要求，自動5低功耗低成本預(yù)期NB-IOT模塊單價5美元左右IDER全稱IntelliJIDEA,是用于java語言開發(fā)的集成環(huán)境(也可用于其他語言),是公認(rèn)為最好的java開發(fā)工具之一。其特色功能有智能選取完美支持、動態(tài)語法監(jiān)測、代碼檢查、對JSP的完全支持、智能編輯、EJB支持、列邏能代碼、正則表達(dá)式的查詢和替換功能、JavaDoc預(yù)覽支持、程序員意圖支持等[。最單高效的應(yīng)用開發(fā)框架，并包含了大量的組件及API,極大的方便了開發(fā)者開發(fā)和調(diào)試。視圖層包括.wxml和.wxss文件，其中.wxml文件主要用來構(gòu)建基礎(chǔ)元素類似于1、性能快捷、優(yōu)化SQL語言；7、為多種編程語言提供API。7公告瀏覽，反饋信息，個人資料瀏覽，普通用戶的用例圖如圖3-2所示。3.3非功能需求分析9將結(jié)果反饋給用戶將用戶輸入的指令和數(shù)據(jù)擇不同的視圖圖4-2MVC架構(gòu)示意圖4.3系統(tǒng)功能模塊設(shè)計使用對象為普通用戶，即在校學(xué)生或老師等，系統(tǒng)功能模塊圖如圖4-3所示。個人中心平面地圖個人中心平面地圖信息反饋通知公告數(shù)據(jù)展示通知公告信息反饋數(shù)據(jù)分析數(shù)據(jù)展示設(shè)備地圖圖4-3系統(tǒng)功能模塊圖4.3.3數(shù)據(jù)庫表的設(shè)計(1)sys_user(用戶信息表),存放字段name數(shù)據(jù)類型(長度)是否可為空是否否否否否登錄賬號否否用戶昵稱否否用戶類型否否用戶郵箱否否手機號碼否否用戶性別否否頭像路徑否否登錄密碼否否鹽加密否否賬號狀態(tài)否否創(chuàng)建時間(2)sys_dept(部門管理信息表),記錄部門信息，如表4-2。字段name數(shù)據(jù)類型(長度)是否可為空是否否否部門名稱否否手機號碼否否用戶郵箱否否部門狀態(tài)否否否否創(chuàng)建時間否否更新時間字段name數(shù)據(jù)類型(長度)是否可為空是否角色I(xiàn)D否否角色名稱否否角色狀態(tài)否否否否創(chuàng)建時間表4-7信息反饋表字段name數(shù)據(jù)類型(長度)是否可為空是否編號否否否否等待人數(shù)否否溫度否否創(chuàng)建時間第五章系統(tǒng)的主要功能模塊設(shè)計與實現(xiàn)5.1.1登錄模塊查詢dygetdata數(shù)據(jù)表，判斷是否用這個用戶，如果有該用戶，就會調(diào)用createLoginUser()方法來返回LoginUser類，LoginUser類查詢出用戶信息，填充在LoginUser中，菜單權(quán)限查詢成功，異步打印日志，更新用戶登錄ip、日期，最后生成t用戶進入登錄界面用戶進入登錄界面端行用戶驗證validateCaptcha驗口圖5-1登錄流程圖aa圖5-2登錄界面效果圖圖(3)點擊搜索。平臺管理員可通過廁所名稱、時間進行檢索，通過@RequiresPermissions獲取權(quán)限，根據(jù)廁所名稱或時間對dygetdata數(shù)據(jù)列表進行檢索，實現(xiàn)代碼如下。{dvgetdataServiceselectDvgetdataList(dygetdata);retumgetDataTable(list);}流程圖如圖5-10所示。返回查詢到的數(shù)據(jù)顯示在頁面根據(jù)廁所名稱、創(chuàng)建時通過startPage(方法實現(xiàn)自動分頁通過RequiresPermissions獲得相應(yīng)權(quán)限理Post請求實現(xiàn)效果圖如圖5-11所示。2數(shù)距示?日志世理[填寫功能名稱]0+添加?修改*n開始時間a11三2211數(shù)據(jù)分析主要為數(shù)據(jù)圖表顯示，該系統(tǒng)中采用折線圖的形式對溫度、濕度進行數(shù)據(jù)展示，采用柱狀圖的形式對氨氣、煙霧進行數(shù)據(jù)展示，平臺管理員可根據(jù)需要移動到相進行@GetMapping("")注釋來接收圖表數(shù)據(jù)信息，前端通過ajax技術(shù)對后端數(shù)據(jù)解析并顯示在界面上。折線圖部分代碼如下，<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)查看信息反饋。平臺管理員可查看由用戶反饋的信息反饋內(nèi)容，通過@RequiresPermissions獲得查看信息反饋內(nèi)容權(quán)限，使用startPage(方法配合前端完成自動分頁，實現(xiàn)代碼如下。publicTableDataInfolistDymessagedymessage){List<Dymessage>list=dymessageServiceselectDymessageList(dymessage);}流程圖如圖5-22所示。返回查詢到的數(shù)據(jù)顯示返回查詢到的數(shù)據(jù)顯示在頁面通過selectDymessageList根據(jù)姓名、班級查詢通過startPageO方法實現(xiàn)自動分頁理Post請求給搜索按鈕綁定搜索事件通過RequiresPermissions獲得相應(yīng)權(quán)限實現(xiàn)效果圖如圖5-23所示。2□varthat=this;url:"/pages/notice/detail/detail?myObdecodeURIComponent(JSONstingifv(myOb公告列表后端主要實現(xiàn)代碼如下：publicQueryWrappernoticeList(S{List<SysNotice>list=noticeServiceselectNotice}?公告詳情前端實現(xiàn)主要代碼如下：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返回查詢列表，小程序列表顯示查詢內(nèi)容then(then(res)請求接口使用JSON.parse()方法將數(shù)據(jù)轉(zhuǎn)換為對象返回500,提示查詢公告詳情頁接收父頁傳過來的參數(shù)jdct獲取noticeld的值轉(zhuǎn)換為JSON字符串的noticeld值圖5-28公告查看流程圖公告詳情溫馨提醒：2018-07-01若依新版本發(fā)布啦維護通知：2018-07-01若依系統(tǒng)凌層維護進修通知：2021-12-15科技樓八樓廁所維修admin發(fā)表于2021-12-14通知公告圖5-29通知公告效果圖圖5-30公告詳情效果圖5.2.3信息反饋模塊饋給管理員，實現(xiàn)人性化平臺。前端通過formSubmit(e)請求用戶輸入的參數(shù)，@RequestBody接受數(shù)據(jù)，使用parseObject()方法將data解析成JSONObject對象保存至dymessage數(shù)據(jù)表中，流程圖如圖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請求據(jù)保存至dymessage創(chuàng)建Dymessage對象對象法將data解析成JSONObject對象返回200,提示提交成功數(shù)信息反饋效果圖如圖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傳給后臺本地存儲后臺返回的數(shù)據(jù)Ywx.getuserlnfo()帶登錄態(tài)，獲取用戶信息，將用戶信息保存在全局用戶未授權(quán)，需再次授權(quán)已授權(quán)，可獲檢測用戶的授是否存在圖5-35微信授權(quán)登錄流程圖WeChat個人中心用戶姓名hqh用戶學(xué)號用戶性別男手機號碼用戶狀態(tài)9圖5-36個人中心效果圖第六章系統(tǒng)測試6.2.1Web平臺功能測試用例編號測試目的測試平臺管理員是否只有輸入正確的賬號、密碼以及驗證碼才可以登錄成功測試步驟1.用戶進入登錄界面2.輸入賬號、密碼以及驗證碼3.點擊登錄按鈕期望結(jié)果系統(tǒng)顯示系統(tǒng)首頁實際結(jié)果系統(tǒng)顯示系統(tǒng)首頁員能否對設(shè)備數(shù)據(jù)進行增加、刪除、查詢以及修改等操作，測試用例如表6-2所示；數(shù)據(jù)分析測試的主要目的是圖表能否正常展示數(shù)據(jù)信息，測試用例如表6-3所示。用例編號測試目的測試平臺管理員能否對設(shè)備數(shù)據(jù)進行增加、刪除、查詢以及修改等操作測試步驟1.管理員用戶進入系統(tǒng)并登陸成功進入首頁2.點擊設(shè)備數(shù)據(jù)管理展開，點擊數(shù)據(jù)展示3.輸入廁所名稱或檢索時間，點擊搜索按鈕，查詢到對應(yīng)數(shù)據(jù)4.點擊添加按鈕，跳轉(zhuǎn)至添加界面，輸入添加信息，點擊確定，系統(tǒng)頁面跳轉(zhuǎn)至數(shù)據(jù)展示頁面并更新添加內(nèi)容5.點擊刪除按鈕，彈出系統(tǒng)提示，點擊確認(rèn)，頁面自動刷新并更新數(shù)據(jù)期望結(jié)果平臺管理員能對設(shè)備數(shù)據(jù)進行增加、刪除、查詢以及修改等操并且數(shù)據(jù)庫隨著管理員的操作要求隨之改變實際結(jié)果與期望結(jié)果一致用例編號測試目的測試圖表能否正常展示數(shù)據(jù)信息測試步驟1.管理員用戶進入系統(tǒng)并登陸成功進入首頁2.點擊設(shè)備數(shù)據(jù)管理展開，點擊數(shù)據(jù)分析3.溫度、濕度折線圖表示，氨氣、煙霧柱狀圖表示期望結(jié)果圖表能正常展示數(shù)據(jù)信息且與數(shù)據(jù)庫數(shù)據(jù)一致實際結(jié)果與期望結(jié)果一致3.通知公告模塊通知公告模塊測試的主要目的是測試平臺管理員能否發(fā)布、修改、查詢以及刪除通知公告，其測試用例如表6-4所示。用例編號測試目的測試平臺管理員能否發(fā)布、修改、查詢以及刪除通知公告測試步驟1.管理員用戶進入系統(tǒng)并登陸成功進入首頁2.點擊系統(tǒng)管理展開，點擊通知公告3.點擊新增按鈕，跳轉(zhuǎn)至添加公告界面，輸入要發(fā)布的信息，點擊確定，系統(tǒng)頁面跳轉(zhuǎn)至通知公告頁面并更新添加內(nèi)容5.輸入公告標(biāo)題、操作人員或公告類型，點擊搜索按鈕，查詢到對應(yīng)信息6.點擊刪除按鈕，彈出系統(tǒng)提示，點擊確認(rèn)，頁面自動刷新并更新信息期望結(jié)果測試平臺管理員能發(fā)布、修改、查詢以及刪除通知公告，并且數(shù)據(jù)庫隨著管理員的操作要求隨之改變實際結(jié)果與期望結(jié)果一致4.信息反饋模塊信息反饋模塊是檢測系統(tǒng)管理員是否能夠正確地瀏覽和刪除用戶的反饋信息。其測試用例表如表6-5所示。用例編號測試目的測試平臺管理員能否正常查看或刪除反饋信息列表測試步驟1.管理員用戶進入系統(tǒng)并登陸成功進入首頁2.點擊信息反饋，跳轉(zhuǎn)至信息反饋頁面3.輸入姓名或班級，點擊搜索，查詢到對應(yīng)信息4.點擊刪除按鈕，彈出系統(tǒng)提示，點擊確認(rèn)信息期望結(jié)果測試平臺管理員能正常查看或刪除反饋信息列表實際結(jié)果測試平臺管理員能正常查看或刪除反饋信息列表1.數(shù)據(jù)展示模塊數(shù)據(jù)展示模塊主要測試用戶通過搜索廁所名稱能否展示數(shù)據(jù)，其廁所用例如表6-6所示。用例編號測試目的測試用戶通過搜索廁所名稱能否展示數(shù)據(jù)測試步驟1.用戶微信授權(quán)登錄，進入小程序首頁2.輸入廁所名稱，點擊搜索，頁面數(shù)據(jù)更新期望結(jié)果測試用戶通過搜索廁所名稱能展示數(shù)據(jù)實際結(jié)果測試用戶通過搜索廁所名稱能展示數(shù)據(jù)2.公告查看模塊公告查看模塊主要測試用戶能否查看平臺管理員發(fā)布的通知公告內(nèi)容，其測試用例如表6-7所示。用例編號測試目的測試用戶能否查看平臺管理員發(fā)布的通知公告內(nèi)容測試步驟1.用戶微信授權(quán)登錄，進入小程序首頁2.點擊公告查看，跳轉(zhuǎn)至公告查看頁面3.點擊要查看的公告，顯示該公告內(nèi)容期望結(jié)果測試用戶能查看平臺管理員發(fā)布的通知公告內(nèi)容實際結(jié)果測試用戶能查看平臺管理員發(fā)布的通知公告內(nèi)容3.信息反饋模塊信息反饋模塊主要測試用戶能否正常提交反饋內(nèi)容，其測試用例如表6-8所示。用例編號測試目的測試用戶能否正常提交反饋內(nèi)容測試步驟1.用戶微信授權(quán)登錄，進入小程序首頁2.點擊信息反饋，跳轉(zhuǎn)至信息反饋頁面3.輸入姓名、班級以及反饋內(nèi)容，點擊提交期望結(jié)果測試用戶能正常提交反饋內(nèi)容實際結(jié)果測試用戶能正常提交反饋內(nèi)容4.平面地圖模塊平面地圖模塊主要測試能否正常顯示平面圖，包括科技樓平面圖和明理樓平面圖其測試用例如表6-9所示。用例編號測試目的測試能否正常顯示平面圖測試步驟1.用戶微信授權(quán)登錄，進入小程序首頁2.點擊平面地圖，跳轉(zhuǎn)至平面地圖頁面3.根據(jù)用戶需要點擊科技樓或明理樓查看期望結(jié)果測試能正常顯示平面圖實際結(jié)果測試能正常顯示平面圖個人中心模塊主要測試能否正常顯示個人信息，包括用戶微信頭像、昵稱、用戶姓名、用戶學(xué)號、用戶性別、郵箱、手機號碼、用戶狀態(tài)等，其測試用例如表6-10所示。用例編號測試目的測試能否正常顯示個人信息測試步驟1.用戶微信授權(quán)登錄，進入小程序首頁期望結(jié)果能正常顯示個人信息實際結(jié)果能正常顯示個人信息第七章總結(jié)與展望本系統(tǒng)設(shè)計了一種應(yīng)用于校園廁所的環(huán)境以及等待人數(shù)監(jiān)測平臺，該平臺由Web端和微信小程序組成。本課題主要使用了微信開發(fā)者工具、IntelliJIDEA2017.1.4以及NavicatPremium工具進行開發(fā)，且之前未接觸過，通過三個月的努力，百度查閱資料以及在老師的幫助下，完成了該系統(tǒng)的開發(fā)。針對傳統(tǒng)校園廁所較為突出的問題，即第一，校園廁所流量具有“潮汐變化”的特點，上下課高峰期，如廁需求量較大，不能很好的選擇人少的廁所如廁；第二，校園廁所是一個禁止吸煙的場所，但在校園的廁所里有很多煙頭以及吸煙的現(xiàn)象還是很常見的，不能及時的發(fā)現(xiàn)處理吸煙問題；第三，廁所空氣質(zhì)量不好的問題，影響如廁心情。在該系統(tǒng)中，采用STM32F103ZET6作為主控芯片，使用NB-IOT技術(shù)進行組網(wǎng)，通過各傳感器對校園廁所環(huán)境進行監(jiān)測，并采集數(shù)據(jù)上傳至阿里云服務(wù)器數(shù)據(jù)庫，再用Springboot+shiro+MyBatis+Thymeleaf+Echarts+JSON+百度地圖