基于MVVM模式的中国科技云门户管理系统的设计与实现

梁文婧，张宏海，张蕾蕾，王妍

1.中国科学院计算机网络信息中心，北京 100083

2.中国科学院大学，北京 100049

引 言

中国科技云是中国第一个基于云计算的服务于中国科研工作人员的云平台，依托于中国科学院强大的基础设施，整合各个学科的优质资源，为科研工作者提供特色化的服务，促进我国科研方式的转变，助力重大科技成果的产出和国家科技创新能力的提升[1-2]。到目前为止，中国科技云门户已经汇聚了包括计算服务、存储服务、网络服务在内的120多项资源服务，共涵盖超过11 个学科，共享计算能力已经达到200 PFLops，共享在线存储能力已达到30PB，累计用户访问量已超过10 万。由于中国科技云门户面向的用户群体主要是广大科研工作人员，涉及大量与科学计算相关的活动，对服务的实时性和准确性要求较高，为保证计算任务的高效、正确执行，必须提供可靠的后台管理系统对门户进行实时监控，保证服务质量[3-7]。此外，由于中国科技云涵盖的业务种类多、规模大，而且是一个长期演进的项目，所以中国科技云门户管理系统设计时必须考虑到系统升级、维护的易操作性，前后端分离的开发模式能很好地满足系统后期的新需求，因此该系统开发选择MVVM 模式实现前后端分离。MVVM 模式下代码结构清晰，便于后期升级、维护，MVVM 模式解除了View（视图）和ViewModel（视图模型）之间的紧耦合，使开发人员可以专注自己的开发内容，分工协作，有利于创建灵活、友好的系统，能较好地适应后台管理系统的需求[8]。开发一款基于MVVM 模式的管理系统既可以为管理人员提供操作简单、可视化的界面，又可以提高开发效率，方便后期系统升级与功能拓展。

1 系统设计

1.1 系统总体设计

中国科技云门户管理系统复杂度较高，为了使开发的系统有稳健性、易用性、可维护性等特点，在着手开发软件之前，对其进行了全方位的详细设计。中国科技云门户管理系统最终目标是实现一个完全由前端控制页面展示内容和路由切换的单页面应用，后端可以视作数据源，依据前端需求通过相应接口提供服务。因此，中国科技云门户管理系统的设计采用前后端分离模式，前端采用MVVM 架构，结合Vue 框架实现视图层和数据解耦合，通过路由切换实现展示界面的更改，可以做到客户端局部刷新，减小服务端的压力，通过组件实现各模块独立开发，同时通过组件的复用降低代码量。如图1所示，页面是由多个组件依据树状结构组织成组件树实现的。

图1 页面的树形结构抽象图Fig.1 Tree structure abstract graph of page

每个组件又涵盖View、Model（模型）、View-Model 三部分。View 层负责界面设计，ViewModel层负责数据调配，数据加工交给Model 处理，并通过通知机制让View 及时响应Viewmodel 的变化。开发过程中，UI 部分的表单、弹窗、抽屉、面包屑等基础组件从Element-UI 组件库中选择。

1.2 功能模块设计

中国科技云门户管理系统包含权限管理、系统设置、内容管理、服务管理、资源访问与统计、服务监控六个模块，系统各模块的设计如图2。

图2 系统模块设计Fig.2 Design of system module

权限管理包含用户管理、单位管理、角色管理以及客户管理四部分。用户管理针对的是具有后台管理权限的用户，支持修改用户个人信息，支持检索用户；单位管理可以依据用户所属单位，为其提供精细化的服务，支持修改单位信息以及新增、删除单位等操作；角色管理模块支持管理人员对不同角色分配相应权限，支持后期修改，灵活高效；客户管理针对客户群体，通过客户管理模块能够查看客户状态、客户类型，支持查询和修改功能。

系统设置模块包含菜单管理和文件上传两部分。在菜单管理中可以修改菜单展示内容、菜单图标以及菜单排列顺序；文件上传模块支持文件拖拽上传，允许管理人员配置云存储类型。

内容管理模块主要是针对展示内容的管理，包含首页广告管理和内容管理。在首页广告管理中可以及时查看广告状态，依据当下热点及时增加、修改广告展示内容；内容管理可以查看不同撰稿人状态，管理人员可以审核稿件内容，并决定是否展示以及展示位置。

