spring boot Vue

### Spring Boot 整合 Vue.js 示例教程

#### 项目结构规划
为了实现前后端分离，在创建项目时应考虑将前端和后端代码分开维护。通常情况下，Vue.js 应用会被放置在一个独立的文件夹内，而 Spring Boot 则负责处理 API 请求并返回 JSON 数据给前端。

#### 创建 Spring Boot 后端应用
利用 Spring Initializr 初始化一个新的 Maven 或 Gradle 工程，并加入 Web 和 DevTools 起步依赖以加速开发过程[^1]。

对于安全性和数据访问层的支持，可以引入 `spring-boot-starter-security` 及 `spring-boot-starter-data-jpa` 来增强项目的功能特性。

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

定义 RESTful 接口用于向前端传递业务逻辑所需的数据：

@RestController
@RequestMapping("/api")
public class ExampleController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello from backend!";
    }
}

#### 构建 Vue.js 前端部分
采用 Vue CLI 工具初始化 Vue.js 项目，这一步骤能够帮助开发者迅速建立好基础环境设置以及必要的插件安装工作。

npm install -g @vue/cli
vue create frontend-app
cd frontend-app

在 Vue.js 中配置 axios 进行 HTTP 请求调用，从而获取来自 Spring Boot 提供的服务接口响应信息：

import axios from 'axios';

export default {
  data() {
    return { message: '' };
  },
  mounted() {
    this.fetchMessage();
  },
  methods: {
    async fetchMessage() {
      try {
        const response = await axios.get('http://localhost:8080/api/hello');
        this.message = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};

为了让两者更好地协同运作，还需要调整 CORS 设置允许跨域资源共享请求；另外也可以探索 Nginx 的反向代理机制作为生产环境中的一种优化方案[^2]。