前后端联调

我用的是axios+spring MVC，其他都大同小异；

前后端联调的时候主要遇到两个问题：

一个是跨域问题；

一个是前后端接受参数问题；

第一个问题很简单：只需要在config文件里配置一下就可以了：

这里前段项目我直接用的是vue-cli，所以在config/index.js中添加配置：

proxyTable: {
  '*':{
    target: 'http://localhost:8080',  //目标接口域名
    changeOrigin: true,  //是否跨域

  }
},

这样，运行的时候就会直接代理到target的服务接口。

第二个问题，前后端接受参数的问题：

发送参数一般有两种编码方式:

application/json和application/x-www-form-urlencoded；

application/json和application/x-www-form-urlencoded区别；

发送方式的不同，后端接受参数也有不同；

这里以spring mvc 和axios举例：

如果是发送json数据：

前端：

this.$ajax.post("/url",{
  file:file,
  ext:"pdf"
}).then((res)=>{...}.catch(err=>{...})

这样后端的controller里面接受参数时就可以用@requestBody注解，接收到请求体；json数据可以自动序列化成请求体类；

如果需要使用表单发送数据，或者说后端懒得定义请求体类，可以下面这样：

前端发送数据：
 let param = new URLSearchParams();
 param.append("file", file);
 param.append("ext","pdf");
 this.$ajax.post("/url",param).then((res)=>{...}.catch(err=>{...});

这样后端接受数据的时候可以直接在controller函数的参数里取到数据（String file,String ext）；

有个特殊的情境，如果传文件的时候没有放到表单里面，单独传的话可以考虑下面的方式：

<input type="file" @change="getFile" ref="file" id="file">

getFile (e) {
  let files = e.target.files[0];
  let param = new FormData();
  param.append("file", files);
  this.$ajax.post("/url",param)......
}

后端可以用  MultipartFile file 在请求中获取到；

 

待补充吧。。。 我是菜鸟