【前端VUE基础（九）】路由传参：params参数和query参数

        当与后端进行数据交互时，前端常常需要将参数传递给后端API。参数传递方式有多种，其中包括params参数和query参数。本教程将介绍这两种参数传递方式，并提供示例和分析。

params参数

使用params参数，参数以路径的一部分进行传递。通常用于表示资源的层级关系或唯一标识符等。在URL中，参数会直接体现为路径片段。

示例

后端接口定义：

@GetMapping("/page/{pageNum}/{pageSize}")
public ResponseResult getPageInfo(@PathVariable Integer pageNum, @PathVariable Integer pageSize) {
    PageVo pageVo = uploadLogService.getPageInfo(pageNum, pageSize);
    return ResponseResult.okResult(pageVo);
}

这段代码中：

1. 使用了@GetMapping注解将URL路径设置/page/{pageNum}/{pageSize}，其中{pageNum}和{pageSize}是路径参数，用于传递页面号和页面大小。
2. 在方法体内，通过@PathVariable注解获取路径参数的值，并调用uploadLogService.getPageInfo(pageNum, pageSize)方法进行相应的处理。
3.  最后，将处理结果封装成ResponseResult对象返回给前端。 

前端调用：

//分页查询数据
export const reqPageInfo = (pageNum,pageSize)=>request({
  url:`/uploadlogs/page/${pageNum}/${pageSize}`,
  method:'get'
});

在前端代码中，通过调用reqPageInfo函数，并传入pageNum和pageSize作为参数，即可发起GET请求。在请求配置中，将URL设置为/uploadlogs/page/${pageNum}/${pageSize}，其中${pageNum}和${pageSize}是占位符，分别表示页面号和页面大小。通过这种方式将路径参数传递给后端接口。

query参数

使用query参数，参数以键值对的形式追加在URL的查询字符串中。适用于传递较为复杂的参数，如筛选条件、排序方式等。

示例

后端接口定义：

    @GetMapping("/page")
    public ResponseResult getAllByPage(@RequestParam("pageNum") Integer pageNum,@RequestParam("pageSize") Integer pageSize){
        PageVo pageVo = uploadFileService.selectUploadFilePage(pageNum,pageSize);
        return  ResponseResult.okResult(pageVo);
    }

在这段代码中，使用了@GetMapping注解将URL路径设置为/page，并通过@RequestParam注解指定了查询参数的名称。在方法体内，通过@RequestParam("pageNum")和@RequestParam("pageSize")注解获取查询参数的值，并调用uploadFileService.selectUploadFilePage(pageNum, pageSize)方法进行相应的处理。最后，将处理结果封装成ResponseResult对象返回给前端。 

前端调用：

export const reqPageInfo = (pageNum, pageSize) => request({
  url: `/uploadlogs/page`,
  method: 'get',
  params: {
    pageNum: pageNum,
    pageSize: pageSize
  }
});

        在前端代码中，通过调用reqPageInfo函数，并传入pageNum和pageSize作为参数，即可发起GET请求。在请求配置中，将URL设置为/uploadlogs/page，并通过params字段传递查询参数。在params字段中，使用pageNum和pageSize作为键名，将对应的值传递给后端接口。

        通过上述方式，前端将查询参数传递给后端，后端通过@RequestParam注解接收参数，并进行相应的处理。这样实现了前后端之间的数据传递和通信。

对比分析

params参数的优点和适用场景：

• 清晰地表示资源的层级关系或唯一标识符等。
• 适用于简单的查询或操作，特别是只有少量参数且参数较为简单的情况。

query参数的优点和适用场景：

• 可以传递复杂的数据结构，如对象、数组等。
• 具备更好的扩展性，可以通过键值对的形式传递多个参数。
• 适用于传递筛选条件、排序方式等较为复杂的参数。

综上所述，选择使用哪种参数传递方式取决于具体的需求和场景。在设计API时，应根据参数的复杂性、含义的明确性、URL的美观性等因素进行权衡。如果需要传递简单的标识符或表示层级关系的参数，适合使用params参数；如果需要传递复杂的数据结构或较多的参数，适合使用query参数。

无论选择哪种方式，都应保持一致性，并遵循相应的设计规范和最佳实践。