服务管理模块包含服务注册管理、服务审核管理以及服务评价。服务注册管理模块可以查看服务状态、服务所属服务商、服务销量等信息；服务审核模块支持修改服务的具体信息并决定服务是否可以上架，支持检索；服务评价模块可以看到不同服务获得的用户评价，可以针对用户疑问进行答复。

资源访问与统计模块包括概述和资源与访问两个部分。在概述中展示了不同类型资源的统计信息以及不同服务的用户数量等，这一部分是总体数据，方便大致了解各种资源占用情况；资源与访问模块是针对具体服务的详细展示，管理人员可以选择想要查看的资源名称，界面会展示具体资源的占用情况以及客户访问情况等，同时会针对所选服务生成具体的细化表格。

服务监控模块包括概览、服务可用性、服务实时状态三个部分。概览中可以选择时间区间，页面依据所选区间展示服务的统计信息；服务可用性模块通过不同颜色区分不同服务的可用情况，管理人员可以依据服务占用情况及时优化调整；服务实时状态模块展示的是不同服务当前的运行情况，在服务异常时及时告警。

2 关键技术

2.1 数据双向绑定

中国科技云门户管理系统是一个实时性要求很高的系统，数据双向绑定是视图层和数据层实现实时交互的关键。在本平台开发中通过Vue 框架和MVVM 模式实现数据双向绑定。如图3所示，MVVM 模型中的Model 不关注任何的用户行为，由View 层直接与用户进行交互，ViewModel层是MVVM 模式的核心，通过ViewModel 实现了MVVM 模式高内聚低耦合的目标，ViewModel 从Model 中暴露或者转化数据对象给View 层使用，同时ViewModel 向View 层提供处理用户交互的方法，Model 层当数据变动时通知ViewModel 去更新视图，保持数据有效性和一致性[9-11]。

图3 MVVM 模式原理图Fig.3 MVVM mode schematic diagram

2.2 页面渲染与更新

中国科技云门户管理系统是多模块的，在不同展示界面切换、当前界面数据或图像更新时会重新渲染页面或部分更新页面。由于页面中元素与DOM(Document Object Model) 树中节点数一一对应，页面进行渲染或更新时，其实是DOM 节点进行更新。如果采用真实DOM 节点，则多个节点更新就需要多次操作，会浪费很多资源，降低性能。虚拟DOM 将更新都先保存到一个本地对象中，最后一次性反映在DOM 树上，避免大量的无谓计算。

在本平台中用Diff算法实现更新。Diff算法的核心是只更新修改了的那一部分DOM 结构，而不去更新整个DOM，这样可以降低开销，提升性能[12]。Diff算法依据真实DOM 树生成虚拟DOM 树，当虚拟DOM 树的某个节点数据发生改变时生成新的虚拟节点，虚拟节点和旧的DOM 节点比较后再决定是否据此修改DOM 结构，如图4所示，Diff新旧节点的比较只在同一层中进行，不会有跨层间的比较[13]。

图4 Diff 算法Fig.4 Diff algorithm

2.3 路由切换

中国科技云门户管理是一个单页面应用，单页面路由的切换由前端操作，通过判断页面所属的组件，把之前的组件清除掉，避免每一次都需要请求HTML(HyperText Markup Language)文件。前端路由切换工作由vue-router 负责，本平台使用的是Hash模式，使用URL(Uniform Resource Locator)的Hash模拟完整的URL，当URL 改变时页面不会重新加载，通过window.location.hash 属性能够读取锚点位置，可以为Hash 的改变添加监听事件，每一次改变Hash，都会在浏览器的访问历史中增加一个记录，此外Hash 虽然出现在URL 中，但不会被包括在HTTP（Hyper Text Transfer Protocol）请求中，因此改变Hash 不会重新加载页面，而是利用JavaScript动态的变换HTML。

3 系统实现

3.1 可复用组件的封装

组件是可复用的实例，通过组件实现父子组件之间的通信，子组件触发父组件的事件并且传递给父组件需要的参数，子组件接受并使用父组件的数据，一个父组件可以被多个子组件调用。依据组件可复用的特性，在开发过程中针对一些实例被不同的界面复用的情况，可以通过自定义组件的使用减少重复代码[14-15]。中国科技云门户管理系统开发中有多个可复用组件，如图表格式、导航栏、分页等，这里以分页功能的实现为例。

