WO2024066825A1

WO2024066825A1 - Page project development method, apparatus, device, medium and product

Info

Publication number: WO2024066825A1
Application number: PCT/CN2023/114621
Authority: WO
Inventors: 罗静; 敦建征; 张培; 曹西达
Original assignee: 通号智慧城市研究设计院有限公司
Priority date: 2022-09-29
Filing date: 2023-08-24
Publication date: 2024-04-04
Also published as: CN115586896B; CN115586896A

Abstract

The present disclosure relates to a page project development method, an apparatus, an electronic device and a storage medium, and relates to the technical field of software development, the method comprising: importing a page project into a template engine; configuring a view resolver of the template engine in a web framework, and loading a template; configuring a group template; defining a basic template of the page project, configuring and invoking basic resources and paths related to the page project, and defining a system style pattern of the page project; skipping to and rendering the pages of different templates according to different requests sent by a front-end page, introducing a root template to synchronize the basic resources and the paths, and importing related dynamic parameter configuration of the current page project; according to different service requirements of the page project, customizing front-end Web interface components; and performing page initialization for a function entry in a unified mode by means of configured dynamic parameters, and loading on demand function modules for different service requirements of the page project.

Description

页面项目开发方法、装置、设备、介质及产品Page project development methods, devices, equipment, media and products

技术领域Technical Field

本公开实施例涉及软件开发技术领域，尤其涉及一种页面项目开发方法、装置、电子设备、存储介质、以及计算机程序产品。The embodiments of the present disclosure relate to the field of software development technology, and in particular, to a page project development method, device, electronic device, storage medium, and computer program product.

背景技术Background technique

随着企业的发展，以及更多企业的信息化转型，造成了越来越多的工作放到线上来进行处理，以提高部门办公效率，由此更多的Content Management System(简称CMS，内容管理***)开发工作应运而生。With the development of enterprises and the informatization transformation of more enterprises, more and more work is put online for processing to improve departmental office efficiency. As a result, more Content Management System (CMS for short) development work has emerged.

但是，在进行管理***的开发过程中，由于各功能模块及接口通常会分配给多人进行开发，而开发习惯的不同会使得开发风格难以保持统一，存在复用性差代码冗余(即，部分相同功能的代码存在多个)，如何减少代码冗余，提高复用性，并保持***页面风格统一成为亟待解决的问题。However, in the process of developing a management system, since various functional modules and interfaces are usually assigned to multiple people for development, different development habits make it difficult to maintain a unified development style, and there is poor reusability and code redundancy (that is, there are multiple codes for some of the same functions). How to reduce code redundancy, improve reusability, and maintain a unified system page style has become an urgent problem to be solved.

发明内容Summary of the invention

为实现上述目的，本公开实施例提供一种页面项目开发方法、装置、电子设备、存储介质、以及计算机程序产品，能够对***进行模块化开发，减少代码耦合，提高复用性，保持***页面风格统一，从而提高用户交互体验。To achieve the above objectives, the embodiments of the present disclosure provide a page project development method, device, electronic device, storage medium, and computer program product, which can modularly develop the system, reduce code coupling, improve reusability, maintain a unified system page style, and thus improve the user interaction experience.

第一方面，本公开提供一种页面项目开发方法，该方法包括：将页面项目导入模板引擎，其中，模板引擎与web框架进行集成，模板引擎用于进行基础资源配置和扩展属性全局变量的配置；在web框架中配置模板引擎的视图解析器，加载模板；配置组模板，组模板包括自定义格式化函数，标签类，工具方法类；定义页面项目的基础模板，配置引用页面项目相关的基础资源及路径并定义页面项目的***风格样式；根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置，其中，根模板为最底层的基础模板；根据页面项目的不同业务需求定制前端Web界面组件；统一通过配置的动态参数为函数入口进行页面初始化，并按需加载页面项目的不同业务需求的功能模块。In a first aspect, the present disclosure provides a page project development method, the method comprising: importing a page project into a template engine, wherein the template engine is integrated with a web framework, and the template engine is used to perform basic resource configuration and configuration of extended attribute global variables; configuring a view parser of the template engine in the web framework, and loading a template; configuring a group template, wherein the group template includes a custom formatting function, a tag class, and a tool method class; defining a basic template for the page project, configuring and referencing basic resources and paths related to the page project, and defining a system style for the page project; jumping to render pages of different templates according to different requests sent by a foreground page, introducing a root template to synchronize the basic resource path, and passing in relevant dynamic parameter configurations of the current page project, wherein the root template is the bottom-level basic template; customizing front-end Web interface components according to different business requirements of the page project; uniformly initializing the page through the configured dynamic parameters as the function entry, and loading functional modules for different business requirements of the page project on demand.

其中，模板应用方式为嵌套，根模板用于主要基础布局控制，定义***风格样式，保证项目整体风格一致。Among them, the template application method is nested, and the root template is used for the main basic layout control, defining the system style and ensuring the consistency of the overall style of the project.

在一些示例性实施例中，将页面项目引入模板引擎之后，在web框架中配置模板引擎的视图解析器，加载模板之前，方法还包括：使用模板引擎进行基础资源配置。In some exemplary embodiments, after the page project is introduced into the template engine, the view resolver of the template engine is configured in the web framework, and before the template is loaded, the method further includes: using the template engine to perform basic resource configuration.

在一些示例性实施例中，在web框架中配置模板引擎的视图解析器，加载模板之后，配置组模板之前，方法还包括：使用模板引擎配置扩展属性全局变量。In some exemplary embodiments, a view resolver of a template engine is configured in a web framework, after the template is loaded and before the group template is configured, the method further comprises: configuring an extended attribute global variable using the template engine.

在一些示例性实施例中，基础资源包括类路径表征的根路径，标签根路径。In some exemplary embodiments, the base resource includes a root path represented by a class path, and a tag root path.

在一些示例性实施例中，加载模板，包括：通过模板加载器进行模板加载，该模板加载器支持web框架。In some exemplary embodiments, loading a template includes: loading the template through a template loader, wherein the template Loaders support web frameworks.

在一些示例性实施例中，扩展属性全局变量包括静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息。In some exemplary embodiments, the extended attribute global variables include a static resource version number, a project request interface root path, a process resource path, a process interface root path, and information related to the current operating user.

在一些示例性实施例中，***风格样式包括页面标签、按钮、导航栏。In some exemplary embodiments, the system style includes page labels, buttons, and navigation bars.

