CN115586896A - 基于模板引擎的页面项目开发方法、设备及存储介质 - Google Patents

Abstract

本发明涉及页面项目开发方法，包括以下步骤：页面项目引入模板引擎，模板引擎与其他web框架进行集成；模板引擎进行基础资源配置，其他web框架中配置该模板引擎的视图解析器，加载模板；配置扩展属性全局变量；配置组模板并定义页面项目的基础模板，配置引用页面项目的基础资源及路径并定义页面项目的系统风格样式；跟据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置；根据页面项目的不同业务需求定制前端Web界面组件，统一通过该配置的动态参数为函数入口进行页面初始化，并按需加载页面项目的不同业务需求的功能模块。本发明还涉执行该方法的设备及计算机可读存储介质。

Description

基于模板引擎的页面项目开发方法、设备及存储介质

技术领域

本发明是关于一种基于模板引擎的页面项目开发方法、设备及计算机可读存储介质，涉及软件技术开发领域。

背景技术

随着如今企业的发展，以及更多企业的信息化转型，也就造成了越来越多的工作放到线上来进行处理从而使部门办公效率提高，由此更多的CMS系统开发工作应运而生。

但是在进行管理系统开发的过程中，会存在一些问题，也是开发工作的通病，那就是由于各功能模块及接口通常分给多人去进行开发，因为开发习惯的不同所以开发风格很难保证统一，部分相同功能代码也容易存在多个，也就是复用性差代码冗余，但其中绝大部分代码都是可以进行抽取，封装成为独立的功能模块或函数然后供其他地方进行调用，从而减少了代码冗余，提高复用性。如要满足如上要求，代码就需要高度解耦，否则牵一发动全身，因此要尽量减少代码耦合。最好的办法就是模块化开发，如果职责不够单一，模块、列设计大而全，那么依赖它的代码就会比较多，进而增加代码的耦合度。这里的“模块”，不单单指一类构成的模块，还可以理解为单个类、函数。通过将功能独立的代码，封装成模块。独立的模块就像一块一块的积木、更加容易复用，可以直接拿出来搭建更加复用的系统。页面风格的问题可以通过模板化进行管理。并且页面及相关功能函数也可以进行模块化分离，从而做到静态、动态分工明确，各司其职。

发明内容

为实现上述目的，本发明提出了基于模板引擎的页面项目开发方法、设备及计算机可读存储介质，从而对系统进行模块化开发，减少代码耦合，提高复用性，保持系统页面风格统一，从而提高用户交互体验。

第一方面，本发明提供一种基于模板引擎的页面项目开发方法，该方法包括以下步骤：将页面项目引入模板引擎，该模板引擎与其他web框架进行集成；该模板引擎进行基础资源配置，并在该其他web框架中配置该模板引擎的视图解析器，加载模板；该模板引擎配置扩展属性全局变量；配置组模板并定义该页面项目的基础模板，配置引用该页面项目相关的基础资源及路径并定义该页面项目的系统风格样式；跟据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置；根据页面项目的不同业务需求定制前端Web界面组件，统一通过该配置的动态参数为函数入口进行页面初始化，并按需加载该页面项目的不同业务需求的功能模块

其中，模板应用方式为嵌套，根模板为最底层的基础模板，其用于主要基础布局控制，定义系统风格样式，保证项目整体风格一致。

其中，在项目服务器启动前完成所需配置工作，其中包括：基础资源的配置；在该其他web框架中配置该模板引擎的视图解析器；该模板引擎配置扩展属性全局变量等。

在一些示例性实施例中，该基础资源包括classpath根路径，tag标签根路径。

在一些示例性实施例中，通过模板加载器进行模板加载，该模板加载器支持该其他web框架。

在一些示例性实施例中，扩展属性全局变量包括静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息。

在一些示例性实施例中，配置该组模板包括自定义格式化函数，标签类，工具方法类。

在一些示例性实施例中，该系统风格样式包括页面标签、按钮、导航栏等，从而保证项目整体风格一致。

在一些示例性实施例中，该相关动态参数配置包括相关js函数库路径配置及页面包屑配置。

