基于HTML5、CSS和JavaScript的個人健康管理系統(tǒng)的設計與實現(xiàn)摘要隨著經(jīng)濟的發(fā)展，生活水平和醫(yī)療水平的提高，人們開始重視個人的身體健康，對于大學生來說，無論是在學校，還是以后步入社會，擁有健康的身體才能更好的學習和工作。本項目提供一種健康監(jiān)控管理系統(tǒng)，用戶可以使用該系統(tǒng)申請體檢表，通過體檢獲取用戶的各項身體指標，根據(jù)獲取的各項身體指標以及用戶體檢信息生成的健康報告，使得用戶可以通過健康報告了解自身的健康狀況，并依據(jù)健康報告調(diào)整自身的飲食、運動等，從而對用戶的身體健康進行全面管理。健康信息管理系統(tǒng)以互聯(lián)網(wǎng)為主要工具，通過對用戶體檢所產(chǎn)生體檢數(shù)據(jù)進行統(tǒng)一管理，并生成對應的健康檔案，將工作人員從這些復雜的數(shù)據(jù)處理中解脫出來，從而更好的幫助用戶進行健康監(jiān)測與檢查，提高服務質(zhì)量。健康管理系統(tǒng)的主要用戶是在校大學生，通過體檢并記錄其體檢過程中所發(fā)現(xiàn)的健康問題，醫(yī)生可以根據(jù)用戶的體檢信息，對用戶的身體健康進行評估，預測在校大學生因作息混亂引起的潛在性疾病，從而提出健康建議，提前預防身體疾病。系統(tǒng)設計實現(xiàn)了申請體檢表功能、醫(yī)生建議功能、健康知識功能、運動社區(qū)功能，體檢檔案管理功能等，在保證滿足在校大學生體檢需要的同時，還能更有效的改善大學生的身體狀況。關(guān)鍵詞：健康監(jiān)視；體檢；健康報告；檔案管理目錄第一章緒論 [8]。1.3論文的組織結(jié)構(gòu)本文主要由七個部分組成，分別是緒論、開發(fā)技術(shù)與工具、系統(tǒng)需求分析、系統(tǒng)總體設計、系統(tǒng)功能實現(xiàn)、系統(tǒng)測試、總結(jié)。每個部分結(jié)構(gòu)主要闡述如下：第一章：緒論。介紹了系統(tǒng)的開發(fā)背景與開發(fā)意義，分析國內(nèi)外的現(xiàn)狀，闡述本課題所研究的內(nèi)容。第二章：開發(fā)技術(shù)與工具。介紹了本系統(tǒng)所使用的相關(guān)技術(shù)以及開發(fā)工具。第三章：系統(tǒng)需求分析。主要是針對健康系統(tǒng)的用戶需求、功能需求、系統(tǒng)需求進行有效地分析。明確系統(tǒng)的開發(fā)方向和基本功能。第四章：系統(tǒng)總體設計。主要進行了系統(tǒng)的結(jié)構(gòu)設計和業(yè)務流程分析，為系統(tǒng)的開發(fā)進行功能模塊的劃分和數(shù)據(jù)庫的設計。第五章：系統(tǒng)總體設計。主要描述了系統(tǒng)中每個功能模塊的具體實現(xiàn)以及設計結(jié)果。呈現(xiàn)了系統(tǒng)實現(xiàn)后的具體體現(xiàn)以及主要功能。第六章：系統(tǒng)測試。主要進行了各功能模塊的功能測試，采用大量的測試用例保證了系統(tǒng)的正常運行。第七章：總結(jié)?？偨Y(jié)在編寫畢業(yè)設計的一些感悟與收獲。第二章開發(fā)技術(shù)與工具本系統(tǒng)前端主要采用HTML5、CSS和JavaScript三種語言來完成，框架使用Vue和ElementUI，使用Axios與后端異步通信。后端使用Java語言，采用SpringBoot和MybatisPlus框架，并且使用Mysql數(shù)據(jù)庫來完成數(shù)據(jù)的存儲和修改等操作，IDEA作為開發(fā)工具。下面將分別介紹這個開發(fā)技術(shù)與工具。2.1開發(fā)技術(shù)2.1.1VueVue是一極其優(yōu)秀構(gòu)建前端頁面的框架，是最近幾年最流行的框架之一，誕生于中國人尤雨溪之手，對新手比較友好。與其他的前端框架不同，Vue采用組件化的方式來構(gòu)建前端頁面，每一個頁面都有若干的組件構(gòu)成，當需要實現(xiàn)一個非常復雜的頁面時，若在一個文件中編寫代碼，就顯得非常的冗余，不利于管理且代碼的復用率太低，這時候若把一個頁面拆分成多個功能模塊，每一個模塊實現(xiàn)特定的功能，再把所有的功能模塊拼湊成一個主頁面，這樣既完成了需求，又使得代碼以后便于管理和擴展，代碼的復用性大大提高，組件就是實現(xiàn)這樣的功能。使用Vue有兩種方式，一是通過script元素直接在頁面中引用，將Vue注冊為一個全局變量，但這種方式有一些局限性，推薦新手使用。二是通過npm在終端下載使用，建議開發(fā)大型項目是使用npm安裝Vue。2.1.2ElementUIElementUI是一個前端界面設計的組件庫，由餓了么團隊開發(fā)，與Vue結(jié)合可以設計出符合開發(fā)需求的界面，能夠非常快速的開發(fā)前端項目，是國內(nèi)目前唯一一個真正推向國際的Vue生態(tài)UI框架。ElementUI對開發(fā)者非常的友好，包含了各種的小組件，開發(fā)者使用時，只需要到Element官網(wǎng)上找其中的模板，不必再編寫復雜的CSS樣式,幫助開發(fā)人員節(jié)省了大量的時間，在Vue項目中使用Element只需npm下載安裝即可。2.1.3SpringBootSpringBoot是目前主流的后端開發(fā)框架，在Spring的基礎上進行開發(fā)的，不僅結(jié)合了Spring框架本身的優(yōu)秀特性，還極大的減少了Spring原本復雜的xml配置，通過少量的代碼就可以更加簡單方便地開發(fā)項目。與Spring相比，SpringBoot開發(fā)一個項目不再需要經(jīng)過復雜的流程如配置web.xml，配置數(shù)據(jù)庫連接與事務、日志文件等等，也不需要考慮版本的問題，只需創(chuàng)建一個SpringBoot項目一步到位。使用SpringBoot還能更加簡單的進行測試，其內(nèi)置JUnit、SpringBootTest、Hamcrest等等測試庫，只需通過注解的方式就能使用。約定優(yōu)于配置是SpringBoot的核心思想，簡單來說就是減少配置文件的編寫，與業(yè)務無關(guān)的功能開發(fā)只需要配置一次即可，比如當項目啟動依賴時，SpringBoot會幫助開發(fā)人員管理所有Jar包的版本，不必再受Jar包版本一致而出錯的困擾，SpringBoot內(nèi)置了一個Tomcat來運行項目，這樣就不必再去做部署?？偟膩碚f，約定優(yōu)于配置是一種較為普遍的軟件設計思路，它的核心本質(zhì)都是為了更高效和更簡單的進行軟件的開發(fā)和維護。2.1.4MyBatisPlusMyBatisPlus是在MyBatis的基礎上進行開發(fā)的一個持久層的工具，由中國的一個團隊苞米豆開發(fā)維護，是目前最流行的持久層框架之一，使用MyBatisPlus可以簡化對數(shù)據(jù)庫的操作，不需要再編寫大量的SQL語句，提高增刪改查的效率，其內(nèi)部本身已經(jīng)封裝了許多的CRUD語句，直接調(diào)用這些語句就能實現(xiàn)對數(shù)據(jù)庫的操作，但使用MyBatisPlus并不是意味著不需要開發(fā)人員編寫業(yè)務語句，MyBatisPlus本身的CRUD語句只能對單表操作，當要實現(xiàn)某一復雜的功能，需要對多個表操作時，其自帶的CRUD方法就不能實現(xiàn)這一需求，就需要編寫SQL語句。MyBatisPlus也提供了許多MyBatis不具有的功能，如自帶分頁插件、分布式ID支持、可以在配置文件中標明主鍵自動增加等等。2.2開發(fā)工具2.2.1IDEAIDEA全稱IntelliJIDEA，是Java語言開發(fā)的集成環(huán)境，在計算機界被譽為最優(yōu)秀的Java開發(fā)工具，具有非常強大的代碼編寫功能。IDEA的每個方面都旨在最大限度地提高開發(fā)人員的工作效率，它可以通過在每個上下文中提供相關(guān)建議來提供超快和智能的體驗：即時和智能的代碼完成，動態(tài)代碼分析和可靠的重構(gòu)工具。IDEA中的編碼輔助不僅僅是關(guān)于編輯器，它還可以幫助你在處理其他方面時保持高效，例如填充字段；搜索元素列表；訪問工具窗口；或切換設置等。IDEA無疑是軟件開發(fā)者的首選IDE。設計中內(nèi)置了效率和智能，這使得從設計、實現(xiàn)、構(gòu)建、部署、測試和調(diào)試到重構(gòu)，都能獲得非常流暢的開發(fā)工作流體驗，它還提供了優(yōu)秀的代碼技巧和驚人的測試支持。而且IDEA建議如何命名所有的東西，能夠提供最佳實踐的命名約定，或者給我們關(guān)于如何遷移到新的Java特性的指導。IDEA還具有整體調(diào)試器功能、內(nèi)聯(lián)計算以及與Tomcat服務器的集成，使得啟動新代碼或進行重大重構(gòu)時效率很高，而且對新框架和技術(shù)的持續(xù)支持讓開發(fā)人員可以節(jié)省時間來學習測試如何工作、應用新特性和修復bug。2.2.2Mysql數(shù)據(jù)庫MysqI數(shù)據(jù)庫是一款小型的關(guān)系型數(shù)據(jù)庫，Mysql數(shù)據(jù)庫是目前最流行的開源數(shù)據(jù)庫。MySQL可以將數(shù)據(jù)靈活存儲在不同的表中，從而提高實際應用中的速度。數(shù)據(jù)庫訪問最常用于標準SQL語言，MySQL用于SQL語言﹐因此它具有高度兼容性。雖然在不同平臺下的安裝和配置都不相同，但是差別也不是很大，Mysql在Windows平臺下兩種安裝方式，二進制版和免安裝版。安裝完Mysql數(shù)據(jù)庫之后，需要啟動服務進程，相應的用戶就可以連接數(shù)據(jù)庫，用戶可通過命令行或者圖形界面工具登錄數(shù)據(jù)庫。

