springboot vue运行

### 关于Spring Boot与Vue.js的整合 #### Spring Boot简介 SpringBoot作为一款开源轻量级框架，在简化Spring应用搭建和开发方面表现出色。它不仅继承了Spring原有的特性，还通过减少配置复杂度提升了开发者体验。尤其针对大型项目中的jar包管理难题，SpringBoot提供了有效的解决方案，减少了版本冲突带来的不稳定因素[^2]。 #### Vue.js概述 Vue是一套构建用户界面的渐进式JavaScript框架，易于上手且灵活多变，非常适合用于单页面应用程序(SPA)的创建。对于前后端分离架构而言，Vue可以独立处理前端逻辑并与后端API交互获取数据展示给用户。 #### 配置CORS跨域资源共享 为了实现前后端分离模式下不同域名间的请求互通，需设置Cross-Origin Resource Sharing(CORS)，即允许来自特定源站的HTTP请求访问资源。具体做法是在Spring Boot工程里添加如下Java类： ```java import org.springframework.context.annotation.Bean; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")// 所有路径都支持跨域调用 .allowedOrigins("*") // 支持所有来源站点发起的跨域请求 .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS"); // 允许的方法类型 } }; } } ``` 此段代码定义了一个名为`corsConfigurer()`方法返回的对象实现了WebMvcConfigurer接口并重写了addCorsMappings函数，从而注册全局性的跨域策略[^4]。 #### 构建RESTful API服务端点 为了让Vue客户端能够顺利地同服务器通信，需要在Spring Boot中建立相应的控制器来提供REST风格的服务接口。下面给出一个简单的例子说明如何暴露一个获取消息列表的功能： ```java @RestController @RequestMapping("/api/messages") public class MessageController { private final List<String> messages = Arrays.asList( "Hello from backend!", "Welcome to learn Spring Boot and Vue!" ); @GetMapping("") public ResponseEntity<List<String>> getMessages(){ return new ResponseEntity<>(messages, HttpStatus.OK); } } ``` 上述示例展示了如何利用@RestController注解标记此类为控制层组件，并通过@GetMapping映射具体的URL到getMessages业务操作上。每当接收到对应格式的GET请求时就会触发该方法执行并向响应体写入JSON序列化的字符串数组[^1]。 #### 客户端Vue实例化axios发送异步请求 最后一步就是在Vue项目内部引入Axios库负责发起AJAX调用来消费刚才准备好的API。这里假设已经安装好vue-cli工具链并且初始化完毕一个新的SPA模板，则可以在src/main.js文件内完成必要的网络层封装： ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: `http://localhost:8080/api`, // 后端部署的实际地址 withCredentials: false, headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }); export default apiClient; ``` 接着就可以在各个视图组件里面轻松调用了，比如这样读取远程的消息集合： ```javascript <template> <div id="app"> <ul v-if="loading">Loading...</ul> <ul v-else> <li v-for="(msg,index) of msgs" :key="index">{{ msg }}</li> </ul> </div> </template> <script> import Api from './main' export default { name:'App', data () { return { msgs:[], loading:true }; }, methods:{ fetchData:async function(){ try{ let response=await Api.get('/messages'); this.msgs=response.data; }catch(error){ console.error('There was an error fetching the data!',error); }finally{ this.loading=false; } } }, created(){ this.fetchData(); } } </script> ``` 这段脚本首先声明了一个计算属性`Api`指向之前自定义过的HttpClient对象；其次定义了一组状态变量保存加载标志位以及最终呈现的数据集；再者编写了一个异步方法尝试向指定位置发出GET命令并将结果赋值给局部字段；最后借助生命周期钩子确保页面渲染完成后立即启动初次拉取流程[^3]。