Spring Boot后端与Vue前端融合：构建高效旅游管理系统

以下是一个简化的代码示例，展示了如何在Spring Boot后端创建一个API接口，并在Vue前端中如何通过axios发送请求并处理响应。

Spring Boot后端Controller部分:

@RestController
@RequestMapping("/api/tours")
public class TourController {
 
    @GetMapping
    public ResponseEntity<List<Tour>> getAllTours() {
        // 假设有一个服务层用于获取所有旅游路线
        List<Tour> tours = tourService.findAll();
        return ResponseEntity.ok(tours);
    }
}

Vue前端部分:

<template>
  <div>
    <ul>
      <li v-for="tour in tours" :key="tour.id">{{ tour.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      tours: []
    };
  },
  created() {
    this.fetchTours();
  },
  methods: {
    fetchTours() {
      axios.get('/api/tours')
        .then(response => {
          this.tours = response.data;
        })
        .catch(error => {
          console.error('There was an error fetching the tours: ', error);
        });
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的Vue组件，它在创建时通过axios发送GET请求到Spring Boot后端的/api/tours接口，以获取所有旅游路线的列表，并将其显示在页面上。这展示了前后端分离开发的一个常见模式，并且有利于提高代码的内聚性和可维护性。