一般的在开发前后端分离项目的时候不可避免的要涉及到接口调用以及参数传递相关的内容。我们常见的参数传递方式有如下几种
- 查询参数传递
- 路径参数传递
- 请求体参数传递
- 表单数据传递
下面我们就来详细的介绍一下这几种参数传递的方式。
查询参数
当我们在请求的时候可能会需要将请求参数添加到请求路径URL中，这个时候我们就可以通过查询参数传递的方式来对参数进行拼接。
http://localhost/getList?pageSize=1&pageNum=23在上面的例子中，通过查询参数拼接。使用Vue中的Axios库对请求进行发送内容如下
// 使用GET方法
const params = {
pageSize: 1
pageNum: 20
};
axios.get('http://localhost', { params })
.then(response => {
const data = response.data;
})
.catch(error => console.error(error));通过使用Axios中的get()方法，通过查询方式的传递将分页参数拼接到URL上，然后在后端的Spring Boot框架中使用@RequestParam 注解来声明需要被接收到参数。
@GetMapping("/getList")
public ResponseEntity<List<Article>> getList(
@RequestParam("pageSize") int pageSize,
@RequestParam("pageNum") int pageNum) {
return ResponseEntity.ok(articles);
}在整个的例子中，使用的是@GetMapping 注解来声明整个方法是一个GET请求的方法，并且其中getList指定了请求的路径，并且在方法参数中使用了@RequestParam参数来接收传入的参数，并且指定的名称必须与查询参数中的名称是相同的，然后在实际操作逻辑中就可以使用这些参数了。
路径参数
所谓的路径参数也是一种经常被使用的前后端参数传递方式，是用于前端通过URL路径的方式来讲参数变量值传递到后端的一种方式。代码如下
const articleId = 123;
axios.get(`https://example.com/articles/${articleId}`)
.then(response => {
const data = response.data;
// 处理文章数据
})
.catch(error => console.error(error));后端参数接收方式
@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请求，并且将123作为了参数传递到了后端，在后端接收参数的时候使用了@PathVariable 注解来声明这是一个路径参数。
请求体参数
请求体参数通常是用来传递一些比较复杂的参数，例如提交、修改等操作。这种类型的参数，通常使用了POST或者PUT请求来发送到服务端，并且使用了Request Body 将数据作为JSON格式的数据或者使用表单数据进行了传输。
// 使用POST方法提交表单数据
const formData = {
title: '标题',
content: '正文内容',
};
axios.post('https://example.com/articles', formData)
.then(response => {
const data = response.data;
// 处理服务器返回的响应
})
.catch(error => console.error(error));在上面的例子中，通过post方法来发送POST请求，并且请求体使用了formData对象作为参数，也就是说这个请求是一个表单数据，包含了标题和正文两个内容。
@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);
}
在后端接收参数的时候，使用了@RequestBody 来将参数映射到一个请求对象中。然后进行使用。
表单数据参数
上面我们介绍了在Content-Type为application/json格式数据下的传递方式，当然了在我们进行POST或者是PUT请求参数传递的时候还有一种Content-Type为application/x-www-form-urlencoded的情况，也就是说明传递的参数是一个表单参数。如下所示。
// 使用 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));在这个例子中，使用了post()方法发送了一个POST请求，并且将用户名和密码作为表单的数据传递到服务器中，并且这里所指定的Content-Type 就是application/x-www-form-urlencoded类型。接下来我们看看在后端如何接收这些参数
@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("用户名或密码错误");
}
}通过@PostMapping注解声明了一个POST请求处理方法，并且将请求路径设为/login使用了@RequestParam 注解将表单数据中的参数 映射到了方法参数中，这样就可以很方便的获取到这些参数值。
总结
上面我们介绍了几种参数传递的方式，也是在实际开发中最为常用的几种参数传递的方式。希望能够对大家有所帮助。
