解析vue怎麼發送請求到springboot程序-前端問答-PHP中文網

解析vue怎麼發送請求到springboot程序

PHPz

發布： 2023-04-10 09:24:12

原創

848 人瀏覽過

Vue是一個流行的JavaScript框架，可以用來建立單一頁面應用程式。 Spring Boot是一個流行的Java框架，可用於建立Web應用程式。在許多情況下，前端應用程式需要發送HTTP請求到後端應用程式以獲取資料或執行操作。本文將介紹如何在Vue應用程式中傳送請求到Spring Boot應用程式。

下面是實現的步驟：

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 'axios';

export default {
  name: 'springboot-component',
  data() {
    return {
      response: null
    };
  },
  methods: {
    sendRequest() {
      axios.get('http://localhost:8080/api/data')
        .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之間的隨機數字，並將其作為回應資料傳回。