vue和springboot如何实现

Vue 和 Spring Boot 实现前后端分离

Vue 作为前端框架，Spring Boot 作为后端框架，可以通过 RESTful API 实现前后端分离开发。以下是具体实现方式：

前端 Vue 实现

安装 Vue CLI 创建项目：

npm install -g @vue/cli
vue create frontend

配置 Axios 进行 HTTP 请求：

npm install axios

在 Vue 组件中调用后端 API：

import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('http://localhost:8080/api/users')
      .then(response => {
        this.users = response.data;
      });
  }
}

后端 Spring Boot 实现

创建 Spring Boot 项目并添加依赖：

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

创建 RESTful 控制器：

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

    @GetMapping("/users")
    public List<User> getUsers() {
        // 返回用户列表
        return userService.findAll();
    }
}

配置跨域支持：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("GET", "POST");
    }
}

前后端联调

启动 Spring Boot 后端：

mvn spring-boot:run

启动 Vue 前端开发服务器：

npm run serve

部署方案

生产环境部署时：

• 打包 Vue 项目：npm run build
• 将生成的静态文件放入 Spring Boot 的 resources/static 目录
• 打包 Spring Boot 为可执行 JAR

或者：

• 前端部署到 Nginx
• 后端部署到 Tomcat 或直接运行 JAR
• 通过 Nginx 配置反向代理到后端 API