axios发请求,SpringBoot接请求的各种对应

四类请求方法

  • Get
  • Post
  • Put
  • Delete

其中发axios自动发json的是Post和Delete,而Get和Put请求则是发k=v的表单形式,这一块有时候比较混乱,我试着给大家解释一下

Get发参数

发一个对象

axios.get('url',{params:{Student:this.addForm}}).then(res=>{
	..
})//发送表单对象

后端接这个对象,因为不是发的Json,千万不要加@RequestBody

@GetMapping("/")
public Object addItem(@RequestParam(value="Student")Student stu){
...
}

Get发一堆属性

axios.get('url',{params:{id:this.addForm.id,name:this.addForm.name,pageNumber:1,pageSize:2}}).then(res=>{
	..
})//发送表单对象

后端可以自动组装成对象,而pojo中没有的属性会剩余出来去找参数中有无和前端发的参数名称一致的变量,进而被后端接到
比如pageSize,并不在pojo类中,它就会被参数中的pageSize获取到

@GetMapping("/")
public Object addItem(@RequestParam(required =false)Student stu,int pageNumber,int pageSize){
...
}

Post请求

发json

axios.post('url',this.formData).then(response=>{
	...
})

这种方式它自动发的json字符串
所以后端需要@RequestBody来讲json转为对象,对象中没有的属性,会自动映射到变量中

@GetMapping("/")
public Object addItem(@RequestBody Student stu,int pageNumber,int pageSize){
...
}

发x-www-form-urlencoded

如果想打破axios这种发post请求自动发json的规则可以用qs 我前面的文章有介绍过大家可以取看一下,就是将json格式的请求转为k=v的形式,后端不需要任何注解,直接可以接到,大概像这样
在这里插入图片描述
而后台
在这里插入图片描述
没有什么问题

RestFul风格的请求

  • 单个参数
  • 如何发对象

单个参数的RestFul

http://localhost:8080/stu/1

这是没问题的
比如

axios.get('/stu/1').then(response=>{
	...
})

后端

@GetMapping('/stu/{id}')
public Result selectStu(@PathVariable int id){
	...
}

发送对象直接不需要@PathVariable注解了

axios.get('/stu/1/张三').then(response=>{
	...
})
@GetMapping('/stu/{id}/{name}')
public Result selectStu(Student stu){
	...
}

Get Post都是可以的

总结

@RequestParam对应前端get请求,不能够解析json格式的请求
@RequestBody对应前端post请求,能够将json映射到我们的pojo对象中,倘若前端用了qs,那就不能用@RequestBody了
@PathVariable对应Rest风格的请求,有两种场景,发单个参数和发对象,单个参数需要@PathVariable这个注解,对象则不需要

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我来为你回答这个问题。 首先,在Vue项目中引入axios需要先安装axios,可以使用以下命令: ``` npm install axios --save ``` 然后在需要使用axios的Vue组件中引入axios: ``` import axios from 'axios' ``` 下来,我们可以使用axios向后台发送请求,以下是一个示例: ``` axios.get('/api/users').then(response => { console.log(response.data) }) ``` 上述代码向后台发送了一个GET请求请求的路径是`/api/users`,并在请求成功后打印了响应数据。 下来,我们需要后台提供相应的口来完成增删改查操作。这里以Spring Boot为例,我们可以使用Spring Boot提供的注解来定义RESTful API口。以下是一个示例: ``` @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserService userService; @GetMapping public List<User> getUsers() { return userService.getUsers(); } @PostMapping public void addUser(@RequestBody User user) { userService.addUser(user); } @PutMapping("/{id}") public void updateUser(@PathVariable Long id, @RequestBody User user) { userService.updateUser(id, user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userService.deleteUser(id); } } ``` 上述代码中,我们定义了一个`UserController`类,该类提供了四个口,分别对应了获取用户列表、添加用户、更新用户和删除用户四个操作。其中,`@GetMapping`、`@PostMapping`、`@PutMapping`和`@DeleteMapping`分别对应了HTTP协议中的GET、POST、PUT和DELETE请求。 最后,我们可以在Vue项目中使用axios来调用这些口,以完成增删改查操作。以下是一个示例: ``` // 获取用户列表 axios.get('/api/users').then(response => { console.log(response.data) }) // 添加用户 axios.post('/api/users', { name: '张三', age: 18, gender: '男' }).then(response => { console.log(response.data) }) // 更新用户 axios.put('/api/users/1', { name: '李四', age: 20, gender: '女' }).then(response => { console.log(response.data) }) // 删除用户 axios.delete('/api/users/1').then(response => { console.log(response.data) }) ``` 上述代码分别调用了四个口,以完成增删改查操作。其中,`axios.post`、`axios.put`和`axios.delete`中的第二个参数分别为要添加、更新和删除的用户数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值