CN103389895B - 一种前端页面的生成方法及系统 - Google Patents

Abstract

本发明提供了一种前端页面的生成方法及系统，该系统包括：位于前端的变量编辑器展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；位于后端的数据构造器根据编辑好的变量，利用所述模板文件生成页面。根据本发明提供的技术方案，能够降低前端对后端的依赖性，提高前端的开发工作效率。

Description

一种前端页面的生成方法及系统

【技术领域】

本发明涉及互联网领域的测试技术，尤其涉及一种前端页面的生成方法及系统。

【背景技术】

互联网技术中，通常将技术的实现层级更具体地细分为服务器端（即后端）和浏览器端（即前端），这样的划分有利于技术实现的专注性，可以提高效率。但实际工作中，划分后需要解决后端与前端之间的数据通信问题，所以往往需要后端的开发人员与前端的开发人员进行联调才能保证产品的完整运行。

图1是现有技术中前端与后端交互的示意图，如图1所示，后端的表现层需要从各个数据库中获取数据，并对数据进行处理，处理后将数据发送到模板文件，由模板文件根据数据生成页面，将该页面发送给前端进行显示，但是由于后端获取数据和处理数据的过程涉及多个模块，过程繁琐，环境复杂，因此在实际工作中，提供给模板文件的数据常常存在问题，从而导致前端展示出的页面不是需要的页面，无法看到相应的结果，进而需要前端的开发人员与后端的开发人员进行联调，以获取需要的页面，因此前端页面的开发工作效率较低。此外，前端的页面显示完全依赖于后端的数据，而后端通常无法及时、快速地将相应的数据提供给前端，也导致了前端的工作效率较低。因此，如何降低前端对后端的数据依赖，就成为了提高前端工作效率的关键。

【发明内容】

本发明提供了一种前端页面的生成方法及系统，能够降低前端对后端的依赖性，提高前端的开发工作效率。

本发明的具体技术方案如下：

根据本发明一优选实施例，一种前端页面的生成系统，包括：变量编辑器、数据构造器；其中，

变量编辑器，位于前端，用于展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；

数据构造器，位于后端，用于根据编辑好的变量，利用所述模板文件生成页面。

上述系统中，该系统还包括：

变量解析器，位于前端，用于从后端的模板文件中提取出字符串，利用提取出的字符串形成变量，将该变量发送给所述变量编辑器。

上述系统中，所述变量解析器从后端的模板文件中提取出字符串时，具体为：根据用户输入的模板文件的路径，获取模板文件；调用后端提供的接口打开所述模板文件，从所述模板文件中提取出字符串。

上述系统中，所述变量解析器利用提取出的字符串形成变量时，具体为：从变量中的字符串中筛选出符合预设的字符串格式的字符串；在本地维护的变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串。

上述系统中，该系统还包括：线上服务器；

所述变量解析器，还用于将用户输入的模板文件的路径发送给所述线上服务器；利用所述线上服务器发送来的真实数据为所述变量集合中对应的变量赋值；

所述线上服务器，用于根据变量解析器提供的模板文件的路径，在后端的数据库中查找对应的线上页面的真实数据，将获取到的真实数据发送给变量编辑器。

上述系统中，所述变量编辑器在展示变量时，具体为：

循环所述变量集合中的每个变量，识别出循环到的变量的变量名、变量值和变量类型；利用可视化的编辑界面展示所述变量集合中变量的变量名、变量值和变量类型。

上述系统中，所述变量编辑器在接收用户对所述变量的编辑时，具体为：

利用可视化的编辑界面接收用户编辑的变量名或修改的变量值，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为数组类型的变量增加的数据项，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为对象类型的变量增加的属性，将用户编辑好的变量保存到本地维护的变量集合中。

上述系统中，所述数据构造器在根据编辑好的变量，利用所述模板文件生成页面时，具体为：对所述变量集合中的变量进行遍历，将变量集合中的变量转换为模板文件可识别的变量格式，将转换后的变量替换模板文件中的字符串，生成显示的页面文件。