第三章系統(tǒng)需求分析系統(tǒng)的需求分析是對該系統(tǒng)進行深入的研究和功能性分析，研究該系統(tǒng)需要是實現(xiàn)什么樣的功能，目標是讓用戶了解該系統(tǒng)具體實現(xiàn)了哪些功能。本文從系統(tǒng)的可行性和功能性兩大部分進行分析，3.1可行性分析可行性分析圍繞影響系統(tǒng)的各個方面的因素，從社會、經(jīng)濟、技術(shù)對整個系統(tǒng)全面的分析，從客觀的數(shù)據(jù)出發(fā)，經(jīng)過科學性的研究分析，得出該系統(tǒng)實現(xiàn)可能性，從而降低出錯的概率，減少不必要的資源浪費。3.1.1社會可行性社會可行性分析從是否有利于社會的發(fā)展出發(fā)，提出該系統(tǒng)對社會的發(fā)展有哪些意義。2021年，教育部公布了我的高等教育事業(yè)情況，據(jù)調(diào)查結(jié)果顯示我國大學生約為4430萬人，假如只有2000萬的大學生申請體檢，這就需要2000萬張體檢表，這樣下來累計的紙張數(shù)不勝數(shù)，而且體檢的流程非常的繁瑣，這不僅僅花費了大學生的金錢，也浪費了時間。健康管理系統(tǒng)就應運而生，大學生不再需要拿著紙質(zhì)的體檢表，排著長長的隊伍，只需注冊賬號，再網(wǎng)上申請體檢，那些需要靠人工手動計算的大量數(shù)據(jù)完全可以在該系統(tǒng)上代替，極大的減輕了醫(yī)護人員的工作負擔，又可以向用戶提供完整的體檢數(shù)據(jù)，同時對大學生的體檢檔案進行系統(tǒng)化、規(guī)范化的管理。綜上所述，個人健康管理系統(tǒng)是完全符合社會的發(fā)展需求。3.1.2經(jīng)濟可行性經(jīng)濟可行性分析是對該系統(tǒng)從前期調(diào)研、開發(fā)系統(tǒng)、后期維護等一個整體性過程所花費的費用進行分析，權(quán)衡投入與收益的比例，盡可能的減少費用。開發(fā)一個健康管理系統(tǒng)所消耗的費用是非常少的。前期只要進行系統(tǒng)調(diào)研，由大學生來完成調(diào)研工作，其中需要的數(shù)據(jù)與物質(zhì)資料是一部分，只需要付給人工的費用即可，支出的費用與比例也不會非常的龐大，物質(zhì)資源主要是通過由調(diào)查獲取的數(shù)據(jù)進行統(tǒng)一整理而形成，并不會產(chǎn)生過多的花費與開銷,只需根據(jù)關(guān)鍵部分的統(tǒng)計信息加以投入調(diào)配即可。其次是系統(tǒng)的開發(fā)，由學生們自主研究與開發(fā),不僅能節(jié)省相應的勞動力成本,還能培養(yǎng)學生們獨立研究的能力,這樣可以省去外包給校外人員所花費的費用。綜上所述，開發(fā)一個健康管理系統(tǒng)經(jīng)濟上是非?？尚械摹?.1.3技術(shù)可行性技術(shù)可行性分析從開發(fā)該系統(tǒng)所需的相關(guān)技術(shù)問題進行分析，要盡可能的采用成熟的、穩(wěn)定的技術(shù)進行開發(fā)、避免使用過于老舊或過于先進的技術(shù)，盲目的使用老舊、先進的技術(shù)肯定會出現(xiàn)許多的Bug。個人健康管理系統(tǒng)前端頁面采用Vue框架與Element組件庫設計實現(xiàn)，后端采用SpringBoot與MybatisPlus實現(xiàn)，數(shù)據(jù)庫使用Mysql，這些技術(shù)早就已經(jīng)成熟，是目前非常主流開發(fā)系統(tǒng)的框架，且在網(wǎng)絡有非常多的教學視頻，很適合用來開發(fā)個人健康管理系統(tǒng)。Vue支持多平臺運行，具有很強的獨立性，可以很好的實現(xiàn)交互功能，對頁面進行合理布局并保持界面的動態(tài)更新。SpringBoot是目前主流的后端開發(fā)框架，不僅結(jié)合了Spring框架本身的優(yōu)秀特性，還極大的減少了Spring原本復雜的xml配置，通過少量的代碼就可以更加簡單方便地開發(fā)項目。就目前已經(jīng)掌握的開發(fā)技術(shù)和開發(fā)工具來看，完全可以實現(xiàn)對個人管理系統(tǒng)的設計與開發(fā)。3.2系統(tǒng)功能分析個人健康管理系統(tǒng)采用健康檔案統(tǒng)一管理模式，主要用戶是在校的大學生，通過記錄大學四年的健康體檢信息，對大學生的身體健康進行規(guī)范的管理。用戶可通過添加體檢信息表，來管理健康，體檢信息表主要有五官科體檢信息、內(nèi)科體檢信息、外科體檢信息等，分別有不同的體檢醫(yī)生對其管理。具體來說健康管理系統(tǒng)就是根據(jù)用戶的身高、體重、四肢狀況、眼、耳、鼻、喉、心肺以及精神狀態(tài)等身體因素，來由專門的醫(yī)生制定健康合理的飲食及運動計劃，從而改善在校大學生因作息混亂引起的潛在性疾病。3.2.1系統(tǒng)角色描述健康管理系統(tǒng)有三種不同的角色，分別是普通用戶即在校大學生、醫(yī)生、管理員，醫(yī)生又分為三種，外科醫(yī)生、內(nèi)科醫(yī)生、五官科醫(yī)生。三種角色有不同的功能權(quán)限。管理員具有系統(tǒng)的全部功能，如添加與刪除普通用戶與醫(yī)生，對用戶、醫(yī)生基本信息進行修改，查看所有用戶的體檢信息表，提出建議，在運動社區(qū)查看朋友圈，發(fā)表動態(tài)，分享運動等。此外，管理員能添加新的角色，對新的角色賦予權(quán)限，也能對用戶和醫(yī)生回收權(quán)限，從而實現(xiàn)不同角色具有更靈活的功能。管理員用例圖如圖3-1所示：圖3-1管理員用例圖普通用戶具有個人信息管理模塊、個人健康檔案模塊、健康建議模塊、健康知識模塊、運動社區(qū)模塊。用戶可修改個人的一些基本信息如學號、姓名、家庭住址、畢業(yè)院校等，還可以添加體檢信息表，但不能修改其中的體檢信息，只可以進行查看，刪除以及下載體檢信息表。在健康建議模塊，用戶可根據(jù)醫(yī)生的一些建議，對生活習慣做出改變，增加運動計劃等。普通用戶用例圖如圖3-2所示：圖3-2普通用戶用例圖醫(yī)生具有人信息管理模塊、健康建議模塊、健康知識模塊、運動社區(qū)模塊、檔案管理模塊。外科、內(nèi)科、五官科三種不同的醫(yī)生填寫用戶的體檢信息，還可以根據(jù)用戶的體檢信息分析用戶的身體健康，對用戶提出建議。醫(yī)生用例圖如圖3-3所示：圖3-3醫(yī)生用例圖3.2.2系統(tǒng)功能描述個人健康管理系統(tǒng)有個人信息管理模塊、個人健康檔案模塊、健康建議模塊、健康知識模塊、運動社區(qū)模塊、檔案管理模塊、用戶管理模塊、角色管理模塊、權(quán)限管理模塊。管理員具有全部的權(quán)限，用戶和醫(yī)生只具有部分功能。系統(tǒng)功能如圖3-4所示：圖3-4系統(tǒng)功能圖個人信息管理模塊。該模塊包含用戶的一些個人信息，如姓名、學號、學院、出生年月、家庭住址等，也通過對用戶的體重與身高分析，得出曲線圖與BIM指數(shù)(體重除以身高的平方)。個人信息模塊功能如圖3-5所示：圖3-5個人信息模塊功能圖體檢信息模塊。在校大學生在該模塊添加體檢信息表，最多能添加四份體檢信息表，在添加時，能對基本信息修改，可把信息表導出，但不能編寫體檢科目的詳細信息，若一年中有多次體檢，需要把舊的體檢信息表刪除，再添加本年度的體檢信息表。體檢信息模塊如圖3-6所示：圖3-6體檢信息模塊功能圖醫(yī)生建議模塊。醫(yī)生和管理員在此模塊顯示對用戶提出的建議，用戶在此模塊收到醫(yī)生和管理員提出的建議，根據(jù)建議來改善飲食習慣和生活作息。用戶收到建議后可把建議標為已讀和未讀，查看建議的具體內(nèi)容和刪除建議。用戶可通過讀取狀態(tài)查詢已讀和未讀的建議，通過建議的內(nèi)容查詢特定的建議。醫(yī)生建議模塊如圖3-7所示：圖3-7醫(yī)生建議模塊功能圖健康知識模塊。此模塊用來科普生活中的一些健康小知識，所有的角色都能發(fā)表、閱讀、刪除文章，可通過文章的標題和內(nèi)容查詢特定的文章。文章包括已發(fā)布和未發(fā)布的，發(fā)布的文章顯示文章的來源、文章的發(fā)布時間和具體內(nèi)容，未發(fā)布的文章保存在草稿箱中，草稿箱中的文章可以轉(zhuǎn)為發(fā)布狀態(tài)。在發(fā)布文章時，需要添加文章的標題和來源，文章的內(nèi)容部分是一個文本編輯器，有多種字體與顏色選擇，也能插入圖片和網(wǎng)址鏈接。健康知識模塊如圖3-8所示圖3-8健康知識模塊功能圖運動社區(qū)模塊。此模塊是用戶的動態(tài)分享，包括朋友圈，動態(tài)分類，動態(tài)歸檔，發(fā)表動態(tài)等功能。朋友圈功能類似微信的朋友圈，用戶可分享身邊的新聞趣事、鍛煉計劃、減肥情況、運動賽事、健身房評測，體育賽事等等，發(fā)表的動態(tài)對所有的用戶可見，其他的用戶也能在動態(tài)的下方評論。動態(tài)按類別和標簽進行分類，類別有減肥、賽事、生活、器材、keep五大類，標簽有跑步、騎行、健身、生活，每一條動態(tài)只能有一種分類，可以有多個標簽，在動態(tài)主頁部分顯示了最熱標簽、最熱動態(tài)、最新動態(tài)、動態(tài)歸檔等功能。動態(tài)歸檔功能按照發(fā)表動態(tài)的時間進行分類，每一個月的文章放在一起進行歸檔，從而有利于動態(tài)的管理。運動社區(qū)功能如圖3-9所示：圖3-9運動社區(qū)模塊功能圖檔案管理模塊。此模塊管理所有用戶的體檢信息檔案，包括增刪改查，只有醫(yī)生和管理員才具有此功能。內(nèi)科醫(yī)生只能填寫體檢表中內(nèi)科部分的信息，如血管、肺、呼吸道、發(fā)育狀況等。外科醫(yī)生只能填寫體檢表中外科部分的信息，如身高、體重、關(guān)節(jié)、脊柱、血壓、脈搏等。五官科醫(yī)生只能填寫體檢表中五官科的信息，如視力、聽力、嗅覺、是否色盲、是否口吃等。管理員可編輯全部科目的體檢信息，通過體檢信息表，醫(yī)生和管理員可對用戶提出健康建議，用戶會在建議模塊收到該建議。查詢用戶的健康檔案時，可根據(jù)某一學年查詢這一年中體檢信息表、根據(jù)學院查詢某個學院所有的體檢信息表、根據(jù)專業(yè)查詢該專業(yè)的體檢信息表，也可以根據(jù)學生的姓名查詢該學生體檢信息表。檔案管理功能如圖3-10所示：圖3-10檔案管理模塊功能圖用戶管理模塊。只有管理員具有該模塊的功能，保存著醫(yī)生和普通用戶的基本信息對這些信息進行增刪改查。管理員在該模塊可添加新用戶，添加時需要選擇普通用戶和醫(yī)生的類別，必須填寫用戶的學號和姓名，若是醫(yī)生則必須填寫編號和姓名，否則添加失敗。管理員可以修改醫(yī)生和用戶的基本信息，也可以通過學院、專業(yè)、姓名、學號進行分類查詢。用戶管理功能如圖3-11所示：圖3-11用戶管理模塊功能圖角色管理模塊。只有管理員具有該功能，對角色進行增刪改查。管理員在該模塊能添加新的角色，如當體檢信息科目增加時，可新增角色負責新的體檢科目，新的角色不具備任何的功能，需要在權(quán)限管理模塊授予權(quán)限。角色管理模塊功能如圖3-12所示：圖3-12角色管理模塊功能圖權(quán)限管理模塊。只有管理員具有該功能，對除管理員外其他角色進行權(quán)限管理。管理員在此模塊可對新增的角色授予權(quán)限，如使新角色具有檔案管理，個人信息，運動社區(qū)等權(quán)限，也可以回收普通用戶和醫(yī)生的權(quán)限。權(quán)限管理模塊功能如圖3-13所示：圖3-13角色管理模塊功能圖第四章系統(tǒng)總體設計4.1系統(tǒng)總體架構(gòu)系統(tǒng)前端頁面采用Vue與Element框架設計實現(xiàn)，將前端頁面拆分成一個個的組件，從而增加代碼的復用性，提高開發(fā)的效率，組件間使用Vuex進行通信，使用ECharts繪制圖表，使用Axios與后端異步通信。后端使用SpringBoot與MybatisPlus框架。Controler層與前端頁面交換，從HTTP請求中獲取信息，負責請求轉(zhuǎn)發(fā)，接受前端頁面?zhèn)鬟f過來的參數(shù)信息，并調(diào)用Service層中的接口來控制流程，接到返回值后，再傳給前端頁面。Service層是對Dao層傳遞過來的書記進行再次封裝，并進行復雜的業(yè)務處理，再把數(shù)據(jù)傳遞給Controler層。Dao層是對數(shù)據(jù)進行訪問，再Dao層中編寫Sql語句，調(diào)用Entity層中的實體類，實現(xiàn)對數(shù)據(jù)庫中表的增刪改查，調(diào)用Entity層中的實體類要與數(shù)據(jù)庫中屬性值基本保持一致，實現(xiàn)set和get的方法。系統(tǒng)架構(gòu)如同4-1所示：圖4-1系統(tǒng)架構(gòu)圖4.2系統(tǒng)功能設計本系統(tǒng)主要有登錄注冊模塊，個人信息模塊、健康檔案模塊、醫(yī)生建議模塊、健康知識模塊、運動社區(qū)模塊、檔案管理模塊、用戶管理模塊、角色管理模塊、權(quán)限管理模塊。具體模塊的設計與實現(xiàn)如下。4.2.1登錄注冊模塊用戶第一次使用該系統(tǒng)時需要進行注冊，點擊注冊按鈕，選擇注冊的角色，有五官科醫(yī)生、內(nèi)科醫(yī)生、外科醫(yī)生、普通用戶，輸入賬戶名稱，姓名，密碼，判斷賬號是否已經(jīng)存在，若不滿足要求，提示錯誤信息，若滿足要求，再進行判斷兩次輸入的密碼是否一致，若一致則注冊成功。用戶登錄時，輸入賬號和密碼，則判斷賬號是否存在、密碼是否正確，若不滿足要求，則提示錯誤，若賬號和和密碼均正確，判讀登陸的賬號輸入哪一個角色，然后顯示對應的頁面，成功登錄。注冊流程如圖4-2所示：圖4-2注冊流程圖4.2.2個人信息模塊當用戶第一次登錄該系統(tǒng)時，需要完善一些基本信息如家庭住址、畢業(yè)院?；蚬ぷ鲉挝?、職業(yè)、籍貫等等，前端發(fā)生修改個人信息的請求，后端根據(jù)用戶的id查詢健康檔案表，判斷用戶是否有體檢信息表，若沒有則不顯示當前身高曲線圖、體重曲線圖、BIM指數(shù)(體重除以身高的平方)，需要添加體檢信息表，在外科的信息中填寫身高與體重，系統(tǒng)會自動計算BIM指數(shù)。個人信息功能流程如圖4-3所示：圖4-3個人信息功能流程圖4.2.3體檢信息模塊體檢信息模塊主要有添加體檢表、查看體檢詳細信息、編輯和刪除體檢表等功能。用戶在該模塊添加體檢信息表，最多只能添四份體檢表，添加時選擇要添加的學年，系統(tǒng)會判斷該學年的體檢表是否存在，若存在則添加失敗，若不存在則添加成功，用戶在添加體檢表時，可查看基本信息和需要體檢的科目，但不允許修改信息。體檢信息模塊功能如圖4-4所示：圖4-4體檢信息功能流程圖用戶添加成功后可對已添加的體檢表進行查看、編輯、刪除操作。查看顯示體檢科目的全部信息，可以把體檢表下載為pdf，編輯只允許修改基本信息，刪除時會提示用戶是否刪除該體檢表，刪除后能繼續(xù)添加已刪除學年的體檢表。操作體檢表功能如圖4-5所示圖4-5體檢表功能流程圖4.2.4醫(yī)生建議模塊醫(yī)生建議模塊主要有查看建議內(nèi)容、根據(jù)條件查詢、標記建議的讀取狀態(tài)、刪除等功能。點擊該模塊時，系統(tǒng)會判斷該用戶是哪一種角色，不同的角色顯示不同的內(nèi)容，普通用戶在該模塊收到醫(yī)生和管理員的建議，醫(yī)生和管理員在檔案管理模塊根據(jù)用戶的體檢信息表，對用戶提出合理的健康建議?？砂呀ㄗh標記為已讀和未讀狀態(tài)，查詢時，根據(jù)讀取狀態(tài)和消息的具體內(nèi)容進行查詢。醫(yī)生建議功能如圖4-6所示圖4-6醫(yī)生建議功能流程圖4.2.5健康知識模塊健康知識模塊主要有添加文章、閱讀文章、編輯文章、刪除文章、查看已發(fā)布文章草稿箱、根據(jù)條件查詢文章等功能。點擊該模塊，主頁面顯示已發(fā)布的文章，可以對文章進行編輯轉(zhuǎn)到草稿箱中，當對某個文章操作時，將文章的id傳到后端，后端通過id對數(shù)據(jù)庫中的document表進行增刪改查操作。健康知識模塊功能如圖4-7所示：圖4-7健康知識模塊流程圖4.2.6運動社區(qū)模塊運動社區(qū)模塊，該模塊全部的角色都可見，是用戶的動態(tài)分享，包括朋友圈，動態(tài)分類，動態(tài)歸檔，發(fā)表動態(tài)等功能。用戶發(fā)表時。根據(jù)用戶的id對動態(tài)表中的數(shù)據(jù)進行增刪改查，發(fā)表的動態(tài)對所有的角色可見，其他的用戶也能在動態(tài)的下方評論。每條動態(tài)都有一個分類id，點擊分類會根據(jù)分類的id在數(shù)據(jù)表中動態(tài)查詢，查詢的數(shù)據(jù)再返回給前端頁面。每條動態(tài)都有一個發(fā)表日期的字段，根據(jù)日期字段進行歸檔，每一個月的文章放在一起，便于動態(tài)的管理。運動社區(qū)模塊功能如圖4-8所示：圖4-8運動社區(qū)模塊流程圖4.2.7檔案管理模塊只有醫(yī)生和管理員才具有檔案管理模塊。此模塊管理所有用戶的體檢信息檔案。點擊該模塊時，根據(jù)id判斷該用戶的角色，管理員能修改所有體檢科目的信息，不同科目的醫(yī)生只能修改該科目的體檢信息。通過體檢信息表，醫(yī)生和管理員可對用戶提出健康建議，用戶會在建議模塊收到該建議。查詢用戶的健康檔案時，可根據(jù)某一學年查詢這一年中體檢信息表、根據(jù)學院查詢某個學院所有的體檢信息表、根據(jù)專業(yè)查詢該專業(yè)的體檢信息表，也可根據(jù)學生的姓名查詢該學生體檢信息表。檔案管理模塊功能如圖4-9所示：圖4-9檔案管理模塊流程圖4.2.8用戶管理模塊該模塊只有管理員具有，對全部用戶及其個人信息的增刪改查，對某個用戶操作時，將用戶的id傳到后端，對user表進行增刪改查，新添加的用戶默認登錄賬號為學號，，密碼為123。查詢功能，也可以通過學院、專業(yè)、姓名、學號進行分類查詢。用戶管理模塊功能如圖4-10所示：圖4-10用戶管理模塊流程圖4.2.9角色與權(quán)限管理模塊該模塊只有管理員具有，用以增加新的角色并對角色授權(quán)管理。當新增角色時，新角色并不具有任何的功能，需要進行授權(quán)，使其具有某些功能，也能對其他的角色收回權(quán)限，如當不需要五官科的體檢信息時，可收回五官科醫(yī)生的權(quán)限，使五官科醫(yī)生不能修改體檢信息表。角色管理模塊功能如圖4-11所示：圖4-11角色管理模塊流程圖4.3數(shù)據(jù)庫設計4.3.1E-R圖系統(tǒng)整體E-R圖如圖4-12所示，具體的詳細信息如下介紹。圖4-12系統(tǒng)整體E-R圖個人信息的實體：包括id、姓名、學院、專業(yè)、性別、學號、賬號、密碼、民族、角色分類、頭像、學歷、職業(yè)、畢業(yè)院?；蚬ぷ鲉挝弧⒓彝プ≈?、籍貫。當角色為醫(yī)生時，學號作為編號，學院、專業(yè)可不填寫。個人信息實體如圖4-13所示。圖4-13個人信息E-R圖健康知識實體：包括文章id、更新日期、文章內(nèi)容、題目、簡介、是否發(fā)布，當是否發(fā)布的字段值為0時，表示該文章保存在草稿箱中，當值為1，表示已發(fā)布。健康知識實體如圖4-14所示。圖4-14健康知識E-R圖體檢信息有三個實體：分別是五官科實體、內(nèi)科實體、外科實體。五官科實體：包括id、用戶id、學年、左眼視力、右眼視力、左眼矯正視力、右眼矯正視力、色覺檢查、左耳聽力、右耳聽力、耳疾、嗅覺、口吃、咽喉、其他疾病，醫(yī)生簽字。五官科實體如圖4-15所示。圖4-15五官科E-R圖外科實體：包括id、用戶id、學年、身高、體重、腰圍、血壓、脈搏、甲狀腺、皮膚、淋巴、關(guān)節(jié)、脊柱、四肢、平足、其他疾病、醫(yī)生簽字。外科實體如圖4-16所示圖4-16外科E-R圖內(nèi)科實體：包括id、用戶id、學年、營養(yǎng)狀況、精神狀況、呼吸道、心臟血管、肝、脾、其他疾病、醫(yī)生簽字。內(nèi)科實體如圖4-17所示圖4-17內(nèi)科E-R圖醫(yī)生建議實體：包括id、讀取狀態(tài)、創(chuàng)建日期、建議內(nèi)容、用戶id、醫(yī)生id、醫(yī)生類別。其中讀取狀態(tài)字段的值為0時，表示未讀，值為1，表示已讀取。醫(yī)生建議實體如圖4-18所示。圖4-18醫(yī)生建議E-R圖朋友圈實體：包括id、用戶id、標簽id、分類id、評論id、標題、內(nèi)容，瀏覽量。朋友圈實體如圖4-19所示。圖4-19朋友圈E-R圖標簽實體：包括id，頭像，標簽名稱。標簽實體如圖4-20所示。圖4-20標簽實體E-R圖。角色實體：包括id、角色名稱、描述。角色實體如圖4-21所示。圖4-21角色實體E-R圖權(quán)限實體：包括id、名稱。實體如圖4-22所示。圖4-22權(quán)限實體E-R圖4.3.2數(shù)據(jù)庫表設計用戶信息表user。id作為主鍵，唯一標識，配置為自動增長，不可以為空。admin登錄時的賬號，不可以重復，不能為空。具體字段如圖4-23所示。圖4-23用戶信息表健康知識表health_knowledge：當is_published字段值為0時，表示該文章保存在草稿箱中，當值為1，表示已發(fā)布。具體字段如圖4-24所示。圖4-24健康知識表五官科表facial_feature。具體字段如圖4-25所示。圖4-25五官科表外科表surgical。具體字段如圖4-26所示。圖4-26外科表健康建議表suggestion。具體字段如圖4-27所示。圖4-27健康建議表內(nèi)科Internal_medicine表。具體字段如圖4-28所示。圖4-28內(nèi)科表朋友圈f_circle。具體字段如圖4-29所示。圖4-29朋友圈表標簽表tag。具體字段如圖4-30所示。圖4-30標簽表評論表comment。具體字段如圖4-31所示。圖4-31評論表角色表role。具體字段如圖4-32所示。圖4-32角色表資源resources表。具體字段如圖4-33所示。圖4-33資源表權(quán)限管理表role_resource_bind。具體字段如圖4-34所示。圖4-34權(quán)限管理表

