CN114546381A - 前端页面代码文件生成方法、装置、电子设备及存储介质 - Google Patents

前端页面代码文件生成方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN114546381A
CN114546381A CN202210114443.8A CN202210114443A CN114546381A CN 114546381 A CN114546381 A CN 114546381A CN 202210114443 A CN202210114443 A CN 202210114443A CN 114546381 A CN114546381 A CN 114546381A
Authority
CN
China
Prior art keywords
end page
page code
file
interface
code file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210114443.8A
Other languages
English (en)
Inventor
齐思博
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qingdao Haier Technology Co Ltd
Haier Smart Home Co Ltd
Original Assignee
Qingdao Haier Technology Co Ltd
Haier Smart Home Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qingdao Haier Technology Co Ltd, Haier Smart Home Co Ltd filed Critical Qingdao Haier Technology Co Ltd
Priority to CN202210114443.8A priority Critical patent/CN114546381A/zh
Publication of CN114546381A publication Critical patent/CN114546381A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/35—Creation or generation of source code model driven
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

本发明提供一种前端页面代码文件生成方法、装置、电子设备及存储介质，前端页面代码文件生成方法包括：获取目标接口文档，并基于所述目标接口文档，得到接口参数；基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。本发明提供的前端页面代码文件生成方法、装置、电子设备及存储介质，可以解决现有技术中前端页面代码编写效率低，容易出错以及浪费开发资源的缺陷，实现提高前端页面代码的编写效率，节省开发资源。

Description

