SSM (Spring+SpringMVC+MyBatis) 框架前后端分离、跨域问题解决 |
您所在的位置:网站首页 › ssm跨域解决方案 › SSM (Spring+SpringMVC+MyBatis) 框架前后端分离、跨域问题解决 |
SSM框架前后端分离、跨域问题解决
认识前后端分离一、交互形式二、代码组织方式三、开发模式四、数据接口规范流程
跨域问题解决一、spring @CrossOrigin 实现原理二、跨域后session数据丢失问题
认识前后端分离
在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。 前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式,我们在实施的过程中主要对以下四个方面来进行比较和重新认识。 前后端分离大概可以从四个方面来理解: 交互形式代码组织方式开发模式数据接口规范流程 一、交互形式
而前后端分离模式在代码组织形式上有以下两种: 半分离 前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。 分离 前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。 三、开发模式我们之前的架构属于传统的MVC架构,整体没有进行前后端分离,在项目的开发阶段,前端工程师负责编写HTML,完成前端的页面设计并套页面,然后再使用模板技术将写好的前端代码转换为Smarty脚本,同时内嵌一些后端提供的模板变量和一些逻辑操作。应用运行期,将全部代码进行打包,和后端代码部署到同一服务器上,同时会进行简单的动静态分离部署。 此时,应用的开发流程如下图所示 前后端分离之后,开发流程将如下图所示 在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。 从目前应用软件开发的发展趋势来看,主要有两方面需要注意: 越来越注重用户体验,随着互联网的发展,开始多终端化。大型应用架构模式正在向云化、微服务化发展。我们主要通过前后端分离架构,为我们带来以下四个方面的提升: 为优质产品打造精益团队通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,是的前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。 提升开发效率前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。 完美应对复杂多变的前端需求如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。 增强代码可维护性前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。 应用代码将会变得整洁清晰,不论是代码阅读还是代码维护都会比以前轻松。 跨域问题解决前后端分离开发需要跨域,之前只会springboot跨域,只需要一个配置类即可,下面记录一下ssm的配置 在之前经常使用的跨域有== jsonp,form表单类似的 ==,但是在这次使用的是前后端分离的之前的跨域就不能使用, 听说== spring 只要加入 @CrossOrigin ==注解即可解决跨域问题 一、spring @CrossOrigin 实现原理利用spring的拦截器实现往response里添加 Access-Control-Allow-Origin等响应头信息 注:spring版本必须保证在4.X以上才能使用 如果controller在类上标了@CrossOrigin或在方法上标了@CrossOrigin注解,则spring 在记录mapper映射时会记录对应跨域请求映射,代码如下 经过一番查找之后发现–【不止后端加,前端也要加】 前端使用ajax要记得配置== xhrFields ==属性:就是将该ajax的请求变为一个允许跨域授信的请求。 $.ajax({ type:..., .... xhrFields:{withCredentials:true}, ... })原理 对于后端的原理来说: 就是改变CrossOrigin的默认值 allowCredentials="true"其实是配置了CrossOrigin中的DEFAULT_ALLOWED_HEADERS:允许跨域传输所有的header参数,将用于使用token放入header域做session共享的跨域请求 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |