心理健康服務系統的設計與實現

第1章引言1.1選題背景及意義1.1.1選題背景隨著全球各范圍內新冠疫情的爆發和持續，到現在的慢慢衰弱。但2023年疫情并沒有結束，只是進入了一個新的疫情階段，我們將進入后疫情時代，后疫情時代而不是疫情結束后，是與變異病毒共存成為常態化的時代。圖1.SEQ圖1.\*ARABIC1新冠肺炎大流行前后（即期間）重度抑郁癥（A）和焦慮癥（B）的全球患病率，按年齡和性別分列的病死率.2021年10月，發表在TheLancet上的一篇題為“Globalprevalenceandburdenofdepressiveandanxietydisordersin204countriesandterritoriesin2020duetotheCOVID-19pandemic”的綜述，對2020年1月—2021年1月204個國家和地區由于新冠肺炎所致的抑郁和焦慮障礙情況，進行了匯總分析。該研究指出，若無新冠疫情影響，2020年全球抑郁癥患病率約為2470.5/10萬，焦慮癥患病率約為3824.9/10萬。但在新冠肺炎的影響下，2020年抑郁癥患病率高達3152.9/10萬、焦慮癥患病率高達4802.4/10萬。相比疫情前，疫情期間抑郁癥、焦慮癥患病率分別上升了25%和27%?？梢娺@患病率上升數據是非常巨大的，如圖1.圖1.SEQ圖1.\*ARABIC1新冠肺炎大流行前后（即期間）重度抑郁癥（A）和焦慮癥（B）的全球患病率，按年齡和性別分列的病死率.1.1.2選題意義后疫情時代人們的生活方式和心理健康受到了前所未有的挑戰。長時間的社交隔離、經濟不穩定、恐懼和焦慮等因素對個人和社會的心理健康產生了深遠的影響?，F如今還有許多的長新冠患者，由于疫情所導致的病毒性神經系統損傷所照成的各式各樣的癥狀，但這些癥狀需要很長的時間才能恢復，隨之這種久病不愈的心理狀態就會導致產生焦慮癥軀體化，使得他們生活質量大大下降，所以建立一個可以提供心理健康教育知識的平臺顯得十分有必要，心理健康對疾病治療和康復具有積極轉化效應，這可以讓他們更快的擺脫后遺癥，重新活力滿滿的回到生活當中。設計心理健康服務系統的目的之一就是尋找更有效、更便捷的方式來提供心理健康支持和服務，研究新冠疫情對人們心理健康的影響及其應對策略，提升人們的心靈素質，增強軀體健康?？傊?，建立一個后疫情時代心理健康服務系統變得有著深刻的意義。后疫情時代心理健康服務系統可以提供支持和幫助個人維護和改善疫情后產生的心理健康。針對性強，內容豐富且實時。此外，該系統可以通過提供早期干預和預防措施，幫助人們避免心理健康問題的發生。它可以提供心理教育、心理訓練和心理健康促進活動，幫助人們建立積極的心理健康習慣和應對能力，減少心理健康問題的風險?？梢蕴峁┬睦碇С趾椭笇?，幫助人們應對生活中的挑戰和困難，提升個人的心理彈性和適應能力。1.2國內外發展現狀后疫情時代心理健康服務系統是一種針對個體或群體心理健康需求的綜合性服務系統，其發展趨勢受到全球范圍內心理健康意識的提升和數字化技術的快速發展的推動。隨著疫情使得經濟衰弱，身心健康受到威脅等危害，人們對心理健康的關注日益增加，心理健康服務系統變得更加重要。未來的發展趨勢包括數字化平臺的普及、數據驅動的個性化服務以及跨領域合作的加強，以滿足日益多元化的心理健康需求。在文獻梳理的過程中，眾多學者和論文對后疫情時代心理健康服務系統進行了深入研究。他們強調了心理健康服務系統的個性化定制、數據驅動的傾向，以及多元化的心理健康干預方式。此外，市面上已存在的心理健康服務系統產品功能包括心理咨詢、在線治療、心理健康教育等，這些功能在一定程度上滿足了用戶的心理健康需求，但也存在使用體驗不夠便捷、服務內容不夠精準等問題。通過對社會線下和網絡中關于心理健康的考察，發現國內外心理機構大部分為線下經營，由于疫情的影響，也有不少機構嘗試把服務搬到了線上，但同時，疫情也釋放出了大量的心理需求，三年疫情遺留下來的心理“后遺癥”，需要更多的心理服務人員作為專業服務者進行疏導與干預。隨著心理健康認知的提升以及收入水平的提高，大眾對心理健康服務的需求繼而慢慢釋放出來，市場潛力巨大。心理健康產業與創新技術的融合也為產業帶來了新的發展機遇。1.3論文研究目標和內容本論文的研究內容是設計和實現一個基SpringBoot的心理健康服務平臺，以提供心理支持，幫助用戶應對焦慮、壓力等心理健康問題。通過教育和宣傳活動增進公眾對心理健康的認識，傳達心理健康重要性，并指導用戶尋求支持。以Idea為開發工具，以Java為開發語言，后端使用SpringBoot技術，布局整個系統框架。前端使用Thymeleaf模板引擎，HTML5+CSS3，JavaScript，ElementUI，Bootstrap等技術用于實現平臺的用戶界面和交互通過這些功能，提升用戶體驗?？紤]用戶數據的安全性，MySQL數據庫有具有良好的安全性，因此使用MySQL數據庫用于存儲平臺的數據，能夠確保用戶信息的安全。以上都是為了可以更好地滿足用戶的心理健康服務需求，解決心理健康問題，增強個人心理彈性和適應能力，對提高用戶心理健康水平和提高整個社會幸福感都是非常有益的。1.4論文結構安排第一章是引言部分，主要介紹本論文的研究背景和意義，概述主要研究內容，并分析國內外研究現狀第二章涵蓋系統需求分析，包括系統功能需求分析和系統非功能需求分析。第三章主要為系統設計，可行性分析，功能模塊的總體設計。第四章主要為系統的開發與實現，介紹系統總體結構，功能模塊及數據設計等。第五章主要為系統的測試，測試內容、測試方案以及測試結果。第六章是總結與展望。

