AngularJS框架的页面生成方法、装置及系统与流程

本发明涉及页面生成技术领域，更具体地说，涉及一种基于AngularJS框架的页面生成方法、装置及系统。

背景技术：

目前，金交所新一代综合交易系统的门户网站采用互联网当下比较流行也是比较新的框架和技术，其中AngularJS框架作为一款优秀的前端静态页面实现技术是系统的一大亮点。为了业务需求，实现金交所理财产品的定制功能，使用vtemplet构件进行页面的定制生成，vtemplet为基于vtemplate技术实现的一种可视化图形界面个性化定制jsp页面的构件，以标签的方式实现jsp的动态加载。但是目前vtemplet只能支持金交所后台管理系统中的产品定制功能，不能对html静态页面提供支持，即vtemplet定制并生成的jsp页面的功能并不能用于前台系统中。

因此，如何使前台系统展示vtemplet定制的页面，是本领域技术人员需要解决的问题。

技术实现要素：

本发明的目的在于提供一种基于AngularJS框架的页面生成方法、装置及系统，以实现生成基于AngularJS语法的html静态页面，使前台系统进行展示。

为实现上述目的，本发明实施例提供了如下技术方案：

一种基于AngularJS框架的页面生成方法，包括：

将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；

按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面。

其中，所述将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象，包括：

将vtemplet定制的所述模板文件加载至内存；

按照预定解析格式解析所述模板文件的内容，生成数据对象。

其中，所述模板文件为vtemplet定制的xml格式的模板文件。

其中，将所述html语言写入文件系统中生成html静态页面之后，还包括：

将所述html静态页面通过浏览器展示。

一种基于AngularJS框架的页面生成装置，包括：

解析模块，用于将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；

遍历模块，用于按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面。

其中，所述解析模块将vtemplet定制的所述模板文件加载至内存，按照预定解析格式解析所述模板文件的内容，生成数据对象。

其中，所述模板文件为vtemplet定制的xml格式的模板文件。

一种基于AngularJS框架的页面生成系统，包括上述页面生成装置，以及展示所述html静态页面的浏览器。

通过以上方案可知，本发明实施例提供的一种基于AngularJS框架的页面生成方法，包括：将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面；可见，在方案中，通过将vtemplet定制的模板文件转换为符合AngularJS语法的html静态页面，实现了前台系统对html静态页面的展示；本发明还公开了一种基于AngularJS框架的页面生成装置及系统，同样具有上述技术效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例公开的一种基于AngularJS框架的页面生成方法流程示意图；

图2为本发明实施例公开的一种基于AngularJS框架的页面生成装置结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例公开了一种基于AngularJS框架的页面生成方法、装置及系统，以实现生成基于AngularJS语法的html静态页面，使前台系统进行展示。

需要说明的是，Vtemplet为基于vtemplate技术实现的一种可视化图形界面个性化定制jsp页面的构件，以标签的方式实现jsp的动态加载；AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

参见图1，本发明实施例提供的一种基于AngularJS框架的页面生成方法，包括：

S101、将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；

其中，所述将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象，包括：

将vtemplet定制的所述模板文件加载至内存；按照预定解析格式解析所述模板文件的内容，生成数据对象；其中，所述模板文件为vtemplet定制的xml格式的模板文件。

具体的，本实施例中的模板文件可以为通过Vtemplet可视化模板设计器所制定的，具体的模板文件生成方法为：通过设计器的布局栏设计页面的基础布局，并添加设计器的数据项，生成页面模板，这样保存后即生成一个格式为xml的模板文件；其中，数据项是基于一个bom.xml文件生成的，bom.xml文件定义了一组相关数据的集合。

需要说明的是，在vtemplet标签被解析时，会通过应用服务器将此模板文件加载至内存中，并通过固定的解析格式将模板文件的内容解析为数据对象，并通过对这个数据对象的遍历，生成与此模板文件对应的html文件。

S102、按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面。

其中，将所述html语言写入文件系统中生成html静态页面之后，还包括：将所述html静态页面通过浏览器展示。

具体的，在本方案对数据对象进行遍历时，根据数据对象的数据格式及AngularJS语法规则，通过java语言将数据对象转换成符合AngularJS语法的html语言写入到html格式的文件系统中，生成html格式的静态页面，并可以直接由浏览器打开。

下面对本发明实施例提供的页面生成装置进行介绍，下文描述的页面生成装置与上文描述的页面生成系统可以相互参照。

参见图2，本发明实施例提供的一种基于AngularJS框架的页面生成装置，包括：

解析模块100，用于将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；

具体的，解析模块100在对vtemplet标签解析时，会通过应用服务器将此模板文件加载至内存中，并通过固定的解析格式将模板文件的内容解析为数据对象，并通过对这个数据对象的遍历，生成与此模板文件对应的html文件。

遍历模块200，用于按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面。

其中，所述解析模块将vtemplet定制的所述模板文件加载至内存，按照预定解析格式解析所述模板文件的内容，生成数据对象；所述模板文件为vtemplet定制的xml格式的模板文件。

具体的，在本方案中的遍历模块200对数据对象进行遍历时，根据数据对象的数据格式及AngularJS语法规则，通过java语言将数据对象转换成符合AngularJS语法的html语言写入到html格式的文件系统中，生成html格式的静态页面，并可以直接由浏览器打开。

本发明实施例提供一种基于AngularJS框架的页面生成系统，包括上述的页面生成装置，以及展示所述html静态页面的浏览器。

本发明实施例提供的一种基于AngularJS框架的页面生成方法，包括：将vtemplet定制的模板文件按照预定解析格式进行解析，生成数据对象；按照所述数据对象的数据格式及AngularJS语法规则，将所述数据对象转换为符合AngularJS语法的html语言，将所述html语言写入文件系统中生成html静态页面；可见，在方案中，通过将vtemplet定制的模板文件转换为符合AngularJS语法的html静态页面，实现了前台系统对html静态页面的展示；本发明还公开了一种基于AngularJS框架的页面生成装置及系统，同样具有上述技术效果。本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。