在一些示例性实施例中，相关动态参数配置包括：相关js函数库路径配置及页面配置。In some exemplary embodiments, the relevant dynamic parameter configuration includes: relevant js function library path configuration and page configuration.

在一些示例性实施例中，统一通过配置的动态参数为函数入口进行页面初始化，包括：统一通过js函数库内的index.js为入口进行页面初始化，页面初始化包括数据初始化及相关按钮功能初始化。In some exemplary embodiments, page initialization is uniformly performed as a function entry through configured dynamic parameters, including: page initialization is uniformly performed as an entry through index.js in a js function library, and page initialization includes data initialization and related button function initialization.

在一些示例性实施例中，模板引擎包括：第一模板引擎、第二模板引擎和第三模板引擎中的任意一种。In some exemplary embodiments, the template engine includes any one of a first template engine, a second template engine, and a third template engine.

在一些示例性实施例中，web框架包括：第一框架、第二框架、第三框架和第四框架中的任意一种。In some exemplary embodiments, the web frame includes any one of a first frame, a second frame, a third frame, and a fourth frame.

在一些示例性实施例中，前端Web界面组件包括：第一网页界面组件、第二网页界面组件、有赞网页界面组件、多端开发网页界面组件中的至少一种。In some exemplary embodiments, the front-end web interface component includes: at least one of a first web page interface component, a second web page interface component, a Youzan web page interface component, and a multi-terminal development web page interface component.

第二方面，本公开提供一种页面项目开发装置，装置包括：导入模块，被配置为将页面项目导入模板引擎，其中，模板引擎与web框架进行集成，模板引擎用于进行基础资源配置和扩展属性全局变量的配置；第一配置模块，被配置为在web框架中配置模板引擎的视图解析器，加载模板；第二配置模块，被配置为配置组模板，组模板包括自定义格式化函数，标签类，工具方法类；基础模板定义模块，被配置为定义页面项目的基础模板，配置引用页面项目相关的基础资源及路径并定义页面项目的***风格样式；渲染模块，被配置为根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置，其中，根模板为最底层的基础模板；定制模块，被配置为根据页面项目的不同业务需求定制前端Web界面组件；加载模块，被配置为统一通过配置的动态参数为函数入口进行页面初始化，并按需加载页面项目的不同业务需求的功能模块。In a second aspect, the present disclosure provides a page project development device, which includes: an import module, which is configured to import a page project into a template engine, wherein the template engine is integrated with a web framework, and the template engine is used to configure basic resource configuration and configuration of extended attribute global variables; a first configuration module, which is configured to configure a view parser of the template engine in the web framework and load a template; a second configuration module, which is configured to configure a group template, wherein the group template includes a custom formatting function, a tag class, and a tool method class; a basic template definition module, which is configured to define a basic template for a page project, configure and reference basic resources and paths related to the page project, and define a system style for the page project; a rendering module, which is configured to jump to and render pages of different templates according to different requests sent by a foreground page, introduce a root template to synchronize the basic resource path, and pass in the relevant dynamic parameter configuration of the current page project, wherein the root template is the bottom-level basic template; a customization module, which is configured to customize the front-end Web interface component according to different business requirements of the page project; a loading module, which is configured to uniformly initialize the page through the configured dynamic parameters as the function entry, and load functional modules of different business requirements of the page project on demand.

第三方面，本公开提供一种电子设备，包括：至少一个处理器；存储器，该存储器上存储有至少一个程序，当该至少一个程序被该至少一个处理器执行，使得该至少一个处理器实现本公开实施例中的任意一种页面项目开发方法。In a third aspect, the present disclosure provides an electronic device, comprising: at least one processor; and a memory, wherein at least one program is stored in the memory, and when the at least one program is executed by the at least one processor, the at least one processor implements any one of the page project development methods in the embodiments of the present disclosure.

第四方面，本公开提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现本公开实施例中的任意一种页面项目开发方法。In a fourth aspect, the present disclosure provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements any one of the page project development methods in the embodiments of the present disclosure.

第五方面，本公开提供一种计算机程序产品，包括计算机可读代码，或者承载有计算机可读代码的非易失性计算机可读存储介质，其中，当计算机可读代码在电子设备的处理器中运行时，电子设备中的处理器执行本公开实施例中的任意一种页面项目开发方法。In a fifth aspect, the present disclosure provides a computer program product, including a computer-readable code, or a non-volatile computer-readable storage medium carrying a computer-readable code, wherein when the computer-readable code runs in a processor of an electronic device, the processor in the electronic device executes any one of the page project development methods in the embodiments of the present disclosure.

本公开由于采取以上技术方案，其具有以下优点： The present disclosure adopts the above technical solution, which has the following advantages:

1、本公开以模板为框架进行页面数据输出展示，保证了页面整体样式风格统一，既保持了数据的准确性、降低维护成本，也使***界面简洁、方便；1. This disclosure uses templates as a framework to output and display page data, ensuring the uniformity of the overall style of the page, which not only maintains the accuracy of the data and reduces maintenance costs, but also makes the system interface simple and convenient;

2、页面采用动静分离的开发方式，实现静态模板页面和js动态函数分开进行模块式开发。这里的“模块”不单指一类构成的模块，还可以理解为单个类、函数等。将功能独立的代码封装成模块，独立的模块就像一块一块的积木，更加容易复用，可以直接拿出来搭建更加复用的***；2. The page adopts a dynamic and static separation development method, realizing modular development of static template pages and js dynamic functions separately. The "module" here does not only refer to a module composed of a category, but can also be understood as a single class, function, etc. Encapsulate the functionally independent code into modules. Independent modules are like building blocks, which are easier to reuse and can be directly taken out to build a more reusable system;

3、将业务逻辑代码和非业务逻辑代码分离，抽取成一些通用的框架、类库、组件等。3. Separate business logic code from non-business logic code and extract them into some common frameworks, class libraries, components, etc.

4、实现通用代码下沉，即，将通用的代码尽量下沉到更下层。在代码分层之后，为了避免交叉调用关系混乱，只允许上层代码调用下层及同层代码之间的调用，杜绝下层代码调用上层代码。4. Implement the sinking of common code, that is, sink the common code to the lower layer as much as possible. After the code is layered, in order to avoid confusion in cross-call relationships, only the upper-layer code is allowed to call the lower-layer code and the code in the same layer is allowed to call each other, and the lower-layer code is prohibited from calling the upper-layer code.

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，而非限制本公开。根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。It should be understood that the above general description and the following detailed description are exemplary and explanatory only and do not limit the present disclosure. Other features and aspects of the present disclosure will become clear from the following detailed description of exemplary embodiments with reference to the accompanying drawings.

