vue+axios使用(form/json)传参,后端SpringBoot接受
今天用到了前后端数据传输所以记录一下
前端向后端传输数据形式总共分为两种,Form表单形式和JSON格式
下面举例说明
一、前端axios传参
//传递的数据
data() {
return {
loginForm: {
username: '',
password: '',
},
}
},
1、form表单形式
import Qs from 'qs'
//(如果只是get请求就不需要引qs)
this.$axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
url: '/login',
data: Qs.stringify(this.loginForm)
})
.then(
successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}else{
console.log("账号或密码错误");
this.loginForm.message="账号或密码错误";
}
})
.catch(failResponse => {
})
2.1、JSON形式(1)
this.$axios({
headers: {
'Content-Type': 'application/json;'
},
method: 'post',
url: '/login',
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return JSON.stringify(data);
}],
data: this.loginForm
})
.then(
successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}else{
console.log("账号或密码错误");
this.loginForm.message="账号或密码错误";
}
})
.catch(failResponse => {
})
2.2JSON形式(2)
//简化形式
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password,
})
.then(
successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}else{
console.log("账号或密码错误");
this.loginForm.message="账号或密码错误";
}
})
.catch(failResponse => {
})
二、后端接受数据
1、接受form表单数据
@PostMapping(value = "api/login")
@ResponseBody
public Result login(@RequestParam Map<String,Object> reqMap, Model model) {
String username=reqMap.get("username").toString();
String password=reqMap.get("password").toString();
System.out.println(username+":"+password);
if (!Objects.equals("admin", username) || !Objects.equals("123", password)) {
System.out.println("账号密码错误");
return new Result(400);
} else {
System.out.println("登录成功");
return new Result(200);
}
}
2、接受JSON数据
@PostMapping(value = "api/login")
@ResponseBody
//user是一个bean类
public Result login(@RequestBody User requestUser) {
System.out.println(requestUser);
// 对 html 标签进行转义,防止 XSS 攻击
String username = requestUser.getUsername();
username = HtmlUtils.htmlEscape(username);
if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
System.out.println("账号密码错误");
return new Result(400);
} else {
System.out.println("登录成功");
return new Result(200);
}
}