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(`服務(wù)器問題,刪除失敗,失敗原因為:${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' 來判斷是否開發(fā)環(huán)境
// easy-mock服務(wù)掛了乍炉，暫時不使用了
// 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(`服務(wù)器問題,刪除失敗,失敗原因為:${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.關(guān)于附件上傳的特別說明
vue前端:
uploadFiles(file){
debugger
let formData = new FormData(); //此處有坑,附件上傳必須用formData
formData.set("file", file.file); //后端是根據(jù)"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 來傳數(shù)據(jù),后端用@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{
//上傳文件 相關(guān)邏輯
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;
}
