基于现有Vue.js与Spring Boot项目搭建最小化前后端通信流程指南

Got it, let's walk through setting up the simplest communication flow between your Vue frontend and Spring Boot backend step by step. Since you already have both projects running locally, we just need to add a few bits to get them talking.

Step 1: Add a REST Endpoint to Your Spring Boot Backend #

First, let's create a simple endpoint in your Spring Boot app that can receive a message from the frontend and send a reply.

1. Create a new controller class (or add to an existing one) named MessageController.java in your backend project:

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8080") // Allow requests from Vue's default port
public class MessageController {

    @PostMapping("/message")
    public String handleMessage(@RequestBody String incomingMessage) {
        // Log the received message for debugging
        System.out.println("Frontend sent: " + incomingMessage);
        // Send a simple reply back
        return "Got your message! You said: '" + incomingMessage + "'";
    }
}

2. If your Vue app runs on a different port (not 8080), update the origins value in @CrossOrigin to match. Also, make sure your Spring Boot app is running on a unique port (e.g., 8081) to avoid conflicts—you can set this in application.properties:

server.port=8081

Step 2: Update the Vue Frontend to Send & Receive Messages #

Now let's modify your Vue app to send a message to the backend and display the reply. We'll use axios for HTTP requests (it's simpler than raw fetch, but we can cover fetch too if you prefer).

1. First, install axios in your Vue project:

npm install axios

2. Open your HelloWorld.vue component and update it with an input field, send button, and response display:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <!-- Input area to type messages -->
    <div class="message-input">
      <input 
        v-model="userMessage" 
        placeholder="Type a message to send to backend..."
        type="text"
      />
      <button @click="sendMessageToBackend">Send</button>
    </div>

    <!-- Display backend response -->
    <div v-if="backendResponse" class="response">
      <strong>Backend replied:</strong> {{ backendResponse }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      userMessage: '',
      backendResponse: ''
    }
  },
  methods: {
    async sendMessageToBackend() {
      if (!this.userMessage.trim()) return; // Don't send empty messages

      try {
        // Send POST request to backend endpoint
        const response = await axios.post(
          'http://localhost:8081/api/message',
          this.userMessage,
          { headers: { 'Content-Type': 'text/plain' } }
        );
        // Store the reply to display
        this.backendResponse = response.data;
      } catch (error) {
        console.error('Oops, something went wrong:', error);
        this.backendResponse = 'Failed to send message. Check console for details.';
      }
    }
  }
}
</script>

<style scoped>
.message-input {
  margin: 20px 0;
}
input {
  padding: 8px;
  margin-right: 10px;
  width: 300px;
}
button {
  padding: 8px 16px;
  cursor: pointer;
}
.response {
  margin-top: 20px;
  padding: 10px;
  background: #f0f8ff;
  border-radius: 4px;
}
</style>

If you prefer using fetch instead of axios, replace the sendMessageToBackend method with this:

async sendMessageToBackend() {
  if (!this.userMessage.trim()) return;

  try {
    const response = await fetch('http://localhost:8081/api/message', {
      method: 'POST',
      body: this.userMessage,
      headers: { 'Content-Type': 'text/plain' }
    });
    this.backendResponse = await response.text();
  } catch (error) {
    console.error('Error:', error);
    this.backendResponse = 'Failed to send message.';
  }
}

Step 3: Test the Communication Flow #

1. Restart your Spring Boot backend to apply the new controller changes.
2. Start your Vue frontend (run npm run serve if you haven't already).
3. Open your Vue app in the browser (usually http://localhost:8080), type a message in the input field, and click "Send". You should see the backend's reply displayed below!

Quick Troubleshooting Tips #

• CORS Errors: If you see a "No 'Access-Control-Allow-Origin' header" error, double-check the @CrossOrigin annotation in your Spring Boot controller, or add a global CORS configuration if you have multiple endpoints.
• Port Conflicts: Ensure your frontend and backend are running on different ports (e.g., Vue on 8080, Spring Boot on 8081).
• Request Mismatch: Verify the backend endpoint URL in your Vue code matches exactly what you defined in Spring Boot (including /api/message).
• Console Logs: Check your browser's developer console (F12) for frontend errors, and your Spring Boot terminal for backend logs—they'll help pinpoint issues fast.

内容的提问来源于stack exchange，提问作者u123