CN109697130A - web系统的前后端分离方法、装置、设备及存储介质 - Google Patents

web系统的前后端分离方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN109697130A
CN109697130A CN201710992817.5A CN201710992817A CN109697130A CN 109697130 A CN109697130 A CN 109697130A CN 201710992817 A CN201710992817 A CN 201710992817A CN 109697130 A CN109697130 A CN 109697130A
Authority
CN
China
Prior art keywords
file
web system
template
target web
view template
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710992817.5A
Other languages
English (en)
Inventor
陈金
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology Co Ltd
Original Assignee
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Kingsoft Cloud Network Technology Co Ltd, Beijing Kingsoft Cloud Technology Co Ltd filed Critical Beijing Kingsoft Cloud Network Technology Co Ltd
Priority to CN201710992817.5A priority Critical patent/CN109697130A/zh
Priority to PCT/CN2018/111217 priority patent/WO2019080796A1/zh
Publication of CN109697130A publication Critical patent/CN109697130A/zh
Pending legal-status Critical Current

Links

Classifications

    • 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/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/547—Remote procedure calls [RPC]; Web services
    • G06F9/548—Object oriented; Remote method invocation [RMI]
    • 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
    • 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/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00—Indexing scheme relating to G06F9/00
    • G06F2209/54—Indexing scheme relating to G06F9/54
    • G06F2209/541—Client-server

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明实施例提供了一种web系统的前后端分离方法、装置、设备及存储介质，方法包括：获得前后端耦合的目标web系统的视图模板，作为第一视图模板；对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件；根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件；获得目标web系统的请求接口描述文档，并基于请求接口描述文档获得预设前端框架的模型逻辑文件；在预设前端框架中添加第二视图模板对应页面的跳转路由；根据目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架。利用本发明实施例，能够降低前后端分离的成本。

Description