附图说明BRIEF DESCRIPTION OF THE DRAWINGS

图1示出本公开实施例提供的一种页面项目开发方法的流程图。FIG1 shows a flow chart of a page project development method provided by an embodiment of the present disclosure.

图2示出根据本公开提供的页面项目开发方法、装置、设备、介质及产品实施的业务流程示意图。FIG2 shows a schematic diagram of a business process for implementing the page project development method, apparatus, equipment, medium, and product provided in the present disclosure.

图3示出本公开实施例提供的一种页面项目开发装置的组成方框图。FIG3 shows a block diagram of a page project development device provided by an embodiment of the present disclosure.

图4示出本公开实施例提供的一种电子设备的框图。FIG. 4 shows a block diagram of an electronic device provided by an embodiment of the present disclosure.

具体实施方式Detailed ways

下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本公开，而非对本公开的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本公开相关的部分而非全部结构。The present disclosure is further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present disclosure, rather than to limit the present disclosure. It should also be noted that, for ease of description, only parts related to the present disclosure are shown in the accompanying drawings, rather than all structures.

为使本领域的技术人员更好地理解本公开的技术方案，下面结合附图对本公开提供的页面项目开发方法、设备、计算机可读存储介质及***进行详细描述。In order to enable those skilled in the art to better understand the technical solution of the present disclosure, the page project development method, device, computer-readable storage medium and system provided by the present disclosure are described in detail below with reference to the accompanying drawings.

在下文中将参考附图更充分地描述示例实施例，但是所述示例实施例可以以不同形式来体现且不应当被解释为限于本公开阐述的实施例。反之，提供这些实施例的目的在于使本公开透彻和完整，并将使本领域技术人员充分理解本公开的范围。Example embodiments will be described more fully below with reference to the accompanying drawings, but the example embodiments may be embodied in different forms and should not be construed as limited to the embodiments set forth in the present disclosure. On the contrary, the purpose of providing these embodiments is to make the present disclosure thorough and complete, and will enable those skilled in the art to fully understand the scope of the present disclosure.

在不冲突的情况下，本公开各实施例及实施例中的各特征可相互组合。In the absence of conflict, the various embodiments of the present disclosure and the various features therein may be combined with each other.

如本公开所使用的，术语“和/或”包括至少一个相关列举条目的任何和所有组合。本公开所使用的术语仅用于描述特定实施例，且不意欲限制本公开。如本公开所使用的，单数形式“一个”和“该”也意欲包括复数形式，除非上下文另外清楚指出。还将理解的是，当说明书中使用术语“包括”和/或“由......制成”时，指定存在所述特征、整体、步骤、操作、元件和/或组件，但不排除存在或添加至少一个其它特征、整体、步骤、操作、元件、组件和/或其群组。As used in the present disclosure, the term "and/or" includes any and all combinations of at least one of the associated listed items. The terms used in the present disclosure are only used to describe specific embodiments and are not intended to limit the present disclosure. As used in the present disclosure, the singular forms "a", "an" and "the" are also intended to include plural forms, unless the context clearly indicates otherwise. It will also be understood that when the terms "including" and/or "made of..." are used in the specification, it specifies the presence of the features, integrality, steps, operations, elements and/or components, but does not exclude the existence or addition of at least one other feature, integer, step, operation, element, component and/or group thereof.

除非另外限定，否则本公开所用的所有术语(包括技术和科学术语)的含义与本领域普通技术人员通常理解的含义相同。还将理解，诸如那些在常用字典中限定的那些术语应当被解释为具有与其在相关技术以及本公开的背景下的含义一致的含义，且将不解释为具有理想化或过度形式上的含义，除非本公开明确如此限定。Unless otherwise defined, all terms (including technical and scientific terms) used in this disclosure have the same meaning as those commonly understood by those of ordinary skill in the art. It will also be understood that terms such as those defined in commonly used dictionaries should be interpreted as having a meaning consistent with their meaning in the context of the relevant art and this disclosure, and will not be interpreted as having an idealized or overly formal meaning unless explicitly defined in this disclosure.

第一方面，图1示出本公开实施例提供的一种页面项目开发方法的流程图。本公开实施例的页面项目开发方法可由相应的页面项目开发装置执行的基于模板引擎的页面项目开发方法，该页面项目开发装置可采用软件和/或硬件的方式实现，并一般可集成于电子设备中。In the first aspect, Fig. 1 shows a flow chart of a page project development method provided by an embodiment of the present disclosure. The page project development method of the embodiment of the present disclosure is a page project development method based on a template engine that can be executed by a corresponding page project development device, which can be implemented in software and/or hardware and can generally be integrated into an electronic device.

通过将功能独立的代码封装成模块；独立的模块就像一块一块的积木，更加容易复用，可以直接拿出来搭建更加复用的***。页面风格的问题可以通过模板化进行管理。并且，页面及相关功能函数也可以进行模块化分离，从而做到静态、动态分工明确，各司其职。能够减少代码耦合，提高复用性，保持***页面风格统一，从而提高用户交互体验。By encapsulating functionally independent codes into modules, independent modules are like building blocks, which are easier to reuse and can be directly used to build a more reusable system. Page style issues can be managed through templates. In addition, pages and related functional functions can also be modularly separated, so that static and dynamic division of labor is clear and each performs its own duties. It can reduce code coupling, improve reusability, maintain a unified system page style, and thus improve user interaction experience.

如图1所示，该页面项目开发方法包括但不限于如下步骤：As shown in Figure 1, the page project development method includes but is not limited to the following steps:

步骤S101，将页面项目导入模板引擎。Step S101, importing the page project into the template engine.

其中，模板引擎与web框架进行集成，模板引擎用于进行基础资源配置和扩展属性全局变量的配置。The template engine is integrated with the web framework, and is used to configure basic resources and extended attribute global variables.

步骤S102，在web框架中配置模板引擎的视图解析器，加载模板。Step S102, configuring the view parser of the template engine in the web framework, and loading the template.

步骤S103，配置组模板。Step S103: configure a group template.

其中，组模板包括自定义格式化函数，标签类，工具方法类。Among them, the group template includes custom formatting functions, label classes, and tool method classes.

