需要熟记的知识 七大前后端参数传递类型

快速预览

1. 查询参数（Query Parameters）：将参数添加到URL的末尾，运用?和&进行分隔。例如：https://example.com/search?q=keyword&page=2。

2. 途径参数（Path Parameters）：将参数添加到URL的途径中，运用/进行分隔。例如：https://example.com/users/{id}。

3. 恳求体参数（Request Body Parameters）：将参数放置在恳求体中进行传递，适用于参数较多或许参数较大的状况。常用的格局有JSON、XML等。

4. 表单数据（Form Data）：将参数放置在HTTP恳求的表单中进行传递，适用于提交表单或许上传文件等场景。

5. 头部参数（Header Parameters）：将参数添加到HTTP恳求头中进行传递，一般用于传递认证信息或许其他元数据。

6. Cookie参数（Cookie Parameters）：将参数添加到HTTP恳求的Cookie中进行传递，一般用于存储会话信息或许其他标识符。

7. 文件上传（File Upload）：将文件放置在恳求体中进行传递，一般运用multipart/form-data格局。

正文

查询参数

当咱们需求将恳求参数附加到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")
public ResponseEntity<List<Article>> getArticles(
    @RequestParam("category") String category,
    @RequestParam("sort") String sort,
    @RequestParam("page") int page) {
  // 处理文章数据
  List<Article> articles = articleService.getArticles(category, sort, page);
  return ResponseEntity.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")
public class ArticleController {
  @Autowired
  private ArticleService articleService;
  @GetMapping("/{id}")
  public ResponseEntity<Article> getArticle(@PathVariable("id") Long id) {
    // 处理文章数据
    Article article = articleService.getArticle(id);
    if (article == null) {
      // 假如找不到对应的文章，则回来404 Not Found呼应
      return ResponseEntity.notFound().build();
    } else {
      // 回来包括文章数据的200 OK呼应
      return ResponseEntity.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")
public ResponseEntity<Article> createArticle(@RequestBody ArticleRequest request) {
  // 从恳求体参数中获取文章标题和内容
  String title = request.getTitle();
  String content = request.getContent();
  // 创立文章并保存到数据库中
  Article article = articleService.createArticle(title, content);
  // 创立成功后回来一个包括文章数据的呼应
  return ResponseEntity.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 = new FormData();
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")
public ResponseEntity<String> login(@RequestParam("username") String username, @RequestParam("password") String password) {
  // 处理登录逻辑
  if (username.equals("admin") && password.equals("123456")) {
    return ResponseEntity.ok("登录成功");
  } else {
    return ResponseEntity.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")
public ResponseEntity<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")
public ResponseEntity<UserInfo> getUserInfo(@CookieValue(value = "username") String username) {
  // 处理恳求，运用 Cookie 中的用户名获取用户信息
  UserInfo userInfo = userService.getUserInfo(username);
  return ResponseEntity.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 = new FormData();
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")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
  // 将上传的文件保存到服务器中
  try {
    File dest = new File("/path/to/save/uploaded/file");
    file.transferTo(dest);
    return ResponseEntity.ok("File uploaded successfully");
  } catch (IOException e) {
    return ResponseEntity.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恳求。可是需求在前后端都进行设置和读取，相对比较麻烦，并且需求考虑文件巨细和上传进度等问题。

本文正在参加「金石方案」