网页开发时，如果不进行分页，想要展示全部数据就只能通过无限滚动的形式，从而大量的内容被加载到内存中，直接影响网页性能，同时用户在浏览时如果想回看某一条信息，将会进行重复滚动，且不易被查找和搜索，无法跳过不需要的信息，影响用户体验。分页功能很好的赋予用户指挥权，用户可以选择每一页展示的条目数，可以选择具体的页数，也能快速回到开始页和结束页。分页的实质是实现对异步处理请求数据的处理，前端依据后端返回的信息在具体的页面上渲染展示。

分页组件主要使用总数(total)、页数(page)、当前页数(currentPagelimit)、页面条数(pageSizes)几个参数，其中total、page、pageSizes 通过prop 传递，CurrentPage 和pageSize 通过computed 监控，具体的复用操作在methods 中完成。其中prop 在父子 prop 之间形成了一个单向下行绑定：父级 prop的更新会向下流动到子组件中，子组件的更新不能改变父组件的状态，额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。Computed 中的变量不在data 中声明，直接在computed 中定义，可以读取和设值，体现在编程中是get 和set 的过程，computed 基于响应式的依赖进行缓存，通过监听数据当数据发生改变时调用，本身接受新值和旧值两个参数，通过computed 使用可以避免大量函数的重读执行，只有环境改变才会调用，既实现了数据双向绑定，可以及时更新页面数据也避免了大量重复执行降低性能[16]。方法methods中通过$emit 触发父组件的自定义事件，实现子组件向父组件的传值，通过具体代码实现父子组件之间页数、页码、当前页等信息的传递，实现分页效果。

3.2 数据可视化

在中国科技云门户管理系统中，CPU 使用情况、服务运行情况等信息通过数据可视化的形式可以更加直观形象。在开发中，使用Echarts 实现可视化的过程。Echarts 是使用JavaScript 实现的开源可视化库，提供折线图、柱状图、散点图、盒形图、漏斗图等数据可视化图表，交互丰富，可实现高度个性化定制[17-18]。通过Echarts 的使用，用图像展示数据变化情况以及服务信息，直观展现CPU、内存等的使用情况，将用户从繁琐的表格中解放出来，通过动态的图形展示帮助用户更好地了解设备情况，监控指标出现异常时，系统及时报警并在图像中展示，相关人员可以第一时间观测到。

在本系统中，基于Vue 组件化的思想，Echarts图表以组件的形式被不同界面引用，支持不同界面依据需求更改图像的部分内容，包括图像数据集的来源、图像的展示大小、图像颜色等内容。Echarts 图表在相应界面中命名，通过该名称在别的组件中调用。例如资源占用情况图在主界面中通过typeClass 向图表传递界面需要的图像类型是柱形图还是折线图，图表组件依据接收到的参数展示需要的图表格式。数据展示在图形区域能直观看到趋势，同时在表格中呈现方便打印汇总。

3.3 性能优化

中国科技云门户管理系统与一般后台管理系统的区别在于需要更多技术优化系统性能，保障云环境下关键服务的正常运行以及资源的合理调配等。

本系统运用了分布式技术、负载均衡、消息队列等实现性能优化[19-20]。具体言之，依靠分布式技术进行大流量处理和关键业务保护；通过负载均衡分担流量请求；通过消息队列对请求进行排队处理，将前端请求峰值削平，增加系统吞吐量。

以消息队列带来的改进为例做详细介绍，传统的进程通信模式是客户端调用服务端，服务器收到调用会进行响应。在中国科技云门户管理系统中，如果采用传统的通信方式无法解决网络情况不好时可能出现的调用丢失或可能出现的超时问题。消息队列中的消息被持久化到分布式存储中，避免了单台及其存储消息导致的消息丢失，同时消息队列的引入使得消息发送者不必等待接收者的响应，只有在保证接收者收到时，消息才会从队列中删除[21-22]。消息接收者和消息发送者之间的通信借助消息队列实现了解耦合，同时使用消息队列的业务之间不会互相干扰，避免了某一业务占用大量网络导致的服务崩溃现象。