步骤S104，定义页面项目的基础模板，配置引用页面项目相关的基础资源及路径并定义页面项目的***风格样式。Step S104, define a basic template for the page project, configure and reference basic resources and paths related to the page project, and define a system style for the page project.

步骤S105，根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置。Step S105, jump to render pages of different templates according to different requests sent by the foreground page, introduce the root template to synchronize the basic resource path, and pass in the relevant dynamic parameter configuration of the current page project.

其中，根模板为最底层的基础模板。Among them, the root template is the bottom-level basic template.

步骤S106，根据页面项目的不同业务需求定制前端Web界面组件。Step S106, customizing the front-end Web interface components according to different business requirements of the page project.

步骤S107，统一通过配置的动态参数为函数入口进行页面初始化，并按需加载页面项目的不同业务需求的功能模块。Step S107, uniformly initialize the page as the function entry through the configured dynamic parameters, and load the functional modules of different business requirements of the page project as needed.

在一些示例性实施例中，基础资源包括classpath(类路径)表征的根路径，tag(标签)根路径。 In some exemplary embodiments, the basic resources include a root path represented by a classpath and a tag root path.

在一些示例性实施例中，加载模板，包括：通过模板加载器进行模板加载，该模板加载器支持该web框架。In some exemplary embodiments, loading a template includes: loading the template by a template loader, where the template loader supports the web framework.

在一些示例性实施例中，组模板包括自定义格式化函数，标签类，工具方法类。In some exemplary embodiments, the group template includes a custom formatting function, a tag class, and a tool method class.

在一些示例性实施例中，***风格样式包括页面标签、按钮、导航栏，从而保证项目整体风格一致。In some exemplary embodiments, the system style includes page labels, buttons, and navigation bars, thereby ensuring that the overall style of the project is consistent.

在一些示例性实施例中，相关动态参数配置包括相关js函数库路径配置及页面配置。In some exemplary embodiments, the relevant dynamic parameter configuration includes relevant js function library path configuration and page configuration.

在一些示例性实施例中，统一通过配置的动态参数为函数入口进行页面初始化，包括：根据不同业务需求定制前端Web界面组件，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，页面初始化包括数据初始化及相关按钮功能初始化。In some exemplary embodiments, page initialization is uniformly performed for function entry through configured dynamic parameters, including: customizing front-end Web interface components according to different business needs, and uniformly performing page initialization for entry through index.js in the above-configured js function library, and page initialization includes data initialization and related button function initialization.

在一些示例性实施例中，该模板引擎包括：第一模板引擎、第二模板引擎和第三模板引擎中的任意一种。In some exemplary embodiments, the template engine includes: any one of a first template engine, a second template engine, and a third template engine.

例如，第一模板引擎可以是Velocity Template Engine(速度模板引擎)，其允许任何操作者仅使用简单的使用Template Language(模板语言)来引用由java代码定义的对象。For example, the first template engine can be Velocity Template Engine, which allows any operator to reference objects defined by java code using only simple Template Language.

又例如，第二模板引擎可以是Freemarker(福瑞马克)模板引擎，其是基于模板和要改变的数据生成输出文本(例如，网页、电子邮件、配置文件等)和源代码的通用工具。For another example, the second template engine may be a Freemarker template engine, which is a general tool for generating output text (eg, web pages, emails, configuration files, etc.) and source code based on templates and data to be changed.

再例如，第三模板引擎可以是Beetl(Bee Template Language，蜜蜂模板语言)模板引擎，其功能强大，以SQL为中心，使用简单的全功能的ORMapping工具，支持自动生成代码。For another example, the third template engine can be a Beetl (Bee Template Language) template engine, which is powerful, SQL-centric, uses a simple full-featured ORMapping tool, and supports automatic code generation.

在一些示例性实施例中，该web框架包括：第一框架、第二框架、第三框架和第四框架中的任意一种。In some exemplary embodiments, the web frame includes any one of a first frame, a second frame, a third frame and a fourth frame.

其中，第一框架可以为Spring Model View Controller(基于根源的模型、视图、控制器)框架，其提供了构建Web应用程序的全功能MVC模块。使用Spring可***的MVC架构，从而在使用Spring进行Web开发时，可以选择使用Spring MVC框架或集成其他MVC开发框架。Among them, the first framework can be the Spring Model View Controller (root-based model, view, controller) framework, which provides a full-featured MVC module for building Web applications. Using Spring's pluggable MVC architecture, when using Spring for Web development, you can choose to use the Spring MVC framework or integrate other MVC development frameworks.

第二框架可以为SpringBoot框架，SpringBoot框架的设计目的是用来简化新Spring应用的初始搭建以及开发过程。该SpringBoot框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。The second framework may be a SpringBoot framework, which is designed to simplify the initial setup and development process of new Spring applications. The SpringBoot framework uses a specific method for configuration, so that developers no longer need to define boilerplate configurations.

第三框架可以为Struts框架，其是通过采用Java Server Pages(简称JSP，JAVA服务器页面)技术，实现了基于Java EE Web应用的MVC设计模式的应用框架。The third framework can be the Struts framework, which implements an application framework based on the MVC design pattern of Java EE Web applications by adopting Java Server Pages (JSP, JAVA server pages) technology.

第四框架可以为Servlet(Server Applet，小服务程序或服务连接器)框架，是用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态Web内容。 The fourth framework may be a Servlet (Server Applet, small service program or service connector) framework, which is a server-side program written in Java, has the characteristics of being independent of platforms and protocols, and its main function is to interactively browse and generate data and generate dynamic Web content.

在一些示例性实施例中，该前端Web界面组件包括：第一网页界面组件、第二网页界面组件、有赞网页界面组件、多端开发网页界面组件中的至少一种。In some exemplary embodiments, the front-end web interface component includes: at least one of a first web page interface component, a second web page interface component, a Youzan web page interface component, and a multi-terminal development web page interface component.

其中，第一网页界面组件包括AntDesign、AntDesign Mobile等。Ant Design是一个UI设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。Among them, the first web page interface component includes AntDesign, AntDesign Mobile, etc. Ant Design is a UI design language, which is a set of interactive languages and visual systems refined and applied to enterprise-level backend products.

