params是添加到url的请求字符串中的，一般用于get请求。
data是添加到请求体（body）中的， 一般用于post请求。
1.先来说说params.
vue前端:
saveGenerateCollectName(this.saveCollectNameCons).then(res => {
console.log('res.status: ' + res.status)
this.status = res.status
this.message = res.message
if(this.status == 0){
this.$message.success(`成功`)
}else {
this.$message.info(`失败`)
}
}).catch(err => {
console.log('saveGenerateCollectName-this.message: ' + this.message)
if(err.toString().indexOf('cancel') == -1){
this.$message.error(`服务器问题,删除失败,失败原因为:${err}`)
return false;
}
});
axios js部分
index.js
export const saveGenerateCollectName = query =>{
return request({
// url:'/list-lib/uploadFileResult.json',
// method:'get',
url:'/collectList/saveGenerateCollectName',
method: 'post',
//data: {collectList:query} //data 用@RequestBody来接收
params: {collectList:query} //params用@RequestParams 来接收
}).catch(error => {
// console.log('error:--- ' + JSON.stringify(error));
// alert(typeof error)
});
};
request.js
import axios from 'axios';
const service = axios.create({
// process.env.NODE_ENV === 'development' 来判断是否开发环境
// easy-mock服务挂了，暂时不使用了
// baseURL: 'https://www.easy-mock.com/mock/5e3633b162df5945932860ef/TEST1',
baseURL:'http://localhost:8084/xt-demo',
timeout: 50000,
// headers:{'Content-Type':'application/x-www-form-urlencoded'}// 'multipart/form-data' // 'application/x-www-form-urlencoded';
});
service.interceptors.request.use(
config => {
// console.log('config.method---: ' + config.method);
console.log('config.url---: ' + config.url)
console.log('config.data---: ' + config.data);
// console.log('config.params---: ' + config.params);
debugger
return config;
},
error => {
console.log(error);
return Promise.reject();
}
);
service.interceptors.response.use(
response => {
if (response.status === 200) {
// console.log('response.data---: ' + response.data.status)
return response.data;
} else {
Promise.reject();
}
},
error => {
console.log(error);
return Promise.reject();
}
);
export default service;
后端代码
public Map saveGenerateCollectName(@RequestParam("collectList") String tempCollectList){
Map result = new HashMap();
String tempCollectList = map.get("collectList").toString();
return result;
}
}
2.在来说说data.
vue前端:
saveGenerateCollectName(this.saveCollectNameCons).then(res => {
console.log('res.status: ' + res.status)
this.status = res.status
this.message = res.message
if(this.status == 0){
this.$message.success(`成功`)
}else {
this.$message.info(`失败`)
}
}).catch(err => {
console.log('saveGenerateCollectName-this.message: ' + this.message)
if(err.toString().indexOf('cancel') == -1){
this.$message.error(`服务器问题,删除失败,失败原因为:${err}`)
return false;
}
});
axios js部分
index.js
export const saveGenerateCollectName = query =>{
return request({
// url:'/list-lib/uploadFileResult.json',
// method:'get',
url:'/collectList/saveGenerateCollectName',
method: 'post',
data: query //data 用@RequestBody来接收
// params: {collectList:query} //params用@RequestParams 来接收
}).catch(error => {
// console.log('error:--- ' + JSON.stringify(error));
// alert(typeof error)
});
};
request.js
同上
后端代码
@RequestMapping(value = "saveGenerateCollectName",method = RequestMethod.POST)
public Map saveGenerateCollectName(@RequestBody Map<String,Object> map ){
// String tempCollectList = map.get("collectList").toString();
Map result = new HashMap();
String status = "0";
String message = "成功新建收藏夹";
CollectList collectList = new CollectList();
Map collectListMap = map;//JSON.parseObject(map, Map.class);
collectList.setCollectName(collectListMap.get("newCollectName").toString());
String tempTime = collectListMap.get("newCollectNameDate").toString();
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date dateTime = null;
try {
dateTime = simpleDateFormat.parse(tempTime);
} catch (Exception e) {
e.printStackTrace();
}
collectList.setGenerateDate(dateTime);
collectList.setLastUpdateDate(dateTime);
CollectList collectResult = this.collectListService.insert(collectList);
if(collectResult == null ){
status = "1";
message="新建收藏夹失败";
}
result.put("status",status);
result.put("message",message);
return result;
}
3.关于附件上传的特别说明
vue前端:
uploadFiles(file){
debugger
let formData = new FormData(); //此处有坑,附件上传必须用formData
formData.set("file", file.file); //后端是根据"file" 来进行取值(@RequestParam("file") 或者@RequestBody MultipartFile file)
uploadFiles(formData).then(res => {
this.status = res.status
this.message = res.message
console.log('this.status: ' + this.status)
// console.log('refs.length2: ' + that.$refs.upload.$children[0].fileList.length)
// debugger
if (this.status == 0) {
// debugger
this.$message.success(`附件上传成功`)
} else {
this.$message.info(`附件上传失败,失败原因${this.message}`)
}
}).catch(err => {
// debugger
console.log('uploadFiles-err: ' + err)
if(err.toString().indexOf('cancel') == -1){
this.$message.error(`删除失败,失败原因为:${err}`)
return false;
}
});
el-upload 部分
<el-upload class="upload-demo"
ref="upload"
action=""
:http-request = "uploadFiles"
:multiple="true"
:accept="acceptFileType"
:limit="1"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button size="small" type="text">点击上传</el-button>
<!-- <label>点击上传</label>-->
<!-- <div slot="tip" class="el-upload_tip">只能上传.xls文件,且不超过1M</div>-->
</el-upload>
axios js部分
index.js
//附件上传
export const uploadFiles = query => {
return request({
// url: '/list-lib/uploadFileResult.json',
// method: 'get',
url: '/fileList/uploadFiles',
method: 'post',
data:query // 附件上传只能用data 来传数据,后端用@RequestBody
}).catch(error => {
// console.log('error:--- ' + JSON.stringify(error));
// alert(error)
});
};
request.js
同上
后端代码
@RequestMapping(value = "uploadFiles",method = RequestMethod.POST)
// @PostMapping("uploadFiles")
// RequestParam 用来取axios 中params&data 的值,RequestBody 用来去axios中data 的值
// public Map uploadFiles(@RequestParam("file") MultipartFile file ) {
public Map uploadFiles(@RequestBody MultipartFile file ) {
Map resultMap = new HashMap();
String status="0";
String message="附件上传成功";
resultMap.put("status",status);
resultMap.put("message",message);
if (file.isEmpty()) {
status = "1";
message="上传文件不能为空";
resultMap.put("status",status);
resultMap.put("message",message);
return resultMap;
}else{
//上传文件 相关逻辑
String fileName = file.getOriginalFilename();
File dest = new File(uploadPath+fileName);
try {
file.transferTo(dest);
return resultMap;
} catch (IOException e) {
status="2";
message="附件上传失败.";
resultMap.put("status",status);
resultMap.put("message",message);
e.printStackTrace();
}
return resultMap;
}
