CN115454403A - 页面搭建方法、装置及存储介质 - Google Patents
页面搭建方法、装置及存储介质 Download PDFInfo
- Publication number
- CN115454403A CN115454403A CN202211166451.3A CN202211166451A CN115454403A CN 115454403 A CN115454403 A CN 115454403A CN 202211166451 A CN202211166451 A CN 202211166451A CN 115454403 A CN115454403 A CN 115454403A
- Authority
- CN
- China
- Prior art keywords
- page
- code
- web application
- component
- page component
- 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
Links
- 238000010276 construction Methods 0.000 title description 15
- 238000000034 method Methods 0.000 claims abstract description 57
- 238000012545 processing Methods 0.000 claims description 35
- 238000005516 engineering process Methods 0.000 claims description 29
- 238000009434 installation Methods 0.000 claims description 21
- 238000004891 communication Methods 0.000 claims description 20
- 238000004590 computer program Methods 0.000 claims description 8
- 230000015654 memory Effects 0.000 description 37
- 230000006870 function Effects 0.000 description 20
- 238000011161 development Methods 0.000 description 12
- 230000008569 process Effects 0.000 description 12
- 238000010586 diagram Methods 0.000 description 7
- 230000000694 effects Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 5
- 238000013461 design Methods 0.000 description 4
- 238000006243 chemical reaction Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供一种页面搭建方法、装置及存储介质,涉及计算机领域,能够解决现有技术中页面搭建效率低下的问题。该方法包括:在网络WEB应用中创建初始页面;从组件库中获取待添加的页面组件;当页面组件的技术栈与WEB应用的技术栈不同时,基于页面组件的代码生成目标代码;目标代码的代码格式为WEB应用的技术栈所对应的代码格式;基于目标代码将页面组件添加至初始页面中。本申请能够提高页面搭建效率。
Description
技术领域
本申请涉及计算机领域,尤其涉及一种页面搭建方法、装置及存储介质。
背景技术
目前,相关技术在进行网络(WEB)应用开发时,通常会通过内置模板创建空白页面,并在空白页面中添加相应的页面组件,从而实现页面搭建。
随着WEB应用的发展,为满足用户的需求,其WEB应用的开发也变得越来越复杂,在搭建页面时所使用的的技术栈的种类也越来越多,然而不同技术栈之间的兼容性问题导致页面搭建的效率受到影响。
发明内容
本申请提供一种页面搭建方法、装置及存储介质,能够解决相关技术中页面搭建效率低下的问题。
为达到上述目的,本申请采用如下技术方案:
第一方面,本申请提供一种页面搭建方法,该方法包括:在网络WEB应用中创建初始页面;从组件库中获取待添加的页面组件;当页面组件的技术栈与WEB应用的技术栈不同时,基于页面组件的代码生成目标代码;目标代码的代码格式为WEB应用的技术栈所对应的代码格式;基于目标代码将页面组件添加至初始页面中。
基于上述技术方案,本申请中页面搭建装置可以在WEB应用中创建初始页面,并从组件库中获取待添加的页面组件,此时,页面搭建装置可以检测该页面组件与WEB应用的技术栈是否一致,在不一致的情况下,页面搭建装置可以基于页面组件的代码生成与WEB应用的技术栈对应的代码格式一致的目标代码,从而基于目标代码将页面组件添加至初始页面中。如此一来,本申请可以通过代码转换的方式,将通过不同技术栈开发的页面组件添加至同一个页面当中,有效提高了页面搭建的效率以及组件利用率。
结合上述第一方面,在一种可能的实现方式中,该方法包括:将页面组件的代码解析为树形结构的目标对象;根据目标对象生成目标代码。
结合上述第一方面,在一种可能的实现方式中,该方法包括:为页面组件添加目标事件;目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
结合上述第一方面,在一种可能的实现方式中,该方法包括:确定页面组件所需的数据信息;建立数据信息对应的网络请求参数与页面组件的标识的对应关系,并添加至WEB应用的代码中。
结合上述第一方面,在一种可能的实现方式中,获取WEB应用的安装文件;根据WEB应用的安装文件中所需技术栈对应的模板创建WEB应用。
第二方面,本申请提供一种页面搭建装置,该装置包括:处理单元;处理单元,用于在网络WEB应用中创建初始页面;处理单元,还用于从组件库中获取待添加的页面组件;处理单元,还用于当页面组件的技术栈与WEB应用的技术栈不同时,基于页面组件的代码生成目标代码;目标代码的代码格式为WEB应用的技术栈所对应的代码格式;处理单元,还用于基于目标代码将页面组件添加至初始页面中。
结合上述第二方面,在一种可能的实现方式中,处理单元用于:将页面组件的代码解析为树形结构的目标对象;根据目标对象生成目标代码。
结合上述第二方面,在一种可能的实现方式中,处理单元还用于:为页面组件添加目标事件;目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
结合上述第二方面,在一种可能的实现方式中,处理单元还用于:确定页面组件所需的数据信息;建立数据信息对应的网络请求参数与页面组件的标识的对应关系,并添加至WEB应用的代码中。
结合上述第二方面,在一种可能的实现方式中,处理单元还用于:获取WEB应用的安装文件;根据WEB应用的安装文件中所需技术栈对应的模板创建WEB应用。
第三方面,本申请提供了一种页面搭建装置,该装置包括:处理器和通信接口;通信接口和处理器耦合,处理器用于运行计算机程序或指令,以实现如第一方面和第一方面的任一种可能的实现方式中所描述的页面搭建方法。
第四方面,本申请提供了一种计算机可读存储介质,计算机可读存储介质中存储有指令,当指令在终端上运行时,使得终端执行如第一方面和第一方面的任一种可能的实现方式中描述的页面搭建方法。
第五方面,本申请提供一种包含指令的计算机程序产品,当计算机程序产品在页面搭建装置上运行时,使得页面搭建装置执行如第一方面和第一方面的任一种可能的实现方式中所描述的页面搭建方法。
第六方面,本申请提供一种芯片,芯片包括处理器和通信接口,通信接口和处理器耦合,处理器用于运行计算机程序或指令,以实现如第一方面和第一方面的任一种可能的实现方式中所描述的页面搭建方法。
具体的,本申请中提供的芯片还包括存储器,用于存储计算机程序或指令。
需要说明的是,上述计算机指令可以全部或者部分存储在计算机可读存储介质上。其中,计算机可读存储介质可以与装置的处理器封装在一起的,也可以与装置的处理器单独封装,本申请对此不作限定。
本申请中第二方面至第六方面的描述,可以参考第一方面的详细描述;并且,第二方面至第六方面的描述的有益效果,可以参考第一方面的有益效果分析,此处不再赘述。
在本申请中,上述页面搭建装置的名字对设备或功能模块本身不构成限定,在实际实现中,这些设备或功能模块可以以其他名称出现。只要各个设备或功能模块的功能和本申请类似,属于本申请权利要求及其等同技术的范围之内。
本申请的这些方面或其他方面在以下的描述中会更加简明易懂。
附图说明
图1为本申请实施例提供的一种抽象语法树的结构示意图;
图2为本申请实施例提供的一种页面搭建装置的结构示意图;
图3为本申请实施例提供的一种页面搭建方法的流程图;
图4为本申请实施例提供的另一种页面搭建方法的流程图;
图5为本申请实施例提供的另一种页面搭建方法的流程图;
图6为本申请实施例提供的另一种页面搭建方法的流程图;
图7为本申请实施例提供的另一种页面搭建装置的结构示意图;
图8为本申请实施例提供的另一种页面搭建装置的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本申请保护的范围。
本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。
本申请的说明书以及附图中的术语“第一”和“第二”等是用于区别不同的对象,或者用于区别对同一对象的不同处理,而不是用于描述对象的特定顺序。
此外,本申请的描述中所提到的术语“包括”和“具有”以及它们的任何变形,意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元,而是可选地还包括其他没有列出的步骤或单元,或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
需要说明的是,本申请实施例中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
在本申请的描述中,除非另有说明,“多个”的含义是指两个或两个以上。
以下,对本申请实施例涉及的名词进行解释,以方便读者理解。
(1)技术栈(technology stack)
技术栈是指为实现某个项目所需的一系列技术方案,例如在WEB应用开发领域中,常用的技术栈包括Node.js、Javascript、React.js等脚本语言。其中,Node.js用于处理WEB应用中的模板内容以及文件的输入输出(input-output,IO)操作。Javascript用于处理开发WEB应用时的交互逻辑,React.js用于处理界面显示。
需要说明的是,本申请中所涉及的技术栈并不限于上述示例中所提到的技术栈,只要是应用于WEB应用开发所需的技术栈,均属于本申请所保护的范围。
(2)依赖(dependency)
在软件开发领域中,依赖是指当前项目所需要引用所依赖的功能模块才能够正常运行。例如当前项目为汽车模块(也成为类(class)),而想要让汽车模块能够正常运行,不仅需要定义该汽车的独有属性,也需要定义汽车作为交通工具所具有的基础属性。
因此,汽车模块可以通过引用交通工具模块的方式实现对基础属性的定义,此时交通工具模块即为汽车模块的依赖文件。
(3)抽象语法树(abstract syntax tree,AST)
抽象语法树是指源代码的语法结构的一种抽象表示方式。抽象语法树可以将源代码表示为树状结构对象,该树状结构对象中的每个节点都表示为源代码中的某个类型的字段。
示例性的,如图1所示,为本申请实施例提供的一种抽象语法树的结构示意图。其中,图1中的抽象语法树即表示运算公式:5*(7+9)。
以上是对本申请实施例中涉及到的部分概念所做的简单介绍。
目前,相关技术在进行WEB应用开发时,通常会通过内置模板创建空白页面,并在空白页面中添加相应的页面组件,从而实现页面搭建。
随着WEB应用的发展,为满足用户的需求,其WEB应用的开发也变得越来越复杂,在搭建页面时所使用的的技术栈的种类也越来越多,然而不同技术栈之间的兼容性问题导致页面搭建的效率受到影响。
例如,使用Vue.js开发的页面组件与使用React.js开发的页面组件由于所使用的技术栈不同,其代码格式也不相同,因此无法同时用于同一个页面中,导致开发人员只能通过单一的技术栈进行WEB应用开发,使得页面搭建效率低下。
鉴于此,本申请提供一种页面搭建方法,页面搭建装置可以在WEB应用中创建初始页面,并从组件库中获取待添加的页面组件,此时,页面搭建装置可以检测该页面组件与WEB应用的技术栈是否一致,在不一致的情况下,页面搭建装置可以基于页面组件的代码生成与WEB应用的技术栈对应的代码格式一致的目标代码,从而基于目标代码将页面组件添加至初始页面中。如此一来,本申请可以通过代码转换的方式,将通过不同技术栈开发的页面组件添加至同一个页面当中,有效提高了页面搭建的效率以及组件利用率。
图2为本申请实施例提供的一种页面搭建装置的结构示意图。如图2所示,该页面搭建装置20包括:至少一个处理器201,通信线路202,以及至少一个通信接口204,还可以包括存储器203。其中,处理器201,存储器203以及通信接口204三者之间可以通过通信线路202连接。
处理器201可以是一个中央处理器(central processing unit,CPU),也可以是特定集成电路(application specific integrated circuit,ASIC),或者是被配置成实施本申请实施例的一个或多个集成电路,例如:一个或多个数字信号处理器(digital signalprocessor,DSP),或,一个或者多个现场可编程门阵列(field programmable gate array,FPGA)。
通信线路202可以包括一通路,用于在上述组件之间传送信息。
通信接口204,用于与其他设备或通信网络通信,可以使用任何收发器一类的装置,如以太网,无线接入网(radio access network,RAN),无线局域网(wireless localarea networks,WLAN)等。
存储器203可以是只读存储器(read-only memory,ROM)或可存储静态信息和指令的其他类型的静态存储设备,随机存取存储器(random access memory,RAM)或者可存储信息和指令的其他类型的动态存储设备,也可以是电可擦可编程只读存储器(electricallyerasable programmable read-only memory,EEPROM)、只读光盘(compact disc read-only memory,CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于包括或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。
一种可能的设计中,存储器203可以独立于处理器201存在,即存储器203可以为处理器201外部的存储器,此时,存储器203可以通过通信线路202与处理器201相连接,用于存储执行指令或者应用程序代码,并由处理器201来控制执行,实现本申请下述实施例提供的软件升级方法。又一种可能的设计中,存储器203也可以和处理器201集成在一起,即存储器203可以为处理器201的内部存储器,例如,该存储器203为高速缓存,可以用于暂存一些数据和指令信息等。
作为一种可实现方式,处理器201可以包括一个或多个CPU,例如图2中的CPU0和CPU1。作为另一种可实现方式,页面搭建装置20可以包括多个处理器,例如图2中的处理器201和处理器207。作为再一种可实现方式,页面搭建装置20还可以包括输出设备205和输入设备206。
需要指出的是,图2中示出的结构并不构成对页面搭建装置的限定,除图2所示部件之外,该页面搭建装置可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
图3为本申请实施例提供的一种页面搭建方法的流程图。如图3所示,该方法包括以下步骤:
步骤301、页面搭建装置在网络WEB应用中创建初始页面。
其中,该初始页面可以为空白页,也可以为预设的具有一个或多个基础组件的页面,本申请对此不作限定。
一种可能的实现方式中,页面搭建装置在进行WEB应用开发时,可以响应于页面创建指令,在该WEB应用中创建初始页面。
示例性的,页面搭建装置可以接收针对于该WEB应用所在文件目录的npm runstart指令,以启动初始页面创建流程。
其中,页面搭建装置响应于该指令,可以通过webpackdeserver启动该WEB应用。同时,页面搭建装置响应于该指令,还会启动该WEB应用对应的控制台。通过所启动的控制台,页面搭建装置可以显示当前WEB应用的基本信息,例如在WEB应用中创建的初始页面、所需的基础依赖文件以及编辑面板。
页面搭建装置还可以通过控制台接收预览指令,并响应于预览指令显示当前的WEB应用。
步骤302、页面搭建装置从组件库中获取待添加的页面组件。
其中,该组件库可以为预置在页面搭建装置中的本地组件库,也可以为存储在云服务器中的组件库。页面组件用于实现对应的功能。例如按钮组件可以通过响应于点击操作,触发该按钮组件绑定的事件。列表组件可以通过列表的形式展示内容,并可以对展示的内容进行排序、筛选等操作。
示例性的,页面搭建装置可以向云服务器(例如gitlab)发送网络请求。该网络请求用于加载云服务器中的组件列表。组件列表用于展示多种页面组件,以及每个页面组件对应的技术栈、开发人员信息以及预览信息。
步骤303、页面搭建装置判断页面组件的技术栈与WEB应用的技术栈是否相同。
需要说明的是,页面搭建装置可以确定页面组件的技术栈信息以及WEB应用的技术栈信息,从而判断页面组件的技术栈。
例如,当页面组件的技术栈为Vue.js,WEB应用的技术栈为React.js时,页面搭建装置判断页面组件的技术栈与WEB应用的技术栈不相同。当页面组件的技术栈为Vue.js,WEB应用的技术栈为Vue.js时,页面搭建装置判断页面组件的技术栈与WEB应用的技术栈相同。
当页面组件的技术栈与WEB应用的技术栈不同时,页面搭建装置可以执行步骤304-步骤305。
当页面组件的技术栈与WEB应用的技术栈相同时,页面搭建装置可以执行步骤306。
步骤304、页面搭建装置基于页面组件的代码生成目标代码。
其中,目标代码的代码格式为WEB应用的技术栈所对应的代码格式。
一种可能的实现方式中,页面搭建装置可以将页面组件的代码解析为树形结构的目标对象,并根据目标对象生成目标代码。
示例性的,页面搭建装置可以通过网络请求,将该页面组件的代码下载至本地。之后,页面搭建装置可以通过抽象语法树算法将页面组件的代码解析为目标对象。
此时,目标对象所表达的代码内容具有统一的代码格式,不会受到原页面组件的技术栈所规定的代码格式的影响,因此,页面搭建装置可以根据目标对象生成与WEB应用的技术栈所对应的代码格式一致的目标代码,从而避免页面组件与WEB应用的技术栈不一致而导致的兼容性问题。
抽象语法树算法的实现方式可参考相关技术,此处不再赘述。
步骤305、页面搭建装置基于目标代码将页面组件添加至初始页面中。
示例性的,页面搭建装置可以响应于用户操作,根据目标代码生成对应的组件文件,并将该组件文件添加至初始页面中,从而实现将页面组件添加至初始页面中的技术效果。
其中,用户操作可以为点击操作,拖拽操作等,本申请对此不作限定。
基于上述技术方案,本申请中页面搭建装置可以在WEB应用中创建初始页面,并从组件库中获取待添加的页面组件,此时,页面搭建装置可以检测该页面组件与WEB应用的技术栈是否一致,在不一致的情况下,页面搭建装置可以基于页面组件的代码生成与WEB应用的技术栈对应的代码格式一致的目标代码,从而基于目标代码将页面组件添加至初始页面中。如此一来,本申请可以通过代码转换的方式,将通过不同技术栈开发的页面组件添加至同一个页面当中,有效提高了页面搭建的效率以及组件利用率。
步骤306、页面搭建装置基于页面组件的代码将页面组件添加至初始页面中。
示例性的,页面搭建装置可以通过网络请求,将该页面组件的代码下载至本地。之后,页面搭建装置可以响应于用户操作,根据页面组件的代码生成对应的组件文件,并将该组件文件添加至初始页面中,从而实现将页面组件添加至初始页面中的技术效果。
需要说明的是,本申请中页面搭建装置可以通过上述方式在初始页面中添加一个或多个页面组件,所添加的一个或多个组件可以通过流式布局由上到下分布,也可以通过栅格布局实现多行多列的排布。此外,页面搭建装置还可以响应于用户操作,改变页面组件的位置以及大小。页面组件内部的结构可以通过设定比例的形式自适应调整。
其中,用户操作可以为点击操作,拖拽操作等,本申请对此不作限定。
同样的,通过上述技术方案,页面搭建装置实现在WEB应用中一个或多个页面的搭建,从而完成对WEB应用的开发。
页面搭建完成后,页面搭建装置还可以响应于预览指令,将当前WEB应用所暂存的代码生成对应的临时镜像代码,并对临时镜像代码进行实时编译,显示当前开发的WEB应用,以检测实际开发效果。
示例性的,页面搭建装置可以通过webpack对生成的临时镜像代码进行实时编译。
通过上述技术方案,页面搭建装置可以实时展示当前搭建的页面效果,若所搭建的页面不符合需求,页面搭建装置也可以继续通过上述过程进行组件编辑,而不需要反复重复开发,进一步提高了页面搭建效率。
以下,对页面搭建装置为页面组件添加目标事件的过程进行介绍。
作为本申请的一种可能的实施例,结合图3,如图4所示,在上述步骤305或步骤306之后,该方法还包括以下步骤401。
步骤401、页面搭建装置为页面组件添加目标事件。
其中,目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
需要说明的是,在页面组件添加完成后,页面搭建装置还需要针对添加的页面组件添加相应的事件,从而实现该页面组件对应的功能。
示例性的,页面组件可以为按钮组件,此时,页面搭建装置需要对该按钮组件添加点击事件。因此,页面搭建装置可以建立该按钮组件与点击事件的对应关系。其中,页面搭建装置需要定义与点击事件绑定的页面组件的标识、事件标识以及事件函数。
基于上述技术方案,本申请中的页面搭建装置可以针对添加的页面组件绑定相应的目标事件,其中,目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。如此一来,当接收到针对页面组件的目标操作时,页面搭建装置可以基于目标操作触发目标事件,执行目标事件的事件信息中定义的事件函数,以实现与页面组件的逻辑交互。
以下,对页面搭建装置为页面组件添加数据信息的过程进行介绍。
作为本申请的一种可能的实施例,结合图3,如图5所示,在上述步骤305或步骤306之后,该方法还包括以下步骤501-步骤502。
步骤501、页面搭建装置确定页面组件所需的数据信息。
需要说明的是,在页面组件添加完成后,页面搭建装置还需要根据实际需求,在页面组件中添加所需的相关数据。
示例性的,列表组件中需要显示对应的列表内容,例如人员名单、管理设备列表等。
步骤502、页面搭建装置建立数据信息对应的网络请求参数与页面组件的标识的对应关系,并添加至WEB应用的代码中。
其中,网络请求参数包括数据请求路径、数据请求类型以及数据字段标识。
如此一来,当页面搭建装置建立数据信息对应的网络请求参数与页面组件的标识的对应关系,并添加至WEB应用的代码中之后,该WEB应用启动时可以基于对应的网络请求参数在页面组件中显示相应的数据信息。
此外,当WEB应用无法正常显示该数据信息时,页面搭建装置还可以发起报错提示信息。该报错提示信息用于提示该数据信息获取异常。
基于上述技术方案,本申请页面搭建装置可以通过绑定网络请求的方式在页面组件上加载所需的数据信息,如此一来,当数据信息改变时,WEB应用中相应的数据信息也可以同步更新,从而保证数据一致性。
以下,对页面搭建装置创建WEB应用的过程进行介绍。
作为本申请的一种可能的实施例,结合图3,如图6所示,在上述步骤301之前,该方法还包括以下步骤601-步骤602。
步骤601、页面搭建装置获取WEB应用的安装文件。
其中,该WEB应用的安装文件可以存储在页面搭建装置本地,也可以存储在云服务器中。
示例性的,当WEB应用的安装文件存储在云服务器中时,页面搭建装置可以通过npm install指令从npm源对应的云服务器中下载对应的WEB应用的安装文件,并解压至设定的安装目录中。
步骤602、页面搭建装置根据WEB应用的安装文件中所需技术栈对应的模板创建WEB应用。
一种可能的实现方式中,页面搭建装置可以响应于创建指令,实现WEB应用的创建。
示例性的,页面搭建装置可以从创建指令中确定该WEB应用的应用名词,所需的技术栈,并根据该所需的技术栈从WEB应用的安装文件中获取对应技术栈的WEB应用模板,并安装至指定的WEB应用路径中。
例如技术栈为Node.js时,页面搭建装置可以通过fs对象中的readFileSync函数以及writeFileSync函数实现对WEB应用的安装文件的读写操作。
之后,页面搭建装置可以在WEB应用文件中的package.json文件中设置该WEB应用的应用名称、开发人员等信息,以及安装该WEB应用所需的依赖文件,异步执行npm install指令,实现WEB应用的创建。
基于上述技术方案,本申请中页面搭建装置可以在进行页面搭建之前,获取初始的WEB应用的安装文件,并执行相应的文件安装以及环境设置,以保障后续页面搭建的正常开发流程。
需要指出的是,本申请各实施例之间可以相互借鉴或参考,例如,相同或相似的步骤,方法实施例、系统实施例和装置实施例之间,均可以相互参考,不予限制。
本申请实施例可以根据上述方法示例对页面搭建装置进行功能模块或者功能单元的划分,例如,可以对应各个功能划分各个功能模块或者功能单元,也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块或者功能单元的形式实现。其中,本申请实施例中对模块或者单元的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。
如图7所示,为本申请实施例提供的一种页面搭建装置70的结构示意图,该页面搭建装置70包括:
处理单元701,用于在网络WEB应用中创建初始页面。
处理单元701,还用于从组件库中获取待添加的页面组件。
处理单元701,还用于当页面组件的技术栈与WEB应用的技术栈不同时,基于页面组件的代码生成目标代码;目标代码的代码格式为WEB应用的技术栈所对应的代码格式。
处理单元701,还用于基于目标代码将页面组件添加至初始页面中。
在一种可能的实现方式中,处理单元701用于:将页面组件的代码解析为树形结构的目标对象;根据目标对象生成目标代码。
在一种可能的实现方式中,处理单元701还用于:为页面组件添加目标事件;目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
在一种可能的实现方式中,处理单元701还用于:确定页面组件所需的数据信息;建立数据信息对应的网络请求参数与页面组件的标识的对应关系,并添加至WEB应用的代码中。
在一种可能的实现方式中,处理单元701还用于:获取WEB应用的安装文件;根据WEB应用的安装文件中所需技术栈对应的模板创建WEB应用。
一种可能的实现方式中,页面搭建装置70还可以包括存储单元702(图7中以虚线框示出),该存储单元702存储有程序或指令,当处理单元701执行该程序或指令时,使得页面搭建装置70可以执行上述方法实施例所述的页面搭建方法。
在通过硬件实现时,本申请实施例中的处理单元701可以集成在处理器上。具体实现方式如图8所示。
图8示出了上述实施例中所涉及的页面搭建装置的又一种可能的结构示意图。该页面搭建装置包括:处理器802和通信接口803。处理器802用于对页面搭建装置的动作进行控制管理,例如,执行上述处理单元701执行的步骤,和/或用于执行本文所描述的技术的其它过程。通信接口803用于支持页面搭建装置与其他网络实体的通信。页面搭建装置还可以包括存储器801和总线804,存储器801用于存储页面搭建装置的程序代码和数据。
其中,存储器801可以是页面搭建装置中的存储器等,该存储器可以包括易失性存储器,例如随机存取存储器;该存储器也可以包括非易失性存储器,例如只读存储器,快闪存储器,硬盘或固态硬盘;该存储器还可以包括上述种类的存储器的组合。
上述处理器802可以是实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。该处理器可以是中央处理器,通用处理器,数字信号处理器,专用集成电路,现场可编程门阵列或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。该处理器也可以是实现计算功能的组合,例如包含一个或多个微处理器组合,DSP和微处理器的组合等。
总线804可以是扩展工业标准结构(Extended Industry StandardArchitecture,EISA)总线等。总线804可以分为地址总线、数据总线、控制总线等。为便于表示,图8中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
图8中的页面搭建装置还可以为芯片。该芯片包括一个或两个以上(包括两个)处理器802和通信接口803。
在一些实施例中,该芯片还包括存储器801,存储器801可以包括只读存储器和随机存取存储器,并向处理器802提供操作指令和数据。存储器801的一部分还可以包括非易失性随机存取存储器(non-volatile random access memory,NVRAM)。
在一些实施方式中,存储器801存储了如下的元素,执行模块或者数据结构,或者他们的子集,或者他们的扩展集。
在本申请实施例中,通过调用存储器801存储的操作指令(该操作指令可存储在操作系统中),执行相应的操作。
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
本申请实施例提供一种包含指令的计算机程序产品,当该计算机程序产品在计算机上运行时,使得该计算机执行上述方法实施例中的页面搭建方法。
本申请实施例还提供一种计算机可读存储介质,计算机可读存储介质中存储有指令,当该指令在计算机上运行时,使得该计算机执行上述方法实施例所示的方法流程中的页面搭建方法。
其中,计算机可读存储介质,例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random Access Memory,RAM)、只读存储器(Read-Only Memory,ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory,EPROM)、寄存器、硬盘、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory,CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合、或者本领域熟知的任何其它形式的计算机可读存储介质。一种示例性的存储介质耦合至处理器,从而使处理器能够从该存储介质读取信息,且可向该存储介质写入信息。当然,存储介质也可以是处理器的组成部分。处理器和存储介质可以位于特定用途集成电路(Application Specific Integrated Circuit,ASIC)中。在本申请实施例中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
由于本申请的实施例中的页面搭建装置、计算机可读存储介质、计算机程序产品可以应用于上述方法,因此,其所能获得的技术效果也可参考上述方法实施例,本申请实施例在此不再赘述。
在本申请所提供的几个实施例中,应该理解到,所揭露的系统、设备和方法,可以通过其它的方式实现。例如,以上所描述的设备实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,设备或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
以上,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应该以权利要求的保护范围为准。
Claims (12)
1.一种页面搭建方法,其特征在于,所述方法包括:
在网络WEB应用中创建初始页面;
从组件库中获取待添加的页面组件;
当所述页面组件的技术栈与所述WEB应用的技术栈不同时,基于所述页面组件的代码生成目标代码;所述目标代码的代码格式为所述WEB应用的技术栈所对应的代码格式;
基于目标代码将所述页面组件添加至所述初始页面中。
2.根据权利要求1所述的方法,其特征在于,所述基于所述页面组件的代码生成目标代码,包括:
将所述页面组件的代码解析为树形结构的目标对象;
根据所述目标对象生成所述目标代码。
3.根据权利要求1所述的方法,其特征在于,在所述基于目标代码将所述页面组件添加至所述初始页面中之后,所述方法还包括:
为所述页面组件添加目标事件;所述目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
4.根据权利要求1所述的方法,其特征在于,在所述基于目标代码将所述页面组件添加至所述初始页面中之后,所述方法还包括:
确定所述页面组件所需的数据信息;
建立所述数据信息对应的网络请求参数与所述页面组件的标识的对应关系,并添加至所述WEB应用的代码中。
5.根据权利要求1-4任一项所述的方法,其特征在于,在所述在网络WEB应用中创建初始页面之前,所述方法还包括:
获取所述WEB应用的安装文件;
根据所述WEB应用的安装文件中所需技术栈对应的模板创建所述WEB应用。
6.一种页面搭建装置,其特征在于,包括处理单元;
所述处理单元,用于在网络WEB应用中创建初始页面;
所述处理单元,还用于从组件库中获取待添加的页面组件;
所述处理单元,还用于当所述页面组件的技术栈与所述WEB应用的技术栈不同时,基于所述页面组件的代码生成目标代码;所述目标代码的代码格式为所述WEB应用的技术栈所对应的代码格式;
所述处理单元,还用于基于目标代码将所述页面组件添加至所述初始页面中。
7.根据权利要求6所述的装置,其特征在于,所述处理单元用于:
将所述页面组件的代码解析为树形结构的目标对象;
根据所述目标对象生成所述目标代码。
8.根据权利要求6所述的装置,其特征在于,所述处理单元还用于:
为所述页面组件添加目标事件;所述目标事件的事件信息包括页面组件的标识、事件标识以及事件函数。
9.根据权利要求6所述的装置,其特征在于,所述处理单元还用于:
确定所述页面组件所需的数据信息;
建立所述数据信息对应的网络请求参数与所述页面组件的标识的对应关系,并添加至所述WEB应用的代码中。
10.根据权利要求6-9任一项所述的装置,其特征在于,所述处理单元还用于:
获取所述WEB应用的安装文件;
根据所述WEB应用的安装文件中所需技术栈对应的模板创建所述WEB应用。
11.一种页面搭建装置,其特征在于,包括:处理器和通信接口;所述通信接口和所述处理器耦合,所述处理器用于运行计算机程序或指令,以实现如权利要求1-5中任一项所述的页面搭建方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有指令,当计算机执行所述指令时,所述计算机执行如权利要求1-5中任一项所述的页面搭建方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211166451.3A CN115454403A (zh) | 2022-09-23 | 2022-09-23 | 页面搭建方法、装置及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211166451.3A CN115454403A (zh) | 2022-09-23 | 2022-09-23 | 页面搭建方法、装置及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115454403A true CN115454403A (zh) | 2022-12-09 |
Family
ID=84306850
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211166451.3A Pending CN115454403A (zh) | 2022-09-23 | 2022-09-23 | 页面搭建方法、装置及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115454403A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116991380A (zh) * | 2023-09-21 | 2023-11-03 | 腾讯科技(深圳)有限公司 | 一种应用程序的构建方法、装置、电子设备及存储介质 |
-
2022
- 2022-09-23 CN CN202211166451.3A patent/CN115454403A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116991380A (zh) * | 2023-09-21 | 2023-11-03 | 腾讯科技(深圳)有限公司 | 一种应用程序的构建方法、装置、电子设备及存储介质 |
CN116991380B (zh) * | 2023-09-21 | 2024-01-09 | 腾讯科技(深圳)有限公司 | 一种应用程序的构建方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111782330B (zh) | 一种基于Web应用的页面数据获取方法、装置及设备 | |
CN109918055B (zh) | 一种应用程序的生成方法及设备 | |
US9558016B2 (en) | Platform system, method for changing support hardware configuration of universal extensible firmware interface basic input output system and computer program product | |
CN104881318A (zh) | 一种接口调用方法、装置及终端 | |
CN110955409A (zh) | 在云平台上创建资源的方法和装置 | |
CN111818175A (zh) | 企业服务总线配置文件生成方法、装置、设备和存储介质 | |
CN113504918A (zh) | 设备树配置优化方法、装置、计算机设备和存储介质 | |
CN115167831A (zh) | 基于autosar的软件集成方法、设备和使用方法 | |
CN115454403A (zh) | 页面搭建方法、装置及存储介质 | |
CN112631737A (zh) | 容器镜像构建方法、装置、电子设备及存储介质 | |
CN114048415A (zh) | 表单生成方法及装置、电子设备和计算机可读存储介质 | |
CN114064079A (zh) | 算法应用元的打包方法及装置、设备、存储介质 | |
CN107491316B (zh) | 基板管理控制器的扩展方法、装置及电子设备 | |
CN117573338A (zh) | 一种资源分配方法、装置及电子设备 | |
CN114691188A (zh) | 兼容性评估方法、装置、设备及存储介质 | |
CN115774701B (zh) | 数据共享方法、装置、电子设备及存储介质 | |
CN109324838B (zh) | 单片机程序的执行方法、执行装置及终端 | |
CN112506526B (zh) | 数据呈现软件部署方法、装置及电子设备 | |
CN115629795A (zh) | 一种可执行文件的配置方法、装置及电子设备 | |
CN115048082A (zh) | 微前端系统构建方法、装置、服务器及可读存储介质 | |
CN110333870B (zh) | Simulink模型变量分配的处理方法、装置及设备 | |
CN113741891A (zh) | 一种页面处理方法、装置、电子设备及存储介质 | |
CN111813384A (zh) | 系统集成方法及相关设备 | |
CN111782180A (zh) | 页面生成方法和装置、电子设备和存储介质 | |
KR20020022050A (ko) | 공통 어드레스를 이용하여 어플리케이션 프로그램간의데이터 공유 및 어플리케이션 프로그램에 의한 주변기기의 액세스를 용이하게 하는 방법 |
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 |