vue如何发送请求到springboot程序-java教程-PHP中文网

vue如何发送请求到springboot程序

王林

发布： 2023-05-13 17:07:06

转载

764 人浏览过

下面是实现的步骤：

1. 安装Axios

Axios是一个流行的JavaScript库，可以帮助我们在Vue和Spring Boot之间发送HTTP请求。要使用Axios，我们需要先在Vue应用程序中安装它。可以使用npm包管理器来安装Axios。在终端中执行以下命令即可：

npm install axios

登录后复制

2. 创建Vue组件

我们需要创建一个Vue组件，它将发送HTTP请求并显示响应数据。可以使用Vue CLI来创建一个新的Vue项目。在终端中执行以下命令即可：

vue create my-vue-app

登录后复制

此命令将使用Vue CLI创建一个新的Vue项目。接下来，我们需要在该项目中创建一个新的组件。在src/components目录中创建一个名为"springbootComponent.vue"的文件，文件内容如下：

<template>
  <div>
    <button v-on:click="sendRequest">发送请求</button>
    <div v-if="response">{{ response }}</div>
  </div>
</template>

<script>
import axios from &#39;axios&#39;;

export default {
  name: &#39;springboot-component&#39;,
  data() {
    return {
      response: null
    };
  },
  methods: {
    sendRequest() {
      axios.get(&#39;http://localhost:8080/api/data&#39;)
        .then(response => this.response = response.data)
        .catch(error => console.log(error));
    }
  }
};
</script>

登录后复制

在上面的代码中，我们定义了一个名为"springboot-component"的Vue组件。该组件包含一个按钮和一个用于显示响应数据的div元素。当单击按钮时，将调用"sendRequest"方法。该方法使用Axios发送一个HTTP GET请求到"http://localhost:8080/api/data" URL，并将响应数据设置为组件数据的一部分（即“response”）。

3. 创建Spring Boot REST API

我们需要创建一个Spring Boot REST API，以便接收Vue应用程序发送的HTTP请求，并返回响应数据。在此示例中，我们将创建一个简单的REST API，该API将返回随机的数字。在Eclipse或Intellij IDEA中创建一个新的Spring Boot项目，并创建一个名为"DataController"的类，如下所示：

@RestController
@RequestMapping("/api")
public class DataController {
   @GetMapping("/data")
   public int getData() {
      return new Random().nextInt(1000);
   }
}

登录后复制

在上面的代码中，我们定义了一个名为"DataController"的类，并定义了一个名为"getData"的GET请求映射。在"getData"方法中，生成一个介于0到999之间的随机数字，并将其作为响应数据返回。