快速预览
- 查询参数（Query Parameters）：将参数添加到URL的末尾，使用
?和&进行分隔。例如：https://example.com/search?q=keyword&page=2。 - 路径参数（Path Parameters）：将参数添加到URL的路径中，使用
/进行分隔。例如：https://example.com/users/{id}。 - 请求体参数（Request Body Parameters）：将参数放置在请求体中进行传递，适用于参数较多或者参数较大的情况。常用的格式有JSON、XML等。
- 表单数据（Form Data）：将参数放置在HTTP请求的表单中进行传递，适用于提交表单或者上传文件等场景。
- 头部参数（Header Parameters）：将参数添加到HTTP请求头中进行传递，通常用于传递认证信息或者其他元数据。
- Cookie参数（Cookie Parameters）：将参数添加到HTTP请求的Cookie中进行传递，通常用于存储会话信息或者其他标识符。
- 文件上传（File Upload）：将文件放置在请求体中进行传递，通常使用
multipart/form-data格式。
正文
查询参数（Query Parameters）
当我们需要将请求参数附加到URL上时，我们可以使用查询参数（Query Parameters）。查询参数是以问号（?）分隔的键值对列表，多个参数之间用&符号分隔。例如：
https://example.com/articles?category=technology&sort=desc&page=1
在这个示例中，我们将三个参数category、sort和page附加到了URL上。category的值为technology，sort的值为desc，page的值为1。
前端使用Axios库发送带有查询参数的GET请求的示例如下：
前端
// 使用GET方法请求文章数据，将查询参数附加到URL上const params ={category:'technology',sort:'desc',page:1};
axios.get('https://example.com/articles',{ params }).then(response=>{const data = response.data;// 处理文章数据}).catch(error=> console.error(error));
在这个示例中，我们将查询参数以JavaScript对象的形式传递给Axios库的get()方法，并通过第二个参数的params选项来将它们附加到URL上。在后端，我们可以使用Spring Boot框架的@RequestParam注解来声明接收查询参数的方法参数。例如：
后端
@GetMapping("/articles")publicResponseEntity<List<Article>>getArticles(@RequestParam("category")String category,@RequestParam("sort")String sort,@RequestParam("page")int page){// 处理文章数据List<Article> articles = articleService.getArticles(category, sort, page);returnResponseEntity.ok(articles);}
在这个示例中，我们使用Spring Boot框架的@GetMapping注解来声明一个处理GET请求的方法，其中"/articles"表示请求路径。在方法参数中，我们使用@RequestParam注解来声明三个接收查询参数的方法参数，它们的名称必须与查询参数的键名称相同。在方法体内，我们调用了一个名为getArticles()的方法来从数据库中获取符合查询参数条件的文章数据，并将其封装到一个ResponseEntity对象中返回。
路径参数
路径参数（Path Parameters）是一种常见的前后端数据传递方式，用于向服务器传递变量或参数值，通常出现在URL路径中的一部分，用于描述请求的资源。
在前端，通常使用请求库Axios 构建一个带有路径参数的请求，以便向后端服务器发送请求。
在后端，使用路由Spring Boot等来定义响应请求的控制器方法，并从路径参数中读取请求所需的参数值。
以下是一个基于Axios和Spring Boot的路径参数示例：
前端
// 使用GET方法请求文章数据，将文章ID作为URL路径参数传输const articleId =123;
axios.get(`https://example.com/articles/${articleId}`).then(response=>{const data = response.data;// 处理文章数据}).catch(error=> console.error(error));
后端
@RestController@RequestMapping("/articles")publicclassArticleController{@AutowiredprivateArticleService articleService;@GetMapping("/{id}")publicResponseEntity<Article>getArticle(@PathVariable("id")Long id){// 处理文章数据Article article = articleService.getArticle(id);if(article ==null){// 如果找不到对应的文章，则返回404 Not Found响应returnResponseEntity.notFound().build();}else{// 返回包含文章数据的200 OK响应returnResponseEntity.ok(article);}}}
在这个示例中，我们使用Axios库的get()方法发送一个GET请求，请求地址为
https://example.com/articles/123
，其中123是文章的ID。这个请求将返回文章的JSON数据，并使用response.data属性将其解析为JavaScript对象
在后端，我们使用Spring Boot框架的@GetMapping注解来声明一个GET请求处理方法，其中"/articles/{id}"表示请求路径中的文章ID会作为方法参数中的id变量传入。
请求体参数
请求体参数通常用于传递更复杂的数据，例如提交一个表单或创建一个资源。这种类型的参数通常使用POST或PUT请求来发送到服务器端，并使用请求体（Request Body）将数据作为JSON格式或表单数据进行传输。
我们来看一个示例，前端使用Axios库来发送一个POST请求，请求体包含一个名为title和一个名为content的字段：
前端
// 使用POST方法提交表单数据const formData ={title:'标题',content:'正文内容',};
axios.post('https://example.com/articles', formData).then(response=>{const data = response.data;// 处理服务器返回的响应}).catch(error=> console.error(error));
在这个示例中，我们使用Axios库的post()方法来发送一个POST请求，请求地址为
https://example.com/articles
，请求体参数为formData对象。这个请求将提交一个表单，其中包含一个标题和正文内容。
接下来，我们看一下服务器端如何接收这个请求体参数。后端使用Java语言编写，我们可以使用Spring Boot框架的@RequestBody注解将请求体参数映射到Java对象中：
后端
@PostMapping("/articles")publicResponseEntity<Article>createArticle(@RequestBodyArticleRequest request){// 从请求体参数中获取文章标题和内容String title = request.getTitle();String content = request.getContent();// 创建文章并保存到数据库中Article article = articleService.createArticle(title, content);// 创建成功后返回一个包含文章数据的响应returnResponseEntity.ok(article);}
在这个示例中，我们使用Spring Boot框架的@PostMapping注解来声明一个POST请求处理方法，其中"/articles"表示请求路径。在方法体内，我们使用@RequestBody注解将请求体参数映射到ArticleRequest对象中，该对象包含文章的标题和内容。然后，我们调用一个名为createArticle()的方法来创建一篇文章，并将其保存到数据库中。最后，我们使用ResponseEntity.ok()方法创建一个包含文章数据的成功响应。
请求体参数通常用于传递更复杂的数据。在前端使用Axios库发送POST或PUT请求时，可以将请求体数据作为一个对象传递。在后端使用Spring Boot框架时，可以使用@RequestBody注解将请求体参数映射到Java对象中，然后进行相应的处理。
表单数据
在前端使用 Axios 发送 POST 请求时，我们可以使用 Axios 提供的 post() 方法，并将参数作为一个对象传入。在发送请求时，我们需要将 Content-Type 设置为 application/x-www-form-urlencoded。这是因为表单数据的格式是 key1=value1&key2=value2 这样的形式，需要使用这种格式来将表单数据传递给后端。
以下是一个前端使用 Axios 发送表单数据的示例代码：
前端
// 使用 POST 方法向服务器提交表单数据const formData =newFormData();
formData.append('username','admin');
formData.append('password','123456');
axios.post('https://example.com/login', formData,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(response=>{const data = response.data;// 处理响应数据}).catch(error=> console.error(error));
在这个示例中，我们使用 Axios 的 post() 方法发送一个 POST 请求，将用户名和密码作为表单数据传递给服务器。我们首先创建了一个 FormData 对象，然后使用 append() 方法将参数添加到 FormData 中。最后，在发送请求时，我们将 FormData 对象作为请求体传递给服务器，并将 Content-Type 设置为 application/x-www-form-urlencoded。
接下来我们来看一下后端如何接收表单数据。假设我们使用了 Spring Boot 框架，以下是一个使用 @PostMapping 注解处理表单数据的示例代码：
后端
@PostMapping("/login")publicResponseEntity<String>login(@RequestParam("username")String username,@RequestParam("password")String password){// 处理登录逻辑if(username.equals("admin")&& password.equals("123456")){returnResponseEntity.ok("登录成功");}else{returnResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");}}
在这个示例中，我们使用 Spring Boot 的 @PostMapping 注解声明了一个 POST 请求处理方法，并将请求路径设置为 /login。我们使用 @RequestParam 注解将表单数据中的参数映射到方法的参数中，从而可以方便地获取这些参数的值。在方法体内，我们可以对这些参数进行逻辑处理，最后使用 ResponseEntity 返回响应结果。
需要注意的是，使用 @RequestParam 注解时，如果请求中的参数名与方法参数名不一致，需要使用 @RequestParam(“参数名”) 的形式来指定参数名。
除了表单数据，我们还可以使用其他类型的请求体参数进行参数传递，比如 JSON 数据和文件数据。对于不同的请求体参数类型，我们需要使用不同的 Content-Type 类型来指定请求体的格式，从而让服务器能够正确地解析请求体中的参数。
头部参数
头部参数（Header Parameters）是HTTP请求头中包含的一些参数，用于传递与请求内容相关的附加信息，比如请求的认证信息、用户代理信息、内容类型等。
在前端使用Axios库时，可以在请求中通过headers选项来设置请求头参数。例如：
前端
axios.get('/articles',{headers:{'Authorization':'Bearer token','Content-Type':'application/json'}})
在这个示例中，我们使用了Axios库的get()方法来发送一个GET请求，并通过headers选项设置了两个请求头参数：Authorization和Content-Type。Authorization参数用于传递请求的认证信息，Content-Type参数用于设置请求的内容类型。
在后端使用Java语言时，可以通过Spring框架中的@RequestHeader注解来获取请求头参数。例如：
后端
@GetMapping("/articles")publicResponseEntity<List<Article>>getArticles(@RequestHeader("Authorization")String authorization){// 处理请求头参数}
在这个示例中，我们使用了Spring框架的@GetMapping注解来声明一个GET请求处理方法，并通过@RequestHeader注解获取了请求头参数Authorization。这个参数将作为方法参数authorization的值传入，供后续处理使用。
除了上述例子中的Authorization和Content-Type参数之外，常见的头部参数还包括：
- User-Agent：用户代理信息，用于告诉服务器请求的客户端是什么类型的浏览器或其他应用程序；
- Accept：告诉服务器客户端期望接收的响应内容类型；
- Referer：表示请求的来源页面，在有些情况下可以用于防止CSRF攻击；
- Cookie：表示客户端传递的Cookie信息。
在实际开发中，需要根据具体的业务需求和开发框架来选择合适的头部参数类型，并合理设置请求头参数。
Cookie参数
当我们需要在客户端和服务器之间传递小型数据时，可以使用 Cookie 参数。Cookie 参数是通过在客户端中存储一个小文本文件来实现的。在每个后续请求中，客户端会自动将这个文本文件发送回服务器，以便服务器可以读取它。在前后端应用中，Cookie 参数通常用于存储用户的身份验证令牌或其他应用数据。
下面是一个使用 Cookie 参数的示例，我们将使用 Axios 库在前端发送请求，而后端是基于 Spring Boot 框架开发的 Java 应用程序。假设我们有一个名为“username”的 Cookie，它包含当前用户的用户名。我们将使用 Axios 发送一个 GET 请求，该请求将请求处理方法中使用 @CookieValue 注解从 Cookie 中读取用户名。
前端
axios.get('https://example.com/user-info',{withCredentials:true}).then(response=>{const data = response.data;// 处理响应数据}).catch(error=> console.error(error));
在这个示例中，我们使用 Axios 库的 get() 方法发送一个 GET 请求，请求地址为
https://example.com/user-info
。我们还将 withCredentials 参数设置为 true，以确保 Axios 在发送请求时将包括 Cookie 数据。在成功接收到响应后，我们可以通过 response.data 属性来获取响应数据。
后端
@GetMapping("/user-info")publicResponseEntity<UserInfo>getUserInfo(@CookieValue(value ="username")String username){// 处理请求，使用 Cookie 中的用户名获取用户信息UserInfo userInfo = userService.getUserInfo(username);returnResponseEntity.ok(userInfo);}
在这个示例中，我们使用 Spring Boot 框架的 @CookieValue 注解来声明一个 Cookie 参数，该参数将从名为“username”的 Cookie 中读取用户的用户名。在方法体内，我们使用这个用户名来获取用户信息，并返回一个包含用户信息的 ResponseEntity 对象。
以上是使用 Cookie 参数进行前后端数据传递的一个示例，通过在客户端和服务器之间传递 Cookie 数据，我们可以方便地在应用程序中传递小型数据。
文件上传
文件上传是一种常见的前后端参数传递方式，通常用于上传用户上传的图片、音视频等多媒体文件。在前端，我们可以使用Axios库的post()方法来发送一个POST请求，将文件作为请求体进行上传。在后端，我们可以使用Spring Boot框架的MultipartFile类来接收上传的文件数据。
前端代码
下面是一个使用Axios上传文件的示例：
// 选择一个文件const fileInput = document.querySelector('input[type="file"]');const file = fileInput.files[0];// 创建一个FormData对象，用于将文件数据作为请求体上传const formData =newFormData();
formData.append('file', file);// 发送POST请求，将FormData对象作为请求体上传
axios.post('https://example.com/upload', formData).then(response =>{// 处理上传成功后的响应数据
console.log(response.data);}).catch(error =>{// 处理上传失败的情况
console.error(error);});
在这个示例中，我们使用了input元素来让用户选择要上传的文件，然后使用FormData对象将文件数据作为请求体进行上传。在Axios的post()方法中，我们将请求地址设为
https://example.com/upload
，将FormData对象作为请求体进行上传。如果上传成功，Axios将返回一个包含响应数据的Response对象，我们可以使用response.data属性来获取这些数据。
后端代码
下面是一个使用Spring Boot接收上传文件的示例：
@PostMapping("/upload")publicResponseEntity<String>handleFileUpload(@RequestParam("file")MultipartFile file){// 将上传的文件保存到服务器中try{File dest =newFile("/path/to/save/uploaded/file");
file.transferTo(dest);returnResponseEntity.ok("File uploaded successfully");}catch(IOException e){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");}}
在这个示例中，我们使用了Spring Boot框架的@PostMapping注解来声明一个处理文件上传请求的方法。方法参数中的@RequestParam(“file”)注解表示请求中名为"file"的参数将被映射到file参数中
注意事项
在使用文件上传时，需要注意以下几个事项：
- 文件上传请求的Content-Type需要设置为"multipart/form-data"；
- 在前端使用FormData对象将文件数据作为请求体上传时，需要使用append()方法来添加文件数据；
- 在后端使用MultipartFile类接收文件数据时，需要使用@RequestParam注解来映射请求参数；
- 在后端处理文件上传请求时，需要注意文件保存路径的权限问题，避免因权限不足而导致文件保存失败。
总结
不同的参数传输方式有其各自的优缺点，我们需要根据实际业务场景来选择最合适的方式。
- 查询参数（Query Parameters）：常用于GET请求，可以直接暴露在URL中，方便调试和传递简单参数。但是对于大量参数或者参数包含敏感信息时，不适合使用查询参数传递。
- 请求体参数（Request Body Parameters）：可以传递大量的数据和复杂的结构体数据，适合于POST、PUT、PATCH等请求。但是需要在前后端都进行序列化和反序列化，相对比较复杂。
- 路径参数（Path Parameters）：常用于RESTful API中，可以让URL更加语义化。但是对于大量参数或者参数长度过长时，不适合使用路径参数传递。
- 头部参数（Header Parameters）：可以用于身份验证等场景，相对比较安全。但是需要在前后端都进行设置和读取，相对比较麻烦。
- Cookie参数（Cookie Parameters）：可以用于跟踪用户状态等场景。但是需要在前后端都进行设置和读取，相对比较麻烦，而且可能会受到浏览器的限制。
- 表单数据（Form Data）：常用于提交表单数据，可以直接将表单数据序列化成键值对。但是对于复杂的结构体数据，不太适合使用表单数据传递。
- 文件上传（File Upload）：可以上传大文件或者二进制文件，适合于POST请求。但是需要在前后端都进行设置和读取，相对比较麻烦，而且需要考虑文件大小和上传进度等问题。
版权归原作者 变成派大星 所有， 如有侵权，请联系我们删除。