第五章系統(tǒng)功能實現(xiàn)本章在前文系統(tǒng)需求分析和設計的基礎上對個人健康管理系統(tǒng)各功能模塊進行編碼實現(xiàn)，描述了系統(tǒng)內(nèi)一些重要功能前后端交互的部分流程。具體介紹了登錄注冊模塊、個人信息模塊、體檢信息模塊、醫(yī)生建議模塊、健康知識模塊、運動社區(qū)模塊、檔案管理模塊、用戶管理模塊、角色及權(quán)限管理模塊。5.1登錄注冊功能用戶第一次使用該系統(tǒng)時需要進行注冊，點擊注冊按鈕，選擇注冊的角色，輸入賬戶名稱，姓名，密碼，前端發(fā)送axios請求將數(shù)據(jù)傳送給后端，后端controller實現(xiàn)接口接受數(shù)據(jù)，并調(diào)用service層的方法對數(shù)據(jù)進行驗證，若返回的值為ture，則注冊成功，否則注冊失敗，service層編寫業(yè)務代碼判斷賬戶是否符合要求、是否已經(jīng)存在，若不滿足要求，提示錯誤信息，若滿足要求，再進行判斷兩次輸入的密碼是否一致，若一致則注冊成功，并使用JWT技術(shù)對密碼進行加密。注冊頁面如圖5-1所示：圖5-1注冊頁面用戶登錄時，輸入賬號和密碼，發(fā)送axios請求將數(shù)據(jù)傳送給后端，后端controller實現(xiàn)接口接受數(shù)據(jù)，并調(diào)用service層的方法對數(shù)據(jù)進行驗證，若是第一次登錄，在service層將賬號和密碼保存在token中，并在設置token的過期時間，token將賬號和密碼保存在存儲在客戶端，在token的保存時間內(nèi)，直接訪問系統(tǒng)不用重新登錄。若不是第一次錄，則判斷賬號是否存在、密碼是否正確，若不滿足要求，則提示錯誤，若賬號和和密碼均正確，判斷登陸的賬號輸入哪一個角色，然后顯示對應的頁面，成功登錄。登錄頁面如圖5-2所示：圖5-2登錄頁面5.2個人信息功能當用戶成功登錄該系統(tǒng)后，顯示個人信息模塊，后端service層根據(jù)token中的用戶信息，查詢數(shù)據(jù)庫該用戶是否有體檢信息表，若沒有提示用戶添加體檢表，完善身高體重信息，在外科的信息中填寫身高與體重，系統(tǒng)會自動計算BIM指數(shù)。點擊修改按鈕，前端發(fā)送axios請求，后端根據(jù)接口的類型調(diào)用service層中的方法，返回前端的數(shù)據(jù)統(tǒng)一轉(zhuǎn)化成josn格式。個人信息頁面如圖5-3所示：圖5-3個人信息頁面5.3體檢信息功能體檢信息模塊主要有添加體檢表、查看體檢詳細信息、編輯和刪除體檢表等功能。每條數(shù)據(jù)顯示編寫、學年、姓名、學號、學院、專業(yè)、班級。點擊添加體檢表按鈕，彈出體檢信息表窗口，并向后端發(fā)送axios請求，請求個人信息模塊的接口，獲取個人信息的數(shù)據(jù)呈現(xiàn)在頁面上。選擇年份與日期，點擊添加按鈕，發(fā)送請求，將數(shù)據(jù)以josn格式傳給后端，cotroller層接受數(shù)據(jù)，調(diào)用service層中的方法，并返回給前端添加成功或失敗的信號。service層編寫業(yè)務代碼，對數(shù)據(jù)表中實現(xiàn)添加功能。點擊查看按鈕，獲取后端數(shù)據(jù)庫中的數(shù)據(jù)，使用Element對布局頁面，對數(shù)據(jù)進行排版，查看體檢的科目，在組件中使用html2canvas與jspdf插件可對體檢表進行下載。點擊刪除按鈕，前端請求delete接口，controller調(diào)用service層中的方法，刪除數(shù)據(jù)庫中的體檢表。體檢信息頁面如圖5-4所示、體檢表頁面如圖5-5所示。圖5-4體檢信息頁面圖5-5體檢表頁面5.3醫(yī)生建議功能醫(yī)生建議模塊主要有查看建議內(nèi)容、根據(jù)條件查詢、標記建議的讀取狀態(tài)、刪除等功能。點擊該模塊時，后端service層根據(jù)token中的信息，判斷該用戶的角色類型，普通用戶在該模塊收到醫(yī)生和管理員的建議，醫(yī)生和管理員提出建議。勾選每條建議最前面的復選框，會獲取每條建議的id，將獲取的id封裝成數(shù)組，點擊上方的按鈕對建議操作，前端根據(jù)不同的操作發(fā)送axios請求，將id數(shù)組傳送給后端，后端controller層接受數(shù)據(jù)，根據(jù)接口的不同調(diào)用方法，從而改變數(shù)據(jù)的讀取狀態(tài)，刪除數(shù)據(jù)，查看數(shù)據(jù)的具體內(nèi)容。查詢功能，選擇查詢的條件，前端將輸入框中的字符串傳給后端，后端service層根據(jù)controller的數(shù)據(jù)模糊查詢，再把結(jié)果返回給controller層，controller層把數(shù)據(jù)返回給前端呈現(xiàn)在頁面上。醫(yī)生建議頁面如圖5-6所示。圖5-6醫(yī)生建議頁面5.4健康知識功能健康知識模塊主要有添加文章、閱讀文章、編輯文章、刪除文章、查看已發(fā)布文章草稿箱、根據(jù)條件查詢文章等功能。文章包括已發(fā)布和未發(fā)布的，發(fā)布的文章顯示文章的來源、文章的發(fā)布時間和具體內(nèi)容，未發(fā)布的文章保存在草稿箱中，草稿箱中的文章可以轉(zhuǎn)為發(fā)布狀態(tài)。點擊該模塊，前端發(fā)送axios請求，后端查詢數(shù)據(jù)庫表中所有的文章及是否發(fā)布的字段，將數(shù)據(jù)封裝成josn格式傳給前端，前端得到數(shù)據(jù)后，判斷每條數(shù)據(jù)中的isPublished變量，若isPublished的值為1，則為已發(fā)布的文章，若isPublished的值為0，則為草稿箱中的文章。健康知識頁面如圖5-7所示。圖5-7健康知識頁面點擊閱讀按鈕，前端將該文章的id發(fā)給后端，后端根據(jù)id查詢文章的題目、具體內(nèi)容、發(fā)布日期以及出處等信息，并將數(shù)據(jù)返回給前端，前端彈出顯示具體內(nèi)容的窗口。文章具體內(nèi)容頁面如圖5-8所示。圖5-8知識文章頁面點擊添加文章按鈕，彈出一個文本編輯器，該文本編輯器使用vue插件中的vue-quill-editor，有多種字體與顏色選擇，也能插入圖片和網(wǎng)址鏈接。填寫文章名、來自何處、簡介、文章內(nèi)容，若點擊保存到草稿箱按鈕，前端將isPublished的值設置為0，若點擊發(fā)布按鈕，前端將isPublished的值設置為1，將所有數(shù)據(jù)封裝成josn格式傳給后端，controller層接受數(shù)據(jù)，并返回true或false，controller將數(shù)據(jù)傳到service層，service層將數(shù)據(jù)轉(zhuǎn)化為對象形式，對數(shù)據(jù)庫進行插入操作，返回給controller層true或false。添加成功后，重新查詢數(shù)據(jù)，加載所有的文章，將新增的文章顯示到頁面上。發(fā)布文章頁面如圖5-9所示。圖5-9發(fā)布文章頁面5.5運動社區(qū)功能運動社區(qū)模塊，是用戶的動態(tài)分享，包括朋友圈，動態(tài)分類，動態(tài)歸檔，發(fā)表動態(tài)等功能。點擊該模塊，查詢數(shù)據(jù)庫dynamic表中的所有的數(shù)據(jù)，每條動態(tài)顯示發(fā)布的作者、標題、閱讀量、標簽等。最熱標簽是統(tǒng)計標簽出現(xiàn)的次數(shù)，從大到小排序，顯示到頁面上，后端service層調(diào)用dao層中的方法遍歷tag表，將查詢的數(shù)據(jù)從大到小排序，并將結(jié)果封裝成josn格式傳到前端頁面，顯示最熱標簽。最熱動態(tài)根據(jù)每條動態(tài)的瀏覽量排序，service層調(diào)用dao層中的方法遍歷dynamic表中的view_counts字段，將動態(tài)排序從大到小排序，并把數(shù)據(jù)返回給前端。最新動態(tài)按照發(fā)布動態(tài)的時間進行排序，service層調(diào)用dao層中的方法遍歷dynamic表中的create_date字段，獲取最新的五條數(shù)據(jù)，返回給前端頁面，前端頁面顯示最新動態(tài)的標題。運動社區(qū)頁面如圖5-10所示。圖5-10運動社區(qū)頁面點擊分類按鈕，顯示動態(tài)的類型，選擇其中的一個動態(tài)點擊，前端發(fā)送axios請求，將類型的id傳遞給后端的cotroller層，controller層將id傳遞給service層，在service層編寫業(yè)務代碼，調(diào)用dao層中的方法，根據(jù)類型id查詢dynamic表中的字段category_id，將二者相同的動態(tài)返回，封裝成對象數(shù)組，再轉(zhuǎn)化為josn格式傳給前端。點擊標簽按鈕，顯示標簽的類型，前端發(fā)送axios請求，將標簽的id傳遞給后端的cotroller層，controller層將id傳遞給service層，在service層編寫業(yè)務代碼，調(diào)用dao層中的方法，根據(jù)類型id查詢dynamic表中的字段tag_id，將二者相同的動態(tài)返回，封裝成對象數(shù)組，再轉(zhuǎn)化為josn格式傳給前端。動態(tài)分類頁面如圖5-11所示。圖5-11分類頁面點擊歸檔按鈕，按照發(fā)表動態(tài)的時間進行分類，每一個月的文章放在一起進行歸檔。前端發(fā)送axios，controller層接受請求并調(diào)用service層的方法遍歷dynamic表中的create_date字段，將數(shù)據(jù)按create_date的值統(tǒng)計每一個月發(fā)布的動態(tài)條數(shù)，返回給前端每個月的動態(tài)條數(shù)以及對應的動態(tài)。文章歸檔頁面如圖5-12所示。圖5-12文章歸檔頁面點擊發(fā)表動態(tài)按鈕，顯示填寫動態(tài)內(nèi)容頁面。輸入標題、內(nèi)容，點擊發(fā)布，前端首先判斷標題是否為空，若為空則提示輸入標題，點擊發(fā)布按鈕，選擇摘要、動態(tài)分類、標簽、三者都不能為空，否則提示錯誤信息。填寫完所有數(shù)據(jù)，點擊發(fā)布，前端發(fā)送axios請求，將該條動態(tài)的所有數(shù)據(jù)以josn格式傳遞給后端，后端接收數(shù)據(jù)后，在service層編寫業(yè)務代碼，調(diào)用dao層中的方法，對dynamic表和tag表進行插入數(shù)據(jù)，若插入成功返回true，失敗返回false，新發(fā)布一條動態(tài)后，在頁面上加載該動態(tài)的詳細內(nèi)容。發(fā)布動態(tài)編輯頁面如圖5-13所示、發(fā)布頁面如圖5-14所示。圖5-13編輯頁面圖5-14發(fā)布頁面5.6檔案管理功能檔案管理功能模塊只對醫(yī)生和管理員顯示，點擊該模塊，后端查詢數(shù)據(jù)庫檔案表中的所有數(shù)據(jù)，并封裝成josn格式返回給前端，前端頁面顯示信息。頁面最上方的查詢功能，可以根據(jù)某一學年查詢這一年中體檢信息表、根據(jù)學院查詢某個學院所有的體檢信息表、根據(jù)專業(yè)查詢該專業(yè)的體檢信息表，也可根據(jù)學生的姓名查詢該學生體檢信息表，選擇查詢的條件，前端將輸入框中的字符串傳給后端，后端service層根據(jù)controller的數(shù)據(jù)模糊查詢，再把結(jié)果返回給controller層，controller層把數(shù)據(jù)返回給前端呈現(xiàn)在頁面上。點擊刪除按鈕，發(fā)送axios請求并將體檢表的id發(fā)送給后端，后端對數(shù)據(jù)庫進行刪除操作。檔案管理頁面如圖5-15所示。圖5-15檔案管理頁面點擊編輯按鈕，前端通過roleId的值判斷該用戶屬于哪一種角色。若roleId的值為1，該用戶為管理員，可以修改所有科目的體檢信息，點擊保存按鈕發(fā)送axios請求，將數(shù)據(jù)轉(zhuǎn)發(fā)給后端，后端根據(jù)接口的類型對數(shù)據(jù)庫表增刪改查操作；若roleId的值為3，該用戶為外科醫(yī)生，可以修改外科的體檢信息，點擊保存按鈕發(fā)送axios請求，將數(shù)據(jù)轉(zhuǎn)發(fā)給后端，后端根據(jù)接口的類型，對數(shù)據(jù)庫中的外科表增刪改查操作；若roleId的值為4，該用戶為內(nèi)科醫(yī)生，可以修改內(nèi)科的體檢信息，點擊保存按鈕發(fā)送axios請求，將數(shù)據(jù)轉(zhuǎn)發(fā)給后端，后端根據(jù)接口的類型，對數(shù)據(jù)庫中的內(nèi)科表增刪改查操作；若roleId的值為5，該用戶為五官科醫(yī)生，可以修改五官科的體檢信息，點擊保存按鈕發(fā)送axios請求，將數(shù)據(jù)轉(zhuǎn)發(fā)給后端，后端根據(jù)接口的類型，對數(shù)據(jù)庫中的五官科表增刪改查操作。若roleId的值為2，為普通用戶不具有該功能。編輯體檢信息頁面如圖5-16所示。圖5-16編輯體檢信息頁面點擊查看按鈕，可以查看所有的體檢信息，通過體檢信息表，醫(yī)生和管理員可對用戶提出健康建議，用戶會在建議功能模塊收到該建議，點擊保存按鈕，發(fā)送axios請求，后端對suggestion表進行插入操作。添加建議頁面如圖5-17所示。圖5-17填寫建議頁面5.7用戶管理功能只有管理員具有該功能，保存著所有用戶的基本信息，可以對這些信息進行增刪改查?？梢酝ㄟ^學院、專業(yè)、姓名、學號進行分類查詢。對某個用戶操作時，發(fā)送axios請求，將用戶的id傳到后端，對user表進行增刪改查。也可以通過學院、專業(yè)、姓名、學號進行分類查詢。用戶管理頁面如圖5-18所示。圖5-18用戶管理頁面管理員在該模塊可添加新用戶，添加時需要選擇普通用戶和醫(yī)生的類別，必須填寫用戶的學號和姓名，若是醫(yī)生則必須填寫編號和姓名，否則添加失敗。填寫完成后，發(fā)送axios請求，將數(shù)據(jù)傳送到后端，后端service層設置username的值默認為學號，密碼為123，然后查詢數(shù)據(jù)庫中的user表，判斷username是否已經(jīng)存在，若存在返回false，若不存在，對user表進行插入操作，返回true。添加用戶頁面如圖5-19所示。圖5-19添加用戶頁面5.8角色與權(quán)限管理功能點擊角色管理按鈕，進入該角色管理模塊，管理員在該模塊對已有的角色進行管理有編輯、刪除以及新增操作。點擊編輯按鈕，可以對角色的名稱、角色的描述進行修改，點擊刪除按鈕，刪除用戶，前端發(fā)送axio請求，將角色的id傳到后端，后端根據(jù)不同接口類型，對role表更新刪除。點擊新增按鈕，添加新的角色，發(fā)送axio請求并將數(shù)據(jù)傳送給后端，后端對role進行插入操作。角色管理頁面如圖5-20所示。圖5-20用戶管理頁面點擊權(quán)限管理按鈕，進入該權(quán)限管理模塊，管理員在該模塊對已有的角色進行授權(quán)。當修改某個功能的權(quán)限時，前端將功能模塊的id與角色的id傳給后端，后端對role_resource_bind表更新，修改角色的權(quán)限。權(quán)限管理頁面如圖5-21所示。圖5-21權(quán)限管理頁面

