基于Koa2的可视化页面编辑系统服务端设计

陈月燕 邹庆 边雁 吴冠宇

（国电南瑞科技股份有限公司 江苏省南京市 211106）

1 概述

随着互联网技术的飞速发展，电力系统个性化人机交互界面需求越来越强烈，不仅要满足业务展示需求和性能要求，对页面的美观度和交互体验的要求也在逐渐的提升。这就导致前端页面开发工作量越发的繁重，传统页面代码开发方式存在效率低下、技术门槛高等问题，极大的制约了开发者的工作效率。可视化页面编辑系统为解决这一问题应运而生，大大的提高了系统的开发效率，减少了开发者的开发难度。随着系统的应用范围逐步的扩大，越来越多的业务系统开发者使用可视化页面编辑系统代替手动编写页面，这就导致页面模板的规模越来越庞大，原来的单一发布方式容易造成文件存放混乱、结构不清晰的问题，同时也为功能扩展和权限集成带来很大的困难。

本文结合可视化页面编辑系统在电力系统中的实际应用场景，使用基于NodeJS 的Web 开发框架Koa2，配合文件存储和SQLite数据库双存储模式，实现扩展组件、页面模板、图片等资源文件的分类管理功能。

2 相关支撑技术介绍

2.1 NodeJS介绍

NodeJS 是为了开发高性能Web 服务器而诞生的一种技术，它是一个基于ChromeV8 引擎，能够快速构建网络服务与应用的运行在服务器端的JavaScript 执行平台[1]。作为一个JavaScript 服务端开发平台，开发简单并且易于扩展，同时也具有事件驱动，异步和非堵塞I/O 等特点[2]。NodeJS 采用了模块化管理，允许开发者将业务逻辑分解成不同的模块，通过按需导入模块的方式实现最大程度的轻量级复用，从而实现资源共享减少开发者的重复劳动。NodeJS跳过了Apache、IIS 等HTTP 服务器，不用建设在任何服务器软件之上，可以提供强大的伸缩能力，不需要安装其他的Web 容器，使得安装部署非常的简单。

2.2 Koa开发框架

Koa 是Express 团队开发的一个基于NodeJS 平台的Web 应用框架，致力于成为web 应用和API 开发领域的一个更小、更富有表现力和更健壮的web 框架。基于Koa 搭建的后端服务拥有灵活的扩展机制，可以避免重复繁琐的回调函数嵌套，并极大地提高错误处理的效率[3]。Koa2 与Koa1 的最大区别是实现异步的方式不同，Koa2 使用了ES7 的async/await 特性，完全使用promise 并结合async 来实现异步，极大地解决了异步操作带来的烦恼，因此开发异步Web 程序变得更加简单而有效。

2.3 SQLite数据库

SQLite 是D.Richard 使用C语言编写的一个开源嵌入式数据库引擎，也是一款遵守ACID 的轻量级关系型数据库，实现了自给自足、无服务器、零配置、事务性的SQL 数据库引擎[4]。相比于其他的关系型数据库，SQLite 优点如下：

（1）轻量级，SQLite 是进程内的数据库，不存在其他数据库的客户端和服务器。它本质上是一个文件，所以不需要服务器进程和数据库远程链接；

（2）读取速度快，占用资源低，整个数据库存储在单一文件中，所以处理速度比大部分数据库都要快（配置简单，不需要系统做任何配置，就可以直接使用，也不需要安装和管理）；

（3）维护简单，数据库中的所有信息（表、视图等）都存储在一个文件中，可以很简单的复制到其他的机器上，而不用担心数据库迁移出现的数据丢失等问题；

（4）跨平台性，除了支持主流操作系统之外，还支持很多不常用的操作系统，比如Symbin、Palm 等。

但是也存在一些缺点和不足：

（1）在并发读写性能方面比较欠缺，并发数一般不超过10 万、写入较慢；

（2）SQL 标准支持不全，支持大多数SQL92 标准等。

3 后端服务框架设计

3.1 总体设计架构

可视化页面编辑系统采用B/S 架构实现，浏览器端采用MVVM 设计模式，服务器端采用Koa2 框架搭建，数据库存储采用SQLite。采用前后端完全分离的设计模式，两者独立开发、独立部署，所有的服务器端功能以RESTful API 服务的形式提供给浏览器端调用[5]，完成前后端的数据交互。Koa2 没有提供有关组织NodeJS 项目的任何线索，但是正确的构建项目结构将提升系统的灵活性和复用性、提高服务的稳定性和扩展性，并且有利于后期维护。基于此目的，本文借鉴三层架构[6]的分层式设计思想，结合Koa2的开发模式，从结构上划分为四层。系统总体架构如图1所示。

图1：系统总体架构图

3.1.1 路由层

接收浏览器端发出的请求，路由层拦截到请求信息，根据接口信息转发给相对应的表示层处理用户的请求。

3.1.2 表示层

表示层的主要功能是实现系统数据的输入和输出，解析请求中的参数，对提交的参数进行校验和处理，然后调用业务逻辑层进行处理；接收业务逻辑层返回的数据进行封装，返回给浏览器端。

3.1.3 业务逻辑层

业务逻辑层是表示层和数据访问层的中间桥梁，当接收表示层的用户指令后，对具体的问题进行逻辑判断与执行操作，连接数据访问层获取数据进行逻辑处理操作，然后将处理结果返回给表示层。

