CN112463324A - 一种实现前端和后端分离的方法、计算机设备及存储介质 - Google Patents
一种实现前端和后端分离的方法、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN112463324A CN112463324A CN202011337551.9A CN202011337551A CN112463324A CN 112463324 A CN112463324 A CN 112463324A CN 202011337551 A CN202011337551 A CN 202011337551A CN 112463324 A CN112463324 A CN 112463324A
- Authority
- CN
- China
- Prior art keywords
- interface
- gateway system
- original web
- public
- gateway
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 30
- 238000000926 separation method Methods 0.000 title claims abstract description 16
- 239000000284 extract Substances 0.000 claims abstract description 4
- 238000004590 computer program Methods 0.000 claims description 9
- 230000003068 static effect Effects 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 claims description 2
- 230000006872 improvement Effects 0.000 description 16
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000002955 isolation Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000002035 prolonged effect Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000002407 reforming Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
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/48—Program initiating; Program switching, e.g. by interrupt
- G06F9/4806—Task transfer initiation or dispatching
- G06F9/4843—Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
- G06F9/4881—Scheduling strategies for dispatcher, e.g. round robin, multi-level priority queues
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L41/00—Arrangements for maintenance, administration or management of data switching networks, e.g. of packet switching networks
- H04L41/08—Configuration management of networks or network elements
- H04L41/0803—Configuration setting
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
Landscapes
- Engineering & Computer Science (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (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)
Abstract
本发明公开了一种实现前端和后端分离的方法、计算机设备及存储系统，涉及web项目技术领域，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离，既能保证性能，又能减少开发难度，让代码更规范和更优化，改变传统设计对服务器压力大的问题。
Description
技术领域
本发明涉及web项目技术领域，具体来说，涉及一种实现前端和后端分离的方法、计算机设备及存储介质。
背景技术
在现有技术当中，前端与后端都是部署在同一个机器上的，我们知道前端和后端执行的任务数量巨大，对于维护系统的工作人员来说，修复系统相当的困难，而且前端和后端部署在同一个机器时，项目开发周期过长，开发难度过高，代码不规范，并且传统的设计对服务器压力过大，时间久了，机器内存不足，很容易导致系统崩溃。
发明内容
为了克服现有技术的不足，本发明提供一种实现前端和后端分离的方法、计算机设备及存储介质，能够减少开发难度，提高项目开发周期。
本发明解决其技术问题所采用的技术方案是：一种实现前端和后端分离的方法，其改进之处在于，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离。
作为上述技术方案的改进，后端采用Springboot+Dubbo框架搭建网关系统。
作为上述技术方案的进一步改进，原始web系统加上dubbo配置，并在impl业务层加上@Service，标识为dubbo接口。
作为上述技术方案的进一步改进，网关系统调用dubbo接口，引用interface接口通过@Reference注解注入。
作为上述技术方案的进一步改进，网关系统的http接口返回重新定义成restful风格，改变原始web系统返回的ModelAndView对象。
作为上述技术方案的进一步改进，网关系统添加权限校验包和全局异常捕获AOP。
作为上述技术方案的进一步改进，网关系统配置Swagger生成动态接口API文档，以便与前端对接。
作为上述技术方案的进一步改进，前端通过Ajax调用网关系统的http接口。
作为上述技术方案的进一步改进，网关系统的http接口与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。
作为上述技术方案的进一步改进，前端删除静态资源css、js、imag以及jsp或者删除html页面，并根据原始web系统的jsp或者html开发相同式的页面，通过Ajax调用网关系统的http接口，直至返回数据。
作为上述技术方案的进一步改进，原始web系统删除web.xml中对请求的拦截校验以及页面的配置，并将Controller层、interface接口以及公共的vo、utils、Enum备份至public公共模块，然后删除原始web系统内的Controller层、interface接口以及公共的vo、utils、Enum。
作为上述技术方案的进一步改进，通过public公共模块将Controller层移动至网关系统内。
作为上述技术方案的进一步改进，将public包引用到网关系统和原始web系统中，供网关系统和原始web系统共用。
一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其改进之处在于，所述处理器执行所述计算机程序时实现上述任一项所述方法。
一种计算机可读存储介质，其改进在于，所述计算机可读存储介质存储有执行上述任一项所述方法的计算机程序。
本发明的有益效果是：将web项目拆成前端和后端两个项目，放在两个不同机器独立部署，实现隔离治理，并且工作人员只需约定好交互接口，实现并行开发，就可以提高项目开发周期，改变传统设计对服务器压力大的问题。
附图说明
下面结合附图和实施例对本发明进一步说明。
图1是本发明整体框架结构示意图；
图2是本发明的时序图；
图3是本发明的机械部署图。
具体实施方式
以下将结合实施例和附图对本发明的构思、具体结构及产生的技术效果进行清楚、完整地描述，以充分地理解本发明的目的、特征和效果。显然，所描述的实施例只是本发明的一部分实施例，而不是全部实施例，基于本发明的实施例，本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例，均属于本发明保护的范围。另外，专利中涉及到的所有联接/连接关系，并非单指构件直接相接，而是指可根据具体实施情况，通过添加或减少联接辅件，来组成更优的联接结构。本发明创造中的各个技术特征，在不互相矛盾冲突的前提下可以交互组合。
参照图1-3，本发明揭示了一种实现前端和后端分离的方法，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离。本发明通过改造原始web系统，实现前端和后端分离，减少开发难度和将传统服务器的压力减少到最小。
进一步的，后端采用Springboot+Dubbo框架搭建网关系统。原始web系统加上dubbo配置，并在impl业务层加上@Service，标识为dubbo接口，这样使得供网关系统调用dubbo接口。网关系统调用dubbo接口，引用interface接口通过@Reference注解注入。网关系统的http接口返回重新定义成restful风格，改变原始web系统返回的ModelAndView对象，准确的来说返回的数据是json数据。网关系统添加权限校验包，可以显示和验证登录用户配置的菜单权限，配置自研的权限包，以便控制权限菜单请求，同时，网关系统还添加全局异常捕获AOP，以便配置全局异常减少代码重复，并且网关系统还配置Swagger生成动态接口API文档，以便与前端对接。
在上述实施例中，本发明先搭建网关系统，再对原始web系统进行配置，使得网关系统能够调用原始web系统内部的数据，并且在搭建网关系统过程中优化内部构造，使得在网关系统在于原始web系统数据交互时，减少开发的难度，让代码更规范，而且网关系统还配置Swagger生成动态接口API文档，以便于前端连接。
再进一步的，前端通过Ajax调用网关系统的http接口。网关系统的http接口与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。本发明参照Swagger好处是前端人员可以直接看到接口，实时了解各个接口状况。
另外，前端删除静态资源css、js、imag以及jsp或者删除html页面，并根据原始web系统的jsp或者html开发相同式的页面，通过Ajax调用网关系统的http接口，直至返回数据。本发明的前端根据后端的变化删去静态资源css、js、imag以及jsp或者删除html页面，并根据原始web系统的jsp或者html开发相同式的页面以便于与后端相同步。
最后，原始web系统删除web.xml中对请求的拦截校验以及页面的配置，并将Controller层、interface接口以及公共的vo、utils、Enum备份至public公共模块，然后删除原始web系统内的Controller层、interface接口以及公共的vo、utils、Enum。通过public公共模块将Controller层移动至网关系统内。将public包引用到网关系统和原始web系统中，供网关系统和原始web系统共用。去掉原始web系统中对请求的拦截校验，以及页面的配置等不必要的配置，减少系统负担。
本发明的一种实现前端和后端分离的方法、计算机设备及存储介质，将前端和后端都进行改造，先是搭建网关系统并进行优化配置，再将web系统的Controller层、interface接口、公共的vo、utils、Enum等移到public公共模块，再通过public公共模块将Controller层移动至网关系统，网关系统再搭建与前端、原始web系统的连接，前端完成与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。将原始web系统的项目拆成前端和后端，放在两个不同机器独立部署，前端的业务内容只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑，减少开发难度，让代码更规范和更优化，实现隔离治理，工作人员只需约定好交互接口，实现并行开发，提高项目开发周期。
一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其改进之处在于，所述处理器执行所述计算机程序时实现上述任一项所述方法。
一种计算机可读存储介质，其改进之处在于，所述计算机可读存储介质存储有执行上述任一项所述方法的计算机程序。
本发明的有益效果是：将web项目拆成前端和后端两个项目，放在两个不同机器独立部署，实现隔离治理，并且工作人员只需约定好交互接口，实现并行开发，就可以提高项目开发周期，改变传统设计对服务器压力大的问题。
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。
Claims (15)
1.一种实现前端和后端分离的方法，其特征在于，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离。
2.根据权利要求1所述的一种实现前端和后端分离的方法，其特征在于，后端采用Springboot+Dubbo框架搭建网关系统。
3.根据权利要求2所述的一种实现前端和后端分离的方法，其特征在于，原始web系统加上dubbo配置，并在impl业务层加上@Service，标识为dubbo接口。
4.根据权利要求3所述的一种实现前端和后端分离的方法，其特征在于，网关系统调用dubbo接口，引用interface接口通过@Reference注解注入。
5.根据权利要求4所述的一种实现前端和后端分离的方法，其特征在于，网关系统的http接口返回重新定义成restful风格，改变原始web系统返回的ModelAndView对象。
6.根据权利要求5所述的一种实现前端和后端分离的方法，其特征在于，网关系统添加权限校验包和全局异常捕获AOP。
7.根据权利要求6所述的一种实现前端和后端分离的方法，其特征在于，网关系统配置Swagger生成动态接口API文档，以便与前端对接。
8.根据权利要求7所述的一种实现前端和后端分离的方法，其特征在于，前端通过Ajax调用网关系统的http接口。
9.根据权利要求8所述的一种实现前端和后端分离的方法，其特征在于，网关系统的http接口与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。
10.根据权利要求9所述的一种实现前端和后端分离的方法，其特征在于，前端删除静态资源css、js、imag以及jsp或者删除html页面，并根据原始web系统的jsp或者htm l开发相同式的页面，通过Ajax调用网关系统的http接口，直至返回数据。
11.根据权利要求10所述的一种实现前端和后端分离的方法，其特征在于，原始web系统删除web.xml中对请求的拦截校验以及页面的配置，并将Controller层、interface接口以及公共的vo、utils、Enum备份至publi c公共模块，然后删除原始web系统内的Controller层、interface接口以及公共的vo、utils、Enum。
12.根据权利要求11所述的一种实现前端和后端分离的方法，其特征在于，通过public公共模块将Controller层移动至网关系统内。
13.根据权利要求12所述的一种实现前端和后端分离的方法，其特征在于，将publi c包引用到网关系统和原始web系统中，供网关系统和原始web系统共用。
14.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至13任一项所述方法。
15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求1至13任一项所述方法的计算机程序。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011337551.9A CN112463324A (zh) | 2020-11-25 | 2020-11-25 | 一种实现前端和后端分离的方法、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011337551.9A CN112463324A (zh) | 2020-11-25 | 2020-11-25 | 一种实现前端和后端分离的方法、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112463324A true CN112463324A (zh) | 2021-03-09 |
Family
ID=74799937
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011337551.9A Pending CN112463324A (zh) | 2020-11-25 | 2020-11-25 | 一种实现前端和后端分离的方法、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112463324A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116319950A (zh) * | 2022-09-07 | 2023-06-23 | 中国人民财产保险股份有限公司 | 架构前后端分离的实现方法、架构系统以及请求处理方法 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109274724A (zh) * | 2018-08-30 | 2019-01-25 | 上海艾融软件股份有限公司 | 一种前后端分离架构的实现系统及方法 |
| CN109697130A (zh) * | 2017-10-23 | 2019-04-30 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
| CN110209983A (zh) * | 2019-05-29 | 2019-09-06 | 北京奇艺世纪科技有限公司 | 一种网页web项目的部署方法及装置 |
| WO2019192128A1 (zh) * | 2018-04-04 | 2019-10-10 | 平安科技（深圳）有限公司 | 网页访问方法及装置 |
| CN110968388A (zh) * | 2019-11-01 | 2020-04-07 | 苏宁云计算有限公司 | 页面处理方法和系统 |
| CN111123765A (zh) * | 2019-12-06 | 2020-05-08 | 山东电工电气集团有限公司 | 基于微服务的电缆隧道综合状态监控系统及其实现方法 |
| CN111324843A (zh) * | 2020-02-17 | 2020-06-23 | 政采云有限公司 | 一种前端请求处理方法、装置、设备及可读存储介质 |
-
2020
- 2020-11-25 CN CN202011337551.9A patent/CN112463324A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109697130A (zh) * | 2017-10-23 | 2019-04-30 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
| WO2019192128A1 (zh) * | 2018-04-04 | 2019-10-10 | 平安科技（深圳）有限公司 | 网页访问方法及装置 |
| CN109274724A (zh) * | 2018-08-30 | 2019-01-25 | 上海艾融软件股份有限公司 | 一种前后端分离架构的实现系统及方法 |
| CN110209983A (zh) * | 2019-05-29 | 2019-09-06 | 北京奇艺世纪科技有限公司 | 一种网页web项目的部署方法及装置 |
| CN110968388A (zh) * | 2019-11-01 | 2020-04-07 | 苏宁云计算有限公司 | 页面处理方法和系统 |
| CN111123765A (zh) * | 2019-12-06 | 2020-05-08 | 山东电工电气集团有限公司 | 基于微服务的电缆隧道综合状态监控系统及其实现方法 |
| CN111324843A (zh) * | 2020-02-17 | 2020-06-23 | 政采云有限公司 | 一种前端请求处理方法、装置、设备及可读存储介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116319950A (zh) * | 2022-09-07 | 2023-06-23 | 中国人民财产保险股份有限公司 | 架构前后端分离的实现方法、架构系统以及请求处理方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104268082B (zh) | 浏览器的压力测试方法和装置 | |
| CN105426204A (zh) | 一种基于国产CPU、操作系统和浏览器的Web高速加载渲染方法 | |
| CN105577446B (zh) | 一种轻量级嵌入式网络管理系统和方法 | |
| CN106909361A (zh) | 基于模版引擎的web开发方法和装置 | |
| CN108629032A (zh) | 一种基于延时加载的页面快速响应方法及装置 | |
| CN108052548A (zh) | 一种网页创建的方法、系统及终端设备 | |
| CN109634751A (zh) | 一种利用electron框架实现应用层和底层通信的方法 | |
| CN105653597A (zh) | 多端同步播放文件的方法和装置 | |
| CN112463324A (zh) | 一种实现前端和后端分离的方法、计算机设备及存储介质 | |
| CN105867944A (zh) | Web前端数据操作层及其实现方法 | |
| CN110310090A (zh) | 基于组件化的动态电子审批流程生成方法、装置、设备及介质 | |
| CN105893235B (zh) | 一种仿真测试方法、装置及服务器 | |
| CN104166551B (zh) | 一种应用接口开发方法和开发装置 | |
| CN109815387B (zh) | 一种基于脚本的网页采集服务方法和系统 | |
| CN103914859B (zh) | 将输入文字变为图片的信息处理方法和装置 | |
| CN107769934B (zh) | 资费处理方法及装置 | |
| CN106896956B (zh) | 一种“道”系统下多点触控的实现方法 | |
| CN103020062A (zh) | 一种基于xml rpc的前端与服务器的交互实现 | |
| CN103561113A (zh) | Web Service接口的生成方法及装置 | |
| CN105956173A (zh) | 页面内容获取方法和装置 | |
| CN112615773B (zh) | 一种消息处理方法及系统 | |
| CN109005163A (zh) | 一种http动态请求服务调用方法 | |
| Dhand | Reducing web page post backs through jquery ajax call in a trust based framework | |
| CN110995565A (zh) | 一种基于mvvm架构的页面显示方法 | |
| CN109218063B (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 |