在一些示例性实施例中，根据不同业务需求定制前端Web界面组件，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，包括数据初始化及相关按钮功能初始化。

在一些示例性实施例中，该模板引擎包括：velocity、freemarker或beetl。

在一些示例性实施例中，该其他web框架包括：Spring MVC，SpringBoot，Struts，Servlet。

在一些示例性实施例中，该前端Web界面组件包括：Vant、AntDesign、AntDesignMobile、Bootstrap、Layui、ElementUI、semidesign、TaroUI、Vuetify、WeUI。

第二方面，本发明提供一种电子设备，包括：至少一个处理器；存储器，该存储器上存储有至少一个程序，当该至少一个程序被该至少一个处理器执行，使得该至少一个处理器实现该页面项目开发方法。

第三方面，本发明提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现该页面项目开发方法。

本发明由于采取以上技术方案，其具有以下优点：

1、本发明以模板为框架进行页面数据输出展示，保证了页面整体样式风格统一，既保持了数据的准确性、降低维护成本，也使系统界面简洁、方便；

2、如果职责不够单一，模块、列设计大而全，那么依赖它的代码就会比较多，进而增加代码的耦合度。根据上一点，也就会影响到代码的复用性。相反，越细粒度的代码，代码的通用性越好，越容易被复用。页面采用动静分离的开发方式，实现静态模板页面和js动态函数分开进行模块式开发。这里的“模块”，不单单指一类构成的模块，还可以理解为单个类、函数。将功能独立的代码，封装成模块，独立的模块就像一块一块的积木、更加容易复用，可以直接拿出来搭建更加复用的系统；

3、同时还实现了业务与非业务逻辑分离，越是跟业务无关的代码越是容易复用，越是针对特定业务的代码就越难复用。所以，为了复用跟业务代码无关的代码，将业务和非业务逻辑代码分离，抽取成一些通用的框架、类库、组件等。

4、通用代码下沉，从分层的角度来看，越是底层的代码越通用、会被越多的模块调用，越是应该设计足够可以复用。一般情况下，代码，在代码分层之后，为了避免交叉调用关系混乱，只允许上层代码调用下层及同层代码之间的调用，杜绝下层代码调用上层代码、所以，通用的代码我们尽量下沉到更下层。

附图说明

图1是本发明提供的页面项目开发方法的流程图，

图2是根据本发明提供的基于模板引擎的页面项目开发方法、设备、计算机可读存储介质实施的业务流程示意图。

具体实施方式

为使本领域的技术人员更好地理解本发明的技术方案，下面结合附图对本发明提供的基于模板引擎的页面项目开发方法、设备、计算机可读存储介质及系统进行详细描述。

在下文中将参考附图更充分地描述示例实施例，但是所述示例实施例可以以不同形式来体现且不应当被解释为限于本文阐述的实施例。反之，提供这些实施例的目的在于使本公开透彻和完整，并将使本领域技术人员充分理解本公开的范围。

在不冲突的情况下，本公开各实施例及实施例中的各特征可相互组合。

如本文所使用的，术语“和/或”包括至少一个相关列举条目的任何和所有组合。本文所使用的术语仅用于描述特定实施例，且不意欲限制本公开。如本文所使用的，单数形式“一个”和“该”也意欲包括复数形式，除非上下文另外清楚指出。还将理解的是，当本说明书中使用术语“包括”和/或“由......制成”时，指定存在所述特征、整体、步骤、操作、元件和/或组件，但不排除存在或添加至少一个其它特征、整体、步骤、操作、元件、组件和/或其群组。

除非另外限定，否则本文所用的所有术语(包括技术和科学术语)的含义与本领域普通技术人员通常理解的含义相同。还将理解，诸如那些在常用字典中限定的那些术语应当被解释为具有与其在相关技术以及本公开的背景下的含义一致的含义，且将不解释为具有理想化或过度形式上的含义，除非本文明确如此限定。

图1是本发明提供的一种基于模板引擎的页面项目开发方法，通过该方法能够减少代码耦合，提高复用性，保持系统页面风格统一，从而提高用户交互体验。