第2章系統需求分析2.1系統功能需求分析2.1.1注冊用戶需求分析本系統為后疫情時代心理健康服務系統對于注冊用戶來說需要用戶注冊，查看心理健康新聞動態、熱門文章心理健康相關視頻，熱門文章討論，心理困惑咨詢，心理狀態互動，心理健康評測，心理康復視頻等功能。用戶可以在主頁中查看心理相關的新聞動態文章和視頻資源，在心理評測模塊中可以填寫心理健康評測表通過測評表預估自己的心理狀態是否存在相應的問題?？梢栽诎l布的熱門文章和熱門事件中發表自己的看法留言?？梢韵蚬芾韱T發送信息，發出自己的心圖2.SEQ圖2.\*ARABIC圖2.SEQ圖2.\*ARABIC1注冊用戶用例圖2.1.2管理員需求分析圖2.SEQ圖2.\*ARABIC2系統管理員用例圖圖2.SEQ圖2.\*ARABIC2系統管理員用例圖2.2系統非功能需求分析可擴展性：系統應具備良好的可擴展性，能夠支持大量用戶同時訪問和使用系統，以滿足潛在的高峰期需求。響應時間：系統的響應時間應盡可能快，用戶可以快速獲取到所需的心理健康服務，減少等待時間，提高用戶滿意度?？捎眯裕合到y應具備良好的可用性，界面簡潔明了，易于操作，用戶可以輕松地找到所需的功能，并且系統應該具備良好的穩定性和可靠性，避免因系統故障而導致服務中斷。安全性：用戶的個人隱私數據是非常敏感的，系統需要采取適當的安全措施來保護用戶數據的機密性和完整性，例如加密傳輸、訪問控制等?？啥ㄖ菩裕合到y應具備一定的可定制性，允許管理員根據實際需求進行配置和調整，以滿足不同用戶群體的特定需求。合規性：系統應符合相關的法律法規要求，包括數據保護、隱私保護等方面的合規性要求。2.3本章小結后疫情時代心理健康服務系統的設計與實現的需求分析是為了確保系統能夠滿足用戶的實際需求，并在功能和非功能層面提供高質量的服務。本章著重強調了系統的功能性需求，這些需求對于系統的整體性能和用戶體驗至關重要。我明確了系統的主要功能模塊，其中有熱門新聞資訊文章的閱讀，心理康復視頻、文章討論，心理咨詢、心理測評、心靈互動等。但不限于查看心理資源、進行心理咨詢、使用心理評估工具、用戶交流等。每個功能模塊下還有子功能模塊，可以細分為多個功能點，每個功能點都與用戶需求相對應，確保系統的功能覆蓋全面，能夠滿足用戶的需求。通過這些功能用戶能夠方便的進行心理相關資源的了解，并根據個人心理狀態獲得針對性的康復治療。同時除了功能性需求，非功能性需求同樣至關重要，例如系統的安全性、響應時間、可用性等方面的要求都將直接影響到用戶的滿意度和系統的可靠性。此外，合規性和簡易性也是關鍵的因素，系統需要符合相關法律法規要求并提供良好的用戶支持，以確保用戶能夠安心使用系統并獲得必要的幫助和指導。通過本章的撰寫我對后疫情時代心理健康服務系統的功能性和非功能性有了很清晰的認識，為接下來的后續開發系統的工作中奠定了良好的基礎，在接下來將深入了解并探討如何滿足用戶的心理需求，以及如何構建一個既符合功能性需求又滿足非功能性需求、合規性和簡易性的心理健康服務系統。