3.1.4 数据访问层

数据访问层实现数据库连接以及数据模型的创建封装，数据库和磁盘文件数据的增、删、改、查等操作api 封装，并将操作的结果返回到业务逻辑处理层。

3.2 模块设计

在可视化页面编辑系统中，开发者通过浏览器端在线设计的扩展组件、页面模板以及页面中的图片等资源文件数据，按照分类发布到服务器端保存。同时，在页面设计的过程中，也需要向服务器端请求这些资源文件。因此，可视化页面编辑系统后端服务主要提供自定义组件、页面模板的读取、上传和删除功能、以及静态资源的读取、上传和删除功能。功能模块图如图2所示。

图2：系统功能模块图

3.3 基于四层架构的中间件设计实现

中间件是处于请求和响应之间的轻量级模块，每个中间件执行特定的功能[7]。Koa2 是一个中间件框架，在Koa2 中一切的流程都是中间件，中间件的执行顺序不是从头到尾，而是数据流向遵循先入后出的洋葱模型[7]，先从最外面的中间件开始执行，然后next()后进入下一个中间件，每次执行下一个中间件传入两个参数ctx 和next,其中ctx 封装了request 和response。一路执行到最内层的中间件后，再从最内层往外执行。

Koa2本身并未捆绑任何中间件，而是提供了应用（Application）、上下文（Context）、请求（Request）、响应（Response）四个模块，让使用者更大程度上构建个性化的应用。因此，基于Koa2 开发的过程就是使用已有中间件和构建个性化中间件的过程，以下结合四层架构说明中间件的实现流程。

3.3.1 路由实现

系统路由使用koa-router 中间件来实现，koa-router 可以管理处理函数和url 之间的映射，将请求的URL 和请求方式（post、get 等）匹配到对应的响应接口服务。考虑到涉及多个业务模块和后期业务的扩展性，对路由模块进行了拆分和嵌套，也就是创建3 个Router实例，然后将被嵌套的模块路由作为父级路由的中间件使用，在入口文件app.js 中只引入路由入口文件。路由入口文件的部分代码如下：

3.3.2 表示层实现

表示层代码放在controller 目录下，接口方法名和路由中配置的引用名保持一致。koa-bodyparser 中间件可以将post 请求和表单提交的查询字符串转换成对象，挂在上下文对象ctx 中的request 请求对象的body 上，方便在自己开发的中间件或者接口中取值，在入口文件app.js 中引用。首先从ctx.request.body 请求对象中获取前端传递过来的参数，对参数进行一些必要的校验（比如是否为空等）和处理，然后调用业务逻辑层的处理接口方法获取数据，最后将获取到的数据封装到上下文对象ctx 的body 中，前端在调用接口回调方法中就可以从response 中获取到返回值。

3.3.3 业务逻辑实现

业务逻辑处理代码放在service 目录下，当接收表示层的用户指令后，对业务进行拆分。以“读取组件内容”功能为例说明，首先调用数据访问层中获取所有扩展组件列表的接口，然后根据返回数据中每个组件的存储方式和文件路径，分别调用数据访问层中文件读取接口和数据库读取接口，从数据库或服务器指定文件目录中读取组件的定义文件内容，将获取的组件定义文件内容和组件列表中的组件信息封装成JSON 对象格式，最后将封装后的数据返回给表示层。

3.3.4 数据访问实现

数据访问层对数据库和文件的访问细节进行了封装，业务逻辑层调用封装后的接口对数据库和磁盘文件进行操作。本文将数据访问层分为三个部分：

（1）数据库连接以及创建数据库实例的封装；

（2）数据模型，为数据库表创建相应的数据模型；

（3）数据增删改查操作api 封装。

读取指定目录下文件内容的api 方法代码如下。

3.4 资源文件存储

默认情况下，页面模板、扩展组件和图片存储以文件格式存在在服务器的指定目录下，按照文件类型保存在不同的目录下，根据文件分类又存储在不同的子目录中；文件的分类关系和权限关系存储在数据库中。但是，用户在发布组件和页面模板时可以根据其需要改变默认的存储方式。

在实际应用场景下，一个电力业务系统的页面总数一般不超过200 个，同一时段页面开发数一般不超过10 个，而开发者同一时间同时编辑页面并保存成模板的可能性更小。另外一方面，资源文件的删除和保存功能相对于读取功能是非常少的。基于上述实际应用场景，对比SQLite 和其他数据库的优缺点，选择SQLite 数据库存储数据。本系统主要涉及到的数据库表，如表1所示。

表1：系统主要数据库表以及字段描述

其中，扩展组件表和页面模板表存储的是文件定义本身的内容，因此只有当具体的扩展组件和页面模板存储方式为数据库时，才会保存到此表中，默认文件内容是以磁盘文件的方式存储在服务器指定目录中。

4 总结

本文基于NodeJS+Koa2 框架，SQLite 数据库搭建了可视化页面编辑系统的服务器端，基于此服务，页面开发者可以实现自定义组件和页面模板的快速分类管理，也可以实现静态资源文件的上传下载。使用者可以根据实际的需求，灵活选择不同的文件存储模式，也可以为了安全考虑，定期备份，同时使用两种存储模式。此外，本文所设计的后台服务结构，也适用于大多数小型系统，对于其他架构的后端服务架构设计也有一定的参考价值。