一种前端页面的生成方法，包括：

展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；

根据编辑好的变量，利用所述模板文件生成页面。

上述方法中，该方法还包括：

从后端的模板文件中提取出字符串，利用提取出的字符串形成变量。

上述方法中，所述从后端的模板文件中提取出字符串为：

根据用户输入的模板文件的路径，获取模板文件；

调用后端提供的接口打开所述模板文件，从所述模板文件中提取出字符串。

上述方法中，所述利用提取出的字符串形成变量为：

从变量中的字符串中筛选出符合预设的字符串格式的字符串；在本地维护的变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串。

上述方法中，该方法还包括：

根据用户输入的模板文件的路径后端的数据库中查找对应的线上页面的真实数据；利用所述真实数据为所述变量集合中对应的变量赋值。

上述方法中，所述展示变量为：

循环所述变量集合中的每个变量，识别出循环到的变量的变量名、变量值和变量类型；利用可视化的编辑界面展示所述变量集合中变量的变量名、变量值和变量类型。

上述方法中，所述接收用户对所述变量的编辑为：

利用可视化的编辑界面接收用户编辑的变量名或修改的变量值，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为数组类型的变量增加的数据项，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为对象类型的变量增加的，将用户编辑好的变量保存到本地维护的变量集合中。

上述方法中，所述根据编辑好的变量，利用所述模板文件生成页面为：

对所述变量集合中的变量进行遍历，将变量集合中的变量转换为模板文件可识别的变量格式，将转换后的变量替换模板文件中的字符串，生成显示的页面文件。

由以上技术方案可以看出，本发明提供的技术方案，直接在前端网页上编辑数据，根据编辑的数据生成页面，保证展示出需要的页面，降低前端对后端的依赖性以及生成前端页面的复杂度，提高前端的开发工作效率。

【附图说明】

图1是现有技术中前端与后端交互的示意图；

图2是本发明实现前端页面的生成系统的优选实施例的结构示意图；

图3是本发明实现前端页面的生成方法的优选实施例的流程示意图；

图4是目前网上支付方法的流程示意图；

图5是本发明实现前端页面的生成方法中可视化的编辑界面的示意图。

【具体实施方式】

本发明的基本思想是：位于前端的变量编辑器展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；位于后端的数据构造器根据编辑好的变量，利用所述模板文件生成页面。

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

本发明提供一种前端页面的生成系统，图2是本发明实现前端页面的生成系统的优选实施例的结构示意图，如图2所示，该系统包括：变量解析器20、变量编辑器21、数据构造器22，还可以包括：线上服务器23。

基于上述图2所示的系统，本发明还提供一种前端页面的生成方法，图3是本发明实现前端页面的生成方法的优选实施例的流程示意图，如图3所示，该优选实施例包括以下步骤：

步骤301，前端的变量解析器从后端的模板文件中提取出字符串，利用提取出的字符串形成变量，将该变量发送给所述变量编辑器。

具体的，用户通过统一资源定位符（URL，Uniform/Universal ResourceLocator）访问变量解析器的地址，并在URL参数中附加模板文件在后端的路径，以实现访问变量解析器；变量解析器根据模板文件的路径，查找模板文件，如果模板文件不存在，则通过浏览器显示路径错误的提示信息；如果模板文件存在，则变量解析器可以得到该模板文件；其中，所述模板文件是用于生成页面的原始文件，该原始文件包含作为占位符的字符串，最后需要利用真实的数据替换所述字符串以生成显示的页面；本实施例中，所述用户为前端的开发人员。

变量解析器从后端获得模板文件后，调用后端提供的fopen接口，fopen接口的接口处理函数打开该模板文件，从模板文件中提取出所有字符串，并利用提取出的字符串形成变量$str。

