CN109783078B - 前端页面的独立开发方法、装置、设备及存储介质 - Google Patents

Abstract

本发明属于开发辅助技术领域，公开了一种前端页面的独立开发方法、装置、设备及存储介质。该方法包括：接收用户触发的前端页面开发请求，从前端页面开发请求中获取待开发的前端页面的页面需求；根据页面需求，确定开发前端页面所需的目标测试数据和目标测试数据的格式；根据目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问目标测试数据的目标数据访问接口；利用目标数据访问接口从预设的数据容器中获取目标测试数据。通过上述方式，实现了Web前端的独立开发，使得Web前端的开发进度不受Server端开发进度的影响。

Description

前端页面的独立开发方法、装置、设备及存储介质

技术领域

本发明涉及开发辅助技术领域，尤其涉及一种前端页面的独立开发方法、装置、设备及存储介质。

背景技术

浏览器/服务器模式(Browser/Server，B/S结构)，是万维网(World Wide Web，Web)兴起后的一种网络结构模式。由于Web浏览器是客户端最主要的应用软件，因而基于B/S结构的业务系统，通过将系统功能实现的核心部分集中到服务器上，然后在客户机上只要安装一个浏览器(以下称为：Web前端)便可以通过Web Server同服务器(以下称为：Server端)中的数据库进行数据交互，因而大大简化了系统的开发、维护和使用。

但是，在实际情况中，Web前端和Server端通常是由不同的技术团队负责开发的，而Web前端开发过程中需要用到的数据又是存放在Server端的。因而经常会出现Server端接口未开发完成，导致Web前端的开发工作无法推进的情况。

所以，亟需提供一种前端页面的独立开发方法，使得Web前端的开发进度不受Server端开发进度的影响。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种前端页面的独立开发方法、装置、设备及存储介质，旨在实现Web前端的独立开发，使得Web前端的开发进度不受Server端开发进度的影响。

为实现上述目的，本发明提供了一种前端页面的独立开发方法，所述方法包括以下步骤:

接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求；

根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式；

根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口；

利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据。

优选地，所述数据容器包括用于存储服务器提供的真实测试数据的服务器数据存储区域和用于存储伪数据生成器生成的伪测试数据的伪数据存储区域；

所述利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据，包括：

判断所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据；

若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，则利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，将获取到的所述真实测试数据作为所述目标测试数据；

若所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据，并利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据。

优选地，所述利于所述伪数据生成器生成符合所述页面需求的伪测试数据之前，所述方法还包括：

判断所述数据容器的伪数据存储区域中是否存在符合所述页面需求的伪测试数据；

其中，所述利于所述伪数据生成器生成符合所述页面需求的伪测试数据，包括：

若所述数据容器的伪数据存储区域中不存在符合所述页面需求的伪测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据。

优选地，所述利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据之后，所述方法还包括：

根据所述页面需求，确定开发所述前端页面需要使用的功能组件的类型；

根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件；

将所述目标测试数据导入所述目标功能组件，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

优选地，所述根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件，包括：

根据所述页面需求，确定开发所述前端页面需要使用的前端用户界面框架；

根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

优选地，所述利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面，包括：

根据所述页面需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；

利用所述前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

优选地，所述得到所述前端页面之后，所述方法还包括：

判断所述前端页面中所述目标功能组件中展示的目标测试数据是否是伪测试数据；

若所述前端页面中所述目标功能组件中展示的目标测试数据是伪测试数据，则监控所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据；

若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，并将所述前端页面中所述目标功能组件中展示的伪测试数据替换为符合所述页面需求的真实测试数据。

此外，为实现上述目的，本发明还提出一种前端页面的独立开发装置，所述装置包括：

第一获取模块，用于接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求；

确定模块，用于根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式；

查找模块，用于根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口；

第二获取模块，用于利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据。

此外，为实现上述目的，本发明还提出一种前端页面的独立开发设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端页面的独立开发程序，所述前端页面的独立开发程序配置为实现如上文所述的前端页面的独立开发方法的步骤。

