基于Bootstrap的腦卒中評分系統(tǒng)設計與實現(xiàn)

賀建峰　李雅娜　張俊

摘要：信息技術的不斷發(fā)展，使移動醫(yī)療和移動管理變?yōu)楝F(xiàn)實。傳統(tǒng)的腦卒中評分以紙質形式進行存檔，這種方式存儲的數(shù)據不能被直接提取、統(tǒng)計和分析，還會造成嚴重的資源浪費。因此，采用SpringMVC框架與Bootstrap響應式網頁設計框架，設計并實現(xiàn)了腦卒中評分系統(tǒng)。該系統(tǒng)使醫(yī)務人員在移動終端上能夠實現(xiàn)移動評分，對提高診斷質量、醫(yī)療服務水平和節(jié)約成本等都有非常重要的現(xiàn)實意義。

關鍵詞：腦卒中評分系統(tǒng)；移動終端；SpringMVC；Bootstrap

DOIDOI：10.11907/rjdk.172475

中圖分類號：TP319

文獻標識碼：A文章編號文章編號：16727800（2018）003009304

英文摘要Abstract：The continuous development of information technology has made mobile medical and mobile management a reality. The traditional stroke score is archived in paper form， and the stored data in this way can not be extracted directly， statistically and analyzed， and also cause serious waste of resources. Therefore， this paper designs and implements the stroke scoring system by using the SpringMVC framework and the Bootstrap response web design framework. The system can make the medical staff achieve to mobility score in the mobile terminal， and it has a very important practical significance to improve the quality of diagnosis， the level of medical services， cost savings and other aspect.

英文關鍵詞Key Words：stroke scoring system； mobile terminal； SpringMVC； Bootstrap

0引言

隨著智能手機、平板的普及以及4G移動互聯(lián)網的發(fā)展，用戶對網站的訪問越來越多地來自于移動設備。第39次中國互聯(lián)網發(fā)展狀況統(tǒng)計報告顯示，截至2016年12月，我國網民規(guī)模達7.31億，手機網民規(guī)模達6.95億[1]。隨著李克強總理提出將“互聯(lián)網+”行動計劃作為國家發(fā)展戰(zhàn)略，國家“十三五”規(guī)劃建議出爐，探索新型健康醫(yī)療服務模式，實現(xiàn)“互聯(lián)網+健康醫(yī)療”的發(fā)展戰(zhàn)略目標[2]，移動醫(yī)療領域正在迎來巨大的發(fā)展機遇。移動醫(yī)療是衛(wèi)生信息化的一部分，其通過移動計算、醫(yī)療傳感與WiFi/4G等通信技術提供醫(yī)療服務和信息，具體到移動互聯(lián)網領域，則依靠智能手機、平板等移動終端設備提供便捷醫(yī)療服務和信息，移動醫(yī)療以低成本、高效、快捷的優(yōu)勢改變著傳統(tǒng)醫(yī)療模式。

隨著人們生活水平不斷提高、生活節(jié)奏加快及飲食結構不合理，一些慢性病的發(fā)病率急劇上升，其中腦卒中是一類高發(fā)病率、高致死率及高致殘率的慢性疾病，與心臟病、惡性腫瘤在多數(shù)國家構成三大致死原因，還給家庭和社會帶來沉重的經濟負擔及精神負擔。其中，對腦卒中患者進行評分可以有效地評估腦卒中患者疾病的嚴重程度及致殘程度，有利于協(xié)助制定治療方案及康復計劃。傳統(tǒng)的腦卒中評分以紙質形式進行存檔，這種方式存儲的數(shù)據不但不能被直接提取、統(tǒng)計和分析，而且造成嚴重的資源浪費，醫(yī)生還得花時間計算每項評分的總分，造成時間浪費。至此，在原有腦卒中信息管理系統(tǒng)基礎上開發(fā)了腦卒中評分系統(tǒng)，改變傳統(tǒng)紙質評分方式，提高評分效率，有助于醫(yī)生更好地評價患者神經缺損程度，方便獲取臨床數(shù)據進行研究分析，也使醫(yī)院的數(shù)據更合理規(guī)范，為臨床科研工作提供幫助。

