vue-spring传参

### Vue 向 Spring 传参的方法及示例 在 Vue 和 Spring 之间进行参数传递，可以通过 HTTP 请求实现。Spring 提供了多种注解来处理不同的请求类型和参数绑定方式，而 Vue 可以通过 Axios 或其他 HTTP 客户端库发起请求。以下是几种常见的参数传递方法及其示例。 #### 1. 简单参数传递（`@RequestParam`） 当需要传递简单的键值对参数时，可以使用 `@RequestParam` 注解。Vue 中可以通过 URL 查询字符串或表单编码的方式发送数据。 **Spring 示例代码：** ```java @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("/simple-param") public String getSimpleParam(@RequestParam String name, @RequestParam int age) { return "Name: " + name + ", Age: " + age; } } ``` **Vue 示例代码：** ```javascript axios.get('/api/simple-param', { params: { name: 'John', age: 25 } }).then(response => { console.log(response.data); }); ``` 上述代码中，Vue 使用 `params` 配置对象传递参数[^3]。 --- #### 2. JSON 对象传递（`@RequestBody`） 对于复杂的对象或大量数据的传递，可以使用 `@RequestBody` 注解。Vue 中可以通过 `data` 属性发送 JSON 数据。 **Spring 示例代码：** ```java @RestController @RequestMapping("/api") public class ExampleController { @PostMapping("/json-object") public String postJsonObject(@RequestBody User user) { return "User Name: " + user.getName() + ", Age: " + user.getAge(); } } class User { private String name; private int age; // Getters and Setters } ``` **Vue 示例代码：** ```javascript axios.post('/api/json-object', { name: 'John', age: 25 }).then(response => { console.log(response.data); }); ``` 上述代码中，Vue 使用 `post` 方法发送 JSON 数据，并通过 `@RequestBody` 在 Spring 中解析为对象。 --- #### 3. 表单数据传递（`application/x-www-form-urlencoded`） 如果需要模拟传统 HTML 表单提交，可以使用 `application/x-www-form-urlencoded` 格式。Vue 中需要对数据进行编码。 **Spring 示例代码：** ```java @RestController @RequestMapping("/api") public class ExampleController { @PostMapping(value = "/form-data", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE) public String postFormData(@RequestParam String name, @RequestParam int age) { return "Name: " + name + ", Age: " + age; } } ``` **Vue 示例代码：** ```javascript const params = new URLSearchParams(); params.append('name', 'John'); params.append('age', 25); axios.post('/api/form-data', params).then(response => { console.log(response.data); }); ``` 上述代码中，Vue 使用 `URLSearchParams` 构造表单数据，并通过 `consumes` 属性指定内容类型。 --- #### 4. 文件上传（`@RequestParam` 或 `@RequestBody`） 文件上传通常结合其他参数一起传递，可以使用 `MultipartFile` 类型接收文件。 **Spring 示例代码：** ```java @RestController @RequestMapping("/api") public class ExampleController { @PostMapping("/upload-file") public String uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("name") String name) { return "File Name: " + file.getOriginalFilename() + ", User Name: " + name; } } ``` **Vue 示例代码：** ```javascript const formData = new FormData(); formData.append('file', document.getElementById('fileInput').files[0]); formData.append('name', 'John'); axios.post('/api/upload-file', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response.data); }); ``` 上述代码中，Vue 使用 `FormData` 对象构造文件和其他参数，并通过 `headers` 设置内容类型。 --- ### 注意事项 - 如果需要拦截所有请求并统一处理（如添加 Token），可以在 Vue 中配置 Axios 拦截器。 - Spring 的 `@RequestMapping` 注解支持多种请求方法，可以通过 `method` 参数指定允许的 HTTP 方法[^1]。 ---