变量解析器先对所述变量$str中的字符串进行匹配处理，即根据预设的字符串格式从字符串中筛选出符合该字符串格式的字符串，例如，预设的字符串格式为“前缀标识+若干合法变量字符”；然后变量解析器对筛选出的字符串进行变量处理，根据筛选出的字符串得到该字符串表示的变量名，并根据该字符串表示的变量名得到该字符串表示的变量类型；例如，变量名中包含“.”，则表示字符串的变量类型是对象类型，变量名中包含“[”和“]”，则表示字符串的变量类型是数组类型；本实施例中，可以得到的变量类型包括对象类型、数组类型或字符串类型。

变量解析器在本地维护的一个变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串；所述变量集合中包含模板文件中需要使用的变量的变量名、变量值以及根据变量名确定的变量类型；预先协商好变量编辑器可识别的格式，变量解析器将维护的变量集合转换为前端的变量编辑器可识别的格式后，将变量集合发送给变量编辑器；变量编辑器可识别的格式可以是轻量级的数据交换格式（JSON，JavaScript Object Notation)）格式或可扩展标记语言（XML，Extensible Markup Language）格式等。

步骤302，前端的变量编辑器展示收到的变量，并接收用户对变量的编辑，将编辑好的变量发送给后端的数据构造器。

具体的，变量编辑器从变量解析器收到变量集合后，首先，利用for循环函数循环变量集合中的每个变量，每循环到一个变量，就识别该变量的变量名、变量值和变量类型；变量编辑器提供一个可视化的编辑界面，该可视化的编辑界面展示变量集合中所有变量的变量名、变量值和变量类型。

可视化的编辑界面在展示变量后，用户可以在该可视化的编辑界面中执行编辑变量名或修改变量值等操作；还可以在可视化的编辑界面中为数组类型或对象类型的变量增加节点，例如，对于数组类型的变量，可以在可视化的编辑界面中为数组类型的变量增加数据项，对于对象类型的变量，可以在可视化的编辑界面中为对象类型的变量增加属性；用户编辑好变量后，可以在可视化的编辑界面中点击保存按钮，提示变量编辑器已经编辑好变量。

变量编辑器也在本地维护一个变量集合，该变量集合用于保存用户编辑好的变量；前端发送给后端的数据格式都是以表单的形式发送的，因此变量编辑器将用于保存编辑好的变量的变量集合，转换成表单后发送给后端的数据构造器。

这里，变量编辑器将编辑好的变量提供给数据构造器之后，所述可视化的编辑界面仍然展示变量，并仍然可以接收用户对变量的编辑，然后再将编辑好的变量提供给数据构造器，如此循环操作，可以针对同一模板文件，形成多种不同的页面，如果需要更换模板文件，则执行步骤301。

步骤303，后端的数据构造器根据编辑好的变量，利用模板文件生成页面。

具体的，后端的数据构造器收到前端的变量编辑器发送的表单后，从中获取变量集合，对该变量集合中的变量进行遍历，将变量集合中的所有变量都转换为模板文件可识别的变量格式，然后调用模板文件对收到的变量进行编译，将转换后的变量，替换模板文件中作为占位符的字符串，生成用于显示的页面文件，将该页面文件发送给前端的浏览器，浏览器展示所述页面文件。

上述方案在某些应用场景下可能存在一定的局限性，例如，当前端展示的页面中存在大数据量时，需要用户在可视化的编辑界面中手工构造很多数据，尤其是存在图片数据时，因此，为了解决这一问题，基于图2所示的系统，提供一种前端页面的生成方法的优选实施例二，在图3所示的方法的基础上，优选实施例二在步骤302之前，还包括以下步骤：

后端的线上服务器从数据库中获取所述模板文件对应的线上页面的真实数据，并将获取到的真实数据发送给前端的变量解析器；变量解析器利用所述线上服务器发送来的真实数据为所述变量集合中对应的变量赋值。