Ant Design Mobile是一个基于React(用于构建用户界面的JavaScript库)/React Native的UI组件库。Ant Design Mobile简称antd-mobile，是基于Ant Design的移动规范的React实现的组件库。Ant Design Mobile is a UI component library based on React (JavaScript library for building user interfaces)/React Native. Ant Design Mobile, referred to as antd-mobile, is a component library based on the mobile specification of Ant Design and implemented in React.

第二网页界面组件包括WeUI，其是一套与原生视觉体验一致的基础样式库，可以令用户的使用感知更加统一。The second web interface component includes WeUI, which is a basic style library consistent with the native visual experience, which can make the user's usage perception more unified.

有赞网页界面组件包括Vant；Vant是有赞前端团队维护的移动端Vue组件库，提供了一整套用户界面(User Interface)基础组件和业务组件。通过Vant可以快速搭建出风格统一的页面，提升开发效率。Youzan's web interface components include Vant; Vant is a mobile Vue component library maintained by Youzan's front-end team, which provides a complete set of user interface basic components and business components. With Vant, you can quickly build a page with a unified style to improve development efficiency.

多端开发网页界面组件包括TaroUI，其提供一套基于Taro框架开发的多端UI组件库。Multi-terminal development web interface components include TaroUI, which provides a multi-terminal UI component library developed based on the Taro framework.

在一些实施例中，前端Web界面组件，还包括Bootstrap、Layui、ElementUI、semidesign、Vuetify。In some embodiments, the front-end web interface components also include Bootstrap, Layui, ElementUI, semidesign, and Vuetify.

其中，Bootstrap是基于Hyper Text Markup Language(简称HTML，超文本标记语言)、Cascading Style Sheets(简称CSS，层叠样式表)、以及JavaScript(简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言)开发的简洁、直观、强悍的前端开发框架，使得Web开发更加快捷。Bootstrap提供了一个带有网格***、链接样式、背景的基本结构。Bootstrap is a concise, intuitive and powerful front-end development framework based on Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS, a lightweight, interpreted or just-in-time compiled programming language with function priority), making Web development faster. Bootstrap provides a basic structure with a grid system, link styles, and backgrounds.

Layui是一套开源免费的Web UI组件库，采用自身轻量级模块化规范，遵循原生态的HTML/CSS/JavaScript开发模式，非常适合网页界面的快速构建。Layui is an open source and free Web UI component library that adopts its own lightweight modular specifications and follows the original HTML/CSS/JavaScript development model. It is very suitable for the rapid construction of web interfaces.

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。ElementUI is a desktop component library based on VUE2.0. ElementUI provides a wealth of components to help developers quickly build powerful and unified-style pages.

Semi Design是现代、全面、灵活的设计***和UI库，是一款包含设计语言、React组件、主题等开箱即用的中后台解决方案，可用于快速搭建美观的React应用。Semi Design is a modern, comprehensive and flexible design system and UI library. It is an out-of-the-box mid- and back-end solution that includes design language, React components, themes, etc., which can be used to quickly build beautiful React applications.

Vuetify是Vue的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。Vuetify is a semantic component framework for Vue, which aims to provide neat, semantic and reusable components to make building applications more convenient.

图2示出根据本公开提供的页面项目开发方法、装置、设备、介质及产品实施的业务流程示意图。如图2所示，本公开通过beetl模板引擎结合前端layui框架提出了一种新型页面项目开发架构，该架构如下：Figure 2 shows a business process diagram of the page project development method, device, equipment, medium and product implementation provided by the present disclosure. As shown in Figure 2, the present disclosure proposes a new page project development architecture by combining the beetl template engine with the front-end layui framework, and the architecture is as follows:

S1、项目引入beetl引擎，并同SpringMVC进行集成；S1. The project introduces the beetl engine and integrates it with SpringMVC;

S2、beetl基础资源配置，如classpath根路径，tag标签根路径，由于同spring进行整合，需配置beetl视图解析器，模板加载器类以spring为准，此处无需配置；S2. Beetl basic resource configuration, such as classpath root path, tag tag root path. Because of integration with spring, beetl view parser needs to be configured. The template loader class is based on spring, so no configuration is required here.

S3、通过WebRenderExt配置扩展属性全局变量，如静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息等；S3, through WebRenderExt configuration extension attribute global variables, such as static resource version number, project request reception Port root path, process resource path, process interface root path, current operation user related information, etc.;

S4、配置GroupTemplate，如自定义格式化函数，标签类，工具方法类等；S4. Configure GroupTemplate, such as custom formatting functions, label classes, tool method classes, etc.

S5、定义项目基础模板，配置引用相关基础资源及路径，定义***风格样式，包括页面标签、按钮、导航栏等，保证项目整体风格一致；S5. Define the basic template of the project, configure and reference related basic resources and paths, and define the system style, including page labels, buttons, navigation bars, etc., to ensure the consistency of the overall style of the project;

S6、根据不同请求跳转不同模板页面，引入根模板同步基础资源路径，并传入当前页面相关动态参数配置，包括相关js函数库路径及页面配置等；S6. Jump to different template pages according to different requests, introduce the root template synchronization basic resource path, and pass in the current page related dynamic parameter configuration, including the related js function library path and page configuration, etc.;

S7、根据不同业务需求定制layui模块，页面展示整体结构不同，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，包括数据初始化及相关按钮功能初始化等；S7. Customize the layui module according to different business needs. The overall structure of the page display is different. Use index.js in the js function library configured above as the entry to initialize the page, including data initialization and related button function initialization;

S8、前端代码采用了layui的JS框架，使用了按需加载的方式，采用layui的好处是自带了页面和组件还有JS的管理，能完成大多数业务需求。S8. The front-end code uses the layui JS framework and uses an on-demand loading method. The advantage of using layui is that it comes with page and component management as well as JS, which can meet most business needs.

通过上述开发架构，该框架的实施方法包括但不限于如下步骤：Through the above development architecture, the implementation method of the framework includes but is not limited to the following steps:

步骤S201，用户点击某个请求路径，发起一个HTTP request请求，该请求会被提交到DispatcherServlet(前置控制器)。Step S201, the user clicks on a request path and initiates an HTTP request, which will be submitted to the DispatcherServlet (front controller).

