一种实现前端和后端分离的方法、计算机设备及存储介质技术

本发明专利技术公开了一种实现前端和后端分离的方法、计算机设备及存储系统，涉及web项目技术领域，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离，既能保证性能，又能减少开发难度，让代码更规范和更优化，改变传统设计对服务器压力大的问题。对服务器压力大的问题。对服务器压力大的问题。

【技术实现步骤摘要】
一种实现前端和后端分离的方法、计算机设备及存储介质


[0001]本专利技术涉及web项目
，具体来说，涉及一种实现前端和后端分离的方法、计算机设备及存储介质。

技术介绍

[0002]在现有技术当中，前端与后端都是部署在同一个机器上的，我们知道前端和后端执行的任务数量巨大，对于维护系统的工作人员来说，修复系统相当的困难，而且前端和后端部署在同一个机器时，项目开发周期过长，开发难度过高，代码不规范，并且传统的设计对服务器压力过大，时间久了，机器内存不足，很容易导致系统崩溃。

技术实现思路

[0003]为了克服现有技术的不足，本专利技术提供一种实现前端和后端分离的方法、计算机设备及存储介质，能够减少开发难度，提高项目开发周期。
[0004]本专利技术解决其技术问题所采用的技术方案是：一种实现前端和后端分离的方法，其改进之处在于，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离。
[0005]作为上述技术方案的改进，后端采用Springboot+Dubbo框架搭建网关系统。
[0006]作为上述技术方案的进一步改进，原始web系统加上dubbo配置，并在impl业务层加上@Service，标识为dubbo接口。
[0007]作为上述技术方案的进一步改进，网关系统调用dubbo接口，引用interface接口通过@Reference注解注入。
[0008]作为上述技术方案的进一步改进，网关系统的http接口返回重新定义成restful风格，改变原始web系统返回的ModelAndView对象。
[0009]作为上述技术方案的进一步改进，网关系统添加权限校验包和全局异常捕获AOP。
[0010]作为上述技术方案的进一步改进，网关系统配置Swagger生成动态接口API文档，以便与前端对接。
[0011]作为上述技术方案的进一步改进，前端通过Ajax调用网关系统的http接口。
[0012]作为上述技术方案的进一步改进，网关系统的http接口与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。
[0013]作为上述技术方案的进一步改进，前端删除静态资源css、js、imag以及jsp或者删除html页面，并根据原始web系统的jsp或者html开发相同式的页面，通过Ajax调用网关系统的http接口，直至返回数据。
[0014]作为上述技术方案的进一步改进，原始web系统删除web.xml中对请求的拦截校验以及页面的配置，并将Controller层、interface接口以及公共的vo、utils、Enum备份至
public公共模块，然后删除原始web系统内的Controller层、interface接口以及公共的vo、utils、Enum。
[0015]作为上述技术方案的进一步改进，通过public公共模块将Controller层移动至网关系统内。
[0016]作为上述技术方案的进一步改进，将public包引用到网关系统和原始web系统中，供网关系统和原始web系统共用。
[0017]一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其改进之处在于，所述处理器执行所述计算机程序时实现上述任一项所述方法。
[0018]一种计算机可读存储介质，其改进在于，所述计算机可读存储介质存储有执行上述任一项所述方法的计算机程序。
[0019]本专利技术的有益效果是：将web项目拆成前端和后端两个项目，放在两个不同机器独立部署，实现隔离治理，并且工作人员只需约定好交互接口，实现并行开发，就可以提高项目开发周期，改变传统设计对服务器压力大的问题。
附图说明
[0020]下面结合附图和实施例对本专利技术进一步说明。
[0021]图1是本专利技术整体框架结构示意图；
[0022]图2是本专利技术的时序图；
[0023]图3是本专利技术的机械部署图。
具体实施方式
[0024]以下将结合实施例和附图对本专利技术的构思、具体结构及产生的技术效果进行清楚、完整地描述，以充分地理解本专利技术的目的、特征和效果。显然，所描述的实施例只是本专利技术的一部分实施例，而不是全部实施例，基于本专利技术的实施例，本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例，均属于本专利技术保护的范围。另外，专利中涉及到的所有联接/连接关系，并非单指构件直接相接，而是指可根据具体实施情况，通过添加或减少联接辅件，来组成更优的联接结构。本专利技术创造中的各个技术特征，在不互相矛盾冲突的前提下可以交互组合。
[0025]参照图1-3，本专利技术揭示了一种实现前端和后端分离的方法，包括前端和后端，所述后端包括网关系统和public公共接口模块，所述前端通过后端内部搭建网关系统实现信号连接，网关系统提取后端的public公共接口模块，将public包引用至网关系统和原始web系统内完成原始web系统改造，实现前端和后端分离。本专利技术通过改造原始web系统，实现前端和后端分离，减少开发难度和将传统服务器的压力减少到最小。
[0026]进一步的，后端采用Springboot+Dubbo框架搭建网关系统。原始web系统加上dubbo配置，并在impl业务层加上@Service，标识为dubbo接口，这样使得供网关系统调用dubbo接口。网关系统调用dubbo接口，引用interface接口通过@Reference注解注入。网关系统的http接口返回重新定义成restful风格，改变原始web系统返回的ModelAndView对象，准确的来说返回的数据是json数据。网关系统添加权限校验包，可以显示和验证登录用
户配置的菜单权限，配置自研的权限包，以便控制权限菜单请求，同时，网关系统还添加全局异常捕获AOP，以便配置全局异常减少代码重复，并且网关系统还配置Swagger生成动态接口API文档，以便与前端对接。
[0027]在上述实施例中，本专利技术先搭建网关系统，再对原始web系统进行配置，使得网关系统能够调用原始web系统内部的数据，并且在搭建网关系统过程中优化内部构造，使得在网关系统在于原始web系统数据交互时，减少开发的难度，让代码更规范，而且网关系统还配置Swagger生成动态接口API文档，以便于前端连接。
[0028]再进一步的，前端通过Ajax调用网关系统的http接口。网关系统的http接口与后端开发协定，参照Swagger生成动态接口API文档调用接口，变换请求参得到不同的接口报文。本专利技术参照Swagger好处是前端人员可以直接看到接口，实时了解各个接口状况。
[0029]另外，前端删除静态资源css、js、imag以及jsp或者删除htm本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的一种实现前端和后端分离的方法，其特征在...

【专利技术属性】
技术研发人员：何佛光，何彦霖，卢伟强，李翔，
申请(专利权)人：银盛支付服务股份有限公司，
类型：发明
国别省市：