在Vue中请求Spr的简单步骤_请求_方揭法升

作者：编程小白 | 发布时间：2025-06-30 |

在Vue中请求Spring Boot API的简单步骤

用Vue的axios库发送HTTP请求；
在Spring Boot中创建RESTful API接口；
在Vue组件中调用Spring Boot的接口并处理响应。

安装并配置axios

你需要在你的Vue项目中安装axios库。使用npm或yarn来安装它：

 npm install axios # 或者 yarn add axios

然后，在你的Vue项目的main.js文件中全局配置axios：

 import axios from 'axios'; Vue.prototype.$http = axios;

创建Spring Boot RESTful API

在Spring Boot中创建一个RESTful API接口，下面是一个简单的Controller示例：

 @RestController @RequestMapping("/api/messages") public class MessageController { @GetMapping("/{id}") public String getMessage(@PathVariable("id") Long id) { return "Message with ID: " + id; } }

在Vue组件中请求Spring Boot API

在你的Vue组件中使用axios来请求Spring Boot的API。以下是一个Vue组件的示例：

处理跨域问题

如果你的Vue应用和Spring Boot应用运行在不同的端口或域上，你可能遇到跨域资源共享（CORS）问题。在Spring Boot中，你可以这样配置CORS：

 @Configuration public class WebConfig extends WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE"); } }