axios用params, data 发送参数给 springboot controller，各种情况_axios params

axios用params, data 发送参数给 springboot controller，各种情况

1. 使用axios在URL上拼接参数，@GetMapping,@DeleteMapping使用@PathViable来进行接收参数。

前端URL拼接发送代码：

export function findAll(currentPage, pageSize) {
  return request ({
    url: '/test1/employee'+ "/" + currentPage +"/"+  pageSize,
    method: 'get',
  })
}
1
2
3
4
5
6

后端@PathVariable接收拼接在URL中的代码：

@GetMapping("/{currentPage}/{pageSize}")
    public AxiosResult<PageVo<Employee>> findPage(
            @PathVariable("currentPage") int currentPage,
            @PathVariable("pageSize") int pageSize) {
        PageHelper.startPage(currentPage,pageSize);
        PageVo<Employee> pageVo = employeeService.findAll();
        return AxiosResult.success(pageVo);
    }
1
2
3
4
5
6
7
8

请求路径拼接后：

注意点：

1.url: '/test1/employee'+ "/" + currentPage +"/"+  pageSize,
前端拼接的时候要自己加 "/" 来保证拼接到请求中是有/的.
2.@GetMapping("/{currentPage}/{pageSize}")
后端这里写的时候，注意/不要丢掉，参数要加{}.
3. @PathVariable(value = "currentPage") int currentPage
后端这里的value是处理@GetMappring中的路径名和参数名不一致的情况，一致直接写@PathVariable,不一致需要指定@PathVariable里面的值。
1
2
3
4
5
6

2. 使用axios的Params传递参数，以Key=Value的形式拼接在路径中，@GetMapping, @DeleteMapping使用@RequestParam来进行接收参数。

// params 是与请求一起发送的 URL 参数

前端用Params传递参数，以Key=Value的形式拼接在URL中

export function findAll(currentPage,pageSize) {
  return request({
    url: '/test1/employee',
    method: 'get',
    params: {
      currentPage: currentPage,
      pageSize: pageSize,
    }
})
}
1
2
3
4
5
6
7
8
9
10

后端用@RequestParams接收以Key=Value的形式拼接在URL中的参数

    @GetMapping
    public AxiosResult<PageVo<Employee>> findPage(
            @RequestParam(defaultValue = "1") int currentPage,
            @RequestParam(defaultValue = "5") int pageSize) {
        PageHelper.startPage(currentPage,pageSize);
        PageVo<Employee> pageVo = employeeService.findAll();
        return AxiosResult.success(pageVo);
    }
1
2
3
4
5
6
7
8

前端发送的请求路径：

注意点：

1. params: {
      currentPage: currentPage,
      pageSize: pageSize,
    }
这是给params里面的currentPage,PageSize进行赋值，例如如果写死的话，可以是
params: {
      currentPage: "1"
      pageSize: "5",
    }
所以findAll(CurrentPage,pageSize)是：后面的是一个值，一个变量。
1
2
3
4
5
6
7
8
9
10

3. 使用axios的Data传递参数，携带在请求体中，@PostMapping @PutMapping 使用@RequestBody来接收携带在请求体当中的参数。

前端：

export function add(data) {
  return request({
    url: 'test1/employee',
    method: 'post',
    data
  })
}
1
2
3
4
5
6
7

后端：

    @PostMapping
    public AxiosResult insertEntity(@RequestBody Employee entity) {
        int i = employeeService.insertEntity(entity);
        return toAxios(i);
    }
1
2
3
4
5

前端发送的请求路径以及携带的参数：


注意点：

1. 注意这里传参数，参数在请求体中。data用来接收请求参数，可以是值也可以是对象，但是后端要相对应。
1

4. 既要在请求头中携带请求参数，又要在请求体中携带参数，把这Params，data传递参数进行合并即可。

前端：

export function searchPage(currentPage,pageSize,data) {
  return request({
    url: 'test1/employee/searchPage',
    method: 'post',
    params:{
      currentPage: currentPage,
      pageSize:pageSize
    },
    data: data
  })
}
1
2
3
4
5
6
7
8
9
10
11

后端：

    @PostMapping("/searchPage")
    public AxiosResult<PageVo<Employee>> searchPage(
            @RequestParam(defaultValue = "1") int currentPage,
            @RequestParam(defaultValue = "5") int pageSize,
            @RequestBody SearchDto searchDto) {
        PageHelper.startPage(currentPage,pageSize);
        PageVo<Employee> pageVo = employeeService.selectPage(searchDto);
        return AxiosResult.success(pageVo);
    }
1
2
3
4
5
6
7
8
9

请求头以及参数：

请求体中的参数：

注意点：

1. 参数顺序要一致。
2. 理解清楚params，data传递参数的适用情况，以及对应的后端要用@RequestParam,@RequestBody来接收就不会错了。
1
2

参考链接：
axios 用 params/data 发送参数给 springboot controller，如何才能正确获取
https://www.cnblogs.com/dw039/p/11104628.html
axios请求配置
https://www.axios-http.cn/docs/req_config

1
2
3
4
5
6