基于动态标签技术的信息发布系统设计与实现

、

和

，它们改善了文档结构，使内容创建者更加语义地创建文档，有益于搜索引擎的索引整理。

HTML 5的另一个重要特性是它提供了服务器推送技术，可以从服务端实时推送数据到浏览器，这是本文使用HTML 5的最重要特性。

1.3 服务器推送技术

在一般的 Web 应用中，浏览器和服务器之间的通信是请求/响应的交互模式：浏览器发出请求，服务器根据收到的请求来生成相应的响应，浏览器对收到的响应进行处理，动态更新展现给用户的页面[8]。这种通信方式通常需要用户在页面上进行操作，比如点击鼠标、移动鼠标来触发相应的事件，不足在于：服务器端产生的数据更新不能及时地通知浏览器，而是需要等到下次请求发出时才能被浏览器获取，对于某些对数据实时性要求较高的应用来讲，这种延迟是不能接受的。

为解决数据延迟问题，需要服务器端发生数据更新的第一时间主动推送最新数据给浏览器。常见的解决主要可以分成两类，其区别在于是否基于 HTTP 协议实现。不使用 HTTP 协议的做法是使用 HTML 5 新增的 WebSocket 规范；使用 HTTP 协议的做法则包括简易轮询、COMET 技术和本文中要使用的 HTML 5 服务器推送事件[8]。

服务器推送事件是 HTML 5 规范中的一个组成部分，可以从服务端实时推送数据到浏览器端。相对于与类似的 COMET 和 WebSocket 技术来说，服务器推送事件的使用更简单，对服务器端的改动也比较小。对于本文将要描述的信息发布系统而言，服务器推送事件是最佳的选择。

2 企业信息发布系统总体设计

企业信息发布系统的总体架构如图1所示，系统总共分5大模块，依次说明如下：

(1) 基于MongoDB的数据存储层：用于存储系统的所有数据，主要包括信息的数据模式定义存储、各类型的信息数据存储、信息模板内容、用户信息、权限信息等其他数据的存储；

(2) 数据模式定义管理层：定义信息的数据模式，即信息的属性定义，主要包括数据模式的增、删、改、查操作及对已定义数据模式的解析，是底层信息数据与前台进行可视化数据解析与映射的桥梁；

(3) 所见即所得的标签管理：该部分分为标签定义、标签解析及标签的管理，对于定义的信息类型，提供所见即所得方式的标签定义系统，让不具备编程基础的用户根据企业业务需求可以方便地定义各类标签，通过标签可视化地实现读取存储在MongoDB中的信息内容、将信息内容存储在MongoDB中；

(4) 信息权限管理层：提供从信息标签和模板级别对数据权限的管理，实现不同用户角色对相应类型数据的访问控制；

(5) 可自由编辑的模板管理：除系统内置的模板外，用户可依据业务需要定义不同的信息显示模板，实现丰富的可视化效果。

图1 系统整体架构

3 系统详细实现方案

本节针对图1所示信息发布系统的每个核心模块的实现进行详细说明。

3.1 基于MongoDB的数据存储层

在MongoDB中，数据以JSON形式存储的样例如下，数据的查询也是以JSON形式的命令执行，因此，用户使用非常简单方便。

{

″_id″:ObjectId(″55eaef6b6e313c30e07def5″),

″title″:″关于抗战70周年放假的通知″，

″pub_time″:″2014-08-21 10:08:11″,

″author″:″行政部″，

″content″:″9月3日(周四)～9月5日(周六):放假，9月6日(周日):正常上班。″

}

对于信息发布系统中各类数据模式固定的数据类型如用户信息、权限信息，MongoDB中的存储与关系型数据库的存储基本相同，确定好数据模式后，把相应的数据存储到数据表中即可。

对于数据模式频繁变化的信息类型、信息内容的存储，传统的关系型数据库并未提供良好的解决方案，使用关系型数据库存储会非常复杂。而MongoDB因为具备数据模式自由扩展的特性，非常适合本文的信息类型频繁变化的应用场景。在MongoDB中，数据表不需要在数据存储之前进行显示的定义，而是在用户进行数据写入的同时同步创建相应的数据表。如前文所述，数据是使用JSON形式描述的，MongoDB会自动分析用户写入数据中的数据字段，并同时创建相应的数据表格(例如上述数据样例是在未创建表的情况下写入的，系统会自动创建表)。另一方面，当业务发生变化需要修改数据模式时，也不需要显示进行表格数据模式的修改，系统同样会依据用户提供数据中的数据模式进行字段的动态添加或删除。与上述样例信息存储于同一表中但增加了数据字段“tips”的数据如下：

