在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");



    }



}