说到与前端通信,明白人都知道这章肯定会写两部分的东西啦。
关于后台
①首先回顾前文,上一章环境搭建如图:
②我们在maven.example.controller下添加一个文件,并附上如图代码:
③:上面又多出了两个注解,分别是@RestController、@RequestMapping。他们有着什么含义呢?
@RestController: 它是作为一个Web @Controller存在的,用于专门接收传入的Web请求。
@RequestMapping: 它提供了“路由”信息。 如图它会告诉Spring,任何带有/ path的HTTP请求都会映射到home方法上去。
④: 对应的home方法还能接收HTTP传输的数据,前提是要保持接收与发送数据的类型是对应的,相关我们会在本章节后面补充上
⑤: 启动服务,开始编写前端代码。
关于前端
前提:我们这里使用的是fetch,而不是XMLHttpRequest,fetch细的知识点的话在springboot框架篇章里不会细说,会放到之后的前端篇章里说。
①:相比XMLHttpRequest, 我相信fetch更代表着未来。不过fetch仍有一些缺点,其中一个就是对于旧版本的浏览器, 我们需要配置fetch-polyfill才能使用fetch。以下是支持原生fetch各个浏览器的最低版本图:
②:话不多说,这里开始上代码吧:
fetch('http://localhost:8080/index/home', {
method:'post',
}).then(response => response.text()).then(data => {
alert(data)
}).catch(function(e){
alert("error:" + e);
})
③:以上我并没有传输Data到后台,关于传输数据前后端的对应性,我们要放在本章的下一节来讲。 另外关于以上代码,需要注意以下部分:
因为我本地现在暂时没有配反响代理, 所以URL地址为如此, 但如果配备了反向代理, URL地址应写为 '/index/home'。
④:运行程序,进行通信后,我们会发现浏览器曝出了跨域的问题:
⑤:我本地的前端框架用的是react,关于编译,现在用的是官方提供的webpack配置文件,还没有改着用自己写的,所以关于反向代理的处理,我就先写在springboot这边,让我们重新转回springboot。
再回后台
①:关于跨域的处理,我部署为支持所有路由,而非设置单个路由,单个路由设置需要用@CrossOrigin标签。这里通过用自定义addCorsMappings(CorsRegistry)方法注册WebMvcConfigurer bean来定义全局CORS配置,在App.java里添加如下图代码即可:
②: 重新运行新的jar,再刷新网页,会发现通信已成功。
今天就暂时到这里啦,关于新加的@Bean标签等释义应会在稍后几天重新添加至该章