具体的，如果用户提供的模板文件已经存在对应的线上页面时，该模板文件已经对应存在一些线上的真实数据，变量解析器可以将用户提供的模板文件在后端的路径，发送给后端的线上服务器；线上服务器根据变量解析器提供的模板文件的路径，在后端的数据库中，查找该模板文件对应的线上页面的真实数据，将获取到的真实数据发送给变量解析器；所述真实数据为线上页面中的变量对应的真实变量值；变量解析器利用线上服务器发送来的真实数据为所述变量集合中对应的变量赋值。

根据目前的页面的数据量进行分析，优化后的方法可以应用于生成数据量大的页面。

为实现优选实施例一所示的方法，图2所示的系统中：

变量解析器20，位于前端，用于从后端的模板文件中提取出字符串，利用提取出的字符串形成变量，将该变量发送给所述变量编辑器21；

变量编辑器21，位于前端，用于展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；

数据构造器22，位于后端，用于根据编辑好的变量，利用所述模板文件生成页面。

其中，所述变量解析器20从后端的模板文件中提取出字符串具体为：根据用户输入的模板文件的路径，获取模板文件；调用后端提供的接口打开所述模板文件，从所述模板文件中提取出字符串。

所述变量解析器20利用提取出的字符串形成变量具体为：从变量中的字符串中筛选出符合预设的字符串格式的字符串；在本地维护的变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串。

该系统还包括：线上服务器23；

所述变量解析器20，还用于将用户输入的模板文件的路径发送给所述线上服务器23；利用所述线上服务器23发送来的真实数据为所述变量集合中对应的变量赋值；

所述线上服务器23，用于根据变量解析器20提供的模板文件的路径，在后端的数据库中查找对应的线上页面的真实数据，将获取到的真实数据发送给变量编辑器20。

所述变量编辑器21在展示变量具体为：循环所述变量集合中的每个变量，识别出循环到的变量的变量名、变量值和变量类型；利用可视化的编辑界面展示所述变量集合中变量的变量名、变量值和变量类型。

所述变量编辑器21在接收用户对所述变量的编辑具体为：利用可视化的编辑界面接收用户编辑的变量名或修改的变量值，将用户编辑好的变量保存到本地维护的变量集合中；或者，利用所述可视化的编辑界面接收用户为数组类型的变量增加的数据项，将用户编辑好的变量保存到本地维护的变量集合中；或者，利用所述可视化的编辑界面接收用户为对象类型的变量增加的属性，将用户编辑好的变量保存到本地维护的变量集合中。

所述数据构造器22在根据编辑好的变量，利用所述模板文件生成页面具体为：对所述变量集合中的变量进行遍历，将变量集合中的变量转换为模板文件可识别的变量格式，将转换后的变量替换模板文件中的字符串，生成显示的页面文件。

实施例

图4是目前网上支付方法的流程示意图，如图4所示，需要先存在一个可供支付的商品，然后支付该商品的费用，最后才能看到支付成功页，在此过程中，有时需要修改数据库中的数据，尤其是支付成功页中有数据需要频繁修改调整时，目前的这种支付流程的开发和运行成本都比较高；利用本发明的上述技术方案后，只需要在浏览器中输入变量解析器和模板文件的路径，如http://www.your-domain.com/dev/?t=path/to/your/tpl/template/tpl，就可以在浏览器中看到变量编辑器提供的可视化的编辑界面，如图5所示，在该可视化的编辑界面中用户可以修改或填入必要的数据，如变量名、变量值和变量类型等，然后就可以直接访问支付成功页，而不再需要从数据库中调用数据，整个过程一般不超过30s，大大节省前端页面的开发时间，提高开发效率。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (14)

1.一种前端页面的生成系统，其特征在于，该系统包括：变量编辑器、数据构造器；其中，

变量编辑器，位于前端，用于展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；

数据构造器，位于后端，用于根据编辑好的变量，利用所述模板文件生成页面；

所述变量编辑器在接收用户对所述变量的编辑时，具体为：

利用可视化的编辑界面接收用户编辑的变量名或修改的变量值，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为数组类型的变量增加的数据项，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为对象类型的变量增加的属性，将用户编辑好的变量保存到本地维护的变量集合中。

