需要熟记的知识 七大前后端参数传递类型结合代码讲解

快速预览

  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格式。

正文

查询参数(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")
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请求。但是需要在前后端都进行设置和读取,相对比较麻烦,而且需要考虑文件大小和上传进度等问题。

你可能感兴趣的:(随手记,javascript,前端,后端)