3.4 前后端交互

前后端之间的通信通过接口进行，中国科技云门户管理系统中采用了当前流行的RESTful 统一了接口格式，以Axios 作为前后端交互时的HTTP 请求发送工具。表1中展示了客户管理模块的接口，其他模块接口大同小异，不再一一阐述。

表1 客户管理模块接口Table 1 Interface of client management module

RESTful 有以下3 个特点：资源、统一接口、URI 和无状态[23-24]。

（1）资源：RESTful 将所有内容都视为资源，资源是以json 为主要载体的、面向用户的一组数据集。

（2）统一接口：RESTful 架构风格规定，数据的增删查改操作，分别对应于HTTP 方法。GET 用来获取资源，POST 用来新建资源（也可以用于更新资源），PUT 用来更新资源，DELETE 用来删除资源，这样就统一了数据操作的接口，仅通过HTTP 方法，就可以完成对数据的所有增删查改工作。

（3）URI(Uniform Resource Identifier)和无状态：每个URI 都对应一个特定的资源。要获取这个资源，访问它的URI 就可以，所有的资源，都可以通过URI 定位，而且这个定位与其他资源无关，也不会因为其他资源的变化而改变。

RESTful 无状态的特点使得请求可以用任何一个服务器回答，非常适合云环境，资源以json 格式为载体使得前后端分离的情况下进一步减少了通信消耗的流量，防止了CSRF(Cross-site request forgery)、注入型等安全问题。

4 效果展示

中国科技云门户管理系统实现了权限管理、内容管理、服务管理、资源访问与统计、系统管理以及服务监控功能，通过实际应用表明中国科技云门户管理系统能够满足当前需求，下面选取一部分界面进行展示。

图5是服务监控中服务可用性模块的界面图，依据选择的时间区间展示所选时间范围内具体服务的可用情况，通过颜色展示不同状态，直观、一目了然，图中绿色表明各服务可用情况都处于良好状态，不存在服务紧张的问题。

图5 服务可用性Fig.5 Service availability

图6是资源访问与统计模块中概览部分的界面图，从图中可以直观观测到当前节点总数为6 636、CPU 总核数24 528、总内存消耗19%、总存储消耗量为19.05%，以及当前的资源分布情况、地区资源、集群资源等信息。

图6 资源监控概览Fig.6 Resource monitoring overview

图7是资源访问与统计模块中资源与访问部分的界面图，可以查看各资源详细情况，依据所选择的资源展示与之相关的信息，包括系统占比、用户占比、中断情况、CPU 等信息，更为精细和直观。

图7 资源监控详情Fig.7 Resource monitoring details

5 结语

本文所设计实现的基于MVVM 模式的中国科技云门户管理系统是一个多功能、可扩展、数据展示形式多样的系统。具有以下优势：

（1）平台关注用户使用体验，例如在菜单管理界面中对菜单进行隐藏与展示，点击主菜单后展开相应的子菜单；通过v-if、v-show 等指令实现抽屉效果；通过颜色不同展示不同状态，有助于管理人员快速发现异常，界面简单整洁，功能较为齐全。

（2）系统展示信息的方式具有多样性。通过数据可视化形象直观地展示数据变化趋势以及软硬件资源的使用情况，通过表格实现信息统计，方便下载后作为纸质材料保存，通过文档形式方便上传或下载已有资源，操作简便。

（3）系统具有较好的扩展性。采用前后端分离开发，一方面加快了开发速度，另一方面方便后期扩展功能，前后端只要约定好新的接口内容即可各自进行开发。

综上，本平台能够较好地满足当前的需求，后期将依托中国科技云微服务架构，对现有的微服务进行评估，依据现实需要增加模块；也可随着系统更新、升级过程中产生的新的基础微服务对中国科技云门户管理系统进行扩充。如针对订单管理服务可以新增订单管理模块；针对支付服务新增支付管理模块；接入中国科技云通行证；利用收集到的数据进行用户行为分析，对不同用户群体提供不同的资源推荐等。通过后期的工作，进一步改进和丰富系统，努力为中国科技云用户提供更好的服务。

利益冲突声明

所有作者声明不存在利益冲突关系。