前端页面代码文件生成方法、装置、电子设备及存储介质
技术领域
本发明涉及互联网技术领域，尤其涉及一种前端页面代码文件生成方法、装置、电子设备及存储介质。
背景技术
目前后台管理***中大部分页面都是由表格和表单组成，业务逻辑也基本类似，每次需要上线新页面时，都需要人工编写表格和表单，效率较低。其中，有些表格和表单有自己的样式和数据要求，因此，当开发人员在编写表格和表单时，容易因为疏忽导致表格或者表单出现拼写错误，后续就需要花费时间和精力去排查错误，从而严重浪费开发资源。因此，目前编写前端页面代码的方法中存在前端页面代码编写效率低，容易出错以及浪费开发资源的问题。
发明内容
本发明提供一种前端页面代码文件生成方法、装置、电子设备及存储介质，用以解决现有技术中前端页面代码编写效率低，容易出错以及浪费开发资源的缺陷，实现提高前端页面代码的编写效率，节省开发资源。
本发明提供一种前端页面代码文件生成方法，包括：
获取目标接口文档，并基于所述目标接口文档，得到接口参数；
基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
根据本发明提供的前端页面代码文件生成方法，所述基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件，包括：
基于所述接口参数对应的数据结构，以及所述多个表格组件和/ 或所述多个表单组件，得到前端页面代码模板；
基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件。
根据本发明提供的前端页面代码文件生成方法，所述基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件，包括：
将所述接口参数注入所述前端页面代码模板；
基于注入有所述接口参数的前端页面代码模板，得到vue文件以及JS文件；其中，所述前端页面代码文件包括所述vue文件以及JS 文件。
根据本发明提供的前端页面代码文件生成方法，所述基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件，还包括：
创建前端页面代码文件目录；
基于所述vue文件、JS文件以及所述前端页面代码文件目录，得到路由文件；其中，所述前端页面代码文件还包括所述路由文件。
根据本发明提供的前端页面代码文件生成方法，所述基于所述目标接口文档，得到接口参数，包括：
基于爬虫框架爬取所述目标接口文档中的原始接口参数；
将所述原始接口参数转化为目标格式的接口参数。
根据本发明提供的前端页面代码文件生成方法，所述基于爬虫框架爬取所述目标接口文档中的原始接口参数，包括：
基于爬虫框架创建浏览器对象；
基于所述浏览器对象跳转至所述目标接口文档；
对所述目标接口文档进行解析，得到所述原始接口参数。
根据本发明提供的前端页面代码文件生成方法，所述获取目标接口文档，包括：
接收输入的前端数据接口地址信息以及前端页面文件信息，生成所述目标接口文档。
本发明还提供一种前端页面代码文件生成装置，包括：
接口获取模块，用于获取目标接口文档，并基于所述目标接口文档，得到接口参数；
代码文件生成模块，用于基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述前端页面代码文件生成方法的步骤。
本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述前端页面代码文件生成方法的步骤。
本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述前端页面代码文件生成方法的步骤。
本发明提供的前端页面代码文件生成方法、装置、电子设备及存储介质，通过目标接口文档，自动获取接口参数，并结合预设的多个表格组件和/或多个表单组件，自动得到前端页面代码文件，全程不需要编码人员手动编写前端页面代码，省去了编码人员开发前端页面代码的过程，提高了前端页面的开发效率。
此外，更改目标接口文档，就可以实现前端页面的迭代更新，方便快捷。而且，由于自动生成前端页面的流程都是统一的，提升了代码的规范性，有助于提高编码人员的开发效率。
在本发明提供前端页面代码文件生成方法中，根据不同的接口参数的数据结构自动生成前端页面，前端页面可以包括接口请求，表单校验，表单审核、表单编辑、表单查看等一系列功能。
基于接口参数，从预设的多个表格组件和/或多个表单组件中，选择特定的目标表格组件和/或目标表单组件，根据接口参数不同的数据结构匹配对应组件和规则，自动对表格组件和/或表单组件的功能进行兼容处理。
而且，目标接口文档中的接口参数包括入参、出参或者接口地址，前端页面通过接口参数就可以实现后端服务器的访问，不需要编码人员再去对前端页面与后端服务器的接口进行联调。编码人员不需要手动编写前端页面代码，也不需要将前端页面代码与后端服务器代码进行接口联调，减少代码故障的产生。
因此，本发明提供的本发明提供的前端页面代码文件生成方法，可以解决现有技术中前端页面代码编写效率低，容易出错以及浪费开发资源的缺陷，实现提高前端页面代码的编写效率，节省开发资源。
附图说明
为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明提供的前端页面代码文件生成方法的流程示意图；
图2是本发明提供的前端页面代码文件生成装置的结构示意图；
图3是本发明提供的电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
下面结合图1-图3描述本发明的前端页面代码文件生成方法、装置、电子设备及存储介质。
如图1所示，本发明提供的前端页面代码文件生成方法包括：
步骤110、获取目标接口文档，并基于目标接口文档，得到接口参数。
可以理解的是，目标接口文档中包含有前端页面与后端服务器进行数据交互的接口。接口参数是指前端页面与后端服务器之间进行数据交互的接口所对应的入参或者出参。目标格式也即是预先设定的接口参数的数据格式。
在获取了目标接口文档之后，基于预设的文档解析规则对目标接口文档进行数据解析，得到目标格式的接口参数。
步骤120、基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
可以理解的是，基于接口参数，从预设的多个表格组件和/或多个表单组件选取与接口参数匹配的目标表格组件和/或目标表单组件，再将接口参数注入目标表格组件和/或目标表单组件，得到前端页面代码文件。
表格组件可以是原生表格、支持jquery的表格、支持angular的表格、支持react的表格或者支持vue的表格。本实施例中，表格组件可以优选支持vue的表格。其中，vue也即是vue.js，是一个构建数据驱动的web(World Wide Web，全球广域网)界面的渐进式框架。
前端页面代码文件可以包括vue文件、JS文件以及路由文件。其中，JS文件也即是JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
vue文件的核心是MVC模式中的视图层，同时，vue文件也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue文件可以更好地实现代码复用，减少工作量。
MVC模式中，M(即：Model)是指业务模型，V(即：View)是指用户界面，C(即：Controller)则是控制器，使用MVC模型的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。
在一些实施例中，基于接口参数，以及预设的多个表格组件和/ 或多个表单组件，得到前端页面代码文件，包括：
基于接口参数对应的数据结构，以及多个表格组件和/或多个表单组件，得到前端页面代码模板；
基于接口参数以及前端页面代码模板，得到前端页面代码文件。
可以理解的是，接口参数对应的数据接口，可以是接口参数中对应的数据类型，接口参数的个数以及接口参数的分布等。
基于接口参数对应的数据结构，从预设的多个表格组件和/或多个表单组件中，选取目标表格组件和/或目标表单组件，基于目标表格组件和/或目标表单组件，得到前端页面代码模板。
需要说明的是，前端页面代码模板中定义了前端页面代码的业务逻辑，以及所需要的数据，前端页面代码模板注入对应的数据，就可以运行。
在一些实施例中，基于接口参数以及前端页面代码模板，得到前端页面代码文件，包括：
将接口参数注入前端页面代码模板；
基于注入有接口参数的前端页面代码模板，得到vue文件以及JS 文件；其中，前端页面代码文件包括vue文件以及JS文件。
可以理解的是，前端页面代码模板中包含有vue代码模板和JS 代码模板，注入接口参数到vue代码模板文件后，可以得到vue文件，注入接口参数到JS模板后，可以得到JS文件。
在一些实施例中，基于接口参数以及前端页面代码模板，得到前端页面代码文件，还包括：
创建前端页面代码文件目录；
基于vue文件、JS文件以及前端页面代码文件目录，得到路由文件；其中，前端页面代码文件还包括路由文件。
可以理解的是，前端页面代码文件目录，也即是vue文件的文件目录以及JS文件的文件目录，在获取了前端页面代码文件目录之后，就可以基于该目录访问前端页面代码文件。进一步，基于路由文件，可以访问vue文件和JS文件。
在一些实施例中，基于目标接口文档，得到接口参数，包括：
基于爬虫框架爬取目标接口文档中的原始接口参数；
将原始接口参数转化为目标格式的接口参数；其中，目标格式为 json格式。
可以理解的是，本实施例中的爬虫框架是基于Python语言编写的框架。
在一些实施例中，基于爬虫框架爬取目标接口文档中的原始接口参数，包括：
基于爬虫框架创建浏览器对象(即：browser对象)；
基于浏览器对象跳转至目标接口文档；
对目标接口文档进行解析，得到原始接口参数。
可以理解的是，爬虫框架可以是puppeteer框架，获目标接口文档中接口的入参或者出参，根据puppeteer框架爬取的入参或者出参，结合上述的代码模板，即vue代码模板以及JS代码模板，生成增删改查文件(即：fs.writeFile)，做到实现增删改查的功能，基本不用再人工编写代码，同时支持审核等表格操作。
puppeteer框架是Node.js工具引擎，puppeteer框架提供了一个高级的应用程序接口(即：API)来通过DevTools协议控制浏览器，例如Chromium浏览器或Chrome浏览器。
puppeteer框架能生成页面PDF(Portable Document Format，可携带文档格式)，抓取单页应用并生成预渲染内容(即：服务器端渲染)，自动提交表单，进行UI(即：界面设计)测试，键盘输入等，创建一个时时更新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome浏览器中执行测试，捕获网站的timeline trace用来帮助分析性能问题，测试浏览器扩展。
浏览器对象包括window对象、navigator对象、location对象、 history对象以及screen对象。
window对象表示浏览器中打开的窗口；navigator对象包含有关浏览器的信息；location对象包含有关当前URL(uniform resource locator，统一资源定位***)的信息；history对象表示历史记录对象主要用来进行页面间的前进，后退操作；screen对象包含有关客户端显示屏幕的信息。
在一些实施例中，对目标接口文档进行解析，得到原始接口参数，包括：
对目标接口文档的文档对象模型(Document Object Model，DOM) 结构进行解析，原始接口参数。
可以理解的是，文档对象模型是W3C组织推荐的处理可扩展置标语言的标准编程接口。文档对象模型是一种与平台和编程语言无关的应用程序接口，文档对象模型可以动态地访问程序和脚本，更新其内容、结构和万维网文档的风格，其中，HTMl和XML文档是通过说明部分定义的。文档可以进一步被处理，处理的结果可以加入到当前的页面。文档对象模型是一种基于树的应用程序接口文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的应用程序接口是基于事件的SAX(即：simple API for XML)，SAX可以用于处理数据量大的XML文档，数据量大的XML文档不适合全部放在存储器中处理。
SAX是一种XML解析的替代方法，SAX既是一个接口，也是一个软件包。SAX的工作原理是对文档进行顺序扫描，当扫描到文档开始与结束、元素开始与结束、文档结束等地方时通知事件处理函数，由事件处理函数做相应动作，然后继续同样的扫描，直至文档结束；SAX解析的操作相对复杂。
在一些实施例中，获取目标接口文档，包括：
接收输入的前端数据接口地址信息以及前端页面文件信息，生成目标接口文档。
可以理解的是，本实施例中，可以提供一个与用户进行交互的工具，用户基于该工具输入前端数据接口地址信息以及前端页面文件信息后，该工具就可以自动生成对应的目标接口文档。其中，前端页面文件信息包括前端页面的文件目录以及文件名信息。基于该工具，用户可以方便快捷地操作目标接口文档，进而操作前端页面。
在本发明提供的一些实施例中，前端页面代码文件生成方法的具体的流程如下：
第一步，通过目标接口文档获取前端页面与后端服务器之间数据接口的入参或者出参，并将入参或者出参，转化为特定的json格式。具体地址，首先引入爬虫框架，使用爬虫框架的launch方法创建浏览器对象，然后通过浏览器对象创建并跳转至目标接口文档页，根据目标接口文档页特定的文档对象模型结构进行数据的解析，最后拼接成需要的json格式的数据。
第二步，根据前端页面的项目需求，结合表格组件以及表单组件，并基于上述json格式数据对应的数据格式，抽离出代码模板。其中，代码模板的数据和事件都使用第一步得到的json格式数据为依据，根据数据里不同的数据类型，定义不同的代码模板。例如，代码模板可以是带有查询条件的表格，或者具有新增功能/编辑功能的表单，或者具有上传和审核功能的表单等，之后在代码模板内部做各种功能的兼容处理，也即是，给表单组件设置审核功能。
第三步，通过上述步骤得到的json格式数据和代码模板，生成 vue文件、JS文件以及路由文件。具体地，首先通过fs.readFile读取定义好的代码模板文件，将上述json格式数据选择对应的代码模板文件，并注入数据，再通过fs.writeFile，将注入数据的代码模板文件写入vue文件和JS文件。其中，vue文件和JS文件可以创建不同的文件目录，再根据创建的vue文件、JS文件以及文件目录数据生成路由文件。
综上所述，本发明提供的前端页面代码文件生成方法，包括：获取目标接口文档，并基于目标接口文档，得到接口参数；基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
在本发明提供的前端页面代码文件生成方法中，可以基于目标接口文档，自动获取接口参数，并结合预设的多个表格组件和/或多个表单组件，自动得到前端页面代码文件，全程不需要编码人员手动编写前端页面代码，省去了编码人员开发前端页面代码的过程，提高了前端页面的开发效率。
此外，更改目标接口文档，就可以实现前端页面的迭代更新，方便快捷。而且，由于自动生成前端页面的流程都是统一的，提升了代码的规范性，有助于提高编码人员的开发效率。
在本发明提供前端页面代码文件生成方法中，根据不同的接口参数的数据结构自动生成前端页面，前端页面可以包括接口请求，表单校验，表单审核、表单编辑、表单查看等一系列功能。
基于接口参数，从预设的多个表格组件和/或多个表单组件中，选择特定的目标表格组件和/或目标表单组件，根据接口参数不同的数据结构匹配对应组件和规则，自动对表格组件和/或表单组件的功能进行兼容处理。
而且，目标接口文档中的接口参数包括入参、出参或者接口地址，前端页面通过接口参数就可以实现后端服务器的访问，不需要编码人员再去对前端页面与后端服务器的接口进行联调。编码人员不需要手动编写前端页面代码，也不需要将前端页面代码与后端服务器代码进行接口联调，减少代码故障的产生。
因此，本发明提供的本发明提供的前端页面代码文件生成方法，可以解决现有技术中前端页面代码编写效率低，容易出错以及浪费开发资源的缺陷，实现提高前端页面代码的编写效率，节省开发资源。
下面对本发明提供的前端页面代码文件生成装置进行描述，下文描述的前端页面代码文件生成装置与上文描述的前端页面代码文件生成方法可相互对应参照。
如图2所示，本发明提供的前端页面代码文件生成装置200包括：接口获取模块210和代码文件生成模块220。
接口获取模块210用于获取目标接口文档，并基于目标接口文档，得到接口参数。
可以理解的是，目标接口文档中包含有前端页面与后端服务器进行数据交互的接口。接口参数是指前端页面与后端服务器之间进行数据交互的接口所对应的入参或者出参。目标格式也即是预先设定的接口参数的数据格式。
在获取了目标接口文档之后，基于预设的文档解析规则对目标接口文档进行数据解析，得到接口参数。
代码文件生成模块220用于基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
可以理解的是，表格组件可以是原生表格、支持jquery的表格、支持angular的表格、支持react的表格或者支持vue的表格。本实施例中，表格组件可以优选支持vue的表格。
前端页面代码文件可以包括vue文件、JS文件以及路由文件。
vue文件的核心是MVC模式中的视图层，同时，vue文件也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue文件可以更好地实现代码复用，减少工作量。
MVC模式中，M(即：Model)是指业务模型，V(即：View)是指用户界面，C(即：Controller)则是控制器，使用MVC模型的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。
在一些实施例中，代码文件生成模块220包括：模板生成单元和代码文件生成单元。
模板生成单元用于基于接口参数对应的数据结构，以及多个表格组件和/或多个表单组件，得到前端页面代码模板。
代码文件生成单元用于基于接口参数以及前端页面代码模板，得到前端页面代码文件。
可以理解的是，接口参数对应的数据接口，可以是接口参数中对应的数据类型，接口参数的个数以及接口参数的分布等。
基于接口参数对应的数据结构，从预设的多个表格组件和/或多个表单组件中，选取目标表格组件和/或目标表单组件，基于目标表格组件和/或目标表单组件，得到前端页面代码模板。
需要说明的是，前端页面代码模板中定义了前端页面代码的业务逻辑，以及所需要的数据，前端页面代码模板注入对应的数据，就可以运行。
在一些实施例中，代码文件生成单元包括：参数注入单元和模板写入单元。
参数注入单元用于将接口参数注入前端页面代码模板。
模板写入单元用于基于注入有接口参数的前端页面代码模板，得到vue文件以及JS文件；其中，前端页面代码文件包括vue文件以及JS文件。
可以理解的是，前端页面代码模板中包含有vue代码模板和JS 代码模板，注入接口参数到vue代码模板文件后，可以得到vue文件，注入接口参数到JS模板后，可以得到JS文件。
在一些实施例中，代码文件生成单元还包括：目录创建单元和路由文件生成单元。
目录创建单元用于创建前端页面代码文件目录。
路由文件生成单元用于基于vue文件、JS文件以及前端页面代码文件目录，得到路由文件；其中，前端页面代码文件还包括路由文件。
可以理解的是，前端页面代码文件目录，也即是vue文件的文件目录以及JS文件的文件目录，在获取了前端页面代码文件目录之后，就可以基于该目录访问前端页面代码文件。进一步，基于路由文件，可以访问vue文件和JS文件。
在一些实施例中，接口获取模块210包括：爬取单元和格式转化单元。
爬取单元用于基于爬虫框架爬取目标接口文档中的原始接口参数。
格式转化单元用于将原始接口参数转化为目标格式的接口参数；其中，目标格式为json格式。
可以理解的是，本实施例中的爬虫框架是基于Python语言编写的框架。
在一些实施例中，爬取单元包括：对象创建单元、跳转单元和解析单元。
对象创建单元用于基于爬虫框架创建浏览器对象。
跳转单元用于基于浏览器对象跳转至目标接口文档。
解析单元用于对目标接口文档进行解析，得到原始接口参数。
可以理解的是，爬虫框架可以是puppeteer框架，获目标接口文档中接口的入参或者出参，根据puppeteer框架爬取的入参或者出参，结合上述的代码模板，即vue代码模板以及JS代码模板，生成增删改查文件，做到实现增删改查的功能，基本不用再人工编写代码，同时支持审核等表格操作。
puppeteer框架是Node.js工具引擎，puppeteer框架提供了一个高级的应用程序接口来通过DevTools协议控制浏览器，例如Chromium浏览器或Chrome浏览器。
puppeteer框架能生成页面PDF，抓取单页应用并生成预渲染内容，自动提交表单，进行UI测试，键盘输入等，创建一个时时更新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome浏览器中执行测试，捕获网站的timeline trace用来帮助分析性能问题，测试浏览器扩展。
浏览器对象包括window对象、navigator对象、location对象、 history对象以及screen对象。
window对象表示浏览器中打开的窗口；navigator对象包含有关浏览器的信息；location对象包含有关当前URL的信息；history对象表示历史记录对象主要用来进行页面间的前进，后退操作；screen 对象包含有关客户端显示屏幕的信息。
在一些实施例中，解析单元进一步用于对目标接口文档的文档对象模型结构进行解析，原始接口参数。
可以理解的是，文档对象模型是W3C组织推荐的处理可扩展置标语言的标准编程接口。文档对象模型是一种与平台和编程语言无关的应用程序接口，文档对象模型可以动态地访问程序和脚本，更新其内容、结构和万维网文档的风格，其中，HTMl和XML文档是通过说明部分定义的。
文档可以进一步被处理，处理的结果可以加入到当前的页面。文档对象模型是一种基于树的应用程序接口文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的应用程序接口是基于事件的SAX，SAX可以用于处理数据量大的XML文档，数据量大的 XML文档不适合全部放在存储器中处理。
SAX是一种XML解析的替代方法，SAX既是一个接口，也是一个软件包。SAX的工作原理是对文档进行顺序扫描，当扫描到文档开始与结束、元素开始与结束、文档结束等地方时通知事件处理函数，由事件处理函数做相应动作，然后继续同样的扫描，直至文档结束；SAX解析的操作相对复杂。
在一些实施例中，接口获取模块210包括：接口文档生成单元。
接口文档生成单元用于接收输入的前端数据接口地址信息以及前端页面文件信息，生成目标接口文档。
可以理解的是，本实施例中，可以提供一个与用户进行交互的工具，用户基于该工具输入前端数据接口地址信息以及前端页面文件信息后，该工具就可以自动生成对应的目标接口文档。其中，前端页面文件信息包括前端页面的文件目录以及文件名信息。基于该工具，用户可以方便快捷地操作目标接口文档，进而操作前端页面。
综上所述，本发明提供的前端页面代码文件生成装置，包括：接口获取模块210和代码文件生成模块220。接口获取模块210用于获取目标接口文档，并基于目标接口文档，得到接口参数。代码文件生成模块220用于基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
在本发明提供的前端页面代码文件生成装置中，可以基于目标接口文档，自动获取接口参数，并结合预设的多个表格组件和/或多个表单组件，自动得到前端页面代码文件，全程不需要编码人员手动编写前端页面代码，省去了编码人员开发前端页面代码的过程，提高了前端页面的开发效率。
此外，更改目标接口文档，就可以实现前端页面的迭代更新，方便快捷。而且，由于自动生成前端页面的流程都是统一的，提升了代码的规范性，有助于提高编码人员的开发效率。
在本发明提供前端页面代码文件生成装置中，根据不同的接口参数的数据结构自动生成前端页面，前端页面可以包括接口请求，表单校验，表单审核、表单编辑、表单查看等一系列功能。
基于接口参数，从预设的多个表格组件和/或多个表单组件中，选择特定的目标表格组件和/或目标表单组件，根据接口参数不同的数据结构匹配对应组件和规则，自动对表格组件和/或表单组件的功能进行兼容处理。
而且，目标接口文档中的接口参数包括入参、出参或者接口地址，前端页面通过接口参数就可以实现后端服务器的访问，不需要编码人员再去对前端页面与后端服务器的接口进行联调。编码人员不需要手动编写前端页面代码，也不需要将前端页面代码与后端服务器代码进行接口联调，减少代码故障的产生。
因此，本发明提供的本发明提供的前端页面代码文件生成装置，可以解决现有技术中前端页面代码编写效率低，容易出错以及浪费开发资源的缺陷，实现提高前端页面代码的编写效率，节省开发资源。
下面对本发明提供的电子设备、计算机程序产品及存储介质进行描述，下文描述的电子设备、计算机程序产品及存储介质与上文描述的前端页面代码文件生成方法可相互对应参照。
图3示例了一种电子设备的实体结构示意图，如图3所示，该电子设备可以包括：处理器(processor)310、通信接口(Communications Interface)320、存储器(memory)330和通信总线340，其中，处理器310，通信接口320，存储器330通过通信总线340完成相互间的通信。处理器310可以调用存储器330中的逻辑指令，以执行前端页面代码文件生成方法，该方法包括：
步骤110、获取目标接口文档，并基于目标接口文档，得到接口参数；
步骤120、基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
此外，上述的存储器330中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Ran文档对象模型Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行时，计算机能够执行上述各方法所提供的前端页面代码文件生成方法，该方法包括：
步骤110、获取目标接口文档，并基于目标接口文档，得到接口参数；
步骤120、基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的前端页面代码文件生成方法，该方法包括：
步骤110、获取目标接口文档，并基于目标接口文档，得到接口参数；
步骤120、基于接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (11)

