vue가 springboot 프로그램에 요청을 보내는 방법 분석

Vue는 단일 페이지 애플리케이션을 구축하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Spring Boot는 웹 애플리케이션 구축에 널리 사용되는 Java 프레임워크입니다. 많은 경우 프런트엔드 애플리케이션은 데이터를 얻거나 작업을 수행하기 위해 백엔드 애플리케이션에 HTTP 요청을 보내야 합니다. 이 기사에서는 Vue 애플리케이션에서 Spring Boot 애플리케이션에 요청을 보내는 방법을 소개합니다.

구현 단계는 다음과 같습니다.

1. Axios 설치

Axios는 Vue와 Spring Boot 간에 HTTP 요청을 보내는 데 도움이 되는 인기 있는 JavaScript 라이브러리입니다. Axios를 사용하려면 먼저 Vue 애플리케이션에 이를 설치해야 합니다. Axios는 npm 패키지 관리자를 사용하여 설치할 수 있습니다. 터미널에서 다음 명령을 실행하세요:

npm install axios

2. Vue 구성 요소 만들기

HTTP 요청을 보내고 응답 데이터를 표시하는 Vue 구성 요소를 만들어야 합니다. Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성할 수 있습니다. 터미널에서 다음 명령을 실행하세요.

vue create my-vue-app

이 명령은 Vue CLI를 사용하여 새 Vue 프로젝트를 생성합니다. 다음으로, 프로젝트에서 새 구성요소를 생성해야 합니다. src/comComponents 디렉터리에 "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-comComponent"라는 Vue 구성 요소를 정의합니다. 구성 요소에는 반응형 데이터를 표시하는 버튼과 div 요소가 포함되어 있습니다. 버튼을 클릭하면 "sendRequest" 메소드가 호출됩니다. 이 방법은 Axios를 사용하여 HTTP GET 요청을 "http://localhost:8080/api/data" URL로 보내고 응답 데이터를 구성 요소 데이터(예: "응답")의 일부로 설정합니다.

3. Spring Boot REST API 생성

Vue 애플리케이션에서 보낸 HTTP 요청을 수신하고 응답 데이터를 반환하려면 Spring Boot REST API를 생성해야 합니다. 이 예에서는 난수를 반환하는 간단한 REST 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 사이의 난수를 생성하여 응답 데이터로 반환합니다.

4. Vue 및 Spring Boot 애플리케이션 실행

Vue 및 Spring Boot 애플리케이션이 함께 작동하려면 두 애플리케이션을 동시에 실행해야 합니다. 터미널에서 Vue 애플리케이션 디렉터리를 열고 다음 명령을 실행합니다:

npm run serve

이 명령을 사용하면 Vue 개발 서버가 시작되고 브라우저에서 애플리케이션에 액세스할 수 있습니다(기본적으로 액세스 URL은 "http:// localhost"입니다). :8080").

Eclipse 또는 Intellij IDEA에서 Spring Boot 애플리케이션을 실행하세요. 이 시점에서 Spring Boot 애플리케이션은 "http://localhost:8080" URL에서 HTTP 요청을 수신하기 시작합니다. Vue 애플리케이션은 이 URL을 사용하여 HTTP 요청을 보냅니다.

브라우저에서 Vue 애플리케이션에 액세스하세요. "요청 보내기" 버튼을 클릭하면 Vue 애플리케이션이 Spring Boot 애플리케이션에 HTTP 요청을 보냅니다. Spring Boot 애플리케이션은 응답 데이터로 난수를 반환하고 이를 Vue 애플리케이션에 표시합니다.

Vue 애플리케이션에서 Spring Boot에 요청을 보내는 방법입니다. Axios와 REST API를 사용하면 Vue와 Spring Boot 간에 HTTP 요청 및 응답 데이터를 쉽게 보낼 수 있습니다.

위 내용은 vue가 springboot 프로그램에 요청을 보내는 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!