暗黑魔电西格玛 新手入门的符文之语

### Vue 和 Spring Boot 前后端分离配置教程 #### 1. 配置概述 前后端分离是一种现代化的 Web 开发模式，其中前端专注于用户界面和交互逻辑，而后端则负责提供 API 接口以及业务逻辑处理。Vue 是一种流行的前端框架，而 Spring Boot 则是一个强大的 Java 微服务框架。两者结合可以实现高效的 SPA（单页应用程序）开发。 --- #### 2. Spring Boot 后端配置 ##### 2.1 MyBatis 配置 在 `application.yml` 文件中添加 MyBatis 的相关配置，用于指定 Mapper XML 文件的位置以及实体类所在包路径： ```yaml mybatis: mapper-locations: classpath:mapper/*.xml # 映射器位置 type-aliases-package: com.example.demo.model # 实体类包名 ``` 此配置允许 Spring Boot 自动扫描并加载所有的 Mapper 文件[^4]。 ##### 2.2 JSON 时间格式化 对于数据库中的时间字段（如 `TIMESTAMP`），可以通过 `@JsonFormat` 注解对实体类的时间属性进行格式化。例如，在用户的生日字段中设置时间为 `"yyyy-MM-dd"` 格式： ```java package com.example.demo.model; import com.fasterxml.jackson.annotation.JsonFormat; import lombok.Data; import java.util.Date; @Data public class User { private String id; private String name; @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") private Date birthDate; } ``` 以上代码片段展示了如何通过 Jackson 库自动解析日期字符串为标准格式[^4]。 --- #### 3. Vue 前端配置 ##### 3.1 安装 Axios Axios 是一个基于 Promise 的 HTTP 请求库，适合用来与后端 RESTful API 进行通信。安装命令如下： ```bash npm install axios --save ``` 随后可以在 Vue 组件中引入 Axios 并发起请求： ```javascript // main.js 或单独的服务模块 import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080/api', // 设置后端接口的基础 URL timeout: 5000, // 超时时间 (毫秒) }); export default instance; ``` ##### 3.2 发起 GET 请求示例 以下是一段简单的 Vue 方法，展示如何调用后端获取用户列表数据： ```javascript methods: { async fetchUsers() { try { const response = await this.$axios.get('/users'); console.log(response.data); // 打印返回的数据 } catch (error) { console.error('Error fetching users:', error); } }, }, mounted() { this.fetchUsers(); // 页面挂载完成后立即执行查询操作 } ``` 该方法会在组件初始化时向 `/api/users` 地址发送 GET 请求，并打印服务器返回的结果[^1]。 --- #### 4. CORS 配置 由于前后端运行于不同的域名或端口号，默认情况下会触发跨域问题。因此需要在 Spring Boot 中启用 CORS 支持。以下是全局配置方式： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 允许访问所有接口 .allowedOrigins("http://localhost:8081") // 允许来自特定前端地址的请求 .allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的方法类型 } } ``` 这样即可解决常见的跨域资源共享限制问题[^3]。 --- #### 5. 总结 通过上述步骤，开发者可以完成基本的 Vue 和 Spring Boot 前后端分离项目的搭建工作。具体流程包括但不限于：MyBatis 数据映射、JSON 时间序列化、Axios 请求封装以及 CORS 解决方案等内容。 ---