在網站、信息系統(tǒng)移動端的開發(fā)中，早期為滿足用戶需求，開發(fā)人員根據瀏覽器的useragent判斷設備類型，再根據設備類型響應具體頁面，顯然這需要制作、維護兩套以上頁面，無疑加大了開發(fā)人員的工作量。由于不同的瀏覽器（或不同版本）對頁面CSS樣式和JS腳本解釋有所不同，因此采用這種方法開發(fā)的頁面要能滿足環(huán)境或用戶需求變化所需的代價是非常高的。隨著響應式Web設計理念的提出，越來越多的設計人員選擇使用響應式設計框架[3]，以低成本方式實現(xiàn)內容布局隨設備環(huán)境以及用戶行為的不同而變化。目前，用戶使用的設備環(huán)境主要包含屏幕尺寸、屏幕定向、系統(tǒng)平臺等。而對諸多設備環(huán)境需求，頁面都能自動切換不同分辨率以確保用戶體驗。

1系統(tǒng)支撐環(huán)境

腦卒中評分系統(tǒng)基于B/S模式進行開發(fā)，采用Tomcat7.0.54作為系統(tǒng)服務啟動項，Oracle作為后臺數(shù)據庫。整個系統(tǒng)分為客戶端、服務器端和數(shù)據庫。

瀏覽器端采用Bootstrap和JQuery框架。其中Bootstrap是目前最流行的一種開源的Web前端開發(fā)框架，它是基于規(guī)范的CSS、JavaScript插件和Less的一套前端工具庫，并且提供了一套完整的CSS模塊、預定義樣式和JavaScript效果，內置了很多漂亮的樣式。其最大的優(yōu)勢是開發(fā)響應式布局，移動設備優(yōu)先，且開發(fā)的網頁可較好地兼容各類瀏覽器。Bootstrap使用Less作為CSS處理器，使CSS具有動態(tài)性，使得開發(fā)者可以方便地讓網頁無論在臺式機、平板設備、手機上都獲得最佳體驗。本系統(tǒng)多終端適配主要是基于Bootstrap和CSS3的Media Query實現(xiàn)。Media Query是通過查詢當前頁面容器寬度，并通過內置的響應式、移動設備優(yōu)先的流式柵格系統(tǒng)進行渲染，以達到不同尺寸、進行不同布局、實現(xiàn)不同終端適配的目的。JQuery在系統(tǒng)中主要實現(xiàn)AJAX請求和表單驗證等功能。

服務器端通過采用SpringMVC實現(xiàn)MVC分層，整個Web的集成框架從邏輯上分為表示層、業(yè)務邏輯層和數(shù)據持久層三部分，其中表示層實現(xiàn)后臺數(shù)據的顯示，業(yè)務邏輯層實現(xiàn)業(yè)務邏輯的處理，持久層通過服務器端與數(shù)據庫的交互實現(xiàn)數(shù)據的持久化。各層之間通過Spring依賴注入進行解耦，并且Spring充當容器的作用，控制相關對象的生命周期，同時進行聲明式的事務管理實現(xiàn)整個系統(tǒng)的高內聚低耦合。數(shù)據持久層通過Hibernate實現(xiàn)，Hibernate用于Dao層與數(shù)據庫進行交互，并使用連接池實現(xiàn)服務器端與數(shù)據庫連接，使得數(shù)據庫連接資源能合理分配、管理與釋放，減少了創(chuàng)建連接的系統(tǒng)開銷。圖1展示了各層之間的分布情況。

2系統(tǒng)功能設計

為了滿足醫(yī)院對腦卒中評分系統(tǒng)的要求，該系統(tǒng)功能設計主要包含兩個模塊：①登錄功能；②評分功能。具體功能模塊如圖2所示。

2.1登錄

（1）用戶認證。為保證系統(tǒng)的安全性，腦卒中評分系統(tǒng)中用戶的密碼以MD5加密算法加密后存儲在文件系統(tǒng)中。當用戶登錄系統(tǒng)時，系統(tǒng)把用戶輸入的密碼計算成MD5值，再與保存在文件系統(tǒng)中的MD5值進行匹配，進而確定輸入的密碼是否正確。通過驗證后，系統(tǒng)獲取用戶信息，查詢出用戶所擁有的所有崗位信息，用Bootstrap框架中的模態(tài)框進行顯示，同時將用戶所選崗位信息寫入session中，完成認證過程。

（2）權限獲取。當用戶選擇崗位后，系統(tǒng)根據用戶所選擇的崗位在后臺調用業(yè)務邏輯，從崗位權限信息表中查找出該崗位所擁有的權限。根據權限中的子模塊編號，從模塊信息表和子模塊信息表中檢索出模塊信息及子模塊信息，同時將用戶所擁有的操作權限轉發(fā)到前臺，供前臺對操作按鈕進行顯示。

（3）權限訪問。通過用戶的操作權限集合依次加載模塊菜單及其功能按鈕，獲取相應的資源，并通過數(shù)據權限檢查獲取具體數(shù)據對象的操作權限。

2.2評分