{

″_id″:ObjectId(″55eaef6b6e3513c30e07cf5″),

″title″:″关于中秋节放假的通知″，

″pub_time″:″2015-09-06 09:33:21″,

″author″:″行政部″，

″content″:″9月26日(周六)～9月27日(周日):放假，9月28日(周一):正常上班。″

″tips″:″本次中秋节放假只有两天″，

}

因此，对于本文的可能进行频繁变换的信息类型，直接把数据写入MongoDB进行存储即可。当然，在用户进行信息的存储和访问时，需要知道信息的数据字段定义，此部分功能将由数据模式定义管理层进行管理。

3.2 数据模式定义管理层

数据模式定义管理层的主要功能是对系统中的信息类型的数据模式提供定义入口和相应数据的存储。

数据模式可以看成是元数据，即描述数据的数据。在本文中指信息类型的定义表，即每个信息类型需要展示的数据字段、这些数据字段的数据类型、数据字段的长度、字段对应的数据是否需要进行索引等。

经过总结和抽象可以得知数据模式定义表本身是固定的，如表1所示包含以下字段：唯一标识、信息类型名、信息类型显示名、信息需要展示字段列表。其中信息字段列表中每个元素都为JSON形式的字符串，包含：字段名、字段显示名、字段类型、字段长度、字段是否索引，如表2所示。

表1 信息类型数据模式定义表

表2 信息内容定义表

基于以上MongoDB信息数据样例，对应的信息类型的数据模式定义表结构如下：

{

″_id″:ObjectId(″55eaef6b6e313c30e07dcx5″),

″name″:″holiday_message″，

″display_name″:″放假通知″,

″fields″:

[

{

″name″:″title″,

″displayName″:″标题″，

″dataType″:″3″,

″isIndexed″:″1″

{

″name″:″pub_time″,

″displayName″:″发布时间″，

″dataType″:″3″,

″isIndexed″:″0″

{

″name″:″author″,

″displayName″:″作者″，

″dataType″:″3″,

″isIndexed″:″0″

{

″name″:″content″,

″displayName″:″内容″,

″dataType″:″3″,

″isIndexed″:″0″

}

]

}

3.3 标签系统

在传统的数据管理模式下，信息内容的存取需要用户具备良好的服务器编程基础，Web显示编程基础和数据库管理基础才能完成；用户需要完成与信息存储系统的数据交互，包括信息读取、信息添加与修改和信息的删除、信息的显示与分页、以及信息内容的检索等；所有这些功能实现对于普通用户而言是比较困难的，即使用户具备良好的编程基础，也需要花费大量的时间来实现。另一方面，当信息的类型发生变化时，又需要对信息的存取实现、信息的展示实现等进行更改，这在频繁改变的信息系统中是非常耗时的。

因此，本系统提供了一套所见即所得的标签定义体系，普通用户可以通过在前台定义标签实现信息数据的存取、信息的前端展示等功能，极大程度地降低了系统的使用门槛和用户的工作量。

从本质上而言，标签系统的核心功能为实现与服务器的数据存储系统的数据交换。因此，标签系统的核心在于建立与服务器存储系统的映射关系、实现浏览器端与服务器端的数据交互、提供浏览器端数据的显示。具体而言，实现浏览器端与服务器进行数据交换的关键技术和功能包括：

(1) 建立统一的数据格式标准：保证用户定义的标签所写入和获得的数据与服务器数据存储系统中存储的内容保持一致，以便数据的正确解析；由于采用MongoDB作为存储底层，本系统中统一使用MongoDB的JSON格式作为数据描述标准。

(2) 获取服务器端的数据模式定义：用户在定义标签时，首先需要知道系统中定义了哪些信息类型，这些信息类型又包含哪些数据字段；知道了数据模式定义后，用户便可定义数据标签所对应的表格、所需要读取的数据字段，并进行相应的查询过滤条件、索引的定义。

(3) 浏览器发送的请求中包含的操作和数据解析机制：系统在接收到用户定义标签对应的数据请求后需要对请求中包含的操作、请求中包含的数据进行解析，然后执行相应的操作命令，最后把相应的操作结果按照约定的格式返回给用户。

(4) 标签的前台展示方式：包括用户读取的信息的展示方式以及用户需要进行信息发布时的输入界面的展示方式；页面的总体布局需要使用下方将说明的模板进行规划，标签的展示则需要对当前标签的管理区域进行可视化。

标签系统的工作流程如图2所示，标签系统中主要包括两类标签：信息展示标签和信息编辑标签。消息展示标签主要包含单值型标签和多值型标签，单值型标签即指仅读取一条数据的标签(如展示一条信息的详细信息)，而多值型标签则是需要读取一系列的消息(如展示信息列表)。

图2 标签系统工作流程

1) 读取数据模式与解析

用户所定义的每一个标签对应于服务器数据模式中的一个或多个表格(信息类型表格)，因此用户在定义标签时，标签系统首先需要把服务器所定义的数据模式读取并展示给用户。信息类型定义表(表1)和信息内容定义表(表2)存储在MongoDB中，系统读取出来后，把所有的信息类型展示给用户选择；用户选择信息类型后，系统即把所选信息类型的字段展示给用户，用户从中选择需要显示或修改数据的字段。

2) 生成数据读取交互界面

用户选择好信息类型和该类型需要展示的字段后，系统会提供数据交互的操作界面并自动生成数据交互的相关查询脚本。对于信息展示标签，自动生成数据读取的查询脚本，同时提供查询条件的设置界面让用户选择(例如查询最近7天的放假消息)；用户可以通过生成的可视化交互界面设置查询的字段和查询的条件，查询条件包括查询满足特定字段要求的数据、读取数据的条数、数据的排序方式等；对于高级用户，也可以通过直接编辑查询脚本来设置查询内容及查询条件。对于信息编辑标签，则生成用户设置编辑数据的交互界面，用户可以设置所需要显示的字段、确定数据编辑的表单类型(文本框、文本域或HTML编辑器)、确定字段的排序顺序等。

3) 设置显示样式

