Analisis cara vue menghantar permintaan kepada program springboot

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi satu halaman. Spring Boot ialah rangka kerja Java yang popular untuk membina aplikasi web. Dalam kebanyakan kes, aplikasi bahagian hadapan perlu menghantar permintaan HTTP ke aplikasi bahagian belakang untuk mendapatkan data atau melaksanakan operasi. Artikel ini akan memperkenalkan cara menghantar permintaan kepada aplikasi Spring Boot dalam aplikasi Vue.

Berikut ialah langkah untuk melaksanakan:

1 Pasang Axios

Axios ialah pustaka JavaScript popular yang boleh membantu kami menghantar permintaan HTTP antara Vue dan Spring Boot. Untuk menggunakan Axios, kami perlu memasangnya dalam aplikasi Vue kami terlebih dahulu. Axios boleh dipasang menggunakan pengurus pakej npm. Hanya laksanakan arahan berikut dalam terminal:

npm install axios

2. Cipta komponen Vue

Kita perlu mencipta komponen Vue yang akan menghantar permintaan HTTP dan memaparkan data tindak balas. Anda boleh menggunakan Vue CLI untuk mencipta projek Vue baharu. Hanya laksanakan arahan berikut dalam terminal:

vue create my-vue-app

Arahan ini akan mencipta projek Vue baharu menggunakan Vue CLI. Seterusnya, kita perlu mencipta komponen baharu dalam projek itu. Cipta fail bernama "springbootComponent.vue" dalam direktori src/components. Komponen mengandungi butang dan elemen div yang memaparkan data responsif. Apabila butang diklik, kaedah "sendRequest" dipanggil. Kaedah ini menggunakan Axios untuk menghantar permintaan HTTP GET ke URL "http://localhost:8080/api/data" dan menetapkan data respons sebagai sebahagian daripada data komponen (iaitu "tindak balas").

<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>

3. Cipta Spring Boot REST API

Kami perlu mencipta Spring Boot REST API untuk menerima permintaan HTTP yang dihantar oleh aplikasi Vue dan mengembalikan data respons. Dalam contoh ini, kami akan mencipta API REST mudah yang akan mengembalikan nombor rawak. Cipta projek Spring Boot baharu dalam Eclipse atau Intellij IDEA dan cipta kelas yang dipanggil "DataController" seperti yang ditunjukkan di bawah:

Dalam kod di atas, kami mentakrifkan kelas yang dipanggil kelas "DataController" dan mentakrifkan GET meminta pemetaan bernama "getData". Dalam kaedah "getData", jana nombor rawak antara 0 dan 999 dan kembalikannya sebagai data tindak balas.

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

4. Menjalankan aplikasi Vue dan Spring Boot

Untuk membolehkan aplikasi Vue dan Spring Boot berfungsi bersama, kita perlu menjalankan kedua-dua aplikasi pada masa yang sama. Di terminal, buka direktori aplikasi Vue dan jalankan arahan berikut:

Perintah ini akan memulakan pelayan pembangunan Vue dan membenarkan kami mengakses aplikasi dalam penyemak imbas (secara lalai, akses URL adalah "http://localhost:8080").

npm run serve

Dalam Eclipse atau Intellij IDEA, jalankan aplikasi Spring Boot. Pada ketika ini, aplikasi Spring Boot akan mula mendengar permintaan HTTP pada URL "http://localhost:8080". Aplikasi Vue akan menggunakan URL ini untuk menghantar permintaan HTTP.

Dalam penyemak imbas, akses aplikasi Vue. Klik butang "Hantar Permintaan" dan aplikasi Vue akan menghantar permintaan HTTP kepada aplikasi Spring Boot. Aplikasi Spring Boot mengembalikan nombor rawak sebagai data respons dan memaparkannya dalam aplikasi Vue.

Ini adalah cara menghantar permintaan ke Spring Boot dalam aplikasi Vue. Dengan menggunakan Axios dan REST API, kami boleh menghantar data permintaan dan respons HTTP dengan mudah antara Vue dan Spring Boot.

Atas ialah kandungan terperinci Analisis cara vue menghantar permintaan kepada program springboot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!