vue+springboot搭建

### 使用 Vue 和 Spring Boot 搭建项目 #### 创建 Spring Boot 后端服务 为了创建基于 Spring Boot 的后端应用，可以使用 Spring Initializr 来快速初始化一个新的 Maven 或 Gradle 项目。选择 Web, JPA, MySQL (或其他数据库) 等依赖项来构建基础的服务框架。 安装完成后，在 `src/main/java` 下找到主应用程序类并启动它以验证一切正常工作[^1]。 ```java @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` #### 构建 Vue 前端环境 对于前端部分，则通过 Vue CLI 工具来建立新的 Vue 应用程序。这允许开发者利用现代 JavaScript 功能以及单文件组件的支持。执行如下命令安装 Vue CLI 并生成新项目： ```bash npm install -g @vue/cli vue create frontend-app cd frontend-app npm run serve ``` 上述操作会设置好本地开发服务器，并自动打开浏览器窗口展示默认欢迎界面[^2]。 #### 配置跨域资源共享(CORS) 由于前后端分离架构下，默认情况下不同源之间的请求会被阻止，因此需要配置 CORS 政策使得两者能够相互通信。可以在 Spring Boot 中添加相应过滤器或全局配置来解决这个问题。 ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 生产环境中应指定具体域名而非通配符 .allowedMethods("GET", "POST", "PUT", "DELETE"); } } ``` #### 实现接口对接 当两端都准备好之后就可以着手于 API 接口的设计与实现了。通常会在 Spring Boot 控制层定义 RESTful 样式的 HTTP 请求处理方法；而在 Vue 组件内部则借助 axios 发起 AJAX 调用来获取数据更新视图状态。 例如，在控制器中提供一个简单的 GET 方法返回 JSON 数据给客户端: ```java @RestController @RequestMapping("/api/books") public class BookController { private final BookService bookService; @Autowired public BookController(BookService bookService){ this.bookService = bookService; } @GetMapping("") public ResponseEntity<List<Book>> getAllBooks(){ List<Book> books = bookService.findAll(); return new ResponseEntity<>(books, HttpStatus.OK); } } ``` 与此同时，在 Vue 组件里调用此 API 获取书籍列表信息： ```javascript import axios from 'axios'; export default { name: 'BookList', data() { return { books: [] }; }, mounted() { axios.get('/api/books') .then(response => { this.books = response.data; }) .catch(error => console.log(error)); } }; ``` 这样就完成了一个基本的 Vue + Spring Boot 项目的搭建过程。