步骤S202，由DispatcherServlet(前置控制器)经过请求一个或多个HandlerMapping(处理器映射器)和HandlerAdapter(处理器适配器)匹配后，找到并执行相应的Handler(常称为Controller)，Handler执行完毕后，会经过处理器适配器返回给前置控制器一个ModelAndView对象(例如，ModelAndView对象为Spring MVC的底层对象，包括Model数据模型和View视图信息)。Step S202, the DispatcherServlet (front controller) finds and executes the corresponding Handler (often called Controller) after requesting one or more HandlerMapping (processor mappers) and HandlerAdapter (processor adapter) to match. After the Handler is executed, it will return a ModelAndView object to the front controller through the processor adapter (for example, the ModelAndView object is the underlying object of Spring MVC, including the Model data model and View view information).

进一步地，前置控制器接收到ModelAndView对象后，会请求ViewResolver(视图解析器)对视图进行解析，并根据View信息匹配到相应的视图结果，并返回给前置控制器。Furthermore, after receiving the ModelAndView object, the front controller will request the ViewResolver to parse the view, match the corresponding view result according to the View information, and return it to the front controller.

步骤S203，前置控制器接收到具体的View视图后，请求根模板布局页面进行视图渲染，生成最终的View(视图)。Step S203, after receiving the specific View, the front controller requests the root template layout page to render the view and generate the final View.

步骤S204，视图负责将结果显示到客户端上的浏览器中。Step S204: the view is responsible for displaying the result in the browser on the client.

步骤S205，前置控制器传递当前页所需参数给根模板布局页面。Step S205: the front controller transmits the parameters required by the current page to the root template layout page.

步骤S206，根模板布局页面根据传参配置当前请求页面相关参数。Step S206, the root template layout page configures the relevant parameters of the current request page according to the passed parameters.

例如，配置相关参数，渲染页面布局样式等。For example, configure related parameters, render page layout style, etc.

其中，页面相关参数包括相关js函数库路径配置及页面配置等。Among them, page related parameters include related js function library path configuration and page configuration, etc.

步骤S207，页面通过根模板配置的参数，通过函数入口(例如，index.js)进行页面初始化。Step S207, the page is initialized through the parameters configured by the root template and the function entry (for example, index.js).

步骤S208，页面初始化包括数据初始化(如，表单数据填充等)，以及相关按钮功能初始化(如，按钮事件绑定及相关操作逻辑等)。Step S208, page initialization includes data initialization (such as form data filling, etc.) and related button function initialization (such as button event binding and related operation logic, etc.).

步骤S209，按需加载其他功能模块。Step S209, loading other functional modules as needed.

应当理解，以上实施例还可与本公开实施例的其它任意方式结合使用。以上实施例只是本公开的一个具体例子，而不是对本公开保护范围的限定。 It should be understood that the above embodiment can also be used in combination with any other embodiment of the present disclosure. The above embodiment is only a specific example of the present disclosure, and is not intended to limit the scope of protection of the present disclosure.

第二方面，本公开实施例提供一种页面项目开发装置，其是实现本公开上述实施例提供的页面项目开发方法的相应装置，该页面项目开发装置可采用软件和/或硬件的方式实现，并一般可集成于电子设备中。On the second aspect, an embodiment of the present disclosure provides a page project development device, which is a corresponding device for implementing the page project development method provided by the above-mentioned embodiment of the present disclosure. The page project development device can be implemented in software and/or hardware and can generally be integrated into an electronic device.

图3示出本公开实施例提供的一种页面项目开发装置的组成方框图。如图3所示，本公开实施例提供的页面项目开发装置300包括但不限于如下模块：FIG3 shows a block diagram of a page project development device provided by an embodiment of the present disclosure. As shown in FIG3 , the page project development device 300 provided by an embodiment of the present disclosure includes but is not limited to the following modules:

导入模块301，被配置为将页面项目导入模板引擎，其中，模板引擎与web框架进行集成，模板引擎用于进行基础资源配置和扩展属性全局变量的配置；The import module 301 is configured to import the page project into the template engine, wherein the template engine is integrated with the web framework, and the template engine is used to configure basic resources and extended attribute global variables;

第一配置模块302，被配置为在web框架中配置模板引擎的视图解析器，加载模板；The first configuration module 302 is configured to configure a view parser of a template engine in a web framework and load a template;

第二配置模块303，被配置为配置组模板，组模板包括自定义格式化函数，标签类，工具方法类；The second configuration module 303 is configured to configure a group template, where the group template includes a custom formatting function, a tag class, and a tool method class;

基础模板定义模块304，被配置为定义页面项目的基础模板，配置引用页面项目相关的基础资源及路径并定义页面项目的***风格样式；The basic template definition module 304 is configured to define the basic template of the page project, configure and reference the basic resources and paths related to the page project, and define the system style of the page project;

渲染模块305，被配置为根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置，其中，根模板为最底层的基础模板；The rendering module 305 is configured to jump to render pages of different templates according to different requests sent by the foreground page, introduce the root template to synchronize the basic resource path, and pass in the relevant dynamic parameter configuration of the current page project, where the root template is the bottom-level basic template;

定制模块306，被配置为根据页面项目的不同业务需求定制前端Web界面组件；A customization module 306 is configured to customize the front-end web interface components according to different business requirements of the page project;

加载模块307，被配置为统一通过配置的动态参数为函数入口进行页面初始化，并按需加载页面项目的不同业务需求的功能模块。The loading module 307 is configured to uniformly initialize the page for the function entry through the configured dynamic parameters, and load the functional modules of different business requirements of the page project on demand.

需要说明的是，本实施例中的页面项目开发装置能够实现本公开中任意一种页面项目开发方法，在此不再赘述。It should be noted that the page project development device in this embodiment can implement any page project development method in the present disclosure, which will not be described in detail here.

第三方面，本公开实施例提供一种电子设备。图4示出本公开实施例提供的一种电子设备的框图。In a third aspect, an embodiment of the present disclosure provides an electronic device. FIG4 shows a block diagram of an electronic device provided by an embodiment of the present disclosure.

如图4所示，本公开实施例提供了一种电子设备，该电子设备包括：至少一个处理器401；至少一个存储器402，以及一个或多个I/O接口403，连接在处理器401与存储器402之间；其中，存储器402存储有可被至少一个处理器401执行的一个或多个计算机程序，一个或多个计算机程序被至少一个处理器401执行，以使至少一个处理器401能够执行上述的页面项目开发方法。As shown in Figure 4, an embodiment of the present disclosure provides an electronic device, which includes: at least one processor 401; at least one memory 402, and one or more I/O interfaces 403, connected between the processor 401 and the memory 402; wherein the memory 402 stores one or more computer programs that can be executed by at least one processor 401, and the one or more computer programs are executed by at least one processor 401 so that the at least one processor 401 can execute the above-mentioned page project development method.