2.根据权利要求1所述的系统，其特征在于，该系统还包括：

变量解析器，位于前端，用于从后端的模板文件中提取出字符串，利用提取出的字符串形成变量，将该变量发送给所述变量编辑器。

3.根据权利要求2所述的系统，其特征在于，所述变量解析器从后端的模板文件中提取出字符串时，具体为：根据用户输入的模板文件的路径，获取模板文件；调用后端提供的接口打开所述模板文件，从所述模板文件中提取出字符串。

4.根据权利要求2所述的系统，其特征在于，所述变量解析器利用提取出的字符串形成变量时，具体为：从变量中的字符串中筛选出符合预设的字符串格式的字符串；在本地维护的变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串。

5.根据权利要求4所述的系统，其特征在于，该系统还包括：线上服务器；

所述变量解析器，还用于将用户输入的模板文件的路径发送给所述线上服务器；利用所述线上服务器发送来的真实数据为所述变量集合中对应的变量赋值；

所述线上服务器，用于根据变量解析器提供的模板文件的路径，在后端的数据库中查找对应的线上页面的真实数据，将获取到的真实数据发送给变量编辑器。

6.根据权利要求4或5所述的系统，其特征在于，所述变量编辑器在展示变量时，具体为：

循环所述变量集合中的每个变量，识别出循环到的变量的变量名、变量值和变量类型；利用可视化的编辑界面展示所述变量集合中变量的变量名、变量值和变量类型。

7.根据权利要求1所述的系统，其特征在于，所述数据构造器在根据编辑好的变量，利用所述模板文件生成页面时，具体为：对所述变量集合中的变量进行遍历，将变量集合中的变量转换为模板文件可识别的变量格式，将转换后的变量替换模板文件中的字符串，生成显示的页面文件。

8.一种前端页面的生成方法，其特征在于，该方法包括：

展示依据后端的模板文件提取的变量，并接收用户对所述变量的编辑；

根据编辑好的变量，利用所述模板文件生成页面；

所述接收用户对所述变量的编辑为：

利用可视化的编辑界面接收用户编辑的变量名或修改的变量值，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为数组类型的变量增加的数据项，将用户编辑好的变量保存到本地维护的变量集合中；或者，

利用所述可视化的编辑界面接收用户为对象类型的变量增加的，将用户编辑好的变量保存到本地维护的变量集合中。

9.根据权利要求8所述的方法，其特征在于，该方法还包括：

从后端的模板文件中提取出字符串，利用提取出的字符串形成变量。

10.根据权利要求9所述的方法，其特征在于，所述从后端的模板文件中提取出字符串为：

根据用户输入的模板文件的路径，获取模板文件；

调用后端提供的接口打开所述模板文件，从所述模板文件中提取出字符串。

11.根据权利要求9所述的方法，其特征在于，所述利用提取出的字符串形成变量为：

从变量中的字符串中筛选出符合预设的字符串格式的字符串；在本地维护的变量集合中添加变量，依据筛选出的字符串设置该添加的变量的变量名和变量类型，该添加的变量的变量值为空字符串。

12.根据权利要求11所述的方法，其特征在于，该方法还包括：

根据用户输入的模板文件的路径后端的数据库中查找对应的线上页面的真实数据；利用所述真实数据为所述变量集合中对应的变量赋值。

13.根据权利要求11或12所述的方法，其特征在于，所述展示变量为：

循环所述变量集合中的每个变量，识别出循环到的变量的变量名、变量值和变量类型；利用可视化的编辑界面展示所述变量集合中变量的变量名、变量值和变量类型。

14.根据权利要求8所述的方法，其特征在于，所述根据编辑好的变量，利用所述模板文件生成页面为：

对所述变量集合中的变量进行遍历，将变量集合中的变量转换为模板文件可识别的变量格式，将转换后的变量替换模板文件中的字符串，生成显示的页面文件。