vue如何發(fā)送請(qǐng)求到springboot程序

今天小編給大家分享一下vue如何發(fā)送請(qǐng)求到springboot程序的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

下面是實(shí)現(xiàn)的步驟：

1. 安裝Axios

Axios是一個(gè)流行的JavaScript庫，可以幫助我們?cè)赩ue和Spring Boot之間發(fā)送HTTP請(qǐng)求。要使用Axios，我們需要先在Vue應(yīng)用程序中安裝它?？梢允褂胣pm包管理器來安裝Axios。在終端中執(zhí)行以下命令即可：

npm install axios

2. 創(chuàng)建Vue組件

我們需要?jiǎng)?chuàng)建一個(gè)Vue組件，它將發(fā)送HTTP請(qǐng)求并顯示響應(yīng)數(shù)據(jù)?？梢允褂肰ue CLI來創(chuàng)建一個(gè)新的Vue項(xiàng)目。在終端中執(zhí)行以下命令即可：

vue create my-vue-app

此命令將使用Vue CLI創(chuàng)建一個(gè)新的Vue項(xiàng)目。接下來，我們需要在該項(xiàng)目中創(chuàng)建一個(gè)新的組件。在src/components目錄中創(chuàng)建一個(gè)名為"springbootComponent.vue"的文件，文件內(nèi)容如下：

<template>
  <div>
    <button v-on:click="sendRequest">發(fā)送請(qǐng)求</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>

在上面的代碼中，我們定義了一個(gè)名為"springboot-component"的Vue組件。該組件包含一個(gè)按鈕和一個(gè)用于顯示響應(yīng)數(shù)據(jù)的div元素。當(dāng)單擊按鈕時(shí)，將調(diào)用"sendRequest"方法。該方法使用Axios發(fā)送一個(gè)HTTP GET請(qǐng)求到"http://localhost:8080/api/data" URL，并將響應(yīng)數(shù)據(jù)設(shè)置為組件數(shù)據(jù)的一部分（即“response”）。

3. 創(chuàng)建Spring Boot REST API

我們需要?jiǎng)?chuàng)建一個(gè)Spring Boot REST API，以便接收Vue應(yīng)用程序發(fā)送的HTTP請(qǐng)求，并返回響應(yīng)數(shù)據(jù)。在此示例中，我們將創(chuàng)建一個(gè)簡單的REST API，該API將返回隨機(jī)的數(shù)字。在Eclipse或Intellij IDEA中創(chuàng)建一個(gè)新的Spring Boot項(xiàng)目，并創(chuàng)建一個(gè)名為"DataController"的類，如下所示：

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

在上面的代碼中，我們定義了一個(gè)名為"DataController"的類，并定義了一個(gè)名為"getData"的GET請(qǐng)求映射。在"getData"方法中，生成一個(gè)介于0到999之間的隨機(jī)數(shù)字，并將其作為響應(yīng)數(shù)據(jù)返回。

4. 運(yùn)行Vue和Spring Boot應(yīng)用程序

為了使Vue和Spring Boot應(yīng)用程序協(xié)同工作，我們需要同時(shí)運(yùn)行這兩個(gè)應(yīng)用程序。在終端中，打開Vue應(yīng)用程序目錄，并運(yùn)行以下命令：

npm run serve

此命令將啟動(dòng)Vue開發(fā)服務(wù)器，并使我們可以在瀏覽器中訪問應(yīng)用程序（默認(rèn)情況下，訪問URL為"http://localhost:8080"）。

在Eclipse或Intellij IDEA中，運(yùn)行Spring Boot應(yīng)用程序。此時(shí)，Spring Boot應(yīng)用程序?qū)㈤_始監(jiān)聽"http://localhost:8080" URL上的HTTP請(qǐng)求。Vue應(yīng)用程序?qū)⑹褂么薝RL來發(fā)送HTTP請(qǐng)求。

在瀏覽器中，訪問Vue應(yīng)用程序。單擊“發(fā)送請(qǐng)求”按鈕，Vue應(yīng)用程序?qū)⑾騍pring Boot應(yīng)用程序發(fā)送HTTP請(qǐng)求。Spring Boot應(yīng)用程序?qū)㈦S機(jī)數(shù)字作為響應(yīng)數(shù)據(jù)返回，并將其顯示在Vue應(yīng)用程序中。

這就是在Vue應(yīng)用程序中發(fā)送請(qǐng)求到Spring Boot的方法。通過使用Axios和REST API，我們可以在Vue和Spring Boot之間輕松地發(fā)送HTTP請(qǐng)求和響應(yīng)數(shù)據(jù)。

以上就是“vue如何發(fā)送請(qǐng)求到springboot程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。