（1）美國國立衛(wèi)生院神經功能缺損評分（NIHSS）。NIHSS評分是一個可以快速、有效、準確評估腦卒中患者神經功能的系統(tǒng)工具，以其較高的可靠性及有效性，成為目前卒中評分中的金標準[4]。它從意識、眼外肌運動、視野、面肌功能、肢體肌力、感覺功能、協(xié)調性（共濟失調）、語言能力（失語癥）、言語（構音障礙）、忽視癥等方面對患者進行評估[56]。NIHSS評分在臨床干預研究中應用廣泛，是評估治療效果、擬定院內治療方案、制定康復計劃以及檢測患者恢復進展的評價工具[79]，并且可以協(xié)助臨床醫(yī)生制定短期康復及長期管理計劃，確定收治指證[7]。

（2）改良Rankin量表（mRS）。mRS評分為臨床評價卒中后患者在社會環(huán)境中的活動參與情況提供一個簡單迅速的評價手段，目前普遍應用于臨床評價卒中后殘疾情況。mRS評分嘗試著檢測患者的獨立能力，整合了WHO對于肌體功能、活動和參與性的評價，在反映情感障礙方面更敏感[10]。

（3）ABCD2評分表。ABCD2評分法是Johnston等在2007年提出的，因其簡便易行，故備受關注，是目前國際上較為公認的用于評估TIA后腦卒中風險的模型。該評分法由5個臨床因素組成：年齡、血壓（發(fā)病后第一次測得的血壓）、臨床特征、癥狀持續(xù)時間、糖尿病。該評分法主要用于預測短暫性腦缺血發(fā)作（Transient Ischemic Attack，TIA）后腦卒中風險，同時可根據評分將TIA患者分層。ABCD2評分法包括腦卒中的危險因素，如年齡、血壓、糖尿病。外國有學者在急診室采用ABCD2評分法鑒別腦血管病引起的頭暈。

（4）簡易智能精神狀態(tài)量表（MMSE）。MMSE通過對受測者定向力、記憶力、計算力、語言、理解與視空間結構能力等認知功能的綜評，其中語言測試又包含命名、復述、聽理解、閱讀理解及書寫等內容，以此判斷受測者是否患有老年癡呆。

（5）格拉斯哥昏迷量表。格拉斯哥昏迷量表根據患者睜眼、語言和運動情況綜合評定患者有無昏迷及昏迷的嚴重程度。按積分大小劃分昏迷程度，主要用于同一個體不同時期或不同個體間意識障礙的比較。

（6）漢密爾頓焦慮量表。主要用于評定神經癥及其他病人的焦慮癥狀的嚴重程度，臨床上常將其用于焦慮癥的診斷及程度劃分的依據。主要涉及軀體性焦慮和精神性焦慮兩大類因子結構。軀體性焦慮因子包括肌肉系統(tǒng)癥狀、感覺系統(tǒng)癥狀、心血管系統(tǒng)癥狀、呼吸癥狀、胃腸道癥狀、生殖泌尿系統(tǒng)癥狀和植物神經系統(tǒng)癥狀等7項構成；精神性焦慮癥狀由焦慮心境、緊張、害怕、失眠、認知功能、抑郁心境以及會談時行為表現(xiàn)等7項組成。漢密爾頓焦慮量表不大適宜于估計各種精神病時的焦慮狀態(tài)。

（7）吞咽功能評定。吞咽功能評定包括初步評估中的癥狀體征評估和吞咽水試驗，初步評估中的癥狀體征評估包括意識狀態(tài)、頭部和軀干部控制、唇閉合、呼吸方式、軟腭運動、聲音強弱、咽反射、自主咳嗽，如上述指標均無異常，進一步進行吞咽水試驗，評價患者口角流水、吞咽時喉部運動情況、咳嗽、哽咽、聲音質量。

3系統(tǒng)界面實現(xiàn)

根據醫(yī)院對腦卒中評分系統(tǒng)的實際需求，要求在手機、平板等移動終端進行，實現(xiàn)移動評分，再根據Bootstrap具有響應式設計、移動設備優(yōu)先的優(yōu)點，決定采用Bootstrap框架進行前臺頁面的設計，使每個評分頁面都能在不同設備上自適應顯示。Bootstrap的柵格布局系統(tǒng)主要是利用CSS的媒體查詢特性實現(xiàn)，在Bootstrap中定義了以xs、sm、md、lg表示的4種不同閾值斷點類型，實現(xiàn)代碼如下：

/*超小屏幕（小于768px）*/

@media （maxwidth：@screenxsmax）{...}

/*小屏幕（平板，大于等于768px）*/

@media （minwidth：@screensmmin） and （maxwidth：@screensmmax）{...}

/*中等屏幕（桌面顯示器，大于等于992px）*/

@media （minwidth：@screenmdmin） and （maxwidth：@screenmdmax）{...}

/*大屏幕（大桌面顯示器，大于等于1200px）*/

@media （minwidth：@screenlgmin）{...}

3.1菜單顯示方式設計

菜單顯示方式設置為兩種，一種是隱藏，一種是在屏幕的左側顯示。當通過媒體查詢檢測到設備的屏幕寬度大于992px時，此時由斷點類型colmd2和collg2控制左側導航欄寬度；當設備的屏幕寬度小于992px且大于768px時，由斷點類型colsm4控制左側的導航欄寬度；當設備的屏小于768px時，左側的導航欄因頁面寬度變小而隱藏，轉化為用按鈕形式實現(xiàn)功能展示，移動端的顯示效果如圖3所示。

3.2評分界面設計

腦卒中評分要求有查詢、新增和修改的功能，當選中所要訪問的評分菜單時，設備屏幕上顯示相應的評分資源，以列表的形式顯示，包括住院號、姓名、評分項目的總分。單擊增加按鈕就會打開評分項目增加的頁面。為了減少用戶來回切換頁面的麻煩，利用Bootstrap響應式開發(fā)的優(yōu)點，將增加項目的信息設計在模態(tài)框中，以彈框的形式進行顯示。通過定義多種斷點類型，在視口寬度由小變大的過程中，column列會保持默認的豎直堆疊，當視口寬度超過sm的斷點值時，sm斷點樣式生效，column列變?yōu)橐恍袃闪?，使Web頁面效果不受屏幕分辨率影響。在不同的屏幕分辨率下，不同column列的類會發(fā)揮相應作用，以確保用戶體驗，實現(xiàn)響應式Web設計。評分界面如圖4所示。

4結語

本文利用Bootstrap響應式布局、移動設備優(yōu)先的流式柵格系統(tǒng)的優(yōu)點，設計并實現(xiàn)了腦卒中評分系統(tǒng)。在移動終端上訪問腦卒中評分系統(tǒng)，臨床醫(yī)生能夠實現(xiàn)移動評分。改變傳統(tǒng)紙質評分方式，有助于醫(yī)生更好地評價患者神經缺損程度，并方便地獲取臨床數(shù)據進行研究分析，提高工作效率，也使醫(yī)院的數(shù)據更加合理規(guī)范，為臨床科研工作提供幫助。

參考文獻參考文獻：

[1]中國互聯(lián)網絡信息中心.CNNIC發(fā)布第39次《中國互聯(lián)網絡發(fā)展狀況統(tǒng)計報告》[J].中國信息安全，2017（2）：24.

[2]王建磊，韓璐，楊曉宇，等.基于互聯(lián)網醫(yī)療的移動診療方案分析與設計[J].中國數(shù)字醫(yī)學，2015（8）：2124.

[3]何秀全.基于Bootstrap的響應式網頁設計[J].軟件導刊，2017，16（6）：104105.

[4]GOLDSTEIN L B， SAMSA G P. Reliability of the national institutes of health stroke scale extension to non neurologists in the context of a clinical trial[J].Stroke，1997，28（2）：307310.

[5]LYDEN P， LU M， JACKSON C， et al. Underlying structure of the national institutes of health stroke scale：results of a factor analysis. NINDS tPA stroke trial investigators[J].Stroke，1999，30（11）：23472354.

[6]LYDEN P D， LU M， LEVINE S R， et al. A modified national institutes of health stroke scale for use in stroke clinical trials：preliminary reliability and validity[J].Stroke，2001，32（6）：13101317.

[7]SCHLEGEL D， KOLB S J， LUCIANO J M， et al. Utility of the NIH stroke scale as a predictor of hospital disposition[J]. Stroke，2003，34（1）：134137.

[8]SCHLEGEL D J， TANNE D， DEMCHUK A M， et al. Prediction of hospital disposition after thrombolysis for acute ischemic stroke using the national institutes of health stroke scale[J]. Arch Neurol，2004，61（7）：10611064.

[9]SUN T K， CHIU S C， YEH S H， et al. Assessing reliability and validity of the Chinese version of the stroke scale：scale development[J].Int J Nurs Stud，2006，43（4）：457463.

[10]WEIMAR C， KURTH T， KRAYWINKEL K， et al. Assessment of functioning and disability after ischemic stroke[J].Stroke，2002，33（8）：20532059.

責任編輯（責任編輯：何麗）