此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有前端页面的独立开发程序，所述前端页面的独立开发程序被处理器执行时实现如上文所述的前端页面的独立开发方法的步骤。

本发明通过预先设置存储开发前端页面所需的目标测试数据的数据容器，利用数据容器建立前Web前端与Server端之间的通信桥梁，在开发前端页面时，Web前端不需要与Server端直接联系，只需要根据预先定义好的数据访问接口从数据容器中获取需要的目标测试数据即可，从而实现了Web前端的独立开发，使得Web前端的开发进度不受Server端开发进度的影响。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的前端页面的独立开发设备的结构示意图；

图2为本发明前端页面的独立开发方法第一实施例的流程示意图；

图3为本发明前端页面的独立开发方法第二实施例的流程示意图；

图4为本发明前端页面的独立开发装置第一实施例的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的前端页面的独立开发设备结构示意图。

如图1所示，该前端页面的独立开发设备可以包括：处理器1001，例如中央处理器(Central Processing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对前端页面的独立开发设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及前端页面的独立开发程序。

在图1所示的前端页面的独立开发设备中，网络接口1004主要用于建立用户终端与数据容器、存放功能组件库的服务器之间的通信连接；用户接口1003主要用于与用户进行数据交互；本发明前端页面的独立开发设备中的处理器1001、存储器1005可以设置在前端页面的独立开发设备中，所述前端页面的独立开发设备通过处理器1001调用存储器1005中存储的前端页面的独立开发程序，并执行本发明实施例提供的前端页面的独立开发方法。

本发明实施例提供了一种前端页面的独立开发方法，参照图2，图2为本发明一种前端页面的独立开发方法第一实施例的流程示意图。

本实施例中，所述前端页面的独立开发方法包括以下步骤：

步骤S10，接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求。

具体的说，在本实施例中执行主体为预先构建的前端应用开发平台，即部署有本实施例所说的前端页面的独立开发流程的一个开发平台。

应当理解的是，在实际应用中，该平台可以是传统的物理服务器(需要占用实际物理空间)，也可以是虚拟云服务器，此处不做限制。

此外，由于前端页面开发请求是由用户触发的，并且在开发前端页面的时候需要用户提供针对待开发的前端页面的页面需求，即前端应用开发平台需要与用户进行交互，在本实施例中，用户具体可以通过终端设备中自带的或自己安装的Web浏览器来实现与前端应用开发平台的交互，具体的触发方式，及提供针对待开发的前端页面的页面需求的方式，本领域的技术人员可以根据需要进行设置，此处不做限制。

此外，本实施例中所说的针对待开发的前端页面的页面需求，可以是由需求工程师根据项目需求设计的Web前端页面的用例图、流程图、产品原型等，此处不再一一列举，对此也不做限制。

关于上述所说的用例图(User Case)，具体是指由参与者(Actor)、用例(UseCase)，边界以及它们之间的关系构成的用于描述系统功能的视图，在用例图中展示的为外部用户(被称为参与者)所能观察到的系统功能的模型图。

流程图，则是用来表示该Web前端页面在使用过程中，展示在该Web前端页面中各个功能组件关联、用户操作的一个实现流程。

产品原型，在实际应用中可以概括的说是整个前端应用产品面市之前的一个框架设计。以网站注册作为例子，整个前期的交互设计流程图之后，就是原型开发的设计阶段，简单的来说是将前端页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达，通过产品原型就可以知道需要合成的前端应用所能实现的功能、前端应用需要包含的前端页面的数量及各页面的风格等。

应当理解的是，由于本实施例中所针对的是前端页面的开发，因而此处所说的产品原型具体为用户想要开发的前端页面所能实现的功能、该前端页面的风格等。

步骤S20，根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式。

应当理解的是，在实际开发过程中，任意一个前端页面的开发并非单纯的在界面中摆放功能组件，而是需要保证添加到页面中的所有功能组件能够按照页面需求关联起来，并且能够正常进行数据的交互。因而，在开发的时候，必需要有相应的测试数据。

由于页面需求中会规定所述前端页面中需要实现哪些功能，因而可以根据要实现的功能来确定所述前端页面在开发过程中，针对各个功能所需的目标测试数据和所述目标测试数据的格式。

比如说，要开发的所述前端页面为一个用于登录的前端页面，在该前端页面中需要输入用户的登录账号和账号密码，并且页面需求中规定了登录账户可以是邮箱或手机号；登录密码只能由数字、字母和下划线组成，且长度不能操作过8位。

相应地，确定的目标测试数据则为充当登录账号的测试数据和充当登录密码的测试数据；确定的目标测试数据的格式则为登录账户所要求的格式和登门密码所要求的格式。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成限定，在实际应用中，本领域的技术人员可以根据需要进行设置，此处不做限制。

步骤S30，根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口。

应当理解的是，在实际应用中由各种前端页面组成的Web前端的运行必然需要涉及与Server端的数据交互，因而为了保证开发出的前端页面能够投入后期的使用，在定义数据访问接口集合中的各个数据访问接口时，各个方位接口的类型、用途、请求格式可以是由负责开发Web前端的技术人员和负责开发Server端的技术人员协商确定的，也可以是由整个前端应用的需求设计人员或者项目负责人员确定的，只要保证定义的数据访问接口最终能够准确的将Server端提供的数据获取到Web前端即可。

步骤S40，利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据。

具体的说，为了保证前端页面能够独立开发，不受Server端开发进度的影响。同时，在前端页面开发完成后又可以与Server端直接对接。本实施例中所说的数据容器具体可以包括用于存储服务器(即Server端)提供的真实测试数据的服务器数据存储区域和用于存储伪数据生成器生成的伪测试数据的伪数据存储区域，并遵循预设的获取规则从数据容器中获取目标数据，从而既可以实现前端页面的独立开发，又可以方便前端页面在开发完成后与开发完成的Server端对接。

关于预设的获取规则及遵循预设的获取规则，利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据的操作大致如下：

在获取目标测试数据时，先判断所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据。

若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，则利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，将获取到的所述真实测试数据作为所述目标测试数据；若所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据，并利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据。

通过这种方式，无论Server端当前的开发进度处于何种阶段，Wed前端都可以获取到开发所述前端页面所需的目标测试，使Wed前端的开发真正摆脱了Server端的限制，从而大大缩短了前端页面的开发周期。

此外，应当理解的是，在实际应用中，可能存在多个前端页面需要的目标测试数据类似，因而在所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据，利于所述伪数据生成器生成符合所述页面需求的伪测试数据之前，可以先判断一下所述数据容器的伪数据存储区域中是否存在符合所述页面需求的伪测试数据。若所述数据容器的伪数据存储区域中不存在符合所述页面需求的伪测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据；若所述数据容器的伪数据存储区域中存在符合所述页面需求的伪测试数据，则无需创建，直接拿来使用即可。

通过这种方式，不仅可以加快获取目标数据的速度，还可以节省数据容器中伪数据存储区域的存储空间。

需要说明的是，以上给出的仅仅为一种利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据的时所遵循的具体获取规则，对本发明的技术方案并不构成限定，在具体实现中，本领域的技术人员可以根据需要进行设置，此处不做限制。

通过上述描述不难发现，本实施例中提供的前端页面的独立开发方法，通过预先设置存储开发前端页面所需的目标测试数据的数据容器，利用数据容器建立前Web前端与Server端之间的通信桥梁，在开发前端页面时，Web前端不需要与Server端直接联系，只需要根据预先定义好的数据访问接口从数据容器中获取需要的目标测试数据即可，从而实现了Web前端的独立开发，使得Web前端的开发进度不受Server端开发进度的影响。

参考图3，图3为本发明一种前端页面的独立开发方法第二实施例的流程示意图。

基于上述第一实施例，本实施例前端页面的独立开发方法在所述步骤S40之后，还包括：

步骤S50，根据所述页面需求，确定开发所述前端页面需要使用的功能组件的类型。

具体的说，由于获取到的所述页面需求中会包含该前端页面对应的产品原型，因而通过对产品原型的分析，便可以快速的确定所述待开发的前端页面在开发过程中需要涉及到的功能组件类型。

关于功能组件的类型，具体是由功能组件的功能属性决定的，比如可以将用作头部导航栏的功能组件的类型统一命名为header，将用作切换的功能组件的类型统一命名为tab，将用作展示信息的列表的类型统一命名为list，将用作前端页面页脚的功能组件的类型统一命名为footer。

需要说明的是，以上给出的功能组件的类型的命名，仅仅为一种具体的分类方式，在实际应用中，本领域的技术人员可以根据需要进行设置，此处不做限制。

因而，通过页面需求中的产品原型中给出的在所述前端页面中显示的内容，便可以确定所述前端页面中需要使用哪些类型的功能组件。

比如，所述页面需求中规定了需要开发的所述前端页面需要用来显示新闻消息，则可以确定需要使用的功能组件为新闻列表功能组件，根据上述的命名可以发现其类型应该是list。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成限定，在实际应用中，本领域的技术人员可以根据需要进行设置，此处不做限制。

步骤S60，根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

具体的说，为了能够快速、准确的从预先封装的功能组件库中查找到符合所述页面需求的目标功能组件，可以预先构建功能组件的类型和功能组件在功能组件库中的存储路径之间的对应关系，得到两者之间的映射关系表；然后，根据映射关系表来查找。

此外，为了方便用户理解各个功能组件的用途，以及方便后期定定位负责开发每一类型的功能组件的技术人员，还可以在映射关系表中设置功能组件的描述及技术人员的字段，具体的格式可以如表1给出的映射关系表来记录。

表1映射关系表

类型	存储路径	功能组件描述	技术人员
				header	Components/Header	头部导航	张三
tab	Components/Tab	Tab切换	张三
				list	Components/List	新闻列表	李四
footer	Components/Footer	页脚组件	王五

其中，存储路径中记载的内容，Components表示的是功能组件库的地址，跟在Components之后的Header则为专门用于存储header类型的功能组件的区域；跟在Components之后的Tab则为专门用于存储tab类型的功能组件的区域；Components之后的List则为专门用于存储list类型的功能组件的区域；Components之后的Footer则为专门用于存储footer类型的功能组件的区域。

此外，由于每一种类型的功能组件往往不止一个，因而还可以为同一类型下的功能组件分配标识其唯一性的编号，并记录每一个功能组件的技术人员的信息。

此外，为了方便用户或者各种功能组件的样式，还可以在映射关系表中添加功能组件样式图。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成限定，在具体实现中，本领域的技术人员可以根据需要进行设置，此处不做限制。

此外，应当理解的是，在实际应用中一个前端应用往往会包括很多个前端页面，因而为了统一隶属于一个前端应用的所有前端页面的显示风格，需要先根据页面需求确定开发所述前端页面所需的前端用户界面框架，然后在查找能够与开发所述前端页面所需的用户界面框架匹配的目标功能组件。关于确定开发所述前端页面需要使用的前端用户界面框架及查找与开发所述前端页面所需的用户界面框架匹配的目标功能组件的操作，大致可以通过如下方式实现，如：先根据所述页面需求，确定开发所述前端页面需要使用的前端用户界面框架；然后，根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

需要说明的是，本实施例中所说的前端用户界面框架也是由开发前端应用的技术人员开发维护的，相当于前端应用的显示风格，就好比在制作演示文稿(以下称为：PPT)时，用户可以根据个人喜好先选取一个自己喜好或者符合当前PPT内容的模板，然后在这个模板的基础上制作PPT的每一个界面，这样制作出的PPT所有界面的风格都是统一的。因此，本实施例中在开发前端页面的时候，通过根据页面需求中给出的信息，如该前端页面隶属的前端应用面向的对象、应用场合等，先确定前端用户界面框架，从而使得最终开发出的前端应用的每一个前端界面的风格都是相同的，只是每一个前端页面显示的内容以及使用的功能组件有各自的不同。

步骤S70，将所述目标测试数据导入所述目标功能组件，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

具体的说，在对所述目标功能组件进行实时编译时，需要先根据所述页面需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；然后，利用所述前端开发工具集对所述目标功能组件进行实时编译。

需要说明的是，上述所说的前端开发工具集，具体为技术人员根据需要预先封装的。在本实施例中，前端开发工具集主要用来执行代码编译打包、持续集成，项目模板，单元测试、安装包分析等功能，在具体实现中，技术人员可以根据需要封装前端开发工具集，此处不做限制。

此外，值得一提的是，在具体实现中为了确保开发前端页面的操作能够顺利进行，在根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件之前，还可以先进行判断所述功能组件库是否已经构建完成的操作。若判定所述功能组件库未构建完成，则通知技术人员构建所述功能组件库；若判定所述功能组件库构建完成，则执行从预先封装的功能组件库中查找符合所述页面需求的目标功能组件的操作。

关于功能组件库的构建方式，在具体实现中，可以是由前端应用开发平台在本地服务器或云端服务器中预设的存储区域中创建一个功能组件库，然后从约定的存储区域获取功能组件并添加到该功能组件库中。

此外，若约定的存储区域不存在功能组件，可以设置前端应用开发平台向技术人员发送通知，通知技术人员尽快将功能组件导入该存储区域。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

进一步地，在完成功能组件库的构建操作之后，为保证能够从功能组件库中查找到符合所述页面需求的目标功能组件，还可以执行判断所述功能组件库中是否存在所述类型的功能组件的操作。若判定所述功能组件库中不存在所述类型的功能组件，则通知技术人员构建所述类型的功能组件；若判定所述功能组件库中存在所述类型的功能组件，则执行从预先封装的功能组件库中查找符合所述页面需求的目标功能组件的操作。

值得一提的是，为了尽可能的降低功能组件之间的耦合性，从而提高可维护性及多人协同开发效率。在构建功能组件库中缺少的所述类型的功能组件时，具体可以根据分治策略来进行编译。

所谓分治策略，是指对于一个规模为n的问题，若该问题可以容易地解决(比如说规模n较小)则直接解决，否则将其分解为k个规模较小的子问题，这些子问题互相独立且与原问题形式相同，递归地解这些子问题，然后将各子问题的解合并得到原问题的解。

需要说明的是，上述所说的n和k在实际应用中的取值均为大于0的整数，并且n与k满足如下关系：1＜k≤n。

也就是说，在编译功能组件时，尽可能的将功能组件进行细化。比如，在编译的功能组件为用于展示新闻消息的新闻列表时，可以将该新闻列表功能组件拆分为用于调整新闻列表背景的子组件、用于调整新闻列表滑动样式的子组件、用于调整新闻列表每一行显示内容布局的子组件等，此处不再一一列举，对此也不做具体限制。

应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

通过上述描述不难发现，本实施例中提供的前端页面的独立开发方法，通过预先构建功能组件库，并在功能组件库中添加开发前端页面时需要用到的功能组件，从而在根据用户提供的页面需求确定开发该前端页面需要使用的功能组件的类型后，直接根据确定的类型从预先构建的功能组件库中查找符合当前页面需求的目标功能组件，然后利用预设的前端开发工具集对目标功能组件进行实时编译，即可得到用户所需的前端页面。整个前端页面的开发过程，用户只需提供待开发的前端页面的页面需求，需要用户正在编写的代码量相对较少，且较为简单，故对技术人员专业技能的要求相对较低，因此在实现过程中既可以减少专业技术人员的参与，降低开发成本，又可以提升开发效率。

并且，由于前端页面是基于功能组件合成的，因而在后期维护过程中，可以仅根据调整后的页面需求对某一功能组件进行调整，在方便后期维护的同时，也降低了维护成本。

此外，在具体实现中为了实现Web前端中各前端页面与Server端提供的真是测试数据的对接，在得到所述前端页面之后，还可以进一步判断所述前端页面中所述目标功能组件中展示的目标测试数据是否是伪测试数据。若所述前端页面中所述目标功能组件中展示的目标测试数据是伪测试数据，则对所述数据容器的服务器数据存储区域进行监控。具体的监控任务可以是监控所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据。

相应地，若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，并将所述前端页面中所述目标功能组件中展示的伪测试数据替换为符合所述页面需求的真实测试数据。

通过这种方式，不仅实现Web前端和Server端的单独开发，使得双发互不干扰，还可以在后期Server端开发完成，能够提供真实测试数据时，在不对Web前端做出修改的情况下，实现Web前端和Server端的对接。

此外，本发明实施例还提出一种存储介质，所述存储介质上存储有前端页面的独立开发程序，所述前端页面的独立开发程序被处理器执行时实现如上文所述的前端页面的独立开发方法的步骤。

参照图4，图4为本发明前端页面的独立开发装置第一实施例的结构框图。

如图4所示，本发明实施例提出的前端页面的独立开发装置包括：第一获取模块4001、确定模块402、查找模块4003和第二获取模块4004。

具体的说，第一获取模块4001，用于接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求；确定模块402，用于根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式；查找模块4003，用于根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口；第二获取模块4004，用于利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据。

此外，值得一提的是，为了保证前端页面能够独立开发，不受Server端开发进度的影响。同时，在前端页面开发完成后又可以与Server端直接对接。本实施例中所说的数据容器具体可以包括用于存储服务器(即Server端)提供的真实测试数据的服务器数据存储区域和用于存储伪数据生成器生成的伪测试数据的伪数据存储区域，并遵循预设的获取规则从数据容器中获取目标数据，从而既可以实现前端页面的独立开发，又可以方便前端页面在开发完成后与开发完成的Server端对接。

相应地，所述第二获取模块4004可以根据预设的获取规则细化为第一判断子模块、真实测试数据获取子模块、伪数据创建子模块和伪数据获取子模块。

其中，所述第一判断子模块，用于判断所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据。

所述真实测试数据获取子模块，用于在所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据时，利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，将获取到的所述真实测试数据作为所述目标测试数据。

所述伪数据创建子模块，用于在所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据时，利于所述伪数据生成器生成符合所述页面需求的伪测试数据。

所述伪数据获取子模块，用于利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据。

此外，应当理解的是，在实际应用中，可能存在多个前端页面需要的目标测试数据类似，因而所述第二获取模块4004还可以包括第二判断子模块。

其中，所述第二判断子模块，用于在所述第一判断子模块判定所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据时，进一步判断所述数据容器的伪数据存储区域中是否存在符合所述页面需求的伪测试数据。若判定所述数据容器的伪数据存储区域中不存在符合所述页面需求的伪测试数据，则通知所述伪数据创建子模块利于所述伪数据生成器生成符合所述页面需求的伪测试数据；若判定所述数据容器的伪数据存储区域中存在符合所述页面需求的伪测试数据，则无需创建，直接通知所述伪数据获取子模块利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

此外，本实施例中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本发明的创新部分，本实施例中并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，但这并不表明本实施方式中不存在其它的单元。

通过上述描述不难发现，本实施例中提供的前端页面的独立开发装置，通过预先设置存储开发前端页面所需的目标测试数据的数据容器，利用数据容器建立前Web前端与Server端之间的通信桥梁，在开发前端页面时，Web前端不需要与Server端直接联系，只需要根据预先定义好的数据访问接口从数据容器中获取需要的目标测试数据即可，从而实现了Web前端的独立开发，使得Web前端的开发进度不受Server端开发进度的影响。

需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的前端页面的独立开发方法，此处不再赘述。

基于上述前端页面的独立开发装置的第一实施例，提出本发明前端页面的独立开发装置第二实施例。

在本实施例中，所述前端页面的独立开发装置还包括功能组件类型确定模块、目标功能组件查找模块和前端页面编译模块。

具体的说，所述功能组件类型确定模块，用于根据所述页面需求，确定开发所述前端页面需要使用的功能组件的类型。

所述目标功能组件查找模块，用于根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

所述前端页面编译模块，用于将所述目标测试数据导入所述目标功能组件，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

应当理解的是，由于不同的前端页面往往显示风格和适用的开发框架会有所差异，因而为了使得查找到的目标功能组件能够与开发所述前端页面所需的用户界面框架匹配，所述目标功能组件查找模块具体可以通过如下方式实现查找符合所述页面需求的目标功能组件的操作，如：先根据所述页面需求，确定开发所述前端页面需要使用的前端用户界面框架；然后，根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

相应地，所述前端页面编译模块在利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面时，需要先根据所述页面需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；然后利用所述前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

此外，在具体实现中为了实现Web前端中各前端页面与Server端提供的真是测试数据的对接，所述前端页面的独立开发装置还可以包括第三判断模块和监控模块。

所述第三判断模块，用于判断所述前端页面中所述目标功能组件中展示的目标测试数据是否是伪测试数据。

所述监控模块，用于在所述前端页面中所述目标功能组件中展示的目标测试数据是伪测试数据时，监控所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据，并在监控到所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据时，通知所述第二获取模块利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，并将所述前端页面中所述目标功能组件中展示的伪测试数据替换为符合所述页面需求的真实测试数据。

通过上述描述不难发现，本实施例中提供的前端页面的独立开发装置，通过预先构建功能组件库，并在功能组件库中添加开发前端页面时需要用到的功能组件，从而在根据用户提供的页面需求确定开发该前端页面需要使用的功能组件的类型后，直接根据确定的类型从预先构建的功能组件库中查找符合当前页面需求的目标功能组件，然后利用预设的前端开发工具集对目标功能组件进行实时编译，即可得到用户所需的前端页面。整个前端页面的开发过程，用户只需提供待开发的前端页面的页面需求，需要用户正在编写的代码量相对较少，且较为简单，故对技术人员专业技能的要求相对较低，因此在实现过程中既可以减少专业技术人员的参与，降低开发成本，又可以提升开发效率。

并且，由于前端页面是基于功能组件合成的，因而在后期维护过程中，可以仅根据调整后的页面需求对某一功能组件进行调整，在方便后期维护的同时，也降低了维护成本。

需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的前端页面的独立开发方法，此处不再赘述。

此外，需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器(Read Only Memory，ROM)/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种前端页面的独立开发方法，其特征在于，所述方法包括：

接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求；

根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式；

根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口；

利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据；

其中，所述页面需求包括由需求工程师根据项目需求设计的Web前端页面的用例图、流程图、产品原型；

其中，所述数据容器包括用于存储服务器提供的真实测试数据的服务器数据存储区域和用于存储伪数据生成器生成的伪测试数据的伪数据存储区域；所述利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据，包括：

判断所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据；

若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，则利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，将获取到的所述真实测试数据作为所述目标测试数据；

若所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据，并利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据；

其中，所述利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据之后，所述方法还包括：

预先构建功能组件的类型和功能组件在功能组件库中的存储路径之间的对应关系，得到两者之间的映射关系表，所述映射关系表包括功能组件的类型、存储路径、功能组件描述、功能组件样式图以及技术人员的字段；

根据所述页面需求和根据所述映射关系表，确定开发所述前端页面需要使用的功能组件的类型；

根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件；

将所述目标测试数据导入所述目标功能组件，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

2.如权利要求1所述的方法，其特征在于，所述利于所述伪数据生成器生成符合所述页面需求的伪测试数据之前，所述方法还包括：

判断所述数据容器的伪数据存储区域中是否存在符合所述页面需求的伪测试数据；

其中，所述利于所述伪数据生成器生成符合所述页面需求的伪测试数据，包括：

若所述数据容器的伪数据存储区域中不存在符合所述页面需求的伪测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据。

3.如权利要求2所述的方法，其特征在于，所述根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件，包括：

根据所述页面需求，确定开发所述前端页面需要使用的前端用户界面框架；

根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件。

4.如权利要求3所述的方法，其特征在于，所述利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面，包括：

根据所述页面需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；

利用所述前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

5.如权利要求2所述的方法，其特征在于，所述得到所述前端页面之后，所述方法还包括：

判断所述前端页面中所述目标功能组件中展示的目标测试数据是否是伪测试数据；

若所述前端页面中所述目标功能组件中展示的目标测试数据是伪测试数据，则监控所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据；

若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，并将所述前端页面中所述目标功能组件中展示的伪测试数据替换为符合所述页面需求的真实测试数据。

6.一种前端页面的独立开发装置，其特征在于，所述装置包括：

第一获取模块，用于接收用户触发的前端页面开发请求，从所述前端页面开发请求中获取待开发的前端页面的页面需求；其中，所述页面需求包括由需求工程师根据项目需求设计的Web前端页面的用例图、流程图、产品原型；

确定模块，用于根据所述页面需求，确定开发所述前端页面所需的目标测试数据和所述目标测试数据的格式；

查找模块，用于根据所述目标测试数据的格式，从预先定义的数据访问接口集合中查找用于访问所述目标测试数据的目标数据访问接口；

第二获取模块，用于利用所述目标数据访问接口从预设的数据容器中获取所述目标测试数据；

其中，所述数据容器包括用于存储服务器提供的真实测试数据的服务器数据存储区域和用于存储伪数据生成器生成的伪测试数据的伪数据存储区域；所述第二获取模块包括第一判断子模块、真实测试数据获取子模块、伪数据创建子模块和伪数据获取子模块；

所述第一判断子模块，用于判断所述数据容器的服务器数据存储区域中是否存在符合所述页面需求的真实测试数据；

所述真实测试数据获取子模块，用于若所述数据容器的服务器数据存储区域中存在符合所述页面需求的真实测试数据，则利用所述目标数据访问接口从所述数据容器的服务器数据存储区域中获取符合所述页面需求的真实测试数据，将获取到的所述真实测试数据作为所述目标测试数据；

所述伪数据创建子模块，用于若所述数据容器的服务器数据存储区域中不存在符合所述页面需求的真实测试数据，则利于所述伪数据生成器生成符合所述页面需求的伪测试数据；

所述伪数据获取子模块，用于利用所述目标数据访问接口从所述数据容器的伪数据存储区域中获取所述伪测试数据作为所述目标测试数据；

其中，所述前端页面的独立开发装置还包括功能组件类型确定模块、目标功能组件查找模块和前端页面编译模块；

所述功能组件类型确定，用于模块预先构建功能组件的类型和功能组件在功能组件库中的存储路径之间的对应关系，得到两者之间的映射关系表，所述映射关系表包括功能组件的类型、存储路径、功能组件描述、功能组件样式图以及技术人员的字段；

所述功能组件类型确定模块，还用于根据所述页面需求和根据所述映射关系表，确定开发所述前端页面需要使用的功能组件的类型；

所述目标功能组件查找模块，用于根据所述类型，从预先封装的功能组件库中查找符合所述页面需求的目标功能组件；

所述前端页面编译模块，用于将所述目标测试数据导入所述目标功能组件，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到所述前端页面。

7.一种前端页面的独立开发设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端页面的独立开发程序，所述前端页面的独立开发程序配置为实现如权利要求1至5中任一项所述的前端页面的独立开发方法的步骤。

8.一种存储介质，其特征在于，所述存储介质上存储有前端页面的独立开发程序，所述前端页面的独立开发程序被处理器执行时实现如权利要求1至5任一项所述的前端页面的独立开发方法的步骤。