这里我会介绍三种前端处理方法
前言:在SpringMVC不做过多数据获取处理,单纯依靠默认的Spring映射关系,就会出现接收不到参数的结果。
两个原因:
Content-Type
不正确和
发送数据
没有格式化,只要把
Content-Type
设置为
application/x-www-form-urlencoded;charset=UTF-8
和格式化数据即可
第一种方法(推荐)
设置拦截器可以更好的进行一些相应的操作,而且把Content-Type
设置为application/x-www-form-urlencoded;charset=UTF-8
防止中文乱码
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs';
let baseURL = 'http://localhost:8081/'
//创建axios实例
const request = axios.create({
baseURL: baseURL,
timeout: 10000
});
// 2.请求拦截器
request.interceptors.request.use(config => {
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
if(config.method.toLowerCase() == "get"){ //配置get请求数据(这里是容错处理)
if(config.data != undefined) config.params = config.data;
}
//防止post请求,后端无法接收参数问题(方式一)
if(config.method.toLowerCase() == "post"){ //post请求配置数据转换和请求头
config.data = qs.stringify(config.data); //数据转化,也可以使用qs转换
config.headers = {
'token':uni.getStorageSync("token"),
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8' //配置请求头
}
}
return config
}, error => {
Promise.reject(error)
});
第二种方法
格式化数据,Content-Type
默认变成application/x-www-form-urlencoded
,会出现中文乱码现象
import axios from 'axios'
import qs from 'qs';
let baseURL = 'http://localhost:8081/'
const request = axios.create({
baseURL: baseURL,
timeout: 10000,
//防止post请求,后端无法接收参数问题(方式二)
transformRequest: [function(data) {
const str = []
for (const i in data) {
str.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]))
}
return str.join('&')
}]
});
第三种方法
import axios from 'axios'
import qs from 'qs';
const request = axios.create({
baseURL: baseURL,
timeout: 10000,
//防止post请求,后端无法接收参数问题(方式三)
transformRequest: [
function(data) {
return qs.stringify(data)
}
]
});
写的很简单,关键点还是没有讲到,先结束了