本公开实施例提供一种计算机可读存储介质。该计算机可读存储介质上存储有计算机程序，其中，该计算机程序在被处理器/处理核执行时实现上述的页面项目开发方法。计算机可读存储介质可以是易失性或非易失性计算机可读存储介质。The present disclosure provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, wherein the computer program implements the above-mentioned page project development method when executed by a processor/processing core. The computer-readable storage medium may be a volatile or non-volatile computer-readable storage medium.

本公开实施例还提供了一种计算机程序产品，包括计算机可读代码，或者承载有计算机可读代码的非易失性计算机可读存储介质，当所述计算机可读代码在电子设备的处理器中运行时，所述电子设备中的处理器执行上述页面项目开发方法。The embodiment of the present disclosure also provides a computer program product, including a computer-readable code, or a non-volatile computer-readable storage medium carrying the computer-readable code. When the computer-readable code runs in a processor of an electronic device, the processor in the electronic device executes the above-mentioned page project development method.

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、***、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读存储介质上，计算机可读存储介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。Those skilled in the art will appreciate that all or some of the steps, systems, and functional modules/units in the above disclosed methods may be implemented as software, firmware, hardware, or a suitable combination thereof. In hardware implementations, the division between the functional modules/units mentioned in the above description does not necessarily correspond to the division of physical components; for example, A physical component may have multiple functions, or a function or step may be performed by several physical components in cooperation. Some or all physical components may be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit. Such software may be distributed on a computer-readable storage medium, which may include a computer storage medium (or a non-transitory medium) and a communication medium (or a transient medium).

如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读程序指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM)、静态随机存取存储器(SRAM)、闪存或其他存储器技术、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读程序指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。As is known to those of ordinary skill in the art, the term computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storing information (such as computer-readable program instructions, data structures, program modules or other data). Computer storage media include, but are not limited to, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), static random access memory (SRAM), flash memory or other memory technology, portable compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store desired information and can be accessed by a computer. In addition, it is known to those of ordinary skill in the art that communication media typically contain computer-readable program instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transmission mechanism, and may include any information delivery medium.

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing/processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and/or a wireless network. The network can include copper transmission cables, optical fiber transmissions, wireless transmissions, routers, firewalls, switches, gateway computers, and/or edge servers. The network adapter card or network interface in each computing/processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in the computer-readable storage medium in each computing/processing device.

这里参照本公开实施例中的页面项目开发法、装置、设备、介质和计算机程序产品的流程图和/或框图描述了本公开的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。Various aspects of the present disclosure are described herein with reference to the flowcharts and/or block diagrams of the page project development method, apparatus, device, medium, and computer program product in the embodiments of the present disclosure. It should be understood that each box in the flowchart and/or block diagram and the combination of boxes in the flowchart and/or block diagram can be implemented by computer-readable program instructions.

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。These computer-readable program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processor of the computer or other programmable data processing device, a device that implements the functions/actions specified in one or more boxes in the flowchart and/or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and/or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions/actions specified in one or more boxes in the flowchart and/or block diagram.

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operating steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions/actions specified in one or more boxes in the flowchart and/or block diagram.

附图中的流程图和框图显示了根据本公开的多个实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。The flowcharts and block diagrams in the accompanying drawings show systems, methods and computer programs according to various embodiments of the present disclosure. The possible architecture, functions and operations of a product. In this regard, each box in a flow chart or block diagram may represent a module, a program segment or a part of an instruction, and a part of the module, program segment or instruction includes one or more executable instructions for realizing a specified logical function. In some alternative implementations, the functions marked in the box may also occur in an order different from that marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they may sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and/or flow chart, and the combination of boxes in the block diagram and/or flow chart, can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

本公开已经公开了示例性实施例，并且虽然采用了具体术语，但它们仅用于并仅应当被解释为一般说明性含义，并且不用于限制的目的。在一些实例中，对本领域技术人员显而易见的是，除非另外明确指出，否则可单独使用与特定实施例相结合描述的特征、特性和/或元素，或可与其他实施例相结合描述的特征、特性和/或元件组合使用。因此，本领域技术人员将理解，在不脱离由所附的权利要求阐明的本公开的范围的情况下，可进行各种形式和细节上的改变。 The present disclosure has disclosed exemplary embodiments, and although specific terms are employed, they are used and should be interpreted only as generally illustrative, and not for limiting purposes. In some instances, it will be apparent to those skilled in the art that, unless otherwise expressly stated, features, characteristics, and/or elements described in conjunction with a particular embodiment may be used alone, or may be used in combination with features, characteristics, and/or elements described in conjunction with other embodiments. Therefore, those skilled in the art will appreciate that various changes in form and detail may be made without departing from the scope of the present disclosure as set forth in the appended claims.

Claims

一种页面项目开发方法，其中，所述方法包括：A page project development method, wherein the method comprises:

将页面项目导入模板引擎，其中，所述模板引擎与web框架进行集成，所述模板引擎用于进行基础资源配置和扩展属性全局变量的配置；Importing the page project into a template engine, wherein the template engine is integrated with a web framework, and the template engine is used to configure basic resources and extended attribute global variables;

在所述web框架中配置所述模板引擎的视图解析器，加载模板；Configuring the view parser of the template engine in the web framework and loading the template;

配置组模板，所述组模板包括自定义格式化函数，标签类，工具方法类；Configure a group template, wherein the group template includes a custom formatting function, a label class, and a tool method class;

定义所述页面项目的基础模板，配置引用所述页面项目相关的基础资源及路径并定义所述页面项目的***风格样式；Define the basic template of the page project, configure and reference the basic resources and paths related to the page project, and define the system style of the page project;

根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置，其中，所述根模板为最底层的基础模板；According to different requests sent by the front-end page, pages with different templates are rendered, the root template is introduced to synchronize the basic resource path, and the relevant dynamic parameter configuration of the current page project is passed in, where the root template is the bottom-level basic template;

根据页面项目的不同业务需求定制前端Web界面组件；Customize front-end web interface components according to different business requirements of page projects;

