前后端分离前后端交互问题（包含跨域问题解决）

逻辑探索者

已于 2024-07-04 18:12:56 修改

阅读量2.2k

点赞数 17

分类专栏： Java 文章标签： spring boot 前端

于 2023-06-14 12:15:43 首次发布

本文链接：https://blog.csdn.net/qq_51510685/article/details/131203752

版权

Java 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Hello，大家好，今天给小伙伴们写一篇有关于前后端分离开发交互的问题。很多初学者可能刚接触前后端分离开发是会有一点疑惑，究竟什么才是前后端分离开发。

1、前后端分离开发的基本概念

1.1传统单体工程

传统的Java Web开发会将HTML静态页面重新改写成JSP，后端采用 Spring+ SpringMVC+持久层 框架形式，应用会部署到一个包当中，最后统一部署到Tomcat容器中。

2.2前后端分离

前后端分离的"前"特指浏览器端(或客户端)，直接呈现给用户的；后端是服务器端，处理业务逻辑和数据，不呈现给用户。

Java服务器端初学者最容易引起误解的一个概念就是：JSP是前端技术。

JSP一定一定一定要知道全称：Java Server Page。是运行在服务器端JVM之上Servlet 容器里的，只是执行的结果是HTML，响应给浏览器。

Java EE先有的Servlet，那时候已经有了ASP(同样要知道是Active Server Page的意思)。

由于要在Servlet里面拼大量的HTML代码，所以Java规范学习了ASP，提出JSP。 Servlet是Java代码里混入HTML，JSP是HTML代码里混入Java。

浏览器根本不关心服务器端是JSP、ASP、PHP，或者还是原始的Servlet，或是静态服务器上的HTML，只要返回的是合法的HTML就可以。

所以，把JSP中静态的HTML部分拿出来，变成简单的HTML文件，放在HTTP服务器上，浏览器只要获取到这些HTML就可以了。动态的数据部分用HTML里的JS通过AJAX的方式从服务器端获取，然后动态操作Dom，完成动态内容的展示。这样前后端就分离了。

2、前后端分离开发的优点

2.1塑造出一支优质团队

如果实现前后端分离，那么前后端工程师做事不会畏首畏尾，只需要关注于自身领域的开发工作即可，这样可以培养前端工程师独特的技术特性，打造出一支全栈式的研发团队。

2.2分工明确，效率提升

前后端分离可以让前、后端的工程师分工更加明确，两者开发可以同时进行，从而提高工作效率，页面的增加和路由的修改也不必再去麻烦后端，开发起来可以灵活操控。

.3局部性能得到提升

通过前端路由的配置，可以轻松实现页面的按需加载，服务器不用解析前端页面，因此，在页面交互及用户体验上也会得到提升。

4、代码的可维护性得到增强

前后端分离后，应用的代码不再是前后端混合，只有在运行期才会调用依赖关系，并且分层明确，应用代码变得整洁清晰。

3、具体操作

前后端分离开发不得不提到跨域问题，跨域问题指是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。 但这个保护机制也带来了新的问题，它的问题是给不同站点之间的正常调用，也带来的阻碍，那怎么解决这个问题呢？

SpringBoot解决方案：

自定义一个配置类并使用@Configuration进行标识，让该类继承WebMvcConfigurer，重写addCorsMappings方法从而解决跨域问题。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    /**
     * 解决跨域问题
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

至此跨域问题已经解决。接下来就可以进行正常的前后端分离请求了。

注：本案例前端使用axios进行请求，后端使用SpringBoot

本案例只是演示如何进行前后端交互，不涉及具体的业务逻辑

前端操作：

步骤：

1、引入axios.js文件

2、定义axios请求

3、调用axios请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<button type="button" onclick="sub()">提交</button>
		
	</body>
	<script src="./js/axios.js"></script>
	<script>
		function sub(){
			axios({
				url:"http://localhost:8080/api/test/hello",
				method:"GET",
			}).then(res=>{
				console.log(res.data)
			})
		}
	</script>
	
</html>

后端操作：

1、创建工程，解决跨域问题

2、编写接口

@RestController
@RequestMapping("/api/test")
public class HelloController {
    @GetMapping("/hello")
    public String hello(){
        return "hello,前后端分离";
    }
}

运行工程，然后前端就可以发送请求

效果如下：