基于Bootstrap的脑卒中评分系统设计与实现

贺建峰　李雅娜　张俊

摘要：信息技术的不断发展，使移动医疗和移动管理变为现实。传统的脑卒中评分以纸质形式进行存档，这种方式存储的数据不能被直接提取、统计和分析，还会造成严重的资源浪费。因此，采用SpringMVC框架与Bootstrap响应式网页设计框架，设计并实现了脑卒中评分系统。该系统使医务人员在移动终端上能够实现移动评分，对提高诊断质量、医疗服务水平和节约成本等都有非常重要的现实意义。

关键词：脑卒中评分系统；移动终端；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移动互联网的发展，用户对网站的访问越来越多地来自于移动设备。第39次中国互联网发展状况统计报告显示，截至2016年12月，我国网民规模达7.31亿，手机网民规模达6.95亿[1]。随着李克强总理提出将“互联网+”行动计划作为国家发展战略，国家“十三五”规划建议出炉，探索新型健康医疗服务模式，实现“互联网+健康医疗”的发展战略目标[2]，移动医疗领域正在迎来巨大的发展机遇。移动医疗是卫生信息化的一部分，其通过移动计算、医疗传感与WiFi/4G等通信技术提供医疗服务和信息，具体到移动互联网领域，则依靠智能手机、平板等移动终端设备提供便捷医疗服务和信息，移动医疗以低成本、高效、快捷的优势改变着传统医疗模式。

随着人们生活水平不断提高、生活节奏加快及饮食结构不合理，一些慢性病的发病率急剧上升，其中脑卒中是一类高发病率、高致死率及高致残率的慢性疾病，与心脏病、恶性肿瘤在多数国家构成三大致死原因，还给家庭和社会带来沉重的经济负担及精神负担。其中，对脑卒中患者进行评分可以有效地评估脑卒中患者疾病的严重程度及致残程度，有利于协助制定治疗方案及康复计划。传统的脑卒中评分以纸质形式进行存档，这种方式存储的数据不但不能被直接提取、统计和分析，而且造成严重的资源浪费，医生还得花时间计算每项评分的总分，造成时间浪费。至此，在原有脑卒中信息管理系统基础上开发了脑卒中评分系统，改变传统纸质评分方式，提高评分效率，有助于医生更好地评价患者神经缺损程度，方便获取临床数据进行研究分析，也使医院的数据更合理规范，为临床科研工作提供帮助。

在网站、信息系统移动端的开发中，早期为满足用户需求，开发人员根據浏览器的useragent判断设备类型，再根据设备类型响应具体页面，显然这需要制作、维护两套以上页面，无疑加大了开发人员的工作量。由于不同的浏览器（或不同版本）对页面CSS样式和JS脚本解释有所不同，因此采用这种方法开发的页面要能满足环境或用户需求变化所需的代价是非常高的。随着响应式Web设计理念的提出，越来越多的设计人员选择使用响应式设计框架[3]，以低成本方式实现内容布局随设备环境以及用户行为的不同而变化。目前，用户使用的设备环境主要包含屏幕尺寸、屏幕定向、系统平台等。而对诸多设备环境需求，页面都能自动切换不同分辨率以确保用户体验。

1系统支撑环境

脑卒中评分系统基于B/S模式进行开发，采用Tomcat7.0.54作为系统服务启动项，Oracle作为后台数据库。整个系统分为客户端、服务器端和数据库。

浏览器端采用Bootstrap和JQuery框架。其中Bootstrap是目前最流行的一种开源的Web前端开发框架，它是基于规范的CSS、JavaScript插件和Less的一套前端工具库，并且提供了一套完整的CSS模块、预定义样式和JavaScript效果，内置了很多漂亮的样式。其最大的优势是开发响应式布局，移动设备优先，且开发的网页可较好地兼容各类浏览器。Bootstrap使用Less作为CSS处理器，使CSS具有动态性，使得开发者可以方便地让网页无论在台式机、平板设备、手机上都获得最佳体验。本系统多终端适配主要是基于Bootstrap和CSS3的Media Query实现。Media Query是通过查询当前页面容器宽度，并通过内置的响应式、移动设备优先的流式栅格系统进行渲染，以达到不同尺寸、进行不同布局、实现不同终端适配的目的。JQuery在系统中主要实现AJAX请求和表单验证等功能。

