前后端通讯实测

以Vue.js为代表的前端

1.基于axios的请求

在main.js中配置默认请求地址：axios.defaults.baseURL = 'http://localhost:9999/';
在main.js中配置全局使用axios：Vue.prototype.$axios = axios;

以Springboot为代表的后端

1.配置跨域允许

package io.kid19999.backstage.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
    corsConfiguration.addAllowedHeader("*"); // 2允许任何头
    corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
    return corsConfiguration;
  }
  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig()); // 4
    return new CorsFilter(source);
  }
}

综合测试：

素材准备：

前端对象

data(){
    return{
        data:{'adminId':'kid','adminPwd':'132456456'}
    }
},

后端对象

import lombok.Data;

@Data
public class Login {
  private String adminId;
  private String adminPwd;
}

1.POST测试：

基于对象的传输：

前端： 
putObj(){
    var self = this;
    this.$axios.put('/test', self.data).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
},

后端：
post请求，如果是接收json格式（要求传输参数是json(application/json;charset=utf-8)，接收参数要是一个参数或者是一个对象并且参数前加上@RequestBody注解）；如果是表单提交(application/x-www-form-urlencoded)，接收参数没有要求即可以是对象也可以是多个参数的接收方式
@PutMapping("/test")
Result putObj(@RequestBody Login login){
	System.out.println(login);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("put obj success");
	return result;
}

基于表单的传输：

基于 FormData 填充（Content-Type: multipart/form-data）协议

前端： 
postForm(){
    var self = this;
    let data = new FormData();
    data.append('adminId','kid');
    data.append('adminPwd','132456456');
    this.$axios.post('/test2', data).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
},

后端：
@PostMapping("/test2")
Result postForm(@RequestParam("adminId") String adminId,
				@RequestParam("adminPwd") String adminPwd){
	System.out.println(adminId + " " + adminPwd);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("post form success");
	return result;
}

2.PUT测试：

基于对象的传输：

前端： 
post(){
    var self = this;
    this.$axios.post('/test', self.data).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
},

后端：
@PostMapping("/test")
Result toPost(@RequestBody Login login){
	System.out.println(login);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("success");
	return result;
}

基于表单的传输：

基于qs库，(Content-Type: application/x-www-form-urlencoded)协议

前端： 
putForm(){
    var self = this;
    this.$axios.put('/test2', qs.stringify(self.data)
    ).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
},

后端：
@PutMapping("/test2")
Result putForm(@RequestParam("adminId") String adminId,
			   @RequestParam("adminPwd") String adminPwd){
	System.out.println(adminId + " " + adminPwd);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("put form success");
	return result;
}

3.GET测试：

只能！！！基于表单的传输：

前端： 
getForm(){
    var self = this;
    this.$axios.get('/test', {params: self.data}).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
},

后端：

@GetMapping("/test")
Result getObj(@RequestParam("adminId") String adminId,
			  @RequestParam("adminPwd") String adminPwd){
	System.out.println(adminId + " " + adminPwd);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("get obj success");
	return result;
}

4.DELETE测试：

基于对象的传输：

前端： 
deleteObj(){
    var self = this;
    this.$axios.delete('/test', {data: self.data}).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
}

后端：
@DeleteMapping("/test")
Result deleteObj(@RequestBody Login login){
	System.out.println(login);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("delete obj success");
	return result;
}

基于表单的传输：

前端： 
deleteForm(){
    var self = this;
    this.$axios.delete('/test2', {params: self.data}).then(function (response) {
        console.info(self.data);
        console.log(response.data);
    }).catch(function (error) {
        console.error("请求错误！");
    });
}

后端：
@DeleteMapping("/test2")
Result deletForm(@RequestParam("adminId") String adminId,
				 @RequestParam("adminPwd") String adminPwd){
	System.out.println(adminId + " " + adminPwd);
	Result result = new Result();
	result.setStatusCode(1);
	result.setInfo("delete form success");
	return result;
}

总结

post和put类似可用各种方式传输，也最为安全
get只能用表单传输， {params: self.data}
delete两种方式都能，但是参数格式略有不同：表单{params: self.data}，对象{data: self.data}

前后端通讯实测

以Vue.js为代表的前端

1.基于axios的请求

以Springboot为代表的后端

1.配置跨域允许

综合测试：

素材准备：

1.POST测试：

2.PUT测试：

3.GET测试：

4.DELETE测试：

总结

推荐阅读