说到与前端通信,明白人都知道这章肯定会写两部分的东西啦。

 

关于后台

 

①首先回顾前文,上一章环境搭建如图:

 

springboot连接前端页面 springboot怎么和前端交互的_App

 

②我们在maven.example.controller下添加一个文件,并附上如图代码:

springboot连接前端页面 springboot怎么和前端交互的_HTTP_02

 

③:上面又多出了两个注解,分别是@RestController、@RequestMapping。他们有着什么含义呢?

 

@RestController: 它是作为一个Web @Controller存在的,用于专门接收传入的Web请求。

@RequestMapping: 它提供了“路由”信息。 如图它会告诉Spring,任何带有/ path的HTTP请求都会映射到home方法上去。

 

④: 对应的home方法还能接收HTTP传输的数据,前提是要保持接收与发送数据的类型是对应的,相关我们会在本章节后面补充上

 

⑤: 启动服务,开始编写前端代码。

 


 

关于前端

 

前提:我们这里使用的是fetch,而不是XMLHttpRequest,fetch细的知识点的话在springboot框架篇章里不会细说,会放到之后的前端篇章里说。


①:相比XMLHttpRequest, 我相信fetch更代表着未来。不过fetch仍有一些缺点,其中一个就是对于旧版本的浏览器, 我们需要配置fetch-polyfill才能使用fetch。以下是支持原生fetch各个浏览器的最低版本图:

springboot连接前端页面 springboot怎么和前端交互的_App_03

 

②:话不多说,这里开始上代码吧:

fetch('http://localhost:8080/index/home', {
   method:'post',
  }).then(response => response.text()).then(data => {
   alert(data)
  }).catch(function(e){
   alert("error:" + e);
  })

 

 

③:以上我并没有传输Data到后台,关于传输数据前后端的对应性,我们要放在本章的下一节来讲。 另外关于以上代码,需要注意以下部分:

springboot连接前端页面 springboot怎么和前端交互的_spring_04

因为我本地现在暂时没有配反响代理, 所以URL地址为如此, 但如果配备了反向代理, URL地址应写为 '/index/home'。

 

④:运行程序,进行通信后,我们会发现浏览器曝出了跨域的问题:

 

springboot连接前端页面 springboot怎么和前端交互的_springboot连接前端页面_05

 

⑤:我本地的前端框架用的是react,关于编译,现在用的是官方提供的webpack配置文件,还没有改着用自己写的,所以关于反向代理的处理,我就先写在springboot这边,让我们重新转回springboot。

 


 

再回后台

 

①:关于跨域的处理,我部署为支持所有路由,而非设置单个路由,单个路由设置需要用@CrossOrigin标签。这里通过用自定义addCorsMappings(CorsRegistry)方法注册WebMvcConfigurer bean来定义全局CORS配置,更改App.java代码即可:

package maven.example;

import org.springframework.boot.*;
import org.springframework.boot.autoconfigure.*;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class App {
    
    public static void main(String[] args) throws Exception {
        SpringApplication.run(App.class, args);
    }
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {

            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

}

 

 

②: 重新运行新的jar,再刷新网页,会发现通信已成功。

springboot连接前端页面 springboot怎么和前端交互的_App_06

下一章为关于前后端通信数据处理方式