第3章系統設計3.1系統總體設計圖3.SEQ圖3.\*ARABIC1后疫情時代心理健康服務系統總體功能圖根據第2章的需求分析，設計并開發了注冊用戶、游客用戶、系統管理員三大功能模塊。后疫情時代心理健康服務系統總體功能設計結構圖如下圖圖3.SEQ圖3.\*ARABIC1后疫情時代心理健康服務系統總體功能圖3.2系統功能模塊設計圖3.SEQ圖3.\*ARABIC圖3.SEQ圖3.\*ARABIC2注冊用戶功能圖圖3.SEQ圖3.\*ARABIC3系統管理員功能圖注冊用戶的功能如下：用戶注冊登錄：用戶的注冊與登錄。服務大廳：查看新聞動態點擊可以跳轉到詳情，查看管理員發布的精選視頻，進入個人信息頁，跳轉到相應的功能模塊。心靈互動：發布帖子，用戶可以進行互動評論。新聞資訊：查看發布的新聞資訊，可以選擇收藏，并且可以舉報不實的新聞資訊。心理評測：進行心理評測、查看心理評測報告、導出心理評測報告。心理咨詢：用戶可以進行選擇心理師進行心理咨詢。系統管理員的功能如下：用戶管理：對用戶進行管理，例如修改用戶信息，刪除用戶信息，設定用戶屬性等操作。服務大廳管理：管理員可以對服務大廳發布的精選視頻或輪播圖進行管理等操作。新聞資訊管理：對發布的新聞資訊信息進行審核，發布，修改，刪除等操作，并且可以查看用戶收藏信息。心靈互動管理：管理員可以對帖子信息，帖子評論進行管理，例如帖子的增加，修改，查找，刪除等操作。心理評測管理：管理員可以進行對評測量表問題信息，問題選項信息，測評因子信息，測評計算公式，評測結果參考信息的管理。心理咨詢：管理員可以對咨詢記錄信息，進行查看，添加，刪除等操作。3.2.1心理咨詢功能設計圖3.圖3.SEQ圖3.\*ARABIC4心理咨詢功能設計圖圖3.SEQ圖3.\*ARABIC5心理咨詢功能流程圖3.2.2新聞資訊功能設計圖3.SEQ圖3.\*ARABIC5心理咨詢功能流程圖圖3.6新聞資訊功能設計圖圖3.7新聞資訊功能流程圖圖3.7新聞資訊功能流程圖3.2.3心靈互動功能設計圖3.SEQ圖3.\*ARABIC8心靈互動功能設計圖3.2.4心理評測功能設計圖3.SEQ圖3.\*ARABIC9心理評測功能設計圖3.2.4服務大廳功能設計圖3.SEQ圖3.\*ARABIC10服務大廳功能設計圖3.3數據庫設計3.3.1數據庫E-R模型設計圖3.圖3.SEQ圖3.\*ARABIC11系統數據庫E-R模型3.3.2實體屬性設計圖3.SEQ圖3.\*ARABIC圖3.SEQ圖3.\*ARABIC12注冊用戶實體屬性圖圖3.SEQ圖3.\*ARABIC圖3.SEQ圖3.\*ARABIC13咨詢請求實體屬性圖圖3.SEQ圖3.\*ARABIC圖3.SEQ圖3.\*ARABIC14心理評測表實體屬性圖圖3.SEQ圖3.\*ARABIC圖3.SEQ圖3.\*ARABIC15互動帖子實體屬性圖3.3.2數據庫詳細表設計圖3.SEQ圖3.\*ARABIC16本系統的數據庫關系模型DMD圖（1）系統數據庫表概覽表3.SEQ表3.\*ARABIC1本系統數據庫表概覽表序號表名表含義字段數關聯表1Sys_User用戶表14User2Sys_Posts帖子信息表10User3Sys_Scale心理測評量表13User4Sys_mental_Knowledge心理健康知識表10User5Sys_scale_Answer選項信息表9User6Sys_Comment評論信息表10User7Sys_Report舉報信息表9User8sys_Message_record咨詢信息記錄表6User9Sys_Scale_result測評結果信息表7User（2）系統用戶Sys_User表的設計表3.SEQ表3.\*ARABIC2系統用戶表結構字段數據類型字段名備注user_idbigint主鍵ID主鍵login_namevarchar登錄賬號user_namevarchar登錄昵稱user_typevarchar用戶類型（00系統用戶01注冊用戶）emailvarchar郵箱phonenumbervarchar手機號碼sexchar用戶性別（0男1女2未知）birthdata生日avatarvarchar頭像路徑passwordvarchar密碼（通過哈希值加密）saltvarchar鹽加密statuschar帳號狀態（0正常1停用）create_timedatetime創建時間remarkvarchar備注（3）帖子信息Sys_Posts表的設計表3.SEQ表3.\*ARABIC3帖子信息表結構字段數據類型字段名備注posts_idbigint帖子id主鍵user_idbigint發帖用戶idposts_titlevarchar帖子標題

