一种基于Bootstrap显示运行时定制页面的方法
【技术领域】
[0001]本发明涉及计算机技术领域，具体地说是一种实用性强、基于Bootstrap显示运行时定制页面的方法。
【背景技术】
[0002]Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。它为开发人员创建接口提供了一个简洁统一的解决方案，包含了功能强大的内置组件，易于定制，它还提供了基于Web的定制，并且是开源的。
[0003]MVVM是Model-View-ViewModel的简写，是三层架构，M层(Model实体层)、V层(View表示层，它有DataContext属性，这个属性可以使用DataTemplate模板绑定VM层的数据用来显示)、VM层(ViewModel层，对Model层进行CRUD进行操作，同时对V层提供数据绑定)，这样分层的好处是各部门可以完全独立地工作，在具体实现中采用KnockOut来支持，只需要关注数据的存取，不需要重新刷新整个控件片段或自己写JS增删节点。
[0004]现有技术中，定制HTML的Π页面时，页面中的各种元素和布局发生变化后，数据无法及时更新，整个显示过程滞后，如果能够采用Bootstrap进行定制Π页面，则能够有效解决该问题，在实际应用中，Bootstrap负责UI，Knockout.js负责数据绑定，可以根据形成的表单描述文件，快速简洁的展现出所需要的UI界面，并进行数据绑定更新操作，理论上不需要写多余的JavaScript代码和CSS描述。基于此，现提供一种基于Bootstrap显示运行时定制页面的方法。
【发明内容】
[0005]本发明的技术任务是针对以上不足之处，提供一种实用性强、基于Bootstrap显示运行时定制页面的方法。
[0006]—种基于Bootstrap显示运行时定制页面的方法，其具体实现过程为:
首先进行页面初始化，即用户在客户端向服务器端发出页面浏览请求，服务器端根据请求的页面ID获取页面描述文档并解析，形成JSON格式数据返回客户端；
页面联动操作:客户端脚本调用返回的JSON数据描绘Π页面，生成数据Model实例并获取数据绑定到页面，实现Π页面和数据的联动。
[0007]所述页面初始化前，创建页面基础描述文档，该页面基础描述文档包含的内容包括:页面元素类型、绑定数据对象、页面元素绑定的对应字段，并提供列权限进行显示字段的过滤和可编辑性。
[0008]所述页面初始化的详细过程为:
服务器端根据要获取的页面ID，获取运行时定制页面的设计文档ID，并从数据库获取该文档的描述XML文档；
服务器端分析获取的对应页面XML文档，将获取的每一个项目的属性转换成JSON格式，返回到客户端。
[0009]所述JSON数据描绘的Π页面包括以下元素:文本、数字、下拉、日期、时间、智能帮助控件。
[0010]所述页面联动操作的具体过程为:打开Π页面时，输入要加载的页面ID，客户端读取服务器端UI页面的描述定义，通过该定义进行界面元素和数据绑定的解析及二次描述，并通过JSON格式的数据返回到客户端，客户端根据返回的JSON数据进行页面元素的布局和重组。
[0011]所述页面联动操作的详细过程为:客户端把从服务器端获取的JSON数据进行处理，转换成对应的HTML Tag添加到一个空白页面中，形成持久层对象；
客户端脚本根据页面绑定的持久层对象生成一个Model并绑定到页面上；
页面元素加载完毕后，根据绑定的数据对象发起服务器请求，进行数据加载工作，并显示到页面，实现Π页面和数据的联动。
[0012]上述每个元素在生成到HTML页面时均有对应JavaScript对其进行包装处理。
[0013]所述Π页面在联动操作时，根据页面元素内的值变化实时更新Model内对应字段的值，并返回数据库保存:即服务器端检测到有变化数据存在时，该变化部分的数据通过双向绑定，将页面的值变化反映到绑定的Model中，并通过请求更新到数据库并保存。
[0014]本发明的一种基于Bootstrap显示运行时定制页面的方法，具有以下优点:
本发明提出的一种基于Bootstrap显示运行时定制页面的方法，可以根据业务要求定义页面的各种元素、布局、功能，最终显示页面根据设计的样式进行内容展示，并采用了MVVM框架，当页面相关元素值发生变化时，会及时更新内存中的数据，从而完成页面数据的双向绑定，实用性强，易于推广。
【附图说明】
[0015]附图1是本发明的页面初始化示意图。
[0016]附图2为本发明的页面操作示意图。
【具体实施方式】
[0017]下面结合附图和具体实施例对本发明作进一步说明。
[0018]本发明公开了一种基于Bootstrap显示运行时定制页面的方法，该方法的过程如附图1、图2所示，其具体实现过程为:
首先进行页面初始化，即用户在客户端向服务器端发出页面浏览请求，服务器端根据请求的页面ID获取页面描述文档并解析，形成JSON格式数据返回客户端；
页面联动操作:客户端脚本调用返回的JSON数据描绘Π页面，生成数据Model实例并获取数据绑定到页面，实现Π页面和数据的联动。
[0019]所述页面初始化前，创建页面基础描述文档，支持运行时设计，其中包含的内容包括页面元素类型，绑定数据对象，和页面元素绑定的对应字段，并提供列权限进行显示字段的过滤和可编辑性。
[0020]所述页面初始化的详细过程为:
服务器端根据要获取的页面ID，获取运行时定制页面的设计文档ID，并从数据库获取该文档的描述XML文档； 服务器端分析获取的对应页面XML文档，将获取的每一个项目的属性转换成JSON格式，返回到客户端。
[0021]所述JSON数据描绘的Π页面包括以下元素:文本、数字、下拉、日期、时间、智能帮助控件，提供了一系列的二次封装，实现对于自定义项目的显示、操作、数据绑定的扩展处理。
[0022]所述页面联动操作的具体过程为:打开Π页面时，输