1.一种前端页面代码文件生成方法，其特征在于，包括：
获取目标接口文档，并基于所述目标接口文档，得到接口参数；
基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
2.根据权利要求1所述的前端页面代码文件生成方法，其特征在于，所述基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件，包括：
基于所述接口参数对应的数据结构，以及所述多个表格组件和/或所述多个表单组件，得到前端页面代码模板；
基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件。
3.根据权利要求2所述的前端页面代码文件生成方法，其特征在于，所述基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件，包括：
将所述接口参数注入所述前端页面代码模板；
基于注入有所述接口参数的前端页面代码模板，得到vue文件以及JS文件；其中，所述前端页面代码文件包括所述vue文件以及JS文件。
4.根据权利要求3所述的前端页面代码文件生成方法，其特征在于，所述基于所述接口参数以及所述前端页面代码模板，得到所述前端页面代码文件，还包括：
创建前端页面代码文件目录；
基于所述vue文件、JS文件以及所述前端页面代码文件目录，得到路由文件；其中，所述前端页面代码文件还包括所述路由文件。
5.根据权利要求1-4任一项所述的前端页面代码文件生成方法，其特征在于，所述基于所述目标接口文档，得到接口参数，包括：
基于爬虫框架爬取所述目标接口文档中的原始接口参数；
将所述原始接口参数转化为目标格式的接口参数。
6.根据权利要求5所述的前端页面代码文件生成方法，其特征在于，所述基于爬虫框架爬取所述目标接口文档中的原始接口参数，包括：
基于爬虫框架创建浏览器对象；
基于所述浏览器对象跳转至所述目标接口文档；
对所述目标接口文档进行解析，得到所述原始接口参数。
7.根据权利要求1所述的前端页面代码文件生成方法，其特征在于，所述获取目标接口文档，包括：
接收输入的前端数据接口地址信息以及前端页面文件信息，生成所述目标接口文档。
8.一种前端页面代码文件生成装置，其特征在于，包括：
接口获取模块，用于获取目标接口文档，并基于所述目标接口文档，得到接口参数；
代码文件生成模块，用于基于所述接口参数，以及预设的多个表格组件和/或多个表单组件，得到前端页面代码文件。
9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7任一项所述前端页面代码文件生成方法的步骤。
10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述前端页面代码文件生成方法的步骤。
11.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述前端页面代码文件生成方法的步骤。
CN202210114443.8A 2022-01-30 2022-01-30 前端页面代码文件生成方法、装置、电子设备及存储介质 Pending CN114546381A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210114443.8A CN114546381A (zh) 2022-01-30 2022-01-30 前端页面代码文件生成方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210114443.8A CN114546381A (zh) 2022-01-30 2022-01-30 前端页面代码文件生成方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN114546381A true CN114546381A (zh) 2022-05-27

