springbootvue项目案例

以下是一个简单的 Spring Boot + Vue.js 的项目案例：

1. 创建一个 Spring Boot 项目

使用 Maven 创建一个 Spring Boot 项目，添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>

2. 创建一个 RESTful API

创建一个 RESTful API，用于返回一些数据。可以在 `src/main/java` 下创建一个 Java 类：

@RestController
public class ApiController {
    @GetMapping("/api/data")
    public String getData() {
        return "Hello World";
    }
}

3. 创建一个 Vue.js 应用

使用 Vue CLI 创建一个 Vue.js 应用，添加以下依赖：

{
  "dependencies": {
    "axios": "^0.19.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  }
}

4. 创建一个 Vue.js 页面

在 Vue.js 应用中创建一个页面，用于显示后端返回的数据。可以在 `src/views` 下创建一个 Vue 文件：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },

  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.message = response.data
      })
  }
}
</script>

5. 运行应用

在命令行中运行以下命令：

mvn spring-boot:run

然后在另一个命令行窗口中运行以下命令：

npm run serve

现在可以在浏览器中访问 `http://localhost:8080`，看到一个显示 "Hello World" 的页面。