该方法包括以下步骤：本发明提供一种基于模板引擎的页面项目开发方法，该方法包括以下步骤：将页面项目引入模板引擎，该模板引擎与其他web框架进行集成；该模板引擎进行基础资源配置，并在该其他web框架中配置该模板引擎的视图解析器，加载模板；该模板引擎配置扩展属性全局变量；配置组模板并定义该页面项目的基础模板，配置引用该页面项目相关的基础资源及路径并定义该页面项目的系统风格样式；跟据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置；根据页面项目的不同业务需求定制前端Web界面组件，统一通过该配置的动态参数为函数入口进行页面初始化，并按需加载该页面项目的不同业务需求的功能模块。

在一些示例性实施例中，该基础资源包括classpath根路径，tag标签根路径。

在一些示例性实施例中，通过模板加载器进行模板加载，该模板加载器支持该其他web框架。

在一些示例性实施例中，扩展属性全局变量包括静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息。

在一些示例性实施例中，该组模板包括自定义格式化函数，标签类，工具方法类。

在一些示例性实施例中，该系统风格样式包括页面标签、按钮、导航栏等，从而保证项目整体风格一致。

在一些示例性实施例中，该相关动态参数配置包括相关js函数库路径配置及页面包屑配置。

在一些示例性实施例中，根据不同业务需求定制前端Web界面组件，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，包括数据初始化及相关按钮功能初始化。

在一些示例性实施例中，该模板引擎包括：velocity、freemarker或beetl。

在一些示例性实施例中，该其他web框架包括：Spring MVC，SpringBoot，Struts，Servlet。

在一些示例性实施例中，该前端Web界面组件包括：Vant、AntDesign、AntDesignMobile、Bootstrap、Layui、ElementUI、semidesign、TaroUI、Vuetify、WeUI。

图2是根据本发明提供的基于模板引擎的页面项目开发方法、设备、计算机可读存储介质实施的业务流程示意图。

在本实施例中，本发明通过beetl模板引擎结合前端layui框架提出了一种新型页面项目开发架构，包括步骤：

S1、项目引入beetl引擎，并同SpringMVC进行集成；

S2、beetl基础资源配置，如classpath根路径，tag标签根路径，由于同spring进行整合，需配置beetl视图解析器，模板加载器类以spring为准，此处无需配置；

S3、通过WebRenderExt配置扩展属性全局变量，如静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息等；

S4、配置GroupTemplate，如自定义格式化函数，标签类，工具方法类等；

S5、定义项目基础模板，配置引用相关基础资源及路径，定义系统风格样式，包括页面标签、按钮、导航栏等，保证项目整体风格一致；

S6、根据不同请求跳转不同模板页面，引入根模板同步基础资源路径，并传入当前页面相关动态参数配置，包括相关js函数库路径及页面包屑配置等；

S7、根据不同业务需求定制layui模块，页面展示整体结构不同，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，包括数据初始化及相关按钮功能初始化等；

S8、前端代码采用了layui的JS框架，使用了按需加载的方式，采用layui的好处是自带了页面和组件还有JS的管理，能完成大多数业务需求。

通过上述开发架构，可以实现：

1.用户点击某个请求路径，发起一个HTTP request请求，该请求会被提交到DispatcherServlet(前置控制器)；

2.由DispatcherServlet(前置控制器)经过请求一个或多个HandlerMapping(处理器映射器)和HandlerAdapter(处理器适配器)匹配后，找到并执行相应的Handler(常称为Controller)，Handler执行完毕后会经过HandlerAdapter(处理器适配器)返回给DispatcherServlet(前置控制器)一个ModelAndView对象(Spring MVC的底层对象，包括Model数据模型和View视图信息)；

3.DispatcherServlet(前置控制器)接收到ModelAndView对象后，会请求ViewResolver(视图解析器)对视图进行解析，并根据View信息匹配到相应的视图结果，并返回给DispatcherServlet(前置控制器)；

4.DispatcherServlet(前置控制器)接收到具体的View视图后，请求根模板布局页面进行视图渲染，生成最终的View(视图)，视图负责将结果显示到浏览器(客户端)。