统一通过所述配置的动态参数为函数入口进行页面初始化，并按需加载所述页面项目的不同业务需求的功能模块。The page is initialized uniformly through the dynamic parameters of the configuration as the function entry, and the functional modules of different business requirements of the page project are loaded as needed.
根据权利要求1所述的页面项目开发方法，其中，所述将页面项目引入模板引擎之后，所述在所述web框架中配置所述模板引擎的视图解析器，加载模板之前，所述方法还包括：According to the page project development method of claim 1, after the page project is introduced into the template engine, the view parser of the template engine is configured in the web framework, and before the template is loaded, the method further comprises:

使用所述模板引擎进行基础资源配置。Use the template engine to configure basic resources.
根据权利要求1所述的页面项目开发方法，其中，所述在所述web框架中配置所述模板引擎的视图解析器，加载模板之后，所述配置组模板之前，所述方法还包括：According to the page project development method of claim 1, wherein, after configuring the view parser of the template engine in the web framework and loading the template and before configuring the group template, the method further comprises:

使用所述模板引擎配置所述扩展属性全局变量。The extended attribute global variable is configured using the template engine.
根据权利要求1所述的页面项目开发方法，所述基础资源包括类路径表征的根路径，标签根路径。According to the page project development method according to claim 1, the basic resources include a root path represented by a class path and a tag root path.
根据权利要求1所述的页面项目开发方法，其中，所述加载模板，包括：The page project development method according to claim 1, wherein the loading template comprises:

通过模板加载器进行模板加载，所述模板加载器支持所述web框架。Template loading is performed through a template loader, and the template loader supports the web framework.
根据权利要求1所述的页面项目开发方法，其中，所述扩展属性全局变量包括静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息。According to the page project development method according to claim 1, the extended attribute global variables include static resource version number, project request interface root path, process resource path, process interface root path, and current operating user related information.
根据权利要求1所述的页面项目开发方法，其中，所述***风格样式包括页面标签、按钮、导航栏。The page project development method according to claim 1, wherein the system style includes a page label Labels, buttons, navigation bars.
根据权利要求1所述的页面项目开发方法，其中，所述相关动态参数配置包括：相关js函数库路径配置及页面配置。According to the page project development method according to claim 1, wherein the relevant dynamic parameter configuration includes: relevant js function library path configuration and page configuration.
根据权利要求8所述的页面项目开发方法，其中，所述统一通过所述配置的动态参数为函数入口进行页面初始化，包括：The page project development method according to claim 8, wherein the uniformly initializing the page as a function entry through the configured dynamic parameters comprises:

统一通过所述js函数库内的index.js为入口进行页面初始化，所述页面初始化包括数据初始化及相关按钮功能初始化。The page is initialized uniformly through index.js in the js function library as the entry, and the page initialization includes data initialization and related button function initialization.
根据权利要求1至9中任一项所述的页面项目开发方法，其中，所述模板引擎包括：第一模板引擎、第二模板引擎和第三模板引擎中的任意一种。According to any one of claims 1 to 9, the page project development method, wherein the template engine comprises: any one of a first template engine, a second template engine and a third template engine.
根据权利要求1至9中任一项所述的页面项目开发方法，其中，所述web框架包括：第一框架、第二框架、第三框架和第四框架中的任意一种。According to any one of claims 1 to 9, the web framework comprises: any one of a first framework, a second framework, a third framework and a fourth framework.
根据权利要求1至9中任一项所述的页面项目开发方法，其中，所述前端Web界面组件包括：第一网页界面组件、第二网页界面组件、有赞网页界面组件、多端开发网页界面组件中的至少一种。According to the page project development method according to any one of claims 1 to 9, the front-end Web interface component includes: at least one of a first web page interface component, a second web page interface component, a Youzan web page interface component, and a multi-terminal development web page interface component.
一种页面项目开发装置，其中，包括：A page project development device, comprising:

导入模块，被配置为将页面项目导入模板引擎，其中，所述模板引擎与web框架进行集成，所述模板引擎用于进行基础资源配置和扩展属性全局变量的配置；An import module, configured to import a page project into a template engine, wherein the template engine is integrated with a web framework, and the template engine is used to configure basic resources and extended attribute global variables;

第一配置模块，被配置为在所述web框架中配置所述模板引擎的视图解析器，加载模板；A first configuration module is configured to configure a view parser of the template engine in the web framework and load a template;

第二配置模块，被配置为配置组模板，所述组模板包括自定义格式化函数，标签类，工具方法类；A second configuration module is configured to configure a group template, wherein the group template includes a custom formatting function, a tag class, and a tool method class;

基础模板定义模块，被配置为定义所述页面项目的基础模板，配置引用所述页面项目相关的基础资源及路径并定义所述页面项目的***风格样式；A basic template definition module is configured to define a basic template for the page project, configure and reference basic resources and paths related to the page project, and define a system style for the page project;

渲染模块，被配置为根据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置，其中，所述根模板为最底层的基础模板；The rendering module is configured to jump to render pages of different templates according to different requests sent by the foreground page, introduce the root template to synchronize the basic resource path, and pass in the relevant dynamic parameter configuration of the current page project, wherein the root template is the bottom-level basic template;

定制模块，被配置为根据页面项目的不同业务需求定制前端Web界面组件；Customization module, which is configured to customize the front-end web interface components according to the different business requirements of the page project;

加载模块，被配置为统一通过配置的动态参数为函数入口进行页面初始化，并按需加载所述页面项目的不同业务需求的功能模块。The loading module is configured to uniformly initialize the page for the function entry through the configured dynamic parameters, and load the functional modules of different business requirements of the page project on demand.
一种电子设备，包括： An electronic device, comprising:

至少一个处理器；at least one processor;

存储器，所述存储器上存储有至少一个程序，当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现权利要求1-12中的任意一项所述的页面项目开发方法。A memory having at least one program stored therein, wherein when the at least one program is executed by the at least one processor, the at least one processor implements the page project development method described in any one of claims 1-12.
一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其中，所述程序被处理器执行时实现权利要求1-12中的任意一项所述的页面项目开发方法。A computer-readable storage medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the page project development method described in any one of claims 1-12.
一种计算机程序产品，包括计算机可读代码，或者承载有计算机可读代码的非易失性计算机可读存储介质，其中，当所述计算机可读代码在电子设备的处理器中运行时，所述电子设备中的处理器执行用于实现权利要求1-12中的任一项所述的页面项目开发方法。 A computer program product, comprising a computer-readable code, or a non-volatile computer-readable storage medium carrying the computer-readable code, wherein when the computer-readable code runs in a processor of an electronic device, the processor in the electronic device executes a page project development method for implementing any one of claims 1-12.