第六章系統(tǒng)測試6.1測試目的系統(tǒng)測試就是要對本設計完成的軟件其中的功能和穩(wěn)定性的測試而且本軟件需要達到的功能的穩(wěn)定性要瞞住用戶的需求而且功能要充足，這樣才能夠說明本設計是成功的。在完成一個系統(tǒng)后我們只有經(jīng)過大量的測試以后才能夠明白該系統(tǒng)都有哪些問題，系統(tǒng)測試是完成該系統(tǒng)的最后一部分，完成該系統(tǒng)肯定會由于開發(fā)人員的不小心或者考慮不周出現(xiàn)錯誤，一個小小的錯誤就可能導致系統(tǒng)啟動不了，或者功能無法實現(xiàn)。這就會耽誤我們大量的時間去找bug去解決，因此當我們開發(fā)系統(tǒng)時一定要去減少錯誤的產(chǎn)生。對系統(tǒng)進行功能測試，功能測試對系統(tǒng)的設計結(jié)構(gòu)無關(guān)，在結(jié)合實際情況下能夠完成目標則為成功。本文只采用功能測試，選擇本系統(tǒng)比較重要的功能進行測試。6.2功能測試注冊功能測試，注冊是需要選擇要注冊的角色、填寫賬號、密碼等。具體測試用例如表6-1所示。表6-1注冊功能測試用例編號測試用例操作流程測試結(jié)果01不選擇注冊角色點擊注冊按鈕提示“請選擇角色”02不填寫賬號點擊注冊按鈕提示“請輸入有效值”03填寫賬號為aa點擊注冊按鈕提示“字段名太短”04填寫賬號為admin點擊注冊按鈕提示“賬號已存在”05密碼與確認密碼填寫不同的數(shù)據(jù)點擊注冊按鈕提示“兩次輸入密碼不一致”06填寫正確的信息點擊注冊按鈕提示“注冊成功”體檢信息模塊，有添加體檢表，查詢、編輯、刪除體檢表等功能。具體測試用例如表6-2所示。表6-2體檢信息功能測試用例編號測試用例操作流程測試結(jié)果01添加體檢表點擊添加體檢表按鈕顯示體檢信息頁面02選擇已經(jīng)存在的年月點擊確定按鈕提示“該學年的體檢表已經(jīng)存在，請重新選擇”03選擇未有的年份點擊確定按鈕添加成功04查看體檢表點擊查看按鈕顯示體檢表的詳細信息05編輯信息點擊編輯按鈕顯示編輯頁面06刪除體檢表點擊刪除按鈕提示“是否刪除該體檢表”醫(yī)生建議模塊。有標記讀取狀態(tài)、刪除、閱讀、查詢等功能。具體測試用例如表6-3所示。表6-3醫(yī)生建議功能測試用例編號測試用例操作流程測試結(jié)果01不勾選復選框點擊標記已讀按鈕提示“至少選擇一條數(shù)據(jù)”02不勾選復選框點擊標記未讀按鈕提示“至少選擇一條數(shù)據(jù)”03不勾選復選框點擊批量刪除按鈕提示“至少選擇一條數(shù)據(jù)”04勾選復選框點擊標記已讀按鈕勾選的建議被標記為已讀05勾選復選框點擊標記已讀按鈕勾選的建議被標記為未讀06勾選復選框點擊批量刪除按鈕勾選的建議被刪除07輸入查詢條件點擊查詢按鈕符合條件的建議被查詢08刪除單條建議點擊刪除按鈕該條建議被刪除健康知識模塊，有發(fā)布文章，閱讀文章，編輯文章，刪除文章，草稿箱等功能。具體測試用例如表6-4所示。表6-4健康知識功能測試用例編號測試用例操作流程測試結(jié)果01閱讀文章點擊閱讀按鈕顯示文章的具體內(nèi)容02編輯文章點擊編輯按鈕顯示編輯框03刪除文章點擊刪除按鈕提示“是否刪除該文章”04文章標題為空點擊發(fā)布按鈕提示“請輸入文章標題”05文章簡介為空點擊發(fā)布按鈕提示“請輸入文章簡介”06文章內(nèi)容為空點擊發(fā)布按鈕提示“請輸入文章內(nèi)容”07正確添加點擊發(fā)布按鈕發(fā)布成功08輸入標題查詢點擊查詢按鈕符合條件的文章被查詢09