通过第2)步，已经完成数据类型、数据字段、数据查询条件(信息读取标签)的设定，接下来需要确定数据或编辑界面的显示形式。对于数据显示标签，要设置标签最终所读取出来的数据的展示形式；数据展示是通过HTML来描述的，因此用户可以使用CSS来控制最终数据展示的样式；由于在设置时数据还没有读取出来，因此需要通过设置占位符的方式来确定最终数据读取出来后每个字段的数据放置的位置，多个字段的占位符序号以递增的方式进行计数；对于字段数据，还可以进行一些简单的处理，包括设置显示的最大长度(如某些列表中由于空间关系不能把标题全部展示而仅展示前面的一部分)、设置超链接等。以下为一个显示标签的示例，其中“@_tag_value_*”为占位符，末位的序号代表查询字段的序号。编辑标签与显示标签类似，也通过HTML和CSS来设置编辑区域的显示方式。

@_tag_value_0

4) 数据读取与显示

此功能是对于显示标签而言的，标签系统依据用户所定义的查询目标和查询条件等。首先从服务器的数据库中找到相应的数据库和数据表，然后依据条件进行数据的读取操作，再把数据传送到前台。前台得到数据后，首先对JSON形式的数据进行解析，得到里边的数据记录、数据字段，然后与设置的查询条件以及设置的显示条件结合进行解析，生成一条(单值型标签)或多条(多值型标签)数据，并把相应的字段填入相应的占位符位置上。

5) 数据保存

此功能是对于编辑标签而言的，当前台用户在系统依据标签设置生成的交互界面完成数据的编辑后，点击保存时，数据会传送到后台，系统解析JSON形式的数据后，调用MongoDB的相关引擎执行相应数据表、相应数据字段的保存工作。

用户定义及使用一个信息展示标签的过程如下：

(1)用户选定添加一个信息展示标签后，标签系统自动从底层的数据模式定义管理层中获得服务器的数据模式(即定义了哪些信息类型以及这些信息类型的数据字段)并显示出来供用户选择；(2)用户从这些数据模式中选取当前需要展示的信息类型，系统会自动解析得到所选择信息类型的数据字段并自动生成用户选择的界面；(3)用户从解析到的数据字段中选取需要展示的数据字段，并设置查询条件(如查询多少条、时间范围等)、分页设置(每页多少条记录)等；(4)系统依据用户选择的信息类型、数据字段、查询条件，系统自动把用户的设置转换成查询数据的SQL语句，把数据从存储系统中查询出来，同时对数据进行解析，生成信息记录；(5)用户定义信息数据显示的基本格式(HTML源码、CSS样式等)，设置时使用统一的占位符代替数据的位置；(6)系统自动把用户定义的显示格式中的点位符替换成之前步骤所读取出来的数据，如此便可以在客户端进行展示。

3.4 用户可定义的模板机制

为丰富数据的可视化效果，对于不同的信息类型，用户需要使用不同的展示方式，因此，系统需要提供灵活的可视化方式。本系统提供了用户可自由定义模板的机制，为丰富的可视化提供了可能。

模板的主要功能在于对页面的总体布局进行规划，页面布局是Web开发的一个重要课题。对于普通用户，从头开始实现页面是比较困难的，幸运的是，已经有许多框架提供了许多常用的布局模板，同时也提供了布局模板自定义的功能，具备这些功能的常见框架有：ExtJS、Apache Tiles和Elastic等。本文系统采用的是ExtJS框架，其丰富的内置布局以及灵活的自定义布局功能，为本系统中的信息可视化提供了技术上实现的可能。

3.5 实时信息推送机制

为保证用户实时地接收到系统所发布的信息，本系统基于HTML 5的服务器推送事件机制实现信息实时推送。