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

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

Info

Publication number
WO2019080796A1
WO2019080796A1 PCT/CN2018/111217 CN2018111217W WO2019080796A1 WO 2019080796 A1 WO2019080796 A1 WO 2019080796A1 CN 2018111217 W CN2018111217 W CN 2018111217W WO 2019080796 A1 WO2019080796 A1 WO 2019080796A1
Authority
WO
WIPO (PCT)
Prior art keywords
file
template
web system
framework
target web
Prior art date
Application number
PCT/CN2018/111217
Other languages
English (en)
French (fr)
Inventor
陈金
Original Assignee
北京金山云网络技术有限公司
北京金山云科技有限公司
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 北京金山云网络技术有限公司, 北京金山云科技有限公司 filed Critical 北京金山云网络技术有限公司
Publication of WO2019080796A1 publication Critical patent/WO2019080796A1/zh

Links

Images

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

Definitions

  • the present application relates to the field of Internet technologies, and in particular, to a method and device for separating front and rear ends of a web system, an electronic device, and a computer readable storage medium.
  • a front-end and back-end web system which provides a data interface based on a RESTful (Representational State Transfer) architecture.
  • the front end displays the page based on the interface, thereby completely separating the front and back ends, wherein RESTful means conforming A popular data interface architecture in REST style.
  • the front-end program does not depend on the back-end program, which is beneficial to the extended maintenance of the program, and can also facilitate the parallel development of the front-end developers without relying on each other, and the back-end can be provided across terminals.
  • the present application provides a method, an apparatus, an electronic device and a computer readable storage medium for separating the front and rear ends of a web system to reduce the cost of separating the front and rear ends.
  • the technical solutions are as follows:
  • the embodiment of the present application discloses a method for separating a front-end end of a web system, the method comprising: obtaining a view template of a target web system coupled to the front-end end, as a first view template; performing the first view template Splitting, obtaining a style file, a template structure file, and an interaction logic file of the first view template; and adopting a preset front end frame as a front end frame separated from the front and rear ends of the target web system, according to the style of the first view template a file, a template structure file, and an interaction logic file, obtain a style file, a template structure file, and an interaction logic file of the second view template, wherein the second view template is: a view of the front end frame separated by the front and rear ends of the target web system a template; obtaining a request interface description document of the target web system, and obtaining a model logic file of the front-end framework separated by the target web system based on the request interface description document; and separating the front
  • the obtaining a style file, a template structure file, and an interaction logic file of the second view template according to the style file, the template structure file, and the interaction logic file of the first view template including: Forming a style file of the first view template as a style file of the second view template; translating the template structure file of the first view template into a template structure file of the second view template; obtaining a preset front end frame based on The logical template file of the view is inserted into the interaction logic file of the first view template to obtain an interaction logic file of the second view template.
  • the obtaining, according to the request interface description document, the model logic file of the front-end framework separated by the front-end end of the target web system comprising: filling the information included in the request interface description document into the In the model template of the preset front-end framework, a model logic file of the front-end framework separated by the front-end end of the target web system is obtained.
  • the method includes: deleting a page jump route from a backend service of the target web system; obtaining a backend framework that provides a service only by using a preset data interface manner, according to the backend service of deleting the page jump route, as the target web
  • the back end frame after the front and rear ends of the system are separated.
  • the preset front end frame includes: a model view controller MVC frame, wherein the MVC frame includes: a spine Backbone frame.
  • the embodiment of the present application discloses a front-end and end-end separation device of a web system, and the device includes: a first obtaining module, configured to obtain a view template of a target web system coupled to the front and rear ends, as a first view template; a sub-module, configured to split the first view template to obtain a style file, a template structure file, and an interaction logic file of the first view template; and a second obtaining module configured to use the preset front-end frame as the a front-end framework separated from the front-end end of the target web system, according to the style file, the template structure file, and the interaction logic file of the first view template, obtaining a style file, a template structure file, and an interaction logic file of the second view template, where
  • the second view template is: a view template of the front-end frame separated by the front-end end of the target web system; a third obtaining module, configured to obtain a request interface description document of the target web system, and obtain the document based on the
  • the second obtaining module is configured to: determine a style file of the first view template as a style file of the second view template; and translate the template structure file of the first view template into a template structure file of the second view template; obtaining a logical template file based on the view of the preset front-end framework, inserting the logical template file into an interaction logic file of the first view template, to obtain the second Interactive logic file for view templates.
  • the third obtaining module is configured to: fill information included in the request interface description document into a model template of the preset front-end framework, to obtain separation of front and rear ends of the target web system. Model logical file for the front front frame.
  • the fourth obtaining module is configured to: delete a page jump route from a backend service of the target web system; and obtain a preset by the backend service of deleting the page jump route
  • the data interface mode provides a backend framework for the service, and serves as a backend framework separated from the front and back ends of the target web system.
  • the preset front end frame includes: a model view controller MVC frame, wherein the MVC frame includes: a spine Backbone frame.
  • an electronic device including a memory and a processor, wherein the memory is configured to store a computer program; and the processor is configured to execute the program stored on the memory to implement the foregoing A method step of separating the front and back ends of the web system.
  • a computer readable storage medium stores instructions that, when run on a computer, cause the computer to execute any of the webs described above The method of separating the front and rear ends of the system.
  • an embodiment of the present application further provides a computer program product comprising instructions, when executed on a computer, causing a computer to perform a front-end separation method of any one of the above-mentioned web systems.
  • the method and device for separating the front and rear ends of the web system provided by the embodiments of the present application, and the electronic device and the computer readable storage medium, in the process of separating the front and rear ends, use the preset front end frame as the front and rear ends of the target web system.
  • the separated front-end frame, for the view template of the preset front-end frame, the style file, the template structure file, and the interactive logic file that constitute the view template may be based on the style file and template obtained by splitting the existing view template in the target web system.
  • the structure file and the interactive logic file are obtained.
  • the model logic file of the preset front-end framework can be obtained based on the existing request interface description document in the target web system, and the front-end code is not required to be manually rewritten in a large amount, thereby alleviating the separation of the front and back ends of the web system. Quantity, reducing the cost of separation of the front and rear ends.
  • FIG. 1 is a schematic flowchart of a method for separating front and rear ends of a web system according to an embodiment of the present disclosure
  • FIG. 2 is a schematic diagram of generating a pattern file, a template structure file, an interaction logic file, and a model logic file of a preset front-end framework of the second view template in FIG. 1;
  • FIG. 3 is a schematic structural diagram of a device for separating front and rear ends of a web system according to an embodiment of the present disclosure
  • FIG. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
  • the method for separating the front-end end of the web system provided by the embodiment of the present application is applicable to an Internet platform, such as the Hawkeye Big Data platform.
  • an Internet platform such as the Hawkeye Big Data platform.
  • other data platforms that can apply the method are also reasonable and feasible.
  • FIG. 1 is a schematic flowchart of a method for separating front and rear ends of a web system according to an embodiment of the present disclosure, which may include the following steps:
  • the back-end language-oriented web system (that is, the target web system coupled to the front-end and the end) is generally written by the back-end developer, and the back-end developer is accustomed to directly writing the page view using the back-end language or writing the view based on the back-end template engine.
  • This approach will strongly couple the view to the backend environment.
  • the backend language can be JSP (Java Server Pages, Java Server Pages), PHP (PHP: Hypertext Preprocessor, Hypertext Preprocessor), etc.
  • the backend template engine can be Velocity (rate, a java-based template engine).
  • Freemarker free markup, a template engine, a template-based and data to be changed, used to generate output text such as HTML (Hyper Text Markup Language) web pages, emails, configuration files, General tools such as source code), Smarty (a template engine written in PHP), and so on.
  • the template engine here refers to the template engine for web development, is generated to separate the user interface from the business data (ie content), it can generate documents in a specific format, for example, the template engine for the website A standard HTML document will be generated.
  • the front-end development of the web system is page rendering (ie, the presentation of the user interface), and the back-end development is the operation and management of the database.
  • the front end usually refers to the web page that the user sees, including the control layout, color tone, font, control response, etc.
  • the back end is the logical part of the website, mainly related to the database, dynamic language, such as PHP, ASP (Active Server Pages, dynamic Server page), JSP, etc.; the front end is responsible for the presentation of web page styles and data, and the back end is responsible for the implementation of business functions.
  • the front-end language is used to develop the programming language used by the web front end, such as JavaScript (Java script, a literal translation scripting language), etc.
  • the back end is used to develop the programming language used by the web backend, as described above. JSP, PHP, and more.
  • the target web system can be split and the view template can be obtained, thereby obtaining a view template of the target web system coupled with the front and rear ends, as the first view template.
  • the view template of the target web system can be removed from the code file written by the backend language (or the backend template language).
  • the view template that is, the page template, can be understood as a frame of a web page, and the data is filled in the view template, that is, the web page displayed by the browser.
  • the final displayed page is obtained by loading the view template of the page and populating the text, image, video and advertisement of the website homepage.
  • a tool can be developed based on gulp (General Utility Lattice Program, an automated build tool that developers can use to automate common tasks during project development).
  • the tool is based on the first view template.
  • the page style, the template structure and the interaction logic code in the first view template are automatically separated (split), and the corresponding code files, namely the style file, the template structure file and the interactive logic file, are generated, thereby implementing:
  • the first view template is split to obtain a style file, a template structure file, and an interactive logic file of the first view template.
  • the style, template structure and interaction logic code of the first view template may be written in languages such as HTML, CSS (Cascading Style Sheets) and JavaScript.
  • the style of the view template is similar to the style of text font, color, paragraph format set in the Word document template
  • the template structure is similar to the Word document template Typesetting, for example, columning and so on.
  • the interaction logic specifies how the user interacts with the page corresponding to the view template. For example, if the user clicks a button or a link in the browser page, a new window can be popped up in the page, based on the interaction. Logically implemented, the interaction logic can specify how this new window pops up and shows style.
  • the preset front-end framework is used as a front-end frame separated by the front-end end of the target web system, and the style file, the template structure file, and the interaction of the second view template are obtained according to the style file, the template structure file, and the interaction logic file of the first view template. Logical file.
  • the second view template is: a view template of the front end frame separated by the front and rear ends of the target web system.
  • the preset front-end framework may include: a Model View Controller (MVC) framework, wherein the MVC framework includes: a Backbone framework.
  • MVC Model View Controller
  • Backbone is used as the basic framework for the front-end and front-end projects of the target web system. Because Backbone is a fairly simple and flexible JavaScript framework (about 7.5kb after compression), it is also the first front-end MVC framework that is widely used. It mainly includes structures such as Model/Collection, View layer, and Router.
  • the view layer can be based on the jQuery (very fast) framework, operating the Document Object Model (DOM) elements to fill the view template.
  • the jQuery framework is a fast, concise JavaScript framework, and some web system page interaction logic can also be derived from the jQuery framework.
  • MVVM Model View View Model
  • Angular an excellent front-end JavaScript framework, has many features, the most core is: MVC, modular, automated two-way data binding Fixed, semantic tags, dependency injection, etc.), React (a JavaScipt framework, also a library for building componentized user interface UIs, User's Interface), Vue (data driven and componentized)
  • the JavaScript MVVM library built by the idea is different.
  • the DOM (Document Object Model) element can be directly manipulated in the same way as the traditional method, thereby reducing the cost of system transformation.
  • the style file, the template structure file, and the interaction logic file of the second view template are obtained according to the style file, the template structure file, and the interaction logic file of the first view template, and the style file of the first view template may be obtained.
  • the logical file is inserted into the logical template file to obtain an interactive logical file of the second view template.
  • the style file of the first view template obtained by splitting can be directly used as the style file of the view template of the Backbone framework. Keep the style of the view template unchanged, so that users can maintain the original operating habits when browsing the pages of the website using the browser, and will not increase the user's use cost for the website.
  • the template structure file of the first view template also includes presentation logic (belonging to the view layer) written by the backend (ie template) language, since these presentation logic generally only involves simple control (controls the style of the final display of the page, including Sequence, branch, loop control, etc.), so the template structure file of the first view template can be translated into the structure file of the view template of the Backbone framework by static analysis of the code in the structure file.
  • the template structure code of the first view template is written in the backend language.
  • the purpose of the translation is to make the structure code of the view template of the Backbone framework based on the front-end language (such as JavaScript), so other translation methods that can achieve the purpose are also It is reasonably practicable and falls within the protection scope of the embodiments of the present application.
  • some of the logic required for each view can be written as a template, as a logical template file of the view of the preset front-end framework.
  • some logic used in each view (such as initialization and initialization method in Backbone) is written as a template to obtain a view of Backbone.
  • Logical template file After the logical template file of the Backbone-based view is obtained, the logical template file is inserted into the interaction logic file split from the first view template, and the interactive logic file of the second view template is obtained, thereby reducing manual work. The amount of work to write the code.
  • the information contained in the request interface description document may be filled into a model template of the preset front-end framework to obtain a model logical file of the front-end framework separated by the front-end end of the target web system.
  • the front-end engineers need to jointly define the data interface and write the request interface description document. After that, the front-end engineers can develop according to the request interface description document, and maintain the request interface description document at the same time. Therefore, for the target web system, you can directly obtain the request interface description document written when developing the system project.
  • the Model template of the front-end framework can be artificially written as a model template of the preset front-end framework. Then, the description information of the front-end data interface included in the request interface description document of the obtained target web system may be filled into the model template, and the model logical file of the front-end framework separated by the front-end end of the target web system may be obtained.
  • the model logic file contains code logic that initiates a data request to the back end.
  • Backbone's Model/Collection layer can provide a data model.
  • it is mainly used to encapsulate CRUD (Create Retrieve Update Delete) network request interface.
  • the document may be described based on the request interface of the target web system (the type to which it belongs may be, for example, an API Blueprint Spec (Application Programming Interface Blueprint Spec), a Swagger Spec, etc.), and a Model is generated.
  • Model logic for the /Collection layer is a set of API description language specification based on markdown (a markup language that can be written in a plain text editor).
  • Swagger is a simple and powerful one that can have Restful (Representational State Transfer).
  • the style API generates documentation tools, Spec Chinese means instructions.
  • the related technology can be used to implement: adding a jump route corresponding to the page of the second view template, for example, by writing code, etc., to implement the transformation of the multi-page application of the back-end route to the single-page application of the front-end route.
  • the front-end framework separated by the front-end end of the target web system is Backbone.
  • the jump route of the page controlled by the backend of the original system can be removed, and the front-end is routed through the Backbone Router.
  • the above backend service can be understood as a service that the back end of the web system can provide.
  • the page jump route may be deleted from the backend service of the target web system; according to the backend service of deleting the page jump route, obtaining a backend framework that provides the service only by using a preset data interface manner,
  • the backend framework separated by the front and back ends of the target web system.
  • the control layer of the target web system backend service can be modified, and the page jump route in the control layer is deleted, so that the control layer only has the function of providing the data interface, so that only the preset data interface can be obtained.
  • a backend framework for providing services, wherein the preset data interface can be customized according to the application environment.
  • FIG. 2 is a schematic diagram of generating a style file, a template structure file, an interaction logic file, and a model logic file of a preset front-end framework of the second view template in FIG. 1 .
  • the backend view template is split to obtain the style, the backend template structure, and the interaction logic.
  • step S102 splitting the first view template to obtain the style file and template of the first view template.
  • the structure file and the interaction logic file wherein the back-end view template is the first view template, the style is the style file of the first template, the back-end template structure is the template structure file, and the interaction logic is the interactive logic file.
  • the page style of FIG. 2 refers to a style file of the second view template, a style, a page style, and a line between the two, and represents a style file that directly determines the style file of the first view template as the second view template.
  • Translating the backend template structure into a front-end template corresponds to the step of translating the template structure file of the first view template into the template structure file of the second view template, wherein the front-end template is the template structure file of the second view template.
  • inserting the frame view template and obtaining the front view logic corresponds to: inserting the interactive logic file of the first view template into the logical template file of the view of the preset front end frame, and obtaining the interactive logic file of the second view template.
  • the frame view template is a logical template file of the view of the preset front-end frame
  • the front-end view logic is the interactive logic file of the second view template.
  • the request description document populating the framework Model template and obtaining the front-end model logic, corresponding to: filling the information contained in the request interface description document into the model template of the preset front-end framework, and obtaining the front-end framework of the target web system separated from the front-end end.
  • Model logic file The request description document is a request interface description document, and the framework model template is a model template of the preset front-end framework, and the front-end model logic is a model logic file of the front-end framework separated by the front-end end of the target web system.
  • the preset front end frame is used as the front end frame separated from the front and rear ends of the target web system, and the view template, the template structure file and the interactive logical file constituting the view template are preset for the view template of the front end frame. It can be obtained based on the style file, template structure file and interactive logic file obtained by splitting the existing view template in the target web system.
  • the model logical file of the preset front-end framework can be obtained based on the existing request interface description document in the target web system. There is no need to manually rewrite the front-end code in a large amount, thereby reducing the workload of separating the front and back ends of the web system and reducing the cost of separating the front and rear ends.
  • FIG. 3 is a schematic structural diagram of a device for separating front and rear ends of a web system according to an embodiment of the present disclosure.
  • the apparatus may include: a first obtaining module 301, a splitting module, corresponding to the flow shown in FIG. 302.
  • a first obtaining module 301 configured to obtain a view template of the target web system coupled to the front and rear ends, as the first view template
  • the splitting module 302 is configured to split the first view template to obtain a style file, a template structure file, and an interaction logic file of the first view template.
  • the second obtaining module 303 is configured to use the preset front-end framework as the front-end frame separated by the front-end end of the target web system, and obtain the style file of the second view template according to the style file, the template structure file, and the interactive logic file of the first view template.
  • the template structure file and the interaction logic file, wherein the second view template is: a view template of the front end frame separated by the front end end of the target web system;
  • the third obtaining module 304 is configured to obtain a request interface description document of the target web system, and obtain a model logic file of the front-end framework separated by the front-end end of the target web system based on the request interface description document;
  • the adding module 305 is configured to add a jump route of the corresponding page of the second view template to the front end frame separated by the front end of the target web system;
  • the fourth obtaining module 306 is configured to obtain a backend framework that provides services only in a preset data interface manner according to the backend service of the target web system, as a backend framework separated by the front and back ends of the target web system.
  • the second obtaining module 303 is configured to:
  • the third obtaining module 304 is configured to:
  • the information contained in the request interface description document is filled into the model template of the preset front-end framework, and the model logical file of the front-end framework separated by the front-end end of the target web system is obtained.
  • the fourth obtaining module 306 is configured to:
  • a backend framework that provides the service only by the preset data interface manner is obtained, which is the backend framework separated by the front and back ends of the target web system.
  • the preset front end framework includes:
  • the model view controller MVC framework wherein the MVC framework includes: a spine Backbone framework.
  • the front end frame is used as the front end frame of the front and rear ends of the target web system, and the view template of the front end frame is separated from the front and rear end of the target web system, and the style file and template structure of the view template are formed.
  • the file and the interactive logic file can be obtained based on the style file, the template structure file and the interactive logic file obtained by splitting the existing view template of the target web system, and the model logical file of the front-end frame can be based on the target web after the front-end end of the target web system is separated.
  • the existing request interface description document in the system is obtained, and it is not necessary to manually rewrite the front-end code in a large amount, thereby reducing the workload of separating the front and back ends of the web system and reducing the cost of separating the front and rear ends.
  • the foregoing device may be located on the above-mentioned Internet platform, such as the Hawkeye Big Data platform, and may also be used for the data platform, but is not limited thereto.
  • the embodiment of the present application further provides an electronic device, as shown in FIG. 4, including a memory 401 and a processor 402, where
  • a memory 401 configured to store a computer program
  • the processor 402 is configured to perform a method for separating the front and rear ends of the web system according to any one of the foregoing embodiments of the present application when the program stored in the memory 401 is executed.
  • the method for separating the front and rear ends of the web system includes:
  • the preset front-end framework is used as the front-end frame separated by the front-end end of the target web system, and the style file, the template structure file and the interactive logical file of the second view template are obtained according to the style file, the template structure file and the interactive logic file of the first view template.
  • the second view template is: a view template of the front end frame separated by the front end end of the target web system;
  • a backend framework that provides services only by a preset data interface is obtained, which is a backend framework separated by the front and back ends of the target web system.
  • the above-mentioned processor 402, communication interface, and memory 401 complete communication with each other through a communication bus.
  • the communication bus mentioned here may be a Peripheral Component Interconnect (PCI) bus or an extended industry standard structure (Extended Industry Standard Architecture, EISA) bus, etc.
  • PCI Peripheral Component Interconnect
  • EISA Extended Industry Standard Architecture
  • the communication bus can be divided into an address bus, a data bus, a control bus, and the like.
  • the memory 401 may include a random access memory (RAM), and may also include a non-volatile memory (NVM), such as at least one disk memory.
  • RAM random access memory
  • NVM non-volatile memory
  • the memory 401 may also be at least one storage device located away from the foregoing processor.
  • the processor 402 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc., or a digital signal processing (DSP), dedicated.
  • CPU central processing unit
  • NP network processor
  • DSP digital signal processing
  • ASIC Application Specific Integrated Circuit
  • FPGA Field-Programmable Gate Array
  • the preset front end frame is used as the front end frame separated from the front and rear ends of the target web system, and the front end of the target web system is separated from the front end.
  • the view template of the frame, the style file, the template structure file, and the interaction logic file that constitute the view template can be obtained based on the style file, the template structure file, and the interactive logic file obtained by splitting the existing view template of the target web system, and the target web
  • the model logic file of the front-end framework separated by the front and rear ends of the system can be obtained based on the existing request interface description document in the target web system, without requiring a large amount of manual rewriting of the front-end code, thereby reducing the workload of the front-end separation of the web system, reducing before and after The cost of end separation.
  • a computer readable storage medium having stored therein instructions that, when run on a computer, cause the computer to perform any of the above embodiments The method for separating the front and rear ends of the web system.
  • a computer program product comprising instructions, when executed on a computer, causing a computer to perform a front-end separation method of a web system according to any of the above embodiments .
  • the various embodiments in the present specification are described in a related manner, and the same or similar parts between the various embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments.
  • the apparatus, the electronic device, the computer readable storage medium, and the computer program product embodiment including the instructions are relatively simple in description since they are substantially similar to the method embodiment, and the relevant portions refer to the description of the method embodiment. Just fine.
  • the preset front-end frame is used as the front-end frame separated by the front-end end of the target web system, and the view template of the front-end frame separated by the front-end end of the target web system is composed.
  • the style file, the template structure file, and the interaction logic file of the view template can be obtained based on the style file, the template structure file, and the interaction logic file obtained by splitting the existing view template of the target web system, and the front end of the target web system is separated.
  • the framework's model logic file can be obtained based on the existing request interface description document in the target web system, without having to manually rewrite the front-end code in a large amount, thereby reducing the workload of separating the front and back ends of the web system and reducing the cost of separating the front and back ends.

Landscapes

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

Abstract

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

Description

web系统的前后端分离方法、装置、设备及存储介质
本申请要求于2017年10月23日提交中国专利局、申请号为201710992817.5发明名称为“web系统的前后端分离方法、装置、设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及互联网技术领域，特别是涉及一种web系统的前后端分离方法、装置、电子设备及计算机可读存储介质。
背景技术
传统的互联网应用中存在大量前后端耦合的web(World Wide Web，万维网)系统。随着互联网技术的快速发展，目前出现了前后端分离的web系统，逐渐得到业界的广泛采用。前后端分离的web系统，其后端提供基于RESTful(Representational State Transfer，表现层状态转化)架构的数据接口，前端基于此接口展示页面，以此做到前后端的完全分离，其中，RESTful是指符合REST风格的一种流行的数据接口架构。由于这种前后端分离的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 Server Pages，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(Java脚本，一种直译式脚本语言)等等，后端是用来开发web后端所用到的编程语言，如上述的JSP、PHP等等。
针对前后端耦合的目标web系统，可以对该目标web系统进行拆分，从中得到视图模板，从而实现：获得前后端耦合的目标web系统的视图模板，作为第一视图模板。在实际应用中，可以将该目标web系统的视图模板，从利用后端语言(或后端模板语言)所写的代码文件中拆出来即可。其中，视图模板即页面模板，可理解为一种网页页面的框架，在视图模板中填充数据，即为浏览器显示的网页页面。比如，打开某一网站的主页，最终所显示的页面就是加载该页面的视图模板后，填充该网站主页的文字、图片、视频及广告等数据得到的。
当然，其他的前后端耦合的目标web系统的视图模板的获得方式，均属于本申请实施例的保护范围，在此不一一赘述。
S102，对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件。
需要说明的是，为了规范前端代码的结构以及提高代码的可维护性，可以将页面的结构、样式和逻辑分开，做到关注点分离。在一种实现方式中，可以基于gulp(General Utility Lattice Program，一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务)开发一个工具，该工具的功能是以第一视图模板作为输入，将第一视图模板中的页面样式、模板结构和交互逻辑代码自动分离开(拆分)来，并生成对应的代码文件，即样式文件、模板结构文件和交互逻辑文件，从而实现：对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件。其中，该第一视图模板的样式、模板结构和交互逻辑代码可以是基于HTML、CSS(Cascading Style Sheets，层叠样式表)和JavaScript等语言编写的。
示例性的，类比于Word(微软公司的一个文字处理器应用程序)文档模板，视图模板的样式类似于Word文档模板中设置的文字字体、颜色、段落格式等样式，模板结构类似于Word文档模板的排版，例如，分栏等等。另外， 交互逻辑则规定了用户与该视图模板对应的页面之间是如何交互的，比如，用户点击浏览器页面中的某一按钮或链接，该页面中能弹出一个新窗口，就是基于该交互逻辑实现的，该交互逻辑能够规定这个新窗口如何弹出以及展示样式。
S103，以预设前端框架作为目标web系统前后端分离后的前端框架，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件。
其中，第二视图模板为：目标web系统前后端分离后前端框架的视图模板。
需要说明的是，预设前端框架可以包括：模型视图控制器(MVC，Model View Controller)框架，其中，MVC框架包括：Backbone(脊椎)框架。采用Backbone作为目标web系统前后端分离后前端项目的基础框架，是因为Backbone是一个相当简单灵活的JavaScript框架(压缩之后的大小约为7.5kb)，也是前端第一个被广泛使用的前端MVC框架，主要包括Model/Collection(模型层/集合)、View(视图)层、Router(路由)等结构。
其中，视图层可以基于jQuery(极快瑞)框架，操作文档对象模型(Document Object Model，DOM)元素去填充视图模板。jQuery框架是一个快速、简洁的JavaScript框架，一些web系统的页面交互逻辑也可基于jQuery框架得到。和目前流行的MVVM(Model View View Model，模型-视图-视图-模型)类框架如Angular(一款优秀的前端JavaScript框架，有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等)、React(一种JavaScipt框架，也是一个用于构建组件化用户界面UI(用户界面交互，User's Interface)的库)、Vue(以数据驱动和组件化的思想构建的一个JavaScript MVVM库)等不同，在Backbone框架中还可以和传统方式一样直接操作DOM(Document Object Mode，文档对象模型)元素，因而可以降低系统改造的成本。
在一种实现方式中，根据第一视图模板的样式文件、模板结构文件和交互逻辑文件，获得第二视图模板的样式文件、模板结构文件和交互逻辑文件，可以将第一视图模板的样式文件确定为第二视图模板的样式文件；将第一视图模板的模板结构文件转译为第二视图模板的模板结构文件；获得基于预设 前端框架的视图的逻辑模板文件，将第一视图模板的交互逻辑文件插入至逻辑模板文件，得到第二视图模板的交互逻辑文件。
以Backbone框架作为目标web系统前后端分离后的前端框架为例，可以将拆分得到的第一视图模板的样式文件，直接作为Backbone框架的视图模板的样式文件来使用。保持视图模板的样式不变，这样用户在使用浏览器浏览网站的页面时，可以保持原有的操作习惯，对网站而言则不会提高用户的使用成本。
其次，第一视图模板的模板结构文件还包括由后端(即模板)语言所编写的展示逻辑(属于视图层)，由于这些展示逻辑一般只涉及简单的控制(控制页面最终展示的样式，包括顺序、分支、循环控制等等)，故可通过对该结构文件中代码的静态分析，将第一视图模板的模板结构文件转译为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(Application Programming Interface Blueprint Spec，应用程序编程接口蓝图说明书)和Swagger Spec等等)，生成Model/Collection层的模型逻辑。其中，API Blueprint是一套基于markdown(一种可以使用普通文本编辑器编写的标记语言)的API描述语言规范，Swagger是一个简单又强大的可以为具有Restful(Representational State Transfer，表述性状态转移)风格的API生成文档的工具，Spec中文意为说明书。
S105，在目标web系统前后端分离后的前端框架中添加第二视图模板对应页面的跳转路由。
需要说明的是，可以利用相关技术实现：添加第二视图模板对应页面的跳转路由，比如通过编写代码等方式，实现后端路由的多页面应用向前端路由的单页面应用的改造。以目标web系统前后端分离后的前端框架为Backbone为例，原先系统的后端控制的页面的跳转路由可以被去掉，改为前端通过Backbone的Router实现页面路由。
S106，根据目标web系统的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。
上述后端服务可以理解为web系统的后端能够提供的服务。
在一种实现方式中，可以从目标web系统的后端服务中删除页面跳转路由；根据删除页面跳转路由的后端服务，获得仅以预设数据接口方式提供服务的后端框架，作为目标web系统前后端分离后的后端框架。在实际应用中，可以改造目标web系统后端服务的控制层，删除该控制层中的页面跳转路由，使得该控制层只剩下提供数据接口的功能，从而可以获得仅以预设数据接口提供服务的后端框架，其中，预设数据接口可以根据应用环境自行定义。
示例性的，图2为图1中的第二视图模板的样式文件、模板结构文件、交互逻辑文件和预设前端框架的模型逻辑文件的生成示意图。如图2所示，对后端视图模板进行拆分，得到样式、后端模板结构和交互逻辑，对应于S102步骤：对第一视图模板进行拆分，得到第一视图模板的样式文件、模板结构文件和交互逻辑文件，其中，后端视图模板即为第一视图模板，样式即为第一模板的样式文件，后端模板结构即为模板结构文件，交互逻辑即为交互逻辑文件。
图2的页面样式是指第二视图模板的样式文件，样式、页面样式和位于两者间的直线，表示将第一视图模板的样式文件直接确定为第二视图模板的样式文件。将后端模板结构转译为前端模板，则对应于前述将第一视图模板的模板结构文件转译为第二视图模板的模板结构文件的步骤，其中，前端模板即为第二视图模板的模板结构文件。
对于交互逻辑，插入框架视图模板，得到前端视图逻辑，则对应于：将第一视图模板的交互逻辑文件插入至预设前端框架的视图的逻辑模板文件，得到第二视图模板的交互逻辑文件，其中，框架视图模板即为预设前端框架的视图的逻辑模板文件，前端视图逻辑即为第二视图模板的交互逻辑文件。
对于请求描述文档，填充框架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 Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
可见，本实施例提供的电子设备在对前后端耦合的web系统进行前后端分离过程中，以预设前端框架作为目标web系统前后端分离后的前端框架，对于目标web系统前后端分离后前端框架的视图模板，组成该视图模板的样式文件、模板结构文件和交互逻辑文件，可以基于拆分目标web系统的已有视图模板所得到的样式文件、模板结构文件和交互逻辑文件获得，目标web系统前后端分离后前端框架的模型逻辑文件，可以基于目标web系统中已有的请求接口描述文档获得，无需大量地全部人工重写前端代码，从而减轻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任一所述的方法步骤。
PCT/CN2018/111217 2017-10-23 2018-10-22 web系统的前后端分离方法、装置、设备及存储介质 WO2019080796A1 (zh)

Applications Claiming Priority (2)

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

Publications (1)

Publication Number Publication Date
WO2019080796A1 true WO2019080796A1 (zh) 2019-05-02

Family

ID=66225834

Family Applications (1)

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

Country Status (2)

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

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111381921B (zh) * 2020-03-04 2020-10-09 北京东方金信科技有限公司 一种基于Ambari的前后端分离系统和方法
CN111796878B (zh) * 2020-06-05 2024-04-12 北京沃东天骏信息技术有限公司 一种应用于单页应用的资源拆分、加载方法和装置
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代码的方法和装置

Citations (4)

* 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前端页面及其生成方法、页面加载方法和装置
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
US7487261B1 (en) * 2002-02-22 2009-02-03 Digital River, Inc. Delta caching service
CN102184266B (zh) * 2011-06-27 2012-08-29 武汉大学 一种页面与数据分离的动态wap网站自动生成方法
CN106020823A (zh) * 2016-05-19 2016-10-12 浪潮电子信息产业股份有限公司 一种前端Web表现与数据分离以及页面快速响应的方式

Patent Citations (4)

* 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前端页面及其生成方法、页面加载方法和装置
CN107273528A (zh) * 2017-06-28 2017-10-20 努比亚技术有限公司 一种前后端分离方法、移动终端以及计算机可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
HE, HUANCHUN ET AL.: "MVVM Web (Non-official .. translation: Research on Web Front End Framework Based on MVVM Architecture", COMPUTER KNOWLEDGE AND TECHNOLOGY, vol. 13, no. 24, 25 August 2017 (2017-08-25) *

Also Published As

Publication number Publication date
CN109697130A (zh) 2019-04-30

Similar Documents

Publication Publication Date Title
WO2019080796A1 (zh) web系统的前后端分离方法、装置、设备及存储介质
US7783967B1 (en) Packaging web content for reuse
US8387006B1 (en) System and method for authoring a web page to be run-time editable
US8365203B2 (en) Method for creating a native application for mobile communications device in real-time
WO2017036309A1 (zh) 页面渲染方法、装置及设备
US8694904B2 (en) Cross-browser rich text editing via a hybrid client-side model
CN109634588B (zh) 一种兼容多浏览器的Office文档在线编辑方法和系统
CN110806863A (zh) 接口文档生成方法及装置、电子设备、存储介质
CN110765284B (zh) 一种生成演示文稿的方法、系统、计算设备及存储介质
US20140304682A1 (en) Systems and methods for run-time editing of a web page
US10419568B2 (en) Manipulation of browser DOM on server
CN112286513A (zh) 基于组件元数据的可视化设计方法和装置
TW201732647A (zh) 一種網頁腳本載入方法和裝置
EP4036762A1 (en) Speeding up document loading
US6948120B1 (en) Computer-implemented system and method for hosting design-time controls
Williamson Learning AngularJS: A Guide to AngularJS Development
US20150363079A1 (en) Data-driven schema for describing and executing management tasks in a graphical user interface
CN112905179A (zh) 移动端h5页面生成方法、装置、电子设备和存储介质
WO2016050124A1 (zh) 网页转码方法、装置以及服务器
CN111813403A (zh) 大屏数据可视化开发中拖拽组件数据管理的方法和装置
CN109669684A (zh) 用于Python编辑器的技术文档内置实现方法及装置
US7689903B2 (en) Unified markup language processing
CN113076165A (zh) 一种页面校验方法和装置
Oh et al. Web app restructuring based on shadow DOMs to improve maintainability
JP5267342B2 (ja) マッシュアッププログラム、マッシュアップ装置及びマッシュアップ方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18871762

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18871762

Country of ref document: EP

Kind code of ref document: A1