axios中http四种请求方式的使用

最新推荐文章于 2024-06-25 10:37:22 发布

鼠一 for 游标卡尺

最新推荐文章于 2024-06-25 10:37:22 发布

阅读量306

点赞数

文章标签：前端 spring boot mybatis java 网络协议

本文链接：https://blog.csdn.net/qq_50526390/article/details/130736432

版权

所有使用基于springboot+mybatis plus。

1.get请求

get请求可以通过路径变量在前后端之间传递参数。

使用场景：

1.前端点击查询按钮，查询数据表中某条数据时，通过路径变量传递该数据的编号，后端根据编号查询相关记录。

2.前端点击编辑按钮，队数据表中的某条数据进行编辑时，通过路径变量传递该数据的编号，后端根据编号查找相应数据并返回给前端，前端进行显示。

前端：

axios.get(url/+id).then((res)=>{
    console.log(res.data);
});

后端：

@RestController
@RequestMapping("/bookInfo")
public class BookInfoController {

    @Autowired
    private IBookInfoService bookInfoService;

    @GetMapping("/{id}")
    public R get(@PathVariable int id) {
        LambdaQueryWrapper<BookInfo> lqw = new LambdaQueryWrapper<BookInfo>();
        lqw.eq(BookInfo::getId,id);
        BookInfo list = bookInfoService.getOne(lqw);
        return new R(true,list);

    }
}

2.post请求

post请求可以通过json在前后端之间传递数据。

使用场景：

1.前端点击新建按钮，在数据表中增加一条记录时，通过json传递该记录的信息，后端根据记录信息创建相关记录。

2.前端点击编辑按钮，队数据表中的某条数据进行编辑时，通过路径变量传递该数据的编号，后端根据编号查找相应数据并返回给前端，前端进行显示。

前端：

axios.post(url,data).then((res)=>{
    console.log(res.data);
});

后端：

@RestController
@RequestMapping("/bookInfo")
public class BookInfoController {

    @Autowired
    private IBookInfoService bookInfoService;

    @PostMapping
    public R save(@RequestBody BookInfo bookInfo) {
        boolean save = bookInfoService.save(bookInfo);
        return new R(save, save ? "添加成功" : "添加失败");
    }
}

3.delete请求

delete可以通过路径变量和json传递数据。

使用场景：

1.前端点击删除按钮，删除数据表中某条数据时，通过路径变量传递该数据的编号，后端根据编号删除相关记录。(编号可以通过json和路径变量传递)

路径变量传递：

前端：

 axios.delete("../bookInfo/",{
     data: {
          id: row.id
            }
  }).then((res)=>{
    console.log(res.data);                               
});

后端：

@RestController
@RequestMapping("/bookInfo")
public class BookInfoController {

    @Autowired
    private IBookInfoService bookInfoService;

    @DeleteMapping("/{id}")
    public R delete(@PathVariable int id) {
        boolean remove = bookInfoService.removeById(id);
        return new R(remove,remove ? "删除成功" : "删除失败");
    }
}

json传递：

前端：

axios.post(url,data).then((res)=>{
    console.log(res.data);
});

后端：

@RestController
@RequestMapping("/bookInfo")
public class BookInfoController {

    @Autowired
    private IBookInfoService bookInfoService;

    @DeleteMapping()
    public R delete(@RequestBody BookInfo bookInfo) {
        
        boolean remo = bookInfoService.removeById(bookInfo.getId());
        return new R(remo,remo ? "删除成功" : "删除失败");
       
    }
}

4.put请求

put请求通过路径变量传递数据。

使用场景：

1.前端点击更新按钮，更新数据表中某条数据时，通过json传递该记录的修改后的相关数据，后端根据记录编号更新相关记录。

前端：

axios.get("../bookInfo/"+this.id).then((res)=>{
     console.log(res.data.data.id);
});

后端：

@RestController
@RequestMapping("/bookInfo")
public class BookInfoController {

    @Autowired
    private IBookInfoService bookInfoService;

    @PutMapping
    public R update(@RequestBody BookInfo bookInfo) {

        boolean b = bookInfoService.updateById(bookInfo);
        return new R(b,b ? "更新成功" : "更新失败");
    }
}