服务器端通过采用SpringMVC实现MVC分层，整个Web的集成框架从逻辑上分为表示层、业务逻辑层和数据持久层三部分，其中表示层实现后台数据的显示，业务逻辑层实现业务逻辑的处理，持久层通过服务器端与数据库的交互实现数据的持久化。各层之间通过Spring依赖注入进行解耦，并且Spring充当容器的作用，控制相关对象的生命周期，同时进行声明式的事务管理实现整个系统的高内聚低耦合。数据持久层通过Hibernate实现，Hibernate用于Dao层与数据库进行交互，并使用连接池实现服务器端与数据库连接，使得数据库连接资源能合理分配、管理与释放，减少了创建连接的系统开销。图1展示了各层之间的分布情况。

2系统功能设计

为了满足医院对脑卒中评分系统的要求，该系统功能设计主要包含两个模块：①登录功能；②评分功能。具体功能模块如图2所示。

2.1登录

（1）用户认证。为保证系统的安全性，脑卒中评分系统中用户的密码以MD5加密算法加密后存储在文件系统中。当用户登录系统时，系统把用户输入的密码计算成MD5值，再与保存在文件系统中的MD5值进行匹配，进而确定输入的密码是否正确。通过验证后，系统获取用户信息，查询出用户所拥有的所有岗位信息，用Bootstrap框架中的模态框进行显示，同时将用户所选岗位信息写入session中，完成认证过程。

（2）权限获取。当用户选择岗位后，系统根据用户所选择的岗位在后台调用业务逻辑，从岗位权限信息表中查找出该岗位所拥有的权限。根据权限中的子模块编号，从模块信息表和子模块信息表中检索出模块信息及子模块信息，同时将用户所拥有的操作权限转发到前台，供前台对操作按钮进行显示。

（3）权限访问。通过用户的操作权限集合依次加载模块菜单及其功能按钮，获取相应的资源，并通过数据权限检查获取具体数据对象的操作权限。

2.2评分

（1）美国国立卫生院神经功能缺损评分（NIHSS）。NIHSS評分是一个可以快速、有效、准确评估脑卒中患者神经功能的系统工具，以其较高的可靠性及有效性，成为目前卒中评分中的金标准[4]。它从意识、眼外肌运动、视野、面肌功能、肢体肌力、感觉功能、协调性（共济失调）、语言能力（失语症）、言语（构音障碍）、忽视症等方面对患者进行评估[56]。NIHSS评分在临床干预研究中应用广泛，是评估治疗效果、拟定院内治疗方案、制定康复计划以及检测患者恢复进展的评价工具[79]，并且可以协助临床医生制定短期康复及长期管理计划，确定收治指证[7]。

（2）改良Rankin量表（mRS）。mRS评分为临床评价卒中后患者在社会环境中的活动参与情况提供一个简单迅速的评价手段，目前普遍应用于临床评价卒中后残疾情况。mRS评分尝试着检测患者的独立能力，整合了WHO对于肌体功能、活动和参与性的评价，在反映情感障碍方面更敏感[10]。

（3）ABCD2评分表。ABCD2评分法是Johnston等在2007年提出的，因其简便易行，故备受关注，是目前国际上较为公认的用于评估TIA后脑卒中风险的模型。该评分法由5个临床因素组成：年龄、血压（发病后第一次测得的血压）、临床特征、症状持续时间、糖尿病。该评分法主要用于预测短暂性脑缺血发作（Transient Ischemic Attack，TIA）后脑卒中风险，同时可根据评分将TIA患者分层。ABCD2评分法包括脑卒中的危险因素，如年龄、血压、糖尿病。外国有学者在急诊室采用ABCD2评分法鉴别脑血管病引起的头晕。