Family

ID=81674096

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210114443.8A Pending CN114546381A (zh) 2022-01-30 2022-01-30 前端页面代码文件生成方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN114546381A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115114174A (zh) * 2022-08-02 2022-09-27 中航信移动科技有限公司 一种用于weex页面的调试方法、存储介质及电子设备

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115114174A (zh) * 2022-08-02 2022-09-27 中航信移动科技有限公司 一种用于weex页面的调试方法、存储介质及电子设备
CN115114174B (zh) * 2022-08-02 2022-12-13 中航信移动科技有限公司 一种用于weex页面的调试方法、存储介质及电子设备

Similar Documents

Publication Publication Date Title
CN111241454B (zh) 一种生成网页代码的方法、***和装置
US9753699B2 (en) Live browser tooling in an integrated development environment
US9009664B2 (en) Structural search of source code
US8789014B2 (en) Managing a working set in an integrated development environment
US10594769B2 (en) Selection mapping between fetched files and source files
US10447764B2 (en) Mapping selections between a browser and the original fetched file from a web server
CN115617327A (zh) 低代码页面搭建***、方法及计算机可读存储介质
CN112416363B (zh) 一种前后端crud代码的生成方法及装置
CN101183355A (zh) 程序、复制和粘贴处理方法、装置以及存储介质
US11119896B1 (en) Browser based visual debugging
CN114138244A (zh) 模型类文件自动生成方法、装置、存储介质及电子设备
US9678856B2 (en) Annotated test interfaces
CN113704590A (zh) 网页数据获取方法、装置、电子设备及存储介质
CN114546381A (zh) 前端页面代码文件生成方法、装置、电子设备及存储介质
CN112632425B (zh) 一种离线资源文件的生成方法、装置、设备及存储介质
CN113238739A (zh) 一种插件开发和数据获取方法、装置、电子设备及介质
CN110162301B (zh) 一种表单渲染方法、装置和存储介质
CN112632333A (zh) 查询语句生成方法、装置、设备及计算机可读存储介质
LEHRHUBER Pdf support for qualitative research in the cloud
CN115809089B (zh) 一种基于文档和测试驱动开发的方法
US20220244975A1 (en) Method and system for generating natural language content from recordings of actions performed to execute workflows in an application
CN112732254B (zh) 网页开发方法、装置、计算机设备和存储介质
CN111950239B (zh) Schema文档生成方法、装置、计算机设备和介质
CN112860259B (zh) 界面处理方法、装置、电子设备、存储介质
US20230409820A1 (en) Whitelisting redaction systems and methods

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination