springboot和vue怎么写

Spring Boot 和 Vue.js 都是非常流行的 Web 开发框架。下面是一个简单的 Spring Boot 和 Vue.js 的示例，演示了如何将它们连接在一起。

首先，我们需要创建一个 Spring Boot 应用程序。可以使用 Spring Initializr 来创建一个基本的 Spring Boot 应用程序。在创建应用程序时，请确保包含以下依赖项：

- Spring Web
- Spring Data JPA
- H2 Database

然后，我们需要创建一个简单的后端控制器，该控制器将用于处理 HTTP 请求。以下是一个示例控制器：

@RestController
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/users")
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }
}

接下来，我们需要创建一个 Vue.js 应用程序。可以使用 Vue CLI 来创建一个基本的 Vue.js 应用程序。在创建应用程序时，请确保包含以下依赖项：

- Vue.js
- Vue Router
- Axios

然后，我们需要创建一个简单的前端组件，该组件将用于与后端 API 进行交互。以下是一个示例组件：

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <form @submit.prevent="createUser">
      <input type="text" v-model="name" placeholder="Name">
      <button>Create User</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      name: '',
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/users').then(response => {
        this.users = response.data;
      });
    },
    createUser() {
      axios.post('/users', { name: this.name }).then(response => {
        this.users.push(response.data);
        this.name = '';
      });
    },
  },
};
</script>

最后，我们需要将 Vue.js 应用程序与后端应用程序连接起来。我们可以使用 Spring Boot 的静态资源处理器来为 Vue.js 应用程序提供静态资源。以下是一个示例配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/")
                .addResourceLocations("classpath:/public/");
    }
}

该配置将在 classpath:/static/ 和 classpath:/public/ 目录下查找静态资源文件。

现在，我们可以启动应用程序并访问 http://localhost:8080/，应该能够看到一个包含用户列表和创建用户表单的页面。当我们创建一个新用户时，它将与后端 API 进行交互并将新用户添加到列表中。