5.根模板布局页面根据传参配置当前请求页相关参数，包括相关js函数库路径及页面包屑配置等；

6.页面通过根模板配置的参数，通过index.js(函数入口)进行页面初始化，包括表单数据填充，按钮事件绑定及相关操作逻辑等，并按需加载其他功能模块。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其它数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其它存储器技术、CD-ROM、数字多功能盘(DVD)或其它光盘存储、磁盒、磁带、磁盘存储或其它磁存储器、或者可以用于存储期望的信息并且可以被计算机访问的任何其它的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其它传输机制之类的调制数据信号中的其它数据，并且可包括任何信息递送介质。

本文已经公开了示例实施例，并且虽然采用了具体术语，但它们仅用于并仅应当被解释为一般说明性含义，并且不用于限制的目的。在一些实例中，对本领域技术人员显而易见的是，除非另外明确指出，否则可单独使用与特定实施例相结合描述的特征、特性和/或元素，或可与其它实施例相结合描述的特征、特性和/或元件组合使用。因此，本领域技术人员将理解，在不脱离由所附的权利要求阐明的本公开的范围的情况下，可进行各种形式和细节上的改变。

Claims (14)

1.一种基于模板引擎的页面项目开发方法，所述方法包括以下步骤：

S1、将页面项目引入模板引擎，所述模板引擎与其他web框架进行集成；

S2、所述模板引擎进行基础资源配置，并在所述其他web框架中配置所述模板引擎的视图解析器，加载模板；

S3、所述模板引擎配置扩展属性全局变量；

S4、配置组模板；

S5、定义所述页面项目的基础模板，配置引用所述页面项目相关的基础资源及路径并定义所述页面项目的系统风格样式；

S6、跟据前台页面发送的不同请求跳转渲染不同模板的页面，引入根模板同步基础资源路径，并传入当前页面项目的相关动态参数配置；

S7、根据页面项目的不同业务需求定制前端Web界面组件，

S8、统一通过所述配置的动态参数为函数入口进行页面初始化，并按需加载所述页面项目的不同业务需求的功能模块。

2.根据权利要求1所述的页面项目开发方法，所述根模板为最底层的基础模板。

3.根据权利要求1所述的页面项目开发方法，其特征在于，所述基础资源包括classpath根路径，tag标签根路径。

4.根据权利要求1所述的页面项目开发方法，其特征在于，通过模板加载器进行模板加载，所述模板加载器支持所述其他web框架。

5.根据权利要求1所述的页面项目开发方法，其特征在于，所述扩展属性全局变量包括静态资源版本号，项目请求接口根路径，流程资源路径，流程接口根路径，当前操作用户相关信息。

6.根据权利要求1所述的页面项目开发方法，其特征在于，配置所述组模板包括自定义格式化函数，标签类，工具方法类。

7.根据权利要求1所述的页面项目开发方法，其特征在于，所述系统风格样式包括页面标签、按钮、导航栏等，从而保证项目整体风格一致。

8.根据权利要求1所述的页面项目开发方法，其特征在于，所述相关动态参数配置包括相关js函数库路径配置及页面包屑配置。

9.根据权利要求8所述的页面项目开发方法，其特征在于，根据不同业务需求定制前端Web界面组件，统一通过上述配置的js函数库内的index.js为入口进行页面初始化，包括数据初始化及相关按钮功能初始化。

10.根据权利要求1所述的页面项目开发方法，其特征在于，所述模板引擎包括：velocity、freemarker或beetl。

11.根据权利要求1所述的页面项目开发方法，其特征在于，所述其他web框架包括：Spring MVC，SpringBoot，Struts，Servlet。

12.根据权利要求1所述的页面项目开发方法，其特征在于，所述前端Web界面组件包括：Vant、AntDesign、AntDesign Mobile、Bootstrap、Layui、ElementUI、semidesign、TaroUI、Vuetify、WeUI。

13.一种电子设备，包括：

至少一个处理器；

存储器，所述存储器上存储有至少一个程序，当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现权利要求1-12任意一项所述的页面项目开发方法。

14.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述程序被处理器执行时实现权利要求1-12任意一项所述的页面项目开发方法。

Images