CN113050941A - 前端页面生成方法、装置、设备及计算机可读存储介质 - Google Patents
前端页面生成方法、装置、设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN113050941A CN113050941A CN202110324216.3A CN202110324216A CN113050941A CN 113050941 A CN113050941 A CN 113050941A CN 202110324216 A CN202110324216 A CN 202110324216A CN 113050941 A CN113050941 A CN 113050941A
- Authority
- CN
- China
- Prior art keywords
- page
- end page
- request
- target
- identification information
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000011161 development Methods 0.000 claims abstract description 76
- 238000009877 rendering Methods 0.000 claims abstract description 44
- 230000001960 triggered effect Effects 0.000 claims description 27
- 238000012545 processing Methods 0.000 abstract description 5
- 230000018109 developmental process Effects 0.000 description 68
- 230000006870 function Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000003993 interaction Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000012423 maintenance Methods 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 238000012800 visualization Methods 0.000 description 4
- 230000001133 acceleration Effects 0.000 description 2
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000005484 gravity Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000010079 rubber tapping Methods 0.000 description 1
- 230000033772 system development Effects 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
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种前端页面生成方法、装置、设备及计算机可读存储介质,该方法包括以下步骤:在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;基于所述目标标识信息渲染出所述目标前端页面的页面结构;基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。本发明通过从数据库中获取目标前端页面的目标标识信息,并根据目标标识信息进行渲染显示该目标标识信息对应的目标前端页面,以供用户基于目标前端页面进行前端开发,实现了完全屏蔽前端源代码,避免开发者直接处理晦涩难懂的前端源代码,实现了无代码化的前端开发功能。
Description
技术领域
本发明涉及互联网技术领域,尤其涉及一种前端页面生成方法、装置、设备及计算机可读存储介质。
背景技术
前端开发工作是软件开发工作中重要的一环,是用户与软件交互最直观感受。在软件开发的今天,也愈发的重视前端开发,以提高用户满意度。由于前端开发涉及专业的语言和语法,对于后端开发或者使用者而言,前端页面的开发有一定的门槛,往往需要花费大量时间学习前端知识。
因此,无代码化前端开发框架的发展势在必得,由前端人员先进行底层前端框架的封装,提供一套仅需配置的前端框架。一方面,一套完善的前端开发框架,对于软件本身也是约定俗成的前端页面规范,可以有效保证页面的样式统一,方便进行维护和优化。另一方面,后端开发在开发前端页面的时候,可以通过简单的配置或纯视觉拖拽进行页面的开发和设计。目前,业内虽有轻代码化的前端开发,但现有业内的生成前端页面产品通常生成的是前端源代码,使生成的前端页面难以达到直观的页面效果,因此现有的生成前端页面产品对于用户而言仍旧具有使用门槛。
上述内容仅用于辅助理解本发明的技术方案,并不代表承认上述内容是现有技术。
发明内容
本发明的主要目的在于提供一种前端页面生成方法、装置、设备及计算机可读存储介质,旨在解决现有的生成前端页面产品难以达到直观的页面效果的技术问题。
为实现上述目的,本发明提供一种前端页面生成方法,所述前端页面生成方法应用于前端系统,所述前端页面生成方法包括以下步骤:
在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
基于所述目标标识信息渲染出所述目标前端页面的页面结构;
基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
可选地,所述在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息的步骤之前,还包括:
在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;
在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存。
可选地,所述前端系统包括渲染系统,所述在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息的步骤包括:
在接收到所述前端页面的创建请求时,获取所述创建请求对应的前端页面的第一选择信息;
若存在所述第一选择信息对应的开发模板、且接收到所述开发模板的添加指令时,基于所述添加指令在所述前端页面中添加所述开发模板;
在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息,并存储所述前端页面对应的页面数据至所述渲染系统。
可选地,所述基于所述添加指令在所述前端页面中添加所述开发模板的步骤之后,以及所述在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息的步骤之前,还包括:
在接收到基于所述开发模板触发的第二选择信息时,获取所述第二选择信息对应的控件;
将所述控件添加至所述开发模板。
可选地,所述第一选择信息为所述前端页面对应的可选择的开发模板类型,所述第二选择信息为所述开发模板对应的可选择的控件类型。
可选地,所述在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息的步骤包括:
在接收到目标前端页面的前端请求时,确定所述前端请求对应的请求地址;
基于所述请求地址从数据库中获取与所述请求地址相对应的目标标识信息。
可选地,所述基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中的步骤包括:
基于所述页面结构,向后台业务系统传输页面请求信息,以供所述后台业务系统在接收到所述页面请求信息时反馈所述页面请求信息对应的后端数据;
接收所述后台业务系统反馈的后端数据,并将所述后端数据显示于所述目标前端页面中。
此外,为实现上述目的,本发明还提供一种前端页面生成装置,所述前端页面生成装置包括:
获取模块,用于在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
渲染模块,用于基于所述目标标识信息渲染出所述目标前端页面的页面结构;
显示模块,用于基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
此外,为实现上述目的,本发明还提供一种前端页面生成设备,所述前端页面生成设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端页面生成程序,所述前端页面生成程序被所述处理器执行时实现如上述的前端页面生成方法的步骤。
此外,为实现上述目的,本发明还提供一种计算机可读存储介质,所述计算机可读存储介质上存储有前端页面生成程序,所述前端页面生成程序被处理器执行时实现如上述的前端页面生成方法的步骤。
本发明通过在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;基于所述目标标识信息渲染出所述目标前端页面的页面结构;基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。本实施例中,通过从数据库中获取目标前端页面的目标标识信息,并根据目标标识信息进行渲染显示该目标标识信息对应的目标前端页面,即可快速将目标前端页面渲染显示在前端系统中,以供用户基于目标前端页面进行前端开发,实现了完全屏蔽前端源代码,避免开发者直接处理晦涩难懂的前端源代码,实现了无代码化的前端开发功能。并且,无代码化的前端系统属于一体化的开发框架,集成了页面编辑、页面开发与页面显示的功能,使得开发人员可以根据一体化的开发框架进行页面开发。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的前端页面生成设备结构示意图;
图2为本发明前端页面生成方法第一实施例的流程示意图;
图3为本发明前端页面生成方法第二实施例的流程示意图。
本发明目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
如图1所示,图1是本发明实施例方案涉及的硬件运行环境的前端页面生成设备结构示意图。
本发明实施例前端页面生成设备可以是PC,也可以是智能手机、平板电脑、电子书阅读器、MP3(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)播放器、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、便携计算机等具有显示功能的可移动式终端设备。
如图1所示,该前端页面生成设备可以包括:处理器1001,例如CPU,网络接口1004,用户接口1003,存储器1005,通信总线1002。其中,通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard),可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器,也可以是稳定的存储器(non-volatile memory),例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
可选地,前端页面生成设备还可以包括摄像头、RF(Radio Frequency,射频)电路,传感器、音频电路、WiFi模块等等。其中,传感器比如光传感器、运动传感器以及其他传感器。具体地,光传感器可包括环境光传感器及接近传感器,其中,环境光传感器可根据环境光线的明暗来调节显示屏的亮度,接近传感器可在前端页面生成设备移动到耳边时,关闭显示屏和/或背光。作为运动传感器的一种,重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小,静止时可检测出重力的大小及方向,可用于识别前端页面生成设备姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等;当然,前端页面生成设备还可配置陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器,在此不再赘述。
本领域技术人员可以理解,图1中示出的前端页面生成设备结构并不构成对前端页面生成设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
如图1所示,作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及前端页面生成程序。
在图1所示的前端页面生成设备中,网络接口1004主要用于连接后台服务器,与后台服务器进行数据通信;用户接口1003主要用于连接客户端(用户端),与客户端进行数据通信;而处理器1001可以用于调用存储器1005中存储的前端页面生成程序。
在本实施例中,前端页面生成设备包括:存储器1005、处理器1001及存储在所述存储器1005上并可在所述处理器1001上运行的前端页面生成程序,其中,处理器1001调用存储器1005中存储的前端页面生成程序时,并执行以下操作:
在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
基于所述目标标识信息渲染出所述目标前端页面的页面结构;
基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
进一步地,处理器1001可以调用存储器1005中存储的前端页面生成程序,还执行以下操作:
在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;
在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存。
进一步地,处理器1001可以调用存储器1005中存储的前端页面生成程序,还执行以下操作:
在接收到所述前端页面的创建请求时,获取所述创建请求对应的前端页面的第一选择信息;
若存在所述第一选择信息对应的开发模板、且接收到所述开发模板的添加指令时,基于所述添加指令在所述前端页面中添加所述开发模板;
在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息,并存储所述前端页面对应的页面数据至所述渲染系统。
进一步地,处理器1001可以调用存储器1005中存储的前端页面生成程序,还执行以下操作:
在接收到基于所述开发模板触发的第二选择信息时,获取所述第二选择信息对应的控件;
将所述控件添加至所述开发模板。
进一步地,处理器1001可以调用存储器1005中存储的前端页面生成程序,还执行以下操作:
在接收到目标前端页面的前端请求时,确定所述前端请求对应的请求地址;
基于所述请求地址从数据库中获取与所述请求地址相对应的目标标识信息。
进一步地,处理器1001可以调用存储器1005中存储的前端页面生成程序,还执行以下操作:
基于所述页面结构,向后台业务系统传输页面请求信息,以供所述后台业务系统在接收到所述页面请求信息时反馈所述页面请求信息对应的后端数据;
接收所述后台业务系统反馈的后端数据,并将所述后端数据显示于所述目标前端页面中。
本发明还提供一种前端页面生成方法,参照图2,图2为本发明前端页面生成方法第一实施例的流程示意图。
在本实施例中,该前端页面生成方法包括以下步骤:
步骤S10,在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
本发明提出的前端页面生成方法应用于无代码化的前端系统,前端系统属于一种前端开发框架,该前端系统包括编辑系统和渲染系统。用户可以通过前端系统的编辑系统,通过编辑系统按照用户的需求将编辑系统中编辑系统中的可视化工具进行摆放或者设置在前端页面上,从而对该前端页面进行编辑,或直接通过选择已有模板页面进行编辑,快速生成编辑后的前端页面;渲染系统用于渲染显示前端页面。
在本实施例中,用户可以通过拖拽可视化工具中的控件或者选择可视化工具中的控件进行编辑前端页面,在编辑或者排版完成前端页面后,生成该前端页面对应的唯一一条标识信息,使整个前端页面作为一条标识信息导出,并将此标识信息插入数据库保存。当页面使用者触发目标前端页面对应的前端请求时,前端系统的渲染系统对前端请求进行解析,得到前端请求对应的请求地址,通过请求地址从数据库中获取与前端请求相对应的目标标识信息。其中,前端请求中包括目标前端页面对应的请求地址,在数据库中目标前端页面对应的请求地址与目标标识信息相对应。
步骤S20,基于所述目标标识信息渲染出所述目标前端页面的页面结构;
其中,目标标识信息为目标前端页面的配置信息,实质上是前端系统的编辑系统所生成的一条sql信息,数据库中存储有不同前端页面对应的标识信息,sql(StructuredQuery Language,结构化查询语言)信息为结构化查询语言,简称sql,是一种数据库查询和程序设计语言,可以用于存取数据以及查询、更新和管理数据库。
在本实施例中,前端系统在获取到前端请求对应的目标标识信息后,前端系统通过渲染系统渲染出目标前端页面的页面结构。具体地,渲染系统根据目标标识信息渲染出目标前端页面的页面结构,即根据目标前端页面的配置信息渲染出目标前端页面的页面结构。需要说明的是,目标前端页面的页面结构可以包括开发模板和与开发模板适配的控件组件,通过目标前端页面的页面结构可以进行数据显示,数据显示的方式包括但不限于图形化显示、数据化显示等显示方式。
步骤S30,基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
在本实施例中,渲染系统在接收到界面上的交互信息(用户输入的查询内容,按钮点击等)后,将该页面请求信息发送至后台业务系统,以基于页面请求信息从后台业务信息中获取后端数据。其中,该后端数据为业务数据,后台业务系统存储有不同业务对应的业务数据,通过后台业务系统可以获取到业务数据,并将业务数据显示在目标前端页面中,后端数据可以是消费记录、年度账单、或者店铺订单等等。进一步地,后台业务系统与前端系统通信连接,前端系统可以通过编辑系统对应的数据输出接口与后台业务系统进行数据交互,因此,编辑系统可以通过该数据输出接口将目标前端页面对应的目标标识信息传输至后台业务系统;前端系统还可以通过渲染系统对应的数据接收接口与后台业务系统进行数据交互,因此,渲染系统可以通过数据接收接口接收后台业务系统传输的后端数据,以基于后端数据进行渲染显示。后台业务系统接收到前端系统传输的页面请求信息后,根据页面请求信息获取用户在目标前端页面触发的页面请求信息对应的后端数据,并将后端数据反馈至前端系统。
前端系统包括渲染系统和编辑系统,即可通过可视化的编辑系统编辑前端页面,并生成前端页面对应的标识信息存储于数据库中,无需存储前端页面的模板,使得前端页面的渲染系统仅通过查询数据库中的标识信息,即可快速将前端页面渲染显示在前端系统中,这种一体化的前端系统开发框架使得可以快速编辑开发页面以及快速显示前端页面。
进一步地,渲染系统接收到后台业务系统传输的后端数据后,对后端数据进行解析,渲染系统根据目标前端页面的页面结构,对后端数据进行处理,得到后端数据对应的数据处理结果;之后,渲染系统根据页面结构中的开发模板和控件组件,按照开发模板进行渲染以及将数据处理结果按照开发模板和控件组件显示于目标前端页面中。因此,本实施例根据渲染系统生成目标前端页面,使得用户可以在目标前端页面中随意进行显示业务数据,无需关心晦涩难懂的前端的实现方式或框架等,例如前端代码采用react编写,前端框架为umi,拖拽功能使用react-dnd等。
本实施例提出的前端页面生成方法,通过在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;基于所述目标标识信息渲染出所述目标前端页面的页面结构;基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。本实施例中,通过从数据库中获取目标前端页面的目标标识信息,并根据目标标识信息进行渲染显示该目标标识信息对应的目标前端页面,即可快速将目标前端页面渲染显示在前端系统中,以供用户基于目标前端页面进行前端开发,实现了完全屏蔽前端源代码,避免开发者直接处理晦涩难懂的前端源代码,实现了无代码化的前端开发功能。并且,无代码化的前端系统属于一体化的开发框架,集成了页面编辑、页面开发与页面显示的功能,使得开发人员可以根据一体化的开发框架进行页面开发。
基于第一实施例,提出本发明前端页面生成方法的第二实施例,参照图3,在本实施例中,步骤S10之前,还包括:
步骤S40,在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;
步骤S50,在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存。
在本实施例中,前端系统包括编辑系统,用户可以通过前端系统的编辑系统进行前端页面的创建、编辑及生成。用户可以在编辑系统中通过拖拽可视化工具中的控件或者选择可视化工具中的控件进行编辑前端页面,在编辑或者排版完成前端页面后,通过在前端页面触发前端页面的创建完成指令,进行生成该前端页面对应的唯一一条标识信息,从而前端系统在接收到基于前端页面触发的创建完成指令时,生成前端页面,并生成前端页面对应的标识信息,使整个前端页面作为一条标识信息导出,并将此标识信息导入到数据库中进行保存。
进一步地,所述前端系统包括渲染系统,所述在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息的步骤包括:
步骤S41,在接收到所述前端页面的创建请求时,获取所述创建请求对应的前端页面的第一选择信息;
步骤S42,若存在所述第一选择信息对应的开发模板、且接收到所述开发模板的添加指令时,基于所述添加指令在所述前端页面中添加所述开发模板;
步骤S43,在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息,并存储所述前端页面对应的页面数据至所述渲染系统。
在本实施例中,用户可以通过前端系统的编辑系统进行前端页面的创建,前端系统在接收到前端页面的创建请求时,编辑系统可根据创建请求的页面创建选项获取到该创建请求对应的前端页面的第一选择信息,该第一选择信息可以为代码页面、维护页面或者安全页面等不同页面类型的信息。其中,开发模板为指之前创建该第一选择信息对应的前端页面时使用的开发模板,如代码模板、系统维护模板或系统安全模板等等,在之前创建该第一选择信息对应的前端页面时将该开发模板与第一选择信息进行关联存储,以供后续再次创建前端页面时直接调用。
在当前存在第一选择信息对应的开发模板、且接收到用户基于所述开发模板选择的添加指令时,基于添加指令在前端页面中添加开发模板,其中,该添加指令包括该开发模板在前端页面中的位置信息,从而根据添加指令可以将开发模板添加至该位置信息对应的前端页面中的区域。在接收到基于用户在前端页面触发的创建完成指令时,生成前端页面以及生成前端页面对应的标识信息,并存储前端页面对应的页面数据至渲染系统,以及将前端页面对应的标识信息存储于数据库。
进一步地,所述基于所述添加指令在所述前端页面中添加所述开发模板的步骤之后,以及所述在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息的步骤之前,还包括:
步骤S44,在接收到基于所述开发模板触发的第二选择信息时,获取所述第二选择信息对应的控件;
步骤S45,将所述控件添加至所述开发模板。
在本实施例中,第二选择信息为在渲染系统中选择的开发模板对应的控件类型。在接收到开发模板的第二选择信息时,根据在渲染系统中选择的开发模板对应的控件类型获取第二选择信息对应的控件,并将控件添加至开发功能模板,具体地,用户可在开发模板上选择第二选择信息,获取第二选择信息对应的控件,并将控件添加至开发模板中的合适的位置,其中,开发模板中可以预留控件的添加位置,用户(如前端工程师)预先生成相应的开发模板以供用户(如后端工程师)使用,以使不懂前端开发的后端工程师等初学者也可以快速地根据前端页面进行研发。
进一步地,所述第一选择信息为所述前端页面对应的可选择的开发模板类型,所述第二选择信息为所述开发模板对应的可选择的控件类型,第一选择信息可以为代码页面、维护页面或者安全页面等不同页面类型的信息,第二选择信息可以为界面控件或者应用控件等。
进一步地,所述在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息的步骤包括:
步骤S11,在接收到目标前端页面的前端请求时,确定所述前端请求对应的请求地址;
步骤S12,基于所述请求地址从数据库中获取与所述请求地址相对应的目标标识信息。
在本实施例中,前端系统包括编辑系统和渲染系统。当页面使用者在前端系统中触发目标前端页面对应的前端请求时,前端系统的渲染系统对前端请求进行解析,得到前端请求对应的请求地址,并将请求地址发送至数据库;数据库在接收到渲染系统传输的请求地址时,获取与请求地址相对应的目标标识信息,并将目标标识信息反馈至前端系统的渲染系统。其中,前端请求中包括目标前端页面对应的请求地址,在数据库中目标前端页面对应的请求地址与目标标识信息相对应。
进一步地,所述基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中的步骤包括:
步骤S31,基于所述页面结构,向后台业务系统传输页面请求信息,以供所述后台业务系统在接收到所述页面请求信息时反馈所述页面请求信息对应的后端数据;
步骤S32,接收所述后台业务系统反馈的后端数据,并将所述后端数据显示于所述目标前端页面中。
在本实施例中,渲染系统在接收到界面上页面结构触发的交互信息(例如,用户输入的查询内容,按钮点击等)后,将该页面请求信息发送至后台业务系统。后台业务系统接收到前端系统传输的页面请求信息后,根据页面请求信息获取用户在目标前端页面触发的页面请求信息对应的后端数据,并将后端数据反馈至前端系统。其中,该后端数据为业务数据,后台业务系统存储有不同业务对应的业务数据,通过后台业务系统可以获取到业务数据,并将业务数据显示在目标前端页面中,后端数据可以是消费记录、年度账单、或者店铺订单等等。
本实施例提出的前端页面生成方法,通过在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存,实现了将前端页面通过标识信息的方式存储于数据库中,无需存储页面布局模板在数据库,也无需存储页面布局模板,使得前端系统通过从数据库中获取标识信息即可快速将前端页面渲染显示在前端系统中。
此外,本发明实施例还提出一种前端页面生成装置,所述前端页面生成装置包括:
获取模块,用于在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
渲染模块,用于基于所述目标标识信息渲染出所述目标前端页面的页面结构;
显示模块,用于基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
进一步地,所述获取模块,还用于:
在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;
在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存。
进一步地,所述获取模块,还用于:
在接收到所述前端页面的创建请求时,获取所述创建请求对应的前端页面的第一选择信息;
若存在所述第一选择信息对应的开发模板、且接收到所述开发模板的添加指令时,基于所述添加指令在所述前端页面中添加所述开发模板;
在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息,并存储所述前端页面对应的页面数据至所述渲染系统。
进一步地,所述获取模块,还用于:
在接收到基于所述开发模板触发的第二选择信息时,获取所述第二选择信息对应的控件;
将所述控件添加至所述开发模板。
进一步地,所述获取模块,还用于:所述第一选择信息为所述前端页面对应的可选择的开发模板类型,所述第二选择信息为所述开发模板对应的可选择的控件类型。
进一步地,所述获取模块,还用于:
在接收到目标前端页面的前端请求时,确定所述前端请求对应的请求地址;
基于所述请求地址从数据库中获取与所述请求地址相对应的目标标识信息。
进一步地,所述显示模块,还用于:
基于所述页面结构,向后台业务系统传输页面请求信息,以供所述后台业务系统在接收到所述页面请求信息时反馈所述页面请求信息对应的后端数据;
接收所述后台业务系统反馈的后端数据,并将所述后端数据显示于所述目标前端页面中。
此外,本发明实施例还提出一种计算机可读存储介质,所述计算机可读存储介质上存储有前端页面生成程序,所述前端页面生成程序被处理器执行时实现如上述中任一项所述的前端页面生成方法的步骤。
本发明计算机可读存储介质具体实施例与上述前端页面生成方法的各实施例基本相同,在此不再详细赘述。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种前端页面生成方法,其特征在于,所述前端页面生成方法应用于前端系统,所述前端页面生成方法包括以下步骤:
在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
基于所述目标标识信息渲染出所述目标前端页面的页面结构;
基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
2.如权利要求1所述的前端页面生成方法,其特征在于,所述在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息的步骤之前,还包括:
在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息;
在生成所述前端页面对应的标识信息后,将所述标识信息导入到所述数据库中进行保存。
3.如权利要求2所述的前端页面生成方法,其特征在于,所述前端系统包括渲染系统,所述在接收到基于前端页面触发的创建完成指令时,生成所述前端页面,并生成所述前端页面对应的标识信息的步骤包括:
在接收到所述前端页面的创建请求时,获取所述创建请求对应的前端页面的第一选择信息;
若存在所述第一选择信息对应的开发模板、且接收到所述开发模板的添加指令时,基于所述添加指令在所述前端页面中添加所述开发模板;
在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息,并存储所述前端页面对应的页面数据至所述渲染系统。
4.如权利要求3所述的前端页面生成方法,其特征在于,所述基于所述添加指令在所述前端页面中添加所述开发模板的步骤之后,以及所述在接收到基于所述前端页面触发的创建完成指令时,生成所述前端页面以及所述前端页面对应的标识信息的步骤之前,还包括:
在接收到基于所述开发模板触发的第二选择信息时,获取所述第二选择信息对应的控件;
将所述控件添加至所述开发模板。
5.如权利要求4所述的前端页面生成方法,其特征在于,所述第一选择信息为所述前端页面对应的可选择的开发模板类型,所述第二选择信息为所述开发模板对应的可选择的控件类型。
6.如权利要求1所述的前端页面生成方法,其特征在于,所述在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息的步骤包括:
在接收到目标前端页面的前端请求时,确定所述前端请求对应的请求地址;
基于所述请求地址从数据库中获取与所述请求地址相对应的目标标识信息。
7.如权利要求1至6任一项所述的前端页面生成方法,其特征在于,所述基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中的步骤包括:
基于所述页面结构,向后台业务系统传输页面请求信息,以供所述后台业务系统在接收到所述页面请求信息时反馈所述页面请求信息对应的后端数据;
接收所述后台业务系统反馈的后端数据,并将所述后端数据显示于所述目标前端页面中。
8.一种前端页面生成装置,其特征在于,所述前端页面生成装置包括:
获取模块,用于在接收到目标前端页面的前端请求时,基于所述前端请求从数据库中获取与所述前端请求对应的目标标识信息;
渲染模块,用于基于所述目标标识信息渲染出所述目标前端页面的页面结构;
显示模块,用于基于所述页面结构,从后台业务系统中获取后端数据,并将所述后端数据显示于所述目标前端页面中。
9.一种前端页面生成设备,其特征在于,所述前端页面生成设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端页面生成程序,所述前端页面生成程序被所述处理器执行时实现如权利要求1至7中任一项所述的前端页面生成方法的步骤。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有前端页面生成程序,所述前端页面生成程序被处理器执行时实现如权利要求1至7中任一项所述的前端页面生成方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110324216.3A CN113050941A (zh) | 2021-03-25 | 2021-03-25 | 前端页面生成方法、装置、设备及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110324216.3A CN113050941A (zh) | 2021-03-25 | 2021-03-25 | 前端页面生成方法、装置、设备及计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113050941A true CN113050941A (zh) | 2021-06-29 |
Family
ID=76515771
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110324216.3A Pending CN113050941A (zh) | 2021-03-25 | 2021-03-25 | 前端页面生成方法、装置、设备及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113050941A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113821750A (zh) * | 2021-11-23 | 2021-12-21 | 北京交研智慧科技有限公司 | 一种页面数据处理方法、系统、电子设备及可读存储介质 |
CN114741072A (zh) * | 2022-04-20 | 2022-07-12 | 苏州峰之鼎信息科技有限公司 | 一种页面生成方法、装置、设备及存储介质 |
CN115390879A (zh) * | 2022-09-14 | 2022-11-25 | 安徽长江工业大数据科技股份公司 | 一种通过node构建实时管理umi项目代码的方法 |
CN117270837A (zh) * | 2023-11-17 | 2023-12-22 | 冠骋信息技术(苏州)有限公司 | 基于低代码的手机应用设计的方法及系统 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106990949A (zh) * | 2016-12-31 | 2017-07-28 | 深圳大宇无限科技有限公司 | 应用页面显示方法和装置 |
CN109901834A (zh) * | 2019-01-25 | 2019-06-18 | 平安科技(深圳)有限公司 | 文档页面生成方法、装置、计算机设备和存储介质 |
WO2019218736A1 (zh) * | 2018-05-14 | 2019-11-21 | 阿里巴巴集团控股有限公司 | 一种页面处理方法、装置及设备 |
CN110716783A (zh) * | 2019-10-10 | 2020-01-21 | 秒针信息技术有限公司 | 一种前端页面生成、部署方法及装置、存储介质和设备 |
CN111368235A (zh) * | 2020-02-25 | 2020-07-03 | 北京达佳互联信息技术有限公司 | 页面渲染和展示方法、装置、服务器、存储介质 |
CN111414405A (zh) * | 2020-03-23 | 2020-07-14 | 北京同邦卓益科技有限公司 | 数据获取方法、装置及电子设备 |
CN111522599A (zh) * | 2020-04-13 | 2020-08-11 | 百度在线网络技术(北京)有限公司 | 用于发送信息的方法和装置 |
CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
-
2021
- 2021-03-25 CN CN202110324216.3A patent/CN113050941A/zh active Pending
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106990949A (zh) * | 2016-12-31 | 2017-07-28 | 深圳大宇无限科技有限公司 | 应用页面显示方法和装置 |
WO2019218736A1 (zh) * | 2018-05-14 | 2019-11-21 | 阿里巴巴集团控股有限公司 | 一种页面处理方法、装置及设备 |
CN109901834A (zh) * | 2019-01-25 | 2019-06-18 | 平安科技(深圳)有限公司 | 文档页面生成方法、装置、计算机设备和存储介质 |
CN110716783A (zh) * | 2019-10-10 | 2020-01-21 | 秒针信息技术有限公司 | 一种前端页面生成、部署方法及装置、存储介质和设备 |
CN111368235A (zh) * | 2020-02-25 | 2020-07-03 | 北京达佳互联信息技术有限公司 | 页面渲染和展示方法、装置、服务器、存储介质 |
CN111414405A (zh) * | 2020-03-23 | 2020-07-14 | 北京同邦卓益科技有限公司 | 数据获取方法、装置及电子设备 |
CN111522599A (zh) * | 2020-04-13 | 2020-08-11 | 百度在线网络技术(北京)有限公司 | 用于发送信息的方法和装置 |
CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
Non-Patent Citations (1)
Title |
---|
祝广场 等: "基于React的电厂信息管理系统前端页面设计", 山东工业技术, no. 22, 24 October 2018 (2018-10-24), pages 118 - 119 * |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113821750A (zh) * | 2021-11-23 | 2021-12-21 | 北京交研智慧科技有限公司 | 一种页面数据处理方法、系统、电子设备及可读存储介质 |
CN113821750B (zh) * | 2021-11-23 | 2022-03-04 | 北京交研智慧科技有限公司 | 一种页面数据处理方法、系统、电子设备及可读存储介质 |
CN114741072A (zh) * | 2022-04-20 | 2022-07-12 | 苏州峰之鼎信息科技有限公司 | 一种页面生成方法、装置、设备及存储介质 |
CN114741072B (zh) * | 2022-04-20 | 2024-03-12 | 苏州峰之鼎信息科技有限公司 | 一种页面生成方法、装置、设备及存储介质 |
CN115390879A (zh) * | 2022-09-14 | 2022-11-25 | 安徽长江工业大数据科技股份公司 | 一种通过node构建实时管理umi项目代码的方法 |
CN115390879B (zh) * | 2022-09-14 | 2023-12-22 | 安徽长江工业大数据科技股份公司 | 一种通过node构建实时管理umi项目代码的方法 |
CN117270837A (zh) * | 2023-11-17 | 2023-12-22 | 冠骋信息技术(苏州)有限公司 | 基于低代码的手机应用设计的方法及系统 |
CN117270837B (zh) * | 2023-11-17 | 2024-02-02 | 冠骋信息技术(苏州)有限公司 | 基于低代码的手机应用设计的方法及系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10705780B2 (en) | Method, device, and storage medium for displaying application page | |
CN109725901B (zh) | 前端代码的开发方法、装置、设备和计算机存储介质 | |
CN113050941A (zh) | 前端页面生成方法、装置、设备及计算机可读存储介质 | |
CN108427546B (zh) | 显示装置的全屏幕适配方法、显示装置及存储介质 | |
EP3416054B1 (en) | Method and device for page display, and storage medium | |
KR20140144104A (ko) | 전자기기 및 이의 서비스 제공 방법 | |
CN112800370A (zh) | 业务单据的处理方法、装置、计算机设备和存储介质 | |
CN113741898B (zh) | 表单生成方法、装置及设备 | |
CN113377365B (zh) | 代码显示方法、装置、设备、计算机可读存储介质及产品 | |
CN110262904B (zh) | 数据采集方法及装置 | |
CN107402756B (zh) | 用于绘制页面的方法、装置及终端 | |
CN107220371B (zh) | 页面显示方法、装置及存储介质 | |
CN107450912B (zh) | 页面的布局方法、装置及终端 | |
CN113407561A (zh) | 可配置的资产管理方法、设备、介质及计算机程序产品 | |
CN112416751A (zh) | 接口自动化测试的处理方法、装置及存储介质 | |
JP7216317B1 (ja) | 情報処理装置及びその制御方法、プログラム | |
CN113535304B (zh) | 设计软件中插入、展示、编辑第三方模型的方法与装置 | |
CN106776634A (zh) | 一种用于网络访问的方法、装置及终端设备 | |
CN111506848A (zh) | 网页处理方法、装置、设备及可读存储介质 | |
CN111291555B (zh) | 商品规格的识别方法、装置和计算机可读存储介质 | |
CN114491218A (zh) | 信息更新方法、信息更新装置、电子设备及介质 | |
CN113868269A (zh) | 截图方法、装置、电子设备和可读存储介质 | |
CN113486281A (zh) | 一种页面展示方法、装置、电子设备及存储介质 | |
CN113536180A (zh) | 项目的处理方法、装置、电子设备、存储介质和程序产品 | |
CN112182449A (zh) | 页面加载方法、装置、电子设备及存储介质 |
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 |