posts_contentlongtext帖子內容posts_imagevarchar封面comment_numbigint帖子的回復的數量create_timedatetime帖子發布時間update_timedatetime帖子更新時間last_com_user_idbigint最后回復者idlast_com_timedatetime最后回復時間（4）心理測評量Sys_Scale表的設計表3.SEQ表3.\*ARABIC4心理測評量表結構字段數據類型字段名備注scale_idbigint測評id主鍵scale_titlevarchar測評標題scale_detailslongtext測評詳情user_idvarchar(255)發布者用戶idstatusbigint狀態（0正常1停用）formula_idchar量表的總分計分公式scale_typebigint類型early_warning_scorechar預警分數start_timedouble測評開始時間scale_timedatetime測評時間end_timedatetime測評結束時間create_timedatetime創建時間update_tiemdatetime更新時間（5）心理健康知識Sys_mental_Knowledge表的設計表3.SEQ表3.\*ARABIC5心理健康知識表結構字段數據類型字段名備注mental_knowledge_idbigint心理健康知識id主鍵mental_knowledge_titlevarchar心理健康知識標題mental_knowledge_contentlongtext心理健康知識內容mental_knowledge_authorvarchar作者PublishTimevarchar發布老師賬號mental_knowledge_filevarchar文件（圖片、音頻、視頻）存放路徑mental_knowledge_typevarchar知識類別statusint審核狀態create_timedatetime創建時間update_timedatetime更新時間（6）選項信息Sys_scale_Answer表的設計表3.SEQ表3.\*ARABIC6心理健康知識表結構字段數據類型字段名備注answer_idbigint測評答案id主鍵question_idbigint測評問題idquestion_contentvarchar問題題目factor_idbigint因子idscale_idbigint測評量表idanswer_optionvarchar選項scoredouble得分create_timedatetime創建時間update_timedatetime更新時間（7）評論信息Sys_Comment表的設計表3.SEQ表3.\*ARABIC7評論信息表結構字段數據類型字段名備注comment_idbigint評論id主鍵posts_idbigint帖子iduser_idbigint用戶iduser_namevarchar評論者頭像Namevarchar用戶名稱parent_user_idbigint父評論的用戶id(user_id)parent_comment_idbigint父評論idcontentlongtext評論內容create_timedatetime創建時間update_timedatetime更新時間（8）舉報信息Sys_Report表的設計表3.SEQ表3.\*ARABIC8舉報信息表結構字段數據類型字段名備注report_idbigint舉報id主鍵posts_idbigint被舉報帖子idposts_commentlongtext被舉報內容report_typevarchar舉報類型report_commentvarchar舉報內容report_user_idbigint舉報者idfeedbackchar反饋信息create_timedatetime創建時間update_timedatetime更新時間（9）咨詢信息記錄sys_Message_record表的設計表3.SEQ表3.\*ARABIC9咨詢信息記錄表結構字段數據類型字段名備注message_idbigint信息id主鍵login_namevarchar登錄賬號to_login_namevarchar接受者登錄賬號message_typetinyint1.文本，2.圖片message_contentlongtext信息內容create_timedatetime創建時間（10）測評結果信息Sys_Scale_result表的設計表3.SEQ表3.\*ARABIC10測評結果信息表結構字段數據類型字段名備注result_idbigint測評結果id主鍵scale_idbigint測評量表idscale_titlevarchar測評量表標題result_contentlongtext分數范圍和結果提示result_detailslongtext測評建議create_timedatetime創建時間update_timedatetime更新時間3.4本章小結本章主要介紹了后疫情時代心理健康服務系統的設計與實現中的系統設計。首先，通過需求分析明確所需要的用戶和功能，設計了當中所需要的各種數據表，為。接著在系統設計中采用了Java語言和MySQL數據庫，利用SpringBoot框架，前端采用Thymeleaf模板框架，HTML5+CSS3，JavaScript實現響應式頁面，后端采用Springboot框架實現業務邏輯處理和數據持久化。經過本章的撰寫詳細闡述了系統設計的核心部分，包括用戶管理、心理咨詢、心理測評模塊等。也完整的設計出了系統一些數據表的設計，使得接下來的設計思路有了更加明確的方向。