web系统的前后端分离方法、装置、设备及存储介质
技术领域
本发明涉及互联网技术领域，特别是涉及一种web系统的前后端分离方法、装置、电子设备及计算机可读存储介质。
背景技术
传统的互联网应用中存在大量前后端耦合的web系统。随着互联网技术的快速发展，目前出现了前后端分离的web系统，逐渐得到业界的广泛采用。前后端分离的web系统，其后端提供基于RESTful架构的数据接口，前端基于此接口展示页面，以此做到前后端的完全分离，其中，RESTful是指符合REST(Representational State Transfer，表现层状态转化)风格的一种流行的数据接口架构。由于这种前后端分离的web系统，其前端程序不依赖于后端程序，从而有利于程序的扩展维护，也可以便于前后端的开发人员互不依赖地进行并行开发，并且后端可以跨终端提供通用的服务。
目前，越来越多的企业和用户希望将原来的采用前后端耦合方式开发的web系统改造成上述的前后端分离的web系统，但是现有的前后端分离改造往往需要人工大量重写前端代码，费时费力，导致web系统前后端分离所需的成本较高。
发明内容
本发明实施例的目的在于提供一种web系统的前后端分离方法、装置、电子设备及计算机可读存储介质，以降低前后端分离的成本。具体技术方案如下：
为达到上述目的，本发明实施例公开了一种web系统的前后端分离方法，方法包括：
获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
对所述第一视图模板进行拆分，得到所述第一视图模板的样式文件、模板结构文件和交互逻辑文件；
以预设前端框架作为所述目标web系统前后端分离后的前端框架，根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，所述第二视图模板为：所述目标web系统前后端分离后前端框架的视图模板；
获得所述目标web系统的请求接口描述文档，并基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件；
在所述目标web系统前后端分离后的前端框架中添加所述第二视图模板对应页面的跳转路由；
根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
可选的，所述根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，包括：
将所述第一视图模板的样式文件确定为第二视图模板的样式文件；
将所述第一视图模板的模板结构文件转译为所述第二视图模板的模板结构文件；
获得基于所述预设前端框架的视图的逻辑模板文件，将所述逻辑模板文件插入至所述第一视图模板的交互逻辑文件，得到第二视图模板的交互逻辑文件。
可选的，所述基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件，包括：
将所述请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到所述目标web系统前后端分离后前端框架的模型逻辑文件。
可选的，所述根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架，包括：
从所述目标web系统的后端服务中删除页面跳转路由；
根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
可选的，所述预设前端框架包括：
模型视图控制器MVC框架，其中，所述MVC框架包括：脊椎Backbone框架。
为达到上述目的，本发明实施例公开了一种web系统的前后端分离装置，装置包括：
第一获得模块，用于获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
拆分模块，用于对所述第一视图模板进行拆分，得到所述第一视图模板的样式文件、模板结构文件和交互逻辑文件；
第二获得模块，用于以预设前端框架作为所述目标web系统前后端分离后的前端框架，根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，所述第二视图模板为：所述目标web系统前后端分离后前端框架的视图模板；
第三获得模块，用于获得所述目标web系统的请求接口描述文档，并基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件；
添加模块，用于在所述目标web系统前后端分离后的前端框架中添加所述第二视图模板对应页面的跳转路由；
第四获得模块，用于根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
可选的，所述第二获得模块，具体用于：
将所述第一视图模板的样式文件确定为第二视图模板的样式文件；
将所述第一视图模板的模板结构文件转译为所述第二视图模板的模板结构文件；
获得基于所述预设前端框架的视图的逻辑模板文件，将所述逻辑模板文件插入至所述第一视图模板的交互逻辑文件，得到第二视图模板的交互逻辑文件。
可选的，所述第三获得模块，具体用于：
将所述请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到所述目标web系统前后端分离后前端框架的模型逻辑文件。
可选的，所述第四获得模块，具体用于：
从所述目标web系统的后端服务中删除页面跳转路由；
根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
可选的，所述预设前端框架包括：
模型视图控制器MVC框架，其中，所述MVC框架包括：脊椎Backbone框架。
在本发明实施的又一方面，还提供了一种电子设备，包括存储器和处理器，其中，
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现上述任一所述的web系统的前后端分离方法步骤。
在本发明实施的又一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述任一所述的web系统的前后端分离方法。
在本发明实施的再一方面，本发明实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的web系统的前后端分离方法。
本发明实施例提供的web系统的前后端分离方法、装置、电子设备及计算机可读存储介质，在前后端分离过程中，以预设前端框架作为所述目标web系统前后端分离后的前端框架，对于预设前端框架的视图模板，组成该视图模板的样式文件、模板结构文件和交互逻辑文件可以基于对目标web系统中已有视图模板拆分得到的样式文件、模板结构文件和交互逻辑文件获得，预设前端框架的模型逻辑文件可以基于目标web系统中已有的请求接口描述文档获得，无需大量地全部人工重写前端代码，从而减轻web系统前后端分离的工作量，降低前后端分离的成本。
当然，实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的web系统的前后端分离方法的一种流程示意图；
图2为图1中的第二视图模板的样式文件、模板结构文件、交互逻辑文件和预设前端框架的模型逻辑文件的生成示意图；
图3为本发明实施例提供的web系统的前后端分离装置的一种结构示意图；
图4为本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
下面首先对本发明实施例提供的一种web系统的前后端分离方法进行详细说明。
需要说明的是，本发明实施例提供的一种web系统的前后端分离方法适用于互联网平台，比如鹰眼大数据平台，当然，其他可以应用该方法的数据平台也是合理可行的。
参见图1，图1为本发明实施例提供的web系统的前后端分离方法的一种流程示意图，包括如下步骤：
S101，获得前后端耦合的目标web系统的视图模板，作为第一视图模板。
具体的，后端语言主导的web系统(即前后端耦合的目标web系统)一般由后端开发人员编写，他们习惯直接利用后端语言编写页面视图，或基于后端模板引擎编写视图，这种方式会使得视图和后端环境强耦合在一起。例如，后端语言可以为JSP(Java ServerPages，Java服务器页面)、PHP(PHP:Hypertext Preprocessor，超文本预处理器)等等，后端模板引擎可以为Velocity(一个基于java的模板引擎)、Freemarker(一款模板引擎，即一种基于模板和要改变的数据，以用来生成输出文本如HTML(Hyper Text Markup Language，超级文本标记语言)网页、电子邮件、配置文件、源代码等的通用工具)、Smarty(一个使用PHP写出来的模板引擎)等等。其中，模板引擎，这里是指用于Web开发的模板引擎，是为了使用户界面与业务数据(内容)分离而产生的，它可以生成特定格式的文档，比如用于网站的模板引擎就会生成一个标准的html文档。其中，web系统的前端开发是页面呈现(用户界面的呈现)，后端开发是数据库操作和管理。前端通常指用户所看到的网页页面，包括控件布局、色调、字体、控件响应等等，后端就是网站的逻辑部分，主要涉及数据库、动态语言如PHP、ASP(Active Server Pages，动态服务器页面)、JSP等；前端负责web页面样式和数据的展现，后端则负责业务功能的实现。顾名思义，前端语言就是用来开发web前端所使用的编程语言，如JavaScript等等，后端是用来开发web后端所用到的编程语言，如上述的JSP、PHP等等。
针对前后端耦合的目标web系统，可以对该目标web系统进行拆分，从中得到视图模板，从而实现：获得前后端耦合的目标web系统的视图模板，作为第一视图模板。在实际应用中，可以将该目标web系统的视图模板，从利用后端语言(或后端模板语言)所写的代码文件中拆出来即可。其中，视图模板即页面模板，可理解为一种网页页面的框架，在视图模板中填充数据，即为浏览器显示的网页页面。比如，打开某一网站的主页，最终所显示的页面就是先加载该页面的视图模板后填充该网站主页的文字、图片、视频及广告等数据得到的。
当然，其他的前后端耦合的目标web系统的视图模板的获得方式，均属于本发明实施例的保护范围，在此不一一赘述。
S102，对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件。
具体的，为了规范前端代码的结构以及提高代码的可维护性，可以将页面的结构、样式和逻辑分开，做到关注点分离。在一种实现方式中，可以基于gulp(一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务)开发一个工具，该工具功能是以第一视图模板作为输入，将其中的页面样式、模板结构和交互逻辑代码自动分离开(拆分)来，并生成对应的代码文件，即样式文件、模板结构文件和交互逻辑文件，从而实现：对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件。其中，该第一视图模板的样式、模板结构和交互逻辑代码可以是基于HTML、CSS(CascadingStyle Sheets，层叠样式表)和JavaScript等语言编写的。
示例性的，类比于Word文档模板，视图模板的样式类似于Word文档模板中设置的文字字体、颜色、段落格式等样式，模板结构类似于Word文档模板的排版如分栏等等。另外，交互逻辑则规定了用户与该视图模板对应的页面之间是如何交互的，比如，用户点击浏览器页面中的某一按钮或链接，该页面中能弹出一个新窗口，就是基于该交互逻辑实现的，该逻辑能够规定这个新窗口如何弹出以及展示出来是什么样子的。
S103，以预设前端框架作为目标web系统前后端分离后的前端框架，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，第二视图模板为：目标web系统前后端分离后前端框架的视图模板。
具体的，预设前端框架可以包括：模型视图控制器MVC框架，其中，MVC框架包括：脊椎Backbone框架。采用Backbone作为目标web系统前后端分离后前端项目的基础框架，是因为其是一个相当简单灵活的JavaScript框架(压缩之后的大小约为7.5kb)，也是前端第一个被广泛使用的前端MVC框架，主要包括Model/Collection(模型层/集合)、视图层View、路由Router等结构。
其中，View层可以基于jQuery框架，操作DOM元素去填充视图模板。jQuery框架是一个快速、简洁的JavaScript框架，一些web系统的页面交互逻辑也可基于jQuery框架得到。和目前流行的MVVM(Model View View Model，模型-视图-视图-模型)类框架如Angular(一款优秀的前端JavaScript框架，有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等)、React(一种JavaScipt框架，也是一个用于构建组件化用户界面UI的库)、Vue(以数据驱动和组件化的思想构建的一个JavaScript MVVM库)等不同，在Backbone框架中还可以和传统方式一样直接操作DOM(Document Object Mode，文档对象模型)元素，因而大大降低系统改造成本。
具体的，在一种实现方式中，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，可以将第一视图模板的样式文件确定为第二视图模板的样式文件；将第一视图模板的模板结构文件转译为第二视图模板的模板结构文件；获得基于预设前端框架的View视图的逻辑模板文件，将第一视图模板的交互逻辑文件插入至逻辑模板文件，得到第二视图模板的交互逻辑文件。
以Backbone框架作为目标web系统前后端分离后的前端框架为例，可以将拆分得到的第一视图模板的样式文件直接作为Backbone框架的视图模板的样式文件来使用。保持视图模板的样式不变，这样用户在使用浏览器浏览网站的页面时，可以保持原有的操作习惯，对网站而言则可不提高用户使用成本。
其次，第一视图模板的模板结构文件还包括由后端(模板)语言所编写的展示逻辑(属于View层)，由于这些展示逻辑一般只涉及简单的控制(控制页面最终展示出来是什么样子的，包括顺序、分支、循环控制等等)，故可通过对该结构文件中代码的静态分析，将第一视图模板的模板结构文件转译为Backbone框架的视图模板的结构文件。第一视图模板的模板结构代码是采用后端语言编写的，转译的目的为：使得Backbone框架的视图模板的结构代码是基于前端语言(如JavaScript)的，因而其他可以实现该目的的转译方法也是合理可行的，且均落在本发明实施例的保护范围之内。
最后，可以根据所选的目标web系统前后端分离后的前端框架的特点，将一些每个视图都需要的逻辑写成模板，作为预设前端框架的视图的逻辑模板文件。以Backbone作为前端框架为例，根据Backbone的特点，将每个视图都要用到的一些逻辑(如Backbone中的初始化initialize和渲染render方法逻辑)写成模板，从而获得Backbone的视图的逻辑模板文件。在获得基于Backbone的视图的逻辑模板文件后，将该逻辑模板文件插入从第一视图模板拆分出的交互逻辑文件中，即可得到第二视图模板的交互逻辑文件，这样做还能够减少人工书写代码的工作量。
需要说明的是，本申请仅仅以上述为例进行说明，实际应用中第二视图模板的样式文件、模板结构文件和交互逻辑文件的获得方式并不限于此。
S104，获得目标web系统的请求接口描述文档，并基于请求接口描述文档获得目标web系统前后端分离后前端框架的模型逻辑文件。
具体的，在一种实现方式中，可以将请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到目标web系统前后端分离后前端框架的模型逻辑文件。
其中，在项目开发中，需要由前后端工程师共同定义数据接口，编写请求接口描述文档，之后大家都根据这个请求接口描述文档进行开发，同时一直维护该请求接口描述文档。因而，对于目标web系统来说，可以人为直接去获得开发该系统项目时所编写的请求接口描述文档即可。
基于目标web系统前后端分离后的前端框架，可以人为编写该前端框架的Model模型模板，作为预设的前端框架的模型模板。然后将获得的目标web系统的请求接口描述文档中所包含的前后端数据接口的描述信息，填充到该模型模板中，即可得到目标web系统前后端分离后前端框架的模型逻辑文件，该模型逻辑文件包含有向后端发起数据请求的代码逻辑。
以Backbone前端框架为例，Backbone的Model/Collection层可以提供数据模型，在web应用中主要用于封装后端数据的增删改查(CRUD，Create Retrieve Update Delete)网络请求接口。在实际应用中，可以基于该目标web系统的请求接口描述文档(其所属的种类例如可以为API Blueprint Spec和Swagger Spec等等)，生成Model/Collection层的模型逻辑。其中，API Blueprint是一套基于markdown(一种可以使用普通文本编辑器编写的标记语言)的API(Application Programming Interface，应用程序编程接口)描述语言规范，Swagger是一个简单又强大的能为具有Restful风格的API生成文档的工具，Spec中文意为说明书。
S105，在目标web系统前后端分离后的前端框架中添加第二视图模板对应页面的跳转路由。
具体的，可以利用现有技术实现：添加第二视图模板对应页面的跳转路由，比如通过编写代码等方式，实现后端路由的多页面应用向前端路由的单页面应用的改造。以目标web系统前后端分离后的前端框架为Backbone为例，原先系统的后端控制的页面的跳转路由可以被去掉，改为前端通过Backbone的Router实现页面路由。
S106，根据目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。
上述后端服务可以理解为web系统的后端能够提供的服务。
具体的，在一种实现方式中，可以从目标web系统的后端服务中删除页面跳转路由；根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。在实际应用中，可以改造目标web系统后端服务的控制层，删除该控制层中的页面跳转路由，这样该控制层就只剩下提供数据接口的功能，从而可以获得仅以预设数据接口提供服务的后端框架，其中，预设数据接口可以根据应用环境自行定义。
示例性的，图2为图1中的第二视图模板的样式文件、模板结构文件、交互逻辑文件和预设前端框架的模型逻辑文件的生成示意图。如图2所示，对后端视图模板进行拆分，得到样式、后端模板结构和交互逻辑，对应于S102步骤：对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件，其中，后端视图模板即为第一视图模板，样式即为第一模板的样式文件，后端模板结构即为模板结构文件，交互逻辑即为交互逻辑文件。
图2的页面样式是指第二视图模板的样式文件，样式、页面样式和位于两者间的直线，表示将第一视图模板的样式文件直接确定为第二视图模板的样式文件。将后端模板结构转译为前端模板，则对应于前述将第一视图模板的模板结构文件转译为第二视图模板的模板结构文件的步骤，其中，前端模板即为第二视图模板的模板结构文件。
对于交互逻辑，插入框架View视图模板，得到前端视图逻辑，则对应于：将第一视图模板的交互逻辑文件插入至预设前端框架的View视图的逻辑模板文件，得到第二视图模板的交互逻辑文件，其中，框架视图模板即为预设前端框架的View视图的逻辑模板文件，前端视图逻辑即为第二视图模板的交互逻辑文件。
对于请求描述文档，填充框架Model模型模板，得到前端模型逻辑，则对应于：将请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到目标web系统前后端分离后前端框架的模型逻辑文件。其中，请求描述文档即为请求接口描述文档，框架模型模板即为预设前端框架的模型模板，前端模型逻辑即为目标web系统前后端分离后前端框架的模型逻辑文件。
可见，在前后端分离过程中，以预设前端框架作为目标web系统前后端分离后的前端框架，对于预设前端框架的视图模板，组成该视图模板的样式文件、模板结构文件和交互逻辑文件可以基于对目标web系统中已有视图模板拆分得到的样式文件、模板结构文件和交互逻辑文件获得，预设前端框架的模型逻辑文件可以基于目标web系统中已有的请求接口描述文档获得，无需大量地全部人工重写前端代码，从而减轻web系统前后端分离的工作量，降低前后端分离的成本。
参见图3，图3为本发明实施例提供的web系统的前后端分离装置的一种结构示意图，与图1所示的流程相对应，该装置可以包括：第一获得模块301、拆分模块302、第二获得模块303、第三获得模块304、添加模块305和第四获得模块306。
第一获得模块301，用于获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
拆分模块302，用于对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件；
第二获得模块303，用于以预设前端框架作为目标web系统前后端分离后的前端框架，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，第二视图模板为：目标web系统前后端分离后前端框架的视图模板；
第三获得模块304，用于获得目标web系统的请求接口描述文档，并基于请求接口描述文档获得目标web系统前后端分离后前端框架的模型逻辑文件；
添加模块305，用于在目标web系统前后端分离后的前端框架中添加第二视图模板对应页面的跳转路由；
第四获得模块306，用于根据目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。
具体的，第二获得模块303，具体用于：
将第一视图模板的样式文件确定为第二视图模板的样式文件；
将第一视图模板的模板结构文件转译为第二视图模板的模板结构文件；
获得基于预设前端框架的视图的逻辑模板文件，将第一视图模板的交互逻辑文件插入至逻辑模板文件，得到第二视图模板的交互逻辑文件。
具体的，第三获得模块304，具体用于：
将请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到目标web系统前后端分离后前端框架的模型逻辑文件。
具体的，第四获得模块306，具体用于：
从目标web系统的后端服务中删除页面跳转路由；
根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。
具体的，预设前端框架包括：
模型视图控制器MVC框架，其中，MVC框架包括：脊椎Backbone框架。
可见，在前后端分离过程中，以预设前端框架作为目标web系统前后端分离后的前端框架，对于目标web系统前后端分离后前端框架的视图模板，组成该视图模板的样式文件、模板结构文件和交互逻辑文件可以基于拆分目标web系统的已有视图模板所得到的样式文件、模板结构文件和交互逻辑文件获得，目标web系统前后端分离后前端框架的模型逻辑文件可以基于目标web系统中已有的请求接口描述文档获得，无需大量地全部人工重写前端代码，从而减轻web系统前后端分离的工作量，降低前后端分离的成本。
本发明实施例还提供了一种电子设备，如图4所示，包括存储器401和处理器402，其中，
存储器401，用于存放计算机程序；
处理器402，用于执行存储器401上所存放的程序时，实现本申请实施例提供的web系统的前后端分离方法。
具体的，上述web系统的前后端分离方法，包括：
获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件；
以预设前端框架作为目标web系统前后端分离后的前端框架，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，第二视图模板为：目标web系统前后端分离后前端框架的视图模板；
获得目标web系统的请求接口描述文档，并基于请求接口描述文档获得目标web系统前后端分离后前端框架的模型逻辑文件；
在目标web系统前后端分离后的前端框架中添加第二视图模板对应页面的跳转路由；
根据目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。
需要说明的是，处理器402通过执行存储器401上存放的程序而实现的web系统的前后端分离方法的其他实施例，与前述方法实施例部分涉及的各个实施例相同，这里不再赘述。
上述的处理器402，通信接口，存储器401通过通信总线完成相互间的通信，此处提到的通信总线可以是外设部件互连标准(Peripheral Component Interconnect，PCI)总线或扩展工业标准结构(Extended Industry Standard Architecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。
存储器401可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器401还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器402可以是通用处理器，包括中央处理器(Central ProcessingUnit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(DigitalSignal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
可见本实施例提供的电子设备在对前后端耦合的web系统进行前后端分离过程中，以预设前端框架作为目标web系统前后端分离后的前端框架，对于目标web系统前后端分离后前端框架的视图模板，组成该视图模板的样式文件、模板结构文件和交互逻辑文件可以基于拆分目标web系统的已有视图模板所得到的样式文件、模板结构文件和交互逻辑文件获得，目标web系统前后端分离后前端框架的模型逻辑文件可以基于目标web系统中已有的请求接口描述文档获得，无需大量地全部人工重写前端代码，从而减轻web系统前后端分离的工作量，降低前后端分离的成本。
在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的web系统的前后端分离方法。
在本发明提供的再一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的web系统的前后端分离方法。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、计算机可读存储介质及包含指令的计算机程序产品实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (12)

1.一种web系统的前后端分离方法，其特征在于，所述方法包括：
获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
对所述第一视图模板进行拆分，得到所述第一视图模板的样式文件、模板结构文件和交互逻辑文件；
以预设前端框架作为所述目标web系统前后端分离后的前端框架，根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，所述第二视图模板为：所述目标web系统前后端分离后前端框架的视图模板；
获得所述目标web系统的请求接口描述文档，并基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件；
在所述目标web系统前后端分离后的前端框架中添加所述第二视图模板对应页面的跳转路由；
根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
2.根据权利要求1所述的方法，其特征在于，所述根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，包括：
将所述第一视图模板的样式文件确定为第二视图模板的样式文件；
将所述第一视图模板的模板结构文件转译为所述第二视图模板的模板结构文件；
获得基于所述预设前端框架的视图的逻辑模板文件，将所述逻辑模板文件插入至所述第一视图模板的交互逻辑文件，得到第二视图模板的交互逻辑文件。
3.根据权利要求1所述的方法，其特征在于，所述基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件，包括：
将所述请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到所述目标web系统前后端分离后前端框架的模型逻辑文件。
4.根据权利要求1-3中任一项所述的方法，其特征在于，所述根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架，包括：
从所述目标web系统的后端服务中删除页面跳转路由；
根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
5.根据权利要求4所述的方法，其特征在于，所述预设前端框架包括：
模型视图控制器MVC框架，其中，所述MVC框架包括：脊椎Backbone框架。
6.一种web系统的前后端分离装置，其特征在于，所述装置包括：
第一获得模块，用于获得前后端耦合的目标web系统的视图模板，作为第一视图模板；
拆分模块，用于对所述第一视图模板进行拆分，得到所述第一视图模板的样式文件、模板结构文件和交互逻辑文件；
第二获得模块，用于以预设前端框架作为所述目标web系统前后端分离后的前端框架，根据所述第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，其中，所述第二视图模板为：所述目标web系统前后端分离后前端框架的视图模板；
第三获得模块，用于获得所述目标web系统的请求接口描述文档，并基于所述请求接口描述文档获得所述目标web系统前后端分离后前端框架的模型逻辑文件；
添加模块，用于在所述目标web系统前后端分离后的前端框架中添加所述第二视图模板对应页面的跳转路由；
第四获得模块，用于根据所述目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
7.根据权利要求6所述的装置，其特征在于，所述第二获得模块，具体用于：
将所述第一视图模板的样式文件确定为第二视图模板的样式文件；
将所述第一视图模板的模板结构文件转译为所述第二视图模板的模板结构文件；
获得基于所述预设前端框架的视图的逻辑模板文件，将所述逻辑模板文件插入至所述第一视图模板的交互逻辑文件，得到第二视图模板的交互逻辑文件。
8.根据权利要求6所述的装置，其特征在于，所述第三获得模块，具体用于：
将所述请求接口描述文档包含的信息，填充到预设的前端框架的模型模板中，得到所述目标web系统前后端分离后前端框架的模型逻辑文件。
9.根据权利要求6-8中任一项所述的装置，其特征在于，所述第四获得模块，具体用于：
从所述目标web系统的后端服务中删除页面跳转路由；
根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为所述目标web系统前后端分离后的后端框架。
10.根据权利要求9所述的装置，其特征在于，所述预设前端框架包括：
模型视图控制器MVC框架，其中，所述MVC框架包括：脊椎Backbone框架。
11.一种电子设备，其特征在于，包括存储器和处理器，其中，
所述存储器，用于存放计算机程序；
所述处理器，用于执行所述存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-5任一所述的方法步骤。
CN201710992817.5A 2017-10-23 2017-10-23 web系统的前后端分离方法、装置、设备及存储介质 Pending CN109697130A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201710992817.5A CN109697130A (zh) 2017-10-23 2017-10-23 web系统的前后端分离方法、装置、设备及存储介质
PCT/CN2018/111217 WO2019080796A1 (zh) 2017-10-23 2018-10-22 web系统的前后端分离方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710992817.5A CN109697130A (zh) 2017-10-23 2017-10-23 web系统的前后端分离方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN109697130A true CN109697130A (zh) 2019-04-30

Family

ID=66225834

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710992817.5A Pending CN109697130A (zh) 2017-10-23 2017-10-23 web系统的前后端分离方法、装置、设备及存储介质

Country Status (2)

Country Link
CN (1) CN109697130A (zh)
WO (1) WO2019080796A1 (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111381921A (zh) * 2020-03-04 2020-07-07 北京东方金信科技有限公司 一种基于Ambari的前后端分离系统和方法
CN111796878A (zh) * 2020-06-05 2020-10-20 北京沃东天骏信息技术有限公司 一种应用于单页应用的资源拆分、加载方法和装置
CN111949903A (zh) * 2020-08-28 2020-11-17 杭州安恒信息技术股份有限公司 一种网页数据采集方法、装置、设备及可读存储介质
CN112445871A (zh) * 2020-11-13 2021-03-05 航天精一(广东)信息科技有限公司 一种基于数据模型的数据可视化方法及系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN113050946A (zh) * 2021-04-29 2021-06-29 成都新希望金融信息有限公司 生成网站应用系统的方法、装置、电子设备及存储介质
CN113721890A (zh) * 2021-08-09 2021-11-30 太逗科技集团有限公司 根据表结构生成前端vue代码和后端php代码的方法和装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7487261B1 (en) * 2002-02-22 2009-02-03 Digital River, Inc. Delta caching service
CN102184266A (zh) * 2011-06-27 2011-09-14 武汉大学 一种页面与数据分离的动态wap网站自动生成方法
CN106020823A (zh) * 2016-05-19 2016-10-12 浪潮电子信息产业股份有限公司 一种前端Web表现与数据分离以及页面快速响应的方式
CN107273528A (zh) * 2017-06-28 2017-10-20 努比亚技术有限公司 一种前后端分离方法、移动终端以及计算机可读存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150067475A1 (en) * 2013-08-30 2015-03-05 Wal-Mart Stores, Inc. Web Application Framework
CN106775751A (zh) * 2016-12-30 2017-05-31 深圳中顺易金融服务有限公司 一种web前端框架系统及架构方法
CN107194005A (zh) * 2017-06-19 2017-09-22 福建中金在线信息科技有限公司 一种web前端页面及其生成方法、页面加载方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7487261B1 (en) * 2002-02-22 2009-02-03 Digital River, Inc. Delta caching service
CN102184266A (zh) * 2011-06-27 2011-09-14 武汉大学 一种页面与数据分离的动态wap网站自动生成方法
CN106020823A (zh) * 2016-05-19 2016-10-12 浪潮电子信息产业股份有限公司 一种前端Web表现与数据分离以及页面快速响应的方式
CN107273528A (zh) * 2017-06-28 2017-10-20 努比亚技术有限公司 一种前后端分离方法、移动终端以及计算机可读存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
LIXIANG: "公司前端开发架构改造", 《思否》 *
张良杰: "《电子商务技术 2》", 31 August 2004 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111381921A (zh) * 2020-03-04 2020-07-07 北京东方金信科技有限公司 一种基于Ambari的前后端分离系统和方法
CN111796878A (zh) * 2020-06-05 2020-10-20 北京沃东天骏信息技术有限公司 一种应用于单页应用的资源拆分、加载方法和装置
CN111796878B (zh) * 2020-06-05 2024-04-12 北京沃东天骏信息技术有限公司 一种应用于单页应用的资源拆分、加载方法和装置
CN111949903A (zh) * 2020-08-28 2020-11-17 杭州安恒信息技术股份有限公司 一种网页数据采集方法、装置、设备及可读存储介质
CN111949903B (zh) * 2020-08-28 2024-03-08 杭州安恒信息技术股份有限公司 一种网页数据采集方法、装置、设备及可读存储介质
CN112445871A (zh) * 2020-11-13 2021-03-05 航天精一(广东)信息科技有限公司 一种基于数据模型的数据可视化方法及系统
CN112463324A (zh) * 2020-11-25 2021-03-09 银盛支付服务股份有限公司 一种实现前端和后端分离的方法、计算机设备及存储介质
CN113050946A (zh) * 2021-04-29 2021-06-29 成都新希望金融信息有限公司 生成网站应用系统的方法、装置、电子设备及存储介质
CN113721890A (zh) * 2021-08-09 2021-11-30 太逗科技集团有限公司 根据表结构生成前端vue代码和后端php代码的方法和装置

Also Published As

Publication number Publication date
WO2019080796A1 (zh) 2019-05-02

Similar Documents

Publication Publication Date Title
CN109697130A (zh) web系统的前后端分离方法、装置、设备及存储介质
Hartmann et al. Programming by a sample: rapidly creating web applications with d. mix
Boduch React and react native
CN101263471B (zh) 用于客户机脚本网页的初始服务器侧内容呈现
JP4382326B2 (ja) ウェブ・ドキュメントを再編集して再配布する方法及び装置
US8176417B2 (en) Constructing and maintaining web sites
CN101714133A (zh) 一种基于web的数学公式编辑系统及方法
CN103136317A (zh) 工程管理系统工程合同在线审批信息化实现方法
CN108268262A (zh) 实现将html转换为微信小程序的方法、装置及系统
CN112100550A (zh) 一种页面构建方法和装置
CN102053987B (zh) 用于显示和修改数据数组的统一接口
CN111813403A (zh) 大屏数据可视化开发中拖拽组件数据管理的方法和装置
CN108268260A (zh) 一种基于一体化支撑技术的快速微应用组装方法
JP2000067038A (ja) ホームページ作成装置
CN102915371A (zh) 在网页中动态引用文件的方法
CN101876998B (zh) 一种实现数据编辑的方法和系统
Bayer et al. Design and development of a web-based EPANET model catalogue and execution environment
CN109558123A (zh) 网页转化电子书的方法、电子设备、存储介质
KR20020006722A (ko) 웹페이지 재구성 방법 및 이를 이용한 웹페이지 제공방법
KR101730070B1 (ko) ＳａａＳ 환경에서의 웹페이지 서비스 방법, 이를 위한 컴퓨터 프로그램, 그 기록매체
WO2010087071A1 (ja) ウェブサーバシステム及びプログラム
Radford Learning Web Development with Bootstrap and AngularJS
EP2810194B1 (en) A method for tracking user interaction with a web page
Jermaniš Development of MESOC Toolkit Web Application in React
CN113485714B (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20190430

RJ01 Rejection of invention patent application after publication