vue使用axios中post/get请求params/data总结
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
目录
早期笔记,放上来备份~
小结:
1、使用params传参,都是在 GET
请求的情况下,参数会拼接在接口地址的 ? 后面,后端接收不需要带有注解;
1、@RequestParam的最大作用就是:明确地告诉controller,这两个参数是从请求参数中获取,一旦没有获取,则报错;
3、get一般使用params,通常不使用data, 基础类型接收,名字对应即可
4、使用Map接收,需要添加 RequestParam 注解
5、post一般使用data,也可以使用params, post使用params方法和get相似,改 method: 'post' 即可。
代码实例:
controller后端:
/**
* Get
* 传递对象参数
**/
@GetMapping("/test1")
public void test1(UserPhoto data) {
data.setName("es");
System.out.println(data);
}
/**
* Get
* 传递 变量参数1,2
**/
@GetMapping("/test2")
public void test2(String name,String number) {
System.out.println(name+ " " + number);
}
/**
* Get
* 传递 变量参数1
**/
@GetMapping("/test3")
public void test3(String name) {
System.out.println(name);
}
/**
* Get
* 传递 集合参数
* 加@RequestParam
**/
@GetMapping("/test4")
public void test4(@RequestParam Map<String, Object> map) {
System.out.println(map);
}
/**
* Get
* 路径传递 变量参数1,2
**/
@GetMapping("/test5/{name}/{number}")
public void test5(@NotNull(message = "name不能为空")
@PathVariable String name,@PathVariable String number) {
System.out.println(name+ " " + number);
}
/**
* Post
* 传递 变量参数1
**/
@PostMapping("/test6")
public void test6(String name) {
System.out.println(name);
}
/**
* Post
* 传递 变量参数1
**/
@PostMapping("/test7")
public void test7(UserPhoto photo) {
System.out.println(photo);
}
/**
* Post
* 传递 对象参数
**/
@PostMapping("/test8")
public void test8(@RequestBody UserPhoto photo) {
System.out.println(photo);
}
/**
* Post
* 传递 对象数组参数
**/
@PostMapping("/test9")
public void test9(@RequestBody List<UserPhoto> photo) {
System.out.println(photo);
}
/**
* Post
* 传递 对象数组和变量参数
**/
@PostMapping("/test10")
public void test10(@RequestBody List<UserPhoto> photo, String id) {
System.out.println(photo);
System.out.println(id);
}
/**
* Post
* 传递 对象数组和变量参数
**/
@PostMapping("/test11/{id}")
public void test11(@RequestBody List<UserPhoto> photo, @PathVariable String id) {
System.out.println(photo);
System.out.println(id);
}
类:
@Data
@EqualsAndHashCode(callSuper = true)
public class UserPhoto extends BaseEntity {
private String number;
private String name;
private byte[] img;
private String nOssId;
private String status;
}
vue前端:
// method
getApiTest1() {
const obj={number:"23q32",nOssId:"234545"}
test1(obj).then(res => {
});
},
getApiTest2() {
const obj={number:"23q32",name:"234545"}
test2(obj).then(res => {
});
},
getApiTest3() {
const obj={name:"234545"}
test3(obj).then(res => {
});
},
getApiTest4() {
const obj={number:"23q32",name:"234545"}
test4(obj).then(res => {
});
},
getApiTest5() {
let name="dd";
let number="33";
test5(name,number).then(res => {
});
},
getApiTest6() {
const obj={name:"234545"}
test6(obj).then(res => {
});
},
getApiTest7() {
const obj={name:"234545",number:"23q32"}
test7(obj);
},
getApiTest8() {
const obj={name:"234545",number:"23q32"}
test8(obj);
},
getApiTest9() {
const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"}]
test9(obj);
},
getApiTest10() {
const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"} ]
let id = { id:"23" }
test10(obj,id);
},
getApiTest11() {
const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"} ]
let id = "23"
test11(obj,id);
}
// api
export function test1(data) {
return request({
url: '/User/test1',
method: "get",
params:data
})
}
export function test2(query) {
return request({
url: '/User/test2',
method: "get",
params:query
})
}
export function test3(query) {
return request({
url: '/User/test3',
method: "get",
params:query
})
}
export function test4(query) {
return request({
url: '/User/test4',
method: "get",
params:query
})
}
export function test5(name,number) {
return request({
url: '/User/test5/'+name+"/"+number,
method: "get"
})
}
export function test6(name) {
return request({
url: '/User/test6',
method: "post",
params:name
})
}
export function test7(a) {
return request({
url: '/User/test7',
method: "post",
params:a
})
}
export function test8(a) {
return request({
url: '/User/test8',
method: "post",
data:a
})
}
export function test9(a) {
return request({
url: '/User/test9',
method: "post",
data:a
})
}
export function test10(a,id) {
return request({
url: '/User/test10',
method: "post",
data:a,
params:id
})
}
export function test11(obj,id) {
return request({
url: '/User/test11/' + id,
method: "post",
data:obj,
})
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)