（4）简易智能精神状态量表（MMSE）。MMSE通过对受测者定向力、记忆力、计算力、语言、理解与视空间结构能力等认知功能的综评，其中语言测试又包含命名、复述、听理解、阅读理解及书写等内容，以此判断受测者是否患有老年痴呆。

（5）格拉斯哥昏迷量表。格拉斯哥昏迷量表根据患者睁眼、语言和运动情况综合评定患者有无昏迷及昏迷的严重程度。按积分大小划分昏迷程度，主要用于同一个体不同时期或不同个体间意识障碍的比较。

（6）汉密尔顿焦虑量表。主要用于评定神经症及其他病人的焦虑症状的严重程度，临床上常将其用于焦虑症的诊断及程度划分的依据。主要涉及躯体性焦虑和精神性焦虑两大类因子结构。躯体性焦虑因子包括肌肉系统症状、感觉系统症状、心血管系统症状、呼吸症状、胃肠道症状、生殖泌尿系统症状和植物神经系统症状等7项构成；精神性焦虑症状由焦虑心境、紧张、害怕、失眠、认知功能、抑郁心境以及会谈时行为表现等7项组成。汉密尔顿焦虑量表不大适宜于估计各种精神病时的焦虑状态。

（7）吞咽功能评定。吞咽功能评定包括初步评估中的症状体征评估和吞咽水试验，初步评估中的症状体征评估包括意识状态、头部和躯干部控制、唇闭合、呼吸方式、软腭运动、声音强弱、咽反射、自主咳嗽，如上述指标均无异常，进一步进行吞咽水试验，评价患者口角流水、吞咽时喉部运动情况、咳嗽、哽咽、声音质量。

3系统界面实现

根据医院对脑卒中评分系统的实际需求，要求在手机、平板等移动终端进行，实现移动评分，再根据Bootstrap具有响应式设计、移动设备优先的优点，决定采用Bootstrap框架进行前台页面的设计，使每个评分页面都能在不同设备上自适应显示。Bootstrap的栅格布局系统主要是利用CSS的媒体查询特性实现，在Bootstrap中定义了以xs、sm、md、lg表示的4种不同阈值断点类型，实现代码如下：

/*超小屏幕（小于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时，左侧的导航栏因页面宽度变小而隐藏，转化为用按钮形式实现功能展示，移动端的显示效果如图3所示。

3.2评分界面设计

脑卒中评分要求有查询、新增和修改的功能，当选中所要访问的评分菜单时，设备屏幕上显示相应的评分资源，以列表的形式显示，包括住院号、姓名、评分项目的总分。单击增加按钮就会打开评分项目增加的页面。为了减少用户来回切换页面的麻烦，利用Bootstrap响应式开发的优点，将增加项目的信息设计在模态框中，以弹框的形式进行显示。通过定义多种断点类型，在视口宽度由小变大的过程中，column列会保持默认的竖直堆叠，当视口宽度超过sm的断点值时，sm断点样式生效，column列变为一行两列，使Web页面效果不受屏幕分辨率影响。在不同的屏幕分辨率下，不同column列的类会发挥相应作用，以确保用户体验，实现响应式Web设计。评分界面如图4所示。

4结语

本文利用Bootstrap响应式布局、移动设备优先的流式栅格系统的优点，设计并实现了脑卒中评分系统。在移动终端上访问脑卒中评分系统，临床医生能够实现移动评分。改变传统纸质评分方式，有助于醫生更好地评价患者神经缺损程度，并方便地获取临床数据进行研究分析，提高工作效率，也使医院的数据更加合理规范，为临床科研工作提供帮助。

参考文献参考文献：

[1]中国互联网络信息中心.CNNIC发布第39次《中国互联网络发展状况统计报告》[J].中国信息安全，2017（2）：24.

[2]王建磊，韩璐，杨晓宇，等.基于互联网医疗的移动诊疗方案分析与设计[J].中国数字医学，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.

责任编辑（责任编辑：何丽）