一种页面生成方法和系统的制作方法
【专利摘要】本申请提供了一种页面生成方法和系统，所述方法包括：前端引擎接收页面请求；从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的用户界面UI模型名称以及所述UI模型名称对应的UI模型；从所述UI模型中获取构成页面的所有UI组件的信息；依据所述UI组件的信息将所有UI组件组装到页面中，生成请求的页面。通过本申请提供的页面生成方法，在页面生成过程中，前端引擎可以不再编写JS代码，从而减少前端引擎的JS代码量，便于后期维护。
【专利说明】一种页面生成方法和系统
【技术领域】
[0001]本申请涉及页面开发【技术领域】，特别涉及一种页面生成方法和系统。
【背景技术】
[0002]目前，在页面开发的过程中，为了降低项目实施成本都会选择采用技术成熟的结构框架，如:Ext、Jquery等技术框架,按照模型一视图一控制器这个三层架构模式(MVC,Model-View-Controller)的思想对整体结构框架进行分层，从而达到每层架构的相互独立，并且每层独立架构之间通过接口的方式进行调用，提高各层之间的灵活扩展机制。
[0003]但是在将整体结构框架按照MVC思想进行分层过程中，技术人员需要在了解JavaScript (简称JS)这种计算机脚本语言的情况下，撰写大量的JS代码，方可实现整体结构框架的分层，并最终生成页面进行展示。而在开发初期JS代码量增加导致架构混乱，不利于后期对IS代码的维护。
【发明内容】
[0004]本申请所要解决的技术问题是提供一种页面生成方法和系统，用以解决现有技术中基于JavaScript进行页面生成时，代码量较大的问题，更进一步的，还可以方便后期的维护。
[0005]为了解决上述问题，本申请公开了一种页面生成方法，包括:
[0006]接收页面请求；
[0007]从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的用户界面UI模型名称以及所述UI模型名称对应的UI模型；
[0008]从所述Π模型中获取构成页面的所有Π组件的信息；
[0009]依据所述UI组件的信息将所有UI组件组装到页面中，生成请求的页面。
[0010]进一步，获取所述UI模型名称对应的UI模型包括:获取所述UI模型名称对应的扩展标记语言XML格式的UI模型。
[0011]进一步，依据所述Π组件的信息将所有Π组件组装到页面中，生成请求的页面包括:
[0012]将所述所有Π组件中任意一个Π组件的信息转换为轻量级的数据交换格式JSON格式的信息，所述JSON格式的信息包括Π组件的位置信息、Π组件的类型信息和Π组件的文本信息；
[0013]获取与所述UI组件的类型信息相对应的组件，并依据所述UI组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述Π组件的文本信息在所述页面上描述所述UI组件；
[0014]在将所有Π组件添加到页面上，并使用相应的Π组件的文本信息描述所述Π组件之后,生成请求的页面。
[0015]进一步，在将所有Π组件添加到页面上，并使用相应的Π组件的文本信息描述所述Π组件之后，生成请求的页面之前还包括:获取Π组件的颜色信息，并依据所述Π组件的颜色信息渲染所述Π组件。
[0016]进一步，在JSON格式的信息为正常信息的情况下，执行获取与所述Π组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述UI组件的文本信息在所述页面上描述所述UI组件。
[0017]进一步，在JSON格式的信息中携带的异常标志位为‘0’的情况下，判定JSON格式的信息为正常信息。
[0018]进一步，在JSON格式的信息还包括导航信息的情况下，返回执行接收页面请求，该页面请求对应的页面请求地址是导航信息中携带的地址；
[0019]在JSON格式的信息不包括导航信息的情况下，执行获取与所述Π组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述UI组件的文本信息在所述页面上描述所述UI组件。
[0020]本申请还提供了一种页面生成系统系统，该系统包括:
[0021]接收模块，用于接收页面请求；
[0022]第一获取模块，用于从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的UI模型名称以及所述UI模型名称对应的UI模型；
[0023]第二获取模块，用于从所述Π模型中获取构成页面的所有Π组件的信息；
[0024]组装模块，用于依据所述UI组件的信息将所有UI组件组装到页面中，生成请求的页面。
[0025]进一步，所述第一获取模块具体用于获取所述UI模型名称对应的XML格式的UI模型。
[0026]进一步，所述组装模块包括:转换单元、调用单元和添加单元；其中:
[0027]转换单元，用于将所述所有Π组件中任意一个Π组件的信息转换为JSON格式的信息，所述JSON格式的信息包括UI组件的位置信息、Π组件的类型信息和UI组件的文本信息；
[0028]调用单元，用于获取与所述Π组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述Π组件的文本信息在所述页面上描述所述UI组件；
[0029]添加单元，用于在将所有Π组件添加到页面上，并使用相应的Π组件的文本信息描述所述UI组件之后，生成请求的页面。
[0030]进一步，所述的页面生成系统还包括:渲染单元，用于获取Π组件的颜色信息，并依据所述UI组件的颜色信息渲染所述UI组件。
[0031 ] 进一步，所述组装模块还包括:
[0032]第一判断单元:用于判断JSON格式的信息是否为正常信息；在JSON格式的信息为正常信息的情况下，触发所述调用单元；所述JSON格式的信息为正常信息是指在JSON格式的信息中携带的异常标志位为‘O’。
[0033]进一步，所述组装模块还包括:
[0034]第二判断单元，用于判断在JSON格式的信息中是否还包括导航信息，在JSON格式的信息还包括导航信息的情况下，返回所述接收模块，以接收页面请求地址是导航信息中携带的地址的页面请求；以及在JSON格式的信息不包括导航信息的情况下，触发所述调用单元。
[0035]与现有技术相比，本申请包括以下优点:
[0036]在本申请中，后端服务器预先配置Π模型，前端引擎在接收页面请求之后，从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的UI模型名称以及所述UI模型名称对应的UI模型，再从所述UI模型中获取构成页面的所有UI组件的信息；依据所述UI组件的信息将所有UI组件组装到页面中，生成请求的页面。在本申请提供的页面生成方法，由于请求页面的UI模型已预先配置，所以前端引擎可以直接调用UI模型，进而从所述Π模型中获取构成页面的所有Π组件的信息；依据所述Π组件的信息将所有Π组件组装到页面中，生成请求的页面。也就是说在页面生成过程中，前端引擎可以不再编写JS代码，从而减少前端引擎的JS代码量。
[0037]进一步，在后期进行新的页面的开发过程中，若新的页面是以原有页面为基础，则可以直接复制原有页面对应的UI模型，再对原有页面对应的UI模型进行修改，从而可以使UI模型可以被重复利用。并且单个Π模型可以单独进行维护，便于后期的数据维护。
[0038]当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。
【专利附图】
【附图说明】
[0039]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0040]图1是本申请中一种页面生成方法的流程图；
[0041]图2是本申请中前端引擎的结构示意图；
[0042]图3是本申请中Π组件组装到页面中的具体过程的一种流程图；
[0043]图4是本申请中UI组件组装到页面中的具体过程的又一种流程图；
[0044]图5是本申请中UI组件组装到页面中的具体过程的另一种流程图；
[0045]图6是本申请中页面生成系统的结构示意框图；
[0046]图7是本申请中组装模块的一种结构示意框图；
[0047]图8是本申请中组装模块的又一种结构示意框图；
[0048]图9是本申请中组装模块的另一种结构示意框图；
[0049]图10是本申请中组装模块的再一种结构示意框图。
【具体实施方式】
[0050]下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0051]本申请提出了一种页面生成的方法，首先接收到页面请求之后，获取页面请求地址，并依据所述页面请求地址获取对应的用户界面(UI, User Interface)模型名称以及所述Π模型名称对应的Π模型；从所述Π模型中获取构成页面的所有Π组件的信息；依据所述UI组件的信息将所有UI组件组装到页面中，生成请求的页面。
[0052]以下列举实施例对本申请提出的页面生成方法进行详细说明。
[0053]一个实施例
[0054]请参阅图1，其示出了本申请提供的一种页面生成方法的一种流程图，在本申请提供的页面生成方法基于Π前端引擎。其中，UI前端引擎请参阅图2所示，包括:页面引擎、JS引擎和创建交互式网页应用的网页开发技术(AJAX, Asynchronous JavaScript andXML)接口。其中:
[0055]页面引擎是Π前端引擎的总接入口，用户发送的请求直接由页面引擎接收，并发送给Π前端引擎的其他部分或者外界设备。
[0056]JS引擎包括组件(Cmp，component), UI模型处理器(Model)和多模型状态下使用的模型管理器(ModeIMan, ModeIManager ), Cmp为前端引擎的组件库，用于存储UI模型中需要的各种组件，Model可以对Π模型中的信息进行解析处理，并根据UI模型中的配置需求从组件库中调用组件；ModelMan是一个模型管理器，在请求生成的页面的局部区域包括多个Π模型时，通过ModelMan对这个局部区域的多个Π模型进行管理。
[0057]AJAX接口用于向后端服务器发送Π模型的名称，以从后端服务器中请求Π模型，并且用于接收后端服务器返回的UI模型信息。
[0058]本实施例图1所示的页面生成方法可以包括以下步骤:
[0059]步骤101:接收页面请求。
[0060]前端引擎中页面引擎直接接收用户发送的页面请求，其中用户发送的页面请求携带有页面请求地址，该页面请求地址是指当前所要请求的页面在后端服务器对应的请求地址。
[0061]步骤102:从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的UI模型名称以及所述UI模型名称对应的UI模型。
[0062]页面引擎从页面请求中获取页面请求地址后，找到所述页面请求的UI模型名称，然后由AJAX接口将所述的Π模型名称发送到后端服务器，并请求后端服务器将对应的Π模型返回。
[0063]后端服务器在接收到请求后响应AJAX接口发送的请求，将所述UI模型名称对应的UI模型返回到前端引擎的AJAX接口。
[0064]在后端服务器返回的Π模型中存在两种不同的类型，一种是公共Π模型，该公共Π模型是公共页面对应的Π模型。用户输入请求网址即可以获取公共Π模型，例如，公共页面百度对应的UI模型即为公共模型。
[0065]另一种是私有UI模型，该私有UI模型在输入个人信息正确的情况下所打开个人页面的页面请求对应的Π模型，并且在请求个人页面时，第一次请求的时候返回的是输入个人信息的验证信息页面对应的Π模型。例如，在打开淘宝页面时第一次请求“我的淘宝”页面时，前端引擎会首先请求账号登陆页面，并获取账号登陆页面对应的UI模型。当前端引擎显示输入个人账号和信息的页面，这时用户输入自己的个人账号和密码。当页面中的登录选项被点击后，后端服务器判断出账号和密码正确的情况下，后端服务器才返回“我的淘宝”页面对应的Π模型。[0066]需要说明的是，在后端服务器预先设定每个页面对应的Π模型，当收到Π模型的名称时将该Π模型名称对应的Π模型通过AJAX接口返回。其中所述Π模型是描述页面信息的配置文件，在Π模型中记录有构成页面的所有UI组件的信息。并且该Π模型是最终页面和最初HTML或JS页面的一个中间模型。
[0067]在本实施例中，UI模型可以为扩展标记语言(XML, eXtensibIeMarkup Language)格式的UI模型，即以XML格式记录构成页面的所有UI组件的信息。以表单作为一个UI模型，其以XML格式记录构成页面的所有UI组件的信息可以如下所示:
[0068]
【权利要求】
1.一种页面生成方法，其特征在于，包括: 接收页面请求； 从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的用户界面UI模型名称以及所述UI模型名称对应的UI模型； 从所述UI模型中获取构成页面的所有UI组件的信息； 依据所述Π组件的信息将所有Π组件组装到页面中，生成请求的页面。
2.根据权利要求1所述的页面生成方法，其特征在于，获取所述Π模型名称对应的Π模型包括:获取所述UI模型名称对应的扩展标记语言XML格式的UI模型。
3.根据权利要求2所述的页面生成方法，其特征在于，依据所述Π组件的信息将所有UI组件组装到页面中，生成请求的页面包括: 将所述所有UI组件中任意一个UI组件的信息转换为轻量级的数据交换格式JSON格式的信息，所述JSON格式的信息包括UI组件的位置信息、Π组件的类型信息和UI组件的文本信息； 获取与所述Π组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述Π组件的文本信息在所述页面上描述所述Π组件； 在将所有UI组件添加到页面上，并使用相应的UI组件的文本信息描述所述UI组件之后,生成请求的页面。
4.根据权利要求3所述的页面生成方法，其`特征在于，在将所有UI组件添加到页面上，并使用相应的Π组件的文本信息描述所述Π组件之后，生成请求的页面之前还包括:获取UI组件的颜色信息，并依据所述UI组件的颜色信息渲染所述UI组件。
5.根据权利要求3所述的页面生成方法，其特征在于，在JSON格式的信息为正常信息的情况下，执行获取与所述UI组件的类型信息相对应的组件，并依据所述UI组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述Π组件的文本信息在所述页面上描述所述Π组件。
6.根据权利要求5所述页面生成方法，其特征在于，在JSON格式的信息中携带的异常标志位为‘0’的情况下，判定JSON格式的信息为正常信息。
7.根据权利要求3所述的页面生成方法，其特征在于，在JSON格式的信息还包括导航信息的情况下，返回执行接收页面请求，该页面请求对应的页面请求地址是导航信息中携带的地址； 在JSON格式的信息不包括导航信息的情况下，执行获取与所述UI组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述Π组件至页面相对应位置上，且使用所述UI组件的文本信息在所述页面上描述所述UI组件。
8.一种页面生成系统，其特征在于，包括: 接收模块，用于接收页面请求； 第一获取模块，用于从所述页面请求中获取页面请求地址，并依据所述页面请求地址获取对应的Π模型名称以及所述Π模型名称对应的Π模型； 第二获取模块，用于从所述UI模型中获取构成页面的所有UI组件的信息； 组装模块，用于依据所述Π组件的信息将所有Π组件组装到页面中，生成请求的页面。
9.根据权利要求8所述的页面生成系统，其特征在于，所述第一获取模块具体用于获取所述Π模型名称对应的XML格式的Π模型。
10.根据权利要求9所述的页面生成系统，其特征在于，所述组装模块包括:转换单元、调用单元和添加单元；其中: 转换单元，用于将所述所有Π组件中任意一个Π组件的信息转换为JSON格式的信息，所述JSON格式的信息包括UI组件的位置信息、Π组件的类型信息和UI组件的文本信息； 调用单元，用于获取与所述Π组件的类型信息相对应的组件，并依据所述Π组件的位置信息添加所述UI组件至页面相对应位置上，且使用所述UI组件的文本信息在所述页面上描述所述UI组件； 添加单元，用于在将所有UI组件添加到页面上，并使用相应的UI组件的文本信息描述所述UI组件之后，生成请求的页面。
11.根据权利要求10所述的页面生成系统，其特征在于，还包括:渲染单元，用于获取UI组件的颜色信息，并依据所述UI组件的颜色信息渲染所述UI组件。
12.根据权利要求9所述的页面生成系统，其特征在于，所述组装模块还包括: 第一判断单元:用于判断JSON格式的信息是否为正常信息；在JSON格式的信息为正常信息的情况下，触发所述调用单元；所述JSON格式的信息为正常信息是指在JSON格式的信息中携带的异常标志位为‘O’。`
13.根据权利要求9所述页面生成系统，其特征在于，所述组装模块还包括: 第二判断单元，用于判断在JSON格式的信息中是否还包括导航信息，在JSON格式的信息还包括导航信息的情况下，返回所述接收模块，以接收页面请求地址是导航信息中携带的地址的页面请求；以及在JSON格式的信息不包括导航信息的情况下，触发所述调用单J Li ο
【文档编号】G06F9/44GK103870266SQ201210555935
【公开日】2014年6月18日 申请日期:2012年12月12日 优先权日:2012年12月12日
【发明者】杨帆 申请人:杭州新世纪电子科技有限公司