Vue和SpringBoot项目前端请求和后端接收的URL格式

小黄鱼145

已于 2024-08-19 15:58:10 修改

阅读量305

点赞数 8

文章标签：前端 vue.js spring boot

于 2024-08-19 11:53:36 首次发布

本文链接：https://blog.csdn.net/qq_69166053/article/details/141321379

版权

Vue和SpringBoot项目前端请求和后端接收的URL格式

模版字符串

`const baseUrl = ‘https://api.example.com/users’;
const userId = 123;
const userName = ‘JohnDoe’;

// 使用模板字符串构建URL
const url = ${baseUrl}?id=${userId}&name=${encodeURIComponent(userName)};`

字符串拼接

1.路径直接携带参数
前端发送：let url=this.BASE_URL+'/v1/contents/delete/'+row.id
后端接收：@RequestMapping("/v1/contents/")
@DeleteMapping("/delete/{id}")

public JsonResult deleteContentById(@PathVariable int id){ iContentService.deleteContentById(id); return JsonResult.ok(); }

使用？拼接携带参数

前端发送： let url=this.BASE_URL+'/v1/users/delete?id='+id
后端接收：@RequestMapping("/v1/users")

@DeleteMapping("/delete")
public JsonResult deleteUserById(Integer id){
    // let url=this.BASE_URL+'/v1/users/delete/'+id
    //使用该方法传递数据时，@DeleteMapping("/delete/{id}")中要加入传过来数据的占位符`


    // let url=this.BASE_URL+'/v1/users/delete?id='+id
    //使用该方法时不用在Mapping中接收

    iUserService.deleteUserById(id);
    return JsonResult.ok();
}

多个参数
前端发送：let url=this.BASE_URL+'/v1/contents/'+type+'/'+categoryId+'/index'
后端接收：
@GetMapping("/{type}/{categoryId}/index")

public JsonResult getContentsByTypeAndCategoryId(@PathVariable Integer type,@PathVariable Integer categoryId){

`log.debug(“获取的数据{}==》{}”,type,categoryId);
```
List<ContentIndexVO> vo=iContentService.getContentByTypeAndCategoryId(type,categoryId);
return JsonResult.ok(vo);
```
}`