Analyze how vue sends a request to the springboot program

Vue is a popular JavaScript framework that can be used to build single-page applications. Spring Boot is a popular Java framework for building web applications. In many cases, front-end applications need to send HTTP requests to back-end applications to obtain data or perform operations. This article will introduce how to send requests to Spring Boot applications in Vue applications.

The following are the steps to implement:

1. Install Axios

Axios is a popular JavaScript library that can help us send HTTP requests between Vue and Spring Boot. To use Axios, we need to install it in our Vue application first. Axios can be installed using the npm package manager. Just execute the following command in the terminal:

npm install axios

2. Create a Vue component

We need to create a Vue component that will send HTTP requests and display response data. You can use the Vue CLI to create a new Vue project. Just execute the following command in the terminal:

vue create my-vue-app

This command will create a new Vue project using the Vue CLI. Next, we need to create a new component in the project. Create a file named "springbootComponent.vue" in the src/components directory. The file content is as follows:

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

In the above code, we define a Vue component named "springboot-component". The component contains a button and a div element that displays the responsive data. When the button is clicked, the "sendRequest" method is called. This method uses Axios to send an HTTP GET request to the "http://localhost:8080/api/data" URL and sets the response data as part of the component data (i.e. "response").

3. Create Spring Boot REST API

We need to create a Spring Boot REST API to receive HTTP requests sent by the Vue application and return response data. In this example, we will create a simple REST API that will return random numbers. Create a new Spring Boot project in Eclipse or Intellij IDEA and create a class named "DataController" as shown below:

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

In the above code, we defined a class named "DataController" "class and defines a GET request mapping named "getData". In the "getData" method, generate a random number between 0 and 999 and return it as the response data.

4. Running Vue and Spring Boot applications

In order for Vue and Spring Boot applications to work together, we need to run both applications at the same time. In the terminal, open the Vue application directory and run the following command:

npm run serve

This command will start the Vue development server and allow us to access the application in the browser (by default, the access URL is " http://localhost:8080").

In Eclipse or Intellij IDEA, run the Spring Boot application. At this point, the Spring Boot application will start listening for HTTP requests on the "http://localhost:8080" URL. The Vue application will use this URL to send HTTP requests.

In the browser, access the Vue application. Click the "Send Request" button and the Vue application will send an HTTP request to the Spring Boot application. The Spring Boot application returns the random number as response data and displays it in the Vue application.

This is how to send requests to Spring Boot in a Vue application. By using Axios and REST API, we can easily send HTTP request and response data between Vue and Spring Boot.

The above is the detailed content of Analyze how vue sends a request to the springboot program. For more information, please follow other related articles on the PHP Chinese website!