第4章系統開發與實現4.1系統技術選型本系統主要以JAVA語言為開發基礎語言，MySQL為主要存儲數據庫。后端使用SpringBoot技術為主要框架。采用Idea，MySQL作為主要開發工具，前端使用的技術有Thymeleaf模板引擎，HTML5+CSS3，JavaScript等，并采用ElementUI，Bootstrap組件等用來美化界面4.2開發環境建立操作系統：Microsofitwin1064位開發語言：Java、HTML、JavaSript開發框架：SpingBoot開發工具；Idea、MySQL、VSCode4.2.1相關技術的特點(1)SpringBoot框架簡介SpringBoot是旨在簡化Spring應用程序開發的框架，它擺脫了繁瑣的手動配置文件。通過引入自動配置類的Jar包，根據某些類是否存在來自動導入特定配置類。開發者可以按照SpringBoot的約定編寫配置類，并將其交給框架管理，框架會根據邏輯代碼自動進行所需類的配置。(2)MySQL的特性MySQL是一款功能強大的關系型數據庫管理系統，因其開源、跨平臺、高性能、支持事務、強大的存儲引擎和活躍的社區支持而備受開發者青睞。由于MySQL底層數據結構的優勢，具備高效的查詢性能，尤其在范圍查詢方面表現出色。MySQL支持多種存儲引擎，每個存儲引擎都有獨特特性和適用場景，例如InnoDB存儲引擎提供了故障恢復功能。此外，MySQL通過MVCC事務鎖技術控制不同事務間的交互，避免讀寫沖突，從而提高并發執行讀寫操作的效率。4.3用戶模塊的實現圖4.SEQ圖4.\*ARABIC1主頁信息分享實現界面1圖4.SEQ圖4.\*ARABIC2主頁信息分享實現界面24.3.圖4.SEQ圖4.\*ARABIC1主頁信息分享實現界面1圖4.SEQ圖4.\*ARABIC2主頁信息分享實現界面2其核心代碼如下：<!--搜索--><divstyle="height:50px;"><formmethod="post"action="/system/user/toIndex"id="listform"><listyle="height:50px;float:right;margin-bottom:5px;margin-right:18px;list-style-type:none;"><inputtype="submit"value="搜索"style="height:37px;width:80px;float:right;color:#ffffff;border:solid0.5pxgreenyellow;border-radius:4px;;outline-style:none;background-color:#1787e0"onclick="changesearch()"><spanclass="icon-search"style="margin-right:10px;margin-top:13px;"></span><inputtype="text"placeholder="請輸入搜索關鍵字"th:value="${mentalKnowledgeTitle}"name="mentalKnowledgeTitle"class="input"style="padding-left:2px;border:2pxsolid#5f5f5f;border-radius:5px;height:37px;width:200px;background-color:#f8faf7;float:right;margin-right:5px"/></li></form></div><hr/><divstyle="width:1200px;height:423px;"><!--新聞資訊--><divclass="am-u-md-4am-u-sm-12blog-sidebar"><divclass="blog-sidebar-widgetblog-bor"><h2class="blog-text-centerblog-title"><span>新聞資訊</span></h2><divstyle="text-align:left"><th:blockth:each="mentalKnowledge:${mentalKnowledgeList}"><astyle="font-size:15px;"th:href="@{'/system/knowledge/mentalKnowledge/'+${mentalKnowledge.mentalKnowledgeId}}"th:text="${mentalKnowledgeStat.index+1}+'、'+${mentalKnowledge.mentalKnowledgeTitle}"></a><hrstyle="margin-top:0.6rem;margin-bottom:0.4rem"/></th:block></div></div></div><!--心靈互動--><divclass="am-u-md-4am-u-sm-12blog-sidebar"><divclass="blog-sidebar-widgetblog-bor"style="text-align:right"><h2class="blog-text-centerblog-title"><span>心靈互動</span></h2><divstyle="text-align:left"><th:blockth:each="posts:${postsList}"><astyle="font-size:15px;color:#5f5f5f"th:href="@{'/posts/'+${posts.postsId}}"th:text="${postsStat.index+1}+'.  '+${roAll(posts.postsTitle,16)}"></a><spanstyle="font-size:12px;float:right"th:text="${commons.dateFormat(posts.createTime)}"></span><hrstyle="margin-top:0.6rem;margin-bottom:0.4rem"/></th:block></div></div></div><!--閱讀排行榜--><divclass="am-u-md-4am-u-sm-12blog-sidebar"style="float:right;width:360px;"><divclass="blog-sidebar-widgetblog-bor"><h2class="blog-text-centerblog-title"><span>通知公告</span></h2><divstyle="text-align:left"><th:blockth:each="notice:${noticeList}"><astyle="font-size:15px;"th:href="@{'/system/notice/noticeDetails/'+${notice.noticeId}}"th:text="${noticeStat.index+1}+'.'+${roAll(notice.noticeTitle,16)}"></a><spanstyle="font-size:12px;float:right"th:text="${commons.dateFormat(notice.createTime)}"></span><hrstyle="margin-top:0.6rem;margin-bottom:0.4rem"/></th:block></div></div></div></div>4.3.2登錄注冊頁面圖4.SEQ圖4.\*ARABIC3登錄頁面圖4.SEQ圖4.\*ARABIC4注冊頁面其核心代碼如下：<divclass="signinpanel"><divclass="row"style="width:1000px;height:478px;"><divclass="col-sm-5"style="margin-left:475px;margin-top:100px;"><formid="signupForm"autocomplete="off"><h4class="no-margins">登錄：</h4><inputtype="text"name="username"class="form-controluname"placeholder="用戶名"value="admin"/><inputtype="password"name="password"class="form-controlpword"placeholder="密碼"value="admin123"/><divclass="rowm-t"th:if="${captchaEnabled==true}"><divclass="col-xs-6"><inputtype="text"name="validateCode"class="form-controlcode"placeholder="驗證碼"maxlength="5"/></div></div><divclass="checkbox-custom"th:if="${isRemembered}"th:classappend="${captchaEnabled==false}?'m-t'"><inputtype="checkbox"id="rememberme"name="rememberme"><labelfor="rememberme">記住我</label></div><buttonclass="btnbtn-successbtn-block"id="btnSubmit"data-loading="正在驗證登錄，請稍后...">登錄</button><strongth:if="${isAllowRegister}"><ath:href="@{/register}">立即注冊»</a></strong></form></div></div></div>4.3.3新聞資訊功能圖4.SEQ圖4.\*ARABIC5新聞資訊功能實現界面1圖4.SEQ圖4.\*ARABIC6新聞資訊功能實現界面2其核心代碼如下：<divclass="am-gam-g-fixedblog-fixedindex"style="padding-top:100px;color:#5f5f5f;background-color:#ffffff"><divclass="am-g-fixed"style="max-width:1280px"><divstyle="margin:0auto;background-color:#ffffff;width:1240px;height:250px"><imgth:src="@{/foreground/assets/img/poster1.png}"width="1200px"height="250px"></div><divstyle="margin-top:20px"><astyle="font-size:25px;color:#279F32"th:href="@{/system/user/toIndex}">首頁 ></a><astyle="font-size:25px;color:#279F32"> 新聞資訊</a><formmethod="post"action="/system/knowledge/toKnowledgePage"id="listform"><listyle="height:50px;float:right;margin-bottom:5px;margin-right:18px;list-style-type:none;"><inputtype="submit"value="搜索"style="height:37px;width:80px;float:right;color:#ffffff;border:solid0.5pxgreenyellow;border-radius:4px;;outline-style:none;background-color:#1787e0"onclick="changesearch()"><spanclass="icon-search"style="margin-right:10px;margin-top:13px;"></span><inputtype="text"placeholder="請輸入搜索關鍵字"th:value="${mentalKnowledgeTitle}"name="mentalKnowledgeTitle"class="input"style="padding-left:2px;border:2pxsolid#5f5f5f;border-radius:5px;height:37px;width:200px;background-color:#f8faf7;float:right;margin-right:5px"/></li></form></div><hr/></div><divclass="am-u-md-8am-u-sm-12"><!--文章遍歷并分頁展示--><divth:each="mentalKnowledge:${mentalKnowledges.list}"><articleclass="am-gblog-entry-article"><divclass="am-u-lg-6am-u-md-12am-u-sm-12blog-entry-img"><imgwidth="30%"class="am-u-sm-12img-rounded"style="border-radius:6%;max-height:203px"th:src="@{${commons.show_thumb(mentalKnowledge)}}"/></div><divclass="am-u-lg-6am-u-md-12am-u-sm-12blog-entry-text"><!--文章分類--><spanclass="blog-color"style="font-size:15px;color:#5f5f5f"><a>心理健康知識</a></span><span>   </span><!--發布時間--><spanstyle="font-size:15px;"th:text="'發布于'+${commons.dateFormat(mentalKnowledge.createTime)}"></span><h2><div><astyle="color:#0f9ae0;font-size:20px;"th:href="${commons.mentalKnowledgePermalink(mentalKnowledge.mentalKnowledgeId)}"th:text="${mentalKnowledge.mentalKnowledgeTitle}"></a></div></h2>圖4.SEQ圖4.\*ARABIC7心靈互動功能實現界面1圖4.SEQ圖4.\*ARABIC8心靈互動功能實現界面24.3.圖4.SEQ圖4.\*ARABIC7心靈互動功能實現界面1圖4.SEQ圖4.\*ARABIC8心靈互動功能實現界面2其核心代碼如下：<divclass="am-gam-g-fixedblog-fixedindex"style="padding-top:100px;color:#5f5f5f;background-color:#fbfffd"><divclass="am-g-fixed"style="max-width:1280px"><divstyle="margin:0auto;background-color:#ffffff;width:1240px;height:250px"><imgth:src="@{/foreground/assets/img/poster3.png}"width="1200px"height="250px"></div><divstyle="margin-top:20px"><astyle="font-size:18px;color:#5f5f5f"th:href="@{/system/user/toIndex}">首頁 ></a><astyle="font-size:18px;color:#5f5f5f"> 心靈互動</a><formmethod="post"action="/system/Posts/toPosts"id="listform"><listyle="height:50px;float:right;margin-bottom:5px;margin-right:18px;list-style-type:none;"><inputtype="submit"value="搜索"style="height:37px;width:80px;float:right;color:#ffffff;border:solid0.5pxgreenyellow;border-radius:4px;;outline-style:none;background-color:#1787e0"onclick="changesearch()"><spanclass="icon-search"style="margin-right:10px;margin-top:13px;"></span><inputtype="text"placeholder="請輸入搜索關鍵字"th:value="${postsTitle}"name="postsTitle"class="input"style="padding-left:2px;border:2pxsolid#5f5f5f;border-radius:5px;height:37px;width:200px;background-color:#f8faf7;float:right;margin-right:5px"/></li></form></div><hr/></div><divclass="am-u-md-8am-u-sm-12"><!--文章遍歷并分頁展示--><divth:each="posts:${postsPageInfo.list}"><!--發布時間--><articleclass="am-gblog-entry-article"style="margin:1rem0;padding-bottom:1rem;max-width:780px;background-color:#fbfffd"><divclass="am-icon-comment-o"style="font-size:16px;width:62px;float:left;background-color:#fbfffd"><astyle="color:#5f5f5f"th:text="${mentNum}"></a><!--<span>   </span>--></div><divclass="am-u-lg-6am-u-md-12am-u-sm-12blog-entry-text"style="width:550px;min-height:80px;float:left;background-color:#fbfffd"><divstyle="font-size:16px;width:540px;;background-color:#fbfffd"><astyle="background-color:#fbfffd;"th:href="${commons.postsPermalink(posts.postsId)}"th:text="${roPostsPostsTitle(posts,32)}"></a></div><span><br></span><!--文章摘要overflow:hidden;text-overflow:ellipsis超出隱藏超出用...代替--><divstyle="background-color:#fbfffd;overflow:hidden;text-overflow:ellipsis;font-size:14px;width:500px;max-height:300px;;"th:utext="${posts.postsContent}"></div></div><!--發布時間發布者最后評論時間最后評論者--><divclass="blog-coloram-icon-user"style="font-size:14px;width:160px;margin-bottom:5px;float:right;background-color:#fbfffd"><spanstyle="font-size:12px;"th:text="發布者:          '+${posts.userId}"></span></div><divclass="blog-coloram-icon-clock-o"style="font-size:14px;width:160px;margin-bottom:5px;float:right"><spanstyle="font-size:12px;"th:text="${commons.dateTimeFormat(posts.createTime)}"></span></div><divclass="am-icon-user"style="font-size:14px;width:160px;margin-bottom:5px;float:right"><spanstyle="font-size:12px;"th:text="'最后評論者：'+${posts.lastComUserId}"></span></div><divclass="am-icon-clock-o"style="background-color:#fbfffd;font-size:14px;width:160px;margin-bottom:5px;float:right"><spanstyle="font-size:12px;"th:text="${commons.dateTimeFormat(posts.lastComTime)}"></span></div></article></div>圖4.SEQ圖4.\*ARABIC9心理健康評測實現圖14.3.5圖4.SEQ圖4.\*ARABIC9心理健康評測實現圖1圖4.SEQ圖4.\*ARABIC圖4.SEQ圖4.\*ARABIC10心理健康評測實現圖2$(function(){//獲取考試時間varscaleTime=$("#scaleTime").val();vari=1/5;vartestTiem=scaleTime*i;show_time(scaleTime*60);test_time(testTiem*60);$("#suBmi").click(function(){if(show_time)varflag=confirm("確定要提交測評嗎？");if(flag){returntrue;}else{returnfalse;}});});functionshow_time(totalTime){if(totalTime==0){alert("請在規定時間內答完題目，以確保測評信息準確！請重新開始！");//window.history.back(-1);window.location.reload();}varremainTime=totalTime-1;varmin=remainTime/60;min=parseInt(min);vars=remainTime%60;if(s<10){s="0"+s;}if(min<10){min="0"+min;}varstr=min+":"+s;$("#sp4").text(str);setTimeout("show_time("+remainTime+")",1000);}functiontest_time(totalTime){if(totalTime==0){//可提交時間結束后顯示提交按鈕$(".suBmi").show();varstr2="可提交時間：已可以提交（如果提交不了，請檢查是否每一題都選上了）";$("#ft5").text(str2);}varremainTime=totalTime-1;varmin=remainTime/60;min=parseInt(min);vars=remainTime%60;if(s<10){s="0"+s;}if(min<10){min="0"+min;}varstr=min+":"+s;$("#sp5").text(str);setTimeout("test_time("+remainTime+")",1000);}4.3.6心靈咨詢功能圖4.SEQ圖4.\*ARABIC11心靈資訊功能實現界面1圖4.SEQ圖4.\*ARABIC12心靈咨詢功能實現界面2其核心代碼如下：vartoName;varusername;varteacherLoginName=$("#teacherLoginName").val();$(functionshowChat(){toName=teacherLoginName;vardiv1=document.getElementById('content');div1.scrollTop=div1.scrollHeight;$("#content").css("visibility","visible");$("#content").html("");$("#Inchat").html("正與"+"  "+toName+"  "+"聊天");varchatData=sessionStorage.getItem(toName);if(chatData!=null){$("#content").html(chatData);}})$(function(){$.ajax({url:"/getUsername",success:function(res){username=res;},async:false});//建立websocket連接varws=newWebSocket("ws://:80/chat");ws.onopen=function(evt){$("#username").html("<h3style=\"text-align:center;float:left;font-size:16px;margin:20px0020px;\">用戶："+username+"</h3><h3style='text-align:center;font-weight:bolder;float:right;margin:20px20px00;color:#55e077;'>在線</h3>");}ws.onmessage=function(evt){vardataStr=evt.data;varres=JSON.parse(dataStr);if(res.isSystem){varnames=res.message;varuserlistStr="";userlistStr+="<astyle=\"margin-left:16px;color:#5f5f5f;margin-top:5px;font-size:16px\"onclick='showChat(\""+teacherLoginName+"\")'>"+teacherLoginName+"</a></br>";varbroadcastListStr="";for(varnameofnames){if(name!=username){broadcastListStr+="<pstyle='margin-left:5px;color:#5f5f5f;margin-top:2px;font-size:14px'>["+senDtime+"]<pstyle='margin-left:10px;color:#5f5f5f;font-size:16px'>"+name+"上線了</p></p>";}$("#hyList").html(userlistStr);$("#xtList").html(broadcastListStr);}else{vardataRes=res.messagedataRes=showEmoji(dataRes);varstr="<pstyle='float:left;margin-left:5px;color:#5f5f5f;font-size:14px'>["+senDtime+"]</br><spanid='mes_left'style='margin-left:5px;'><spanstyle='font-size:16px'>"+res.fromName+"：</span><spanstyle='padding:05px05px;background-color:#e5eaff;border-radius:5px;font-size:16px'>"+dataRes+"</span></span></p></br></br></br></br></br></br></br>";if(toName==res.fromName){$("#content").append(str);}varchatData=sessionStorage.getItem(res.fromName);if(chatData!=null){str=chatData+str;}vardiv1=document.getElementById('content');div1.scrollTop=div1.scrollHeight;sessionStorage.setItem(res.fromName,str);}}ws.onclose=function(ev){$("#username").html("<h3style=\"text-align:center;\">用戶："+username+"<span>-離線</span></h3>");}$("#submit").click(function(){vardata=$("#input_text").val();data=showEmoji(data);$("#input_text").val("");varjson={"toName":toName,"message":data};varstr="<pstyle='margin-right:5px;color:#5f5f5f;font-size:14px;float:right'>["+senDtime+"]</br><spanid='mes_right'style='margin-right:5px'><spanstyle=';padding:05px05px;background-color:#e5eaff;border-radius:5px;font-size:16px'>"+data+"</span><spanstyle='font-size:16px'>："+username+"</span></span></p></br></br></br></br></br></br></br>";$("#content").append(str);vardiv1=document.getElementById('content');div1.scrollTop=div1.scrollHeight;varchatData=sessionStorage.getItem(toName);if(chatData!=null){str=chatData+str;}//setItem(key:string,value:string):void;sessionStorage.setItem(toName,str);$.ajax({type:"post",url:"/system/message_record/addMessag