一、前后端交互是什么？
简单说，就是前端（网页 / APP 界面）和后端（服务器）之间传数据 —— 前端把用户操作（比如查商品、提交订单）变成请求发给后端，后端处理后把结果（比如商品列表、订单状态）返回给前端，完成一次 “对话”。
二、为什么需要它？
- 前端存不了大量 / 敏感数据（比如用户信息、交易记录），得靠后端数据库安全存储；
- 复杂计算（比如销量统计、权限校验）前端扛不住，要后端来处理；
- 多端（手机 / 电脑）访问要数据一致，得靠后端统一提供数据。
流程概括
- 用 Axios 工具：前端安装导入，封装统一请求实例（设基础路径、超时时间）；
- 前端发请求：通过 Axios 发 GET/POST 请求，带必要参数（比如查 1 月电脑销量就传 “1 月”“电脑”）；
- 后端接请求：用 VO 接收参数，校验没问题后，通过 DO 操作数据库；
- 后端返结果：把处理好的数据用 ResponseDTO 封装（含状态码、数据）返回；
- 前端收结果：Axios 接收响应，成功就展示数据，失败就提示错误；
- 解决跨域：开发时用 Vue 代理，生产时靠后端配置。
axios
https://www.axios-http.cn/
- 本质：前后端交互的 HTTP 客户端库，主要用于前端（如 Vue、React 等）向后端发送请求并处理响应
- 核心功能：
- 支持 GET/POST 等各种 HTTP 请求
- 基于 Promise，用 then/catch 处理异步
- 自动转换 JSON 数据
- 可拦截请求 / 响应（统一处理头信息、错误等）
- 作用：作为前后端数据传输的 “桥梁”，前端通过它发送用户操作数据，接收并处理后端返回结果
- 关联：常配合 VO 处理前后端数据格式，结合前端代理解决跨域
axios终端下载指令
在vue终端中
npm install axios
axiox一般使用方法
需要在vue文件中improt引入
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 使用axios发送GET请求到'/user'地址
// 第二个参数为配置对象，params中的键值对会被转换为URL查询参数(?ID=12345)
axios.get('/user', {
params: {
ID: 12345 // 请求参数
}
})
// 请求成功时执行的回调函数
.then(function (response) {
console.log(response); // 打印服务器返回的响应数据
})
// 请求失败时执行的回调函数
.catch(function (error) {
console.log(error); // 打印错误信息
})
// 无论请求成功或失败都会执行的回调函数
.finally(function () {
// 总是会执行（通常用于清理操作）
});
对axios进行封装（通常使用）
在上面的一般用法中 需要用到的 vue文件 都需要 import导入 过于繁琐 所以我们对axios进行封装 就不需要导入 在vue文件中就可以直接使用
新建util包下创建 request.js文件用于创建实例与添加拦截器
代码示例可在官方找到
// 从axios库中导入axios默认导出
import axios from "axios";
// 使用axios.create()方法创建一个自定义配置的axios实例
// 这个实例会使用我们指定的配置发送请求，便于统一管理API请求
const http = axios.create({
baseURL: '/api', // 设置基础URL，所有使用该实例的请求都会自动拼接这个基础路径
timeout: 5000 // 设置请求超时时间，5000毫秒(5秒)内未收到响应则视为超时
});
// 为http实例添加请求拦截器
// 请求拦截器会在请求发送到服务器之前执行
http.interceptors.request.use(
function (config) {
// 这是请求成功拦截的回调函数
// config是请求的配置对象，包含url、method、headers等信息
// 在发送请求之前可以做些什么，例如：
// 1. 添加认证token到请求头
// 2. 显示加载指示器
// 3. 转换请求数据格式
return config; // 必须返回配置对象，否则请求会失败
},
function (error) {
// 这是请求错误拦截的回调函数
// 当请求还没发送就出现错误时触发（如配置错误）
// 对请求错误做些什么，例如记录错误日志
return Promise.reject(error); // 将错误传递给后续的catch处理
}
);
// 为http实例添加响应拦截器
// 响应拦截器会在服务器返回响应之后、到达.then/.catch之前执行
http.interceptors.response.use(
function (response) {
// 这是响应成功的回调函数
// 2xx范围内的状态码（如200、201）都会触发该函数
// 对响应数据做点什么，例如：
// 1. 统一处理返回数据格式，只提取需要的data部分
// 2. 隐藏加载指示器
return response; // 返回处理后的响应数据给后续的.then
},
function (error) {
// 这是响应错误的回调函数
// 超出2xx范围的状态码（如404、500）都会触发该函数
// 对响应错误做点什么，例如：
// 1. 统一处理错误提示（如网络错误、权限不足）
// 2. 针对特定错误码做特殊处理（如401跳转登录页）
return Promise.reject(error); // 将错误传递给后续的catch处理
}
);
// 导出配置好的http实例，供其他模块使用
// 其他模块导入后可以直接使用该实例发送请求，无需重复配置
export default http;
在main.js中挂载
[!IMPORTANT]
- 全局可用：在所有 Vue 组件中都可以通过
this.$axios直接访问该实例，无需在每个组件中单独导入- 简化使用：组件中发送请求时，直接使用
this.$axios.get(...)或this.$axios.post(...)即可，不需要重复引入和配置- 统一管理：所有请求都基于同一个配置好的实例，便于维护（比如统一修改基础路径、拦截器等）
将前面配置好的 http 实例挂载到 Vue 的原型对象上，并命名为 $axios，
import http from "@/util/request"
Vue.prototype.$axios = http
//注意
http（名称）要与前面封装时创建的方法名一致
const http = axios.create({
baseURL: '/api', // 设置基础URL，所有使用该实例的请求都会自动拼接这个基础路径
timeout: 5000 // 设置请求超时时间，5000毫秒(5秒)内未收到响应则视为超时
});
在组件中可以这样使用：
methods: {
fetchData() {
// 直接通过this.$axios访问
this.$axios.get('/user',{
//携带的数据（注意名称与vo中的一致）
parms:{
}
})
.then(response => {
// 处理数据
})
.catch(function (error) {
console.log(error);
})
}
}
配置 API 代理：
-
目的：解决开发环境跨域问题（浏览器同源策略限制）
-
配置文件：项目根目录的
vue.config.js -
核心配置：
module.exports = { devServer: { proxy: { '/api': { // 匹配以/api开头的请求 target: '后端地址', // 目标API服务器 changeOrigin: true, // 开启跨域模拟 pathRewrite: {'^/api': ''} // 可选，去掉/api前缀 } } } }
注意前后端端口要不一样
-
效果：前端请求本地服务器，由其转发到后端，绕过跨域限制
-
注意：需重启开发服务器生效，仅用于开发环境
@CrossOrigin
[!CAUTION]
同域：同个ip端口或者同个域名
因为跨域限制的「决定权」最终在浏览器，而浏览器判断是否放行，依赖于 后端响应中是否包含合法的 CORS 头：
- 若后端不加
@CrossOrigin，响应头中没有 CORS 相关字段，浏览器会认为后端不允许跨域，直接拦截响应；- 若后端加了
@CrossOrigin，响应头会携带Access-Control-Allow-Origin: 前端地址（或*，表示允许所有源），浏览器验证通过后，就会把响应交给前端。- 简单说：
@CrossOrigin就是后端给浏览器发的 “通行证”，没有它浏览器就不让数据通过，有了它且符合条件就放行。
在后端控制层（Controller）
加在单个接口或整个控制器上
[!IMPORTANT]
如果前端已配置
changeOrigin: true（Vue 代理）【仅在开发中有用（devServer）】，后端通常不需要再添加@CrossOrigin，
数据的临时接收
VO：前端数据的「临时接收器」（前端→后端）
VO（Value Object）是后端专门用于接收前端传递数据的「临时容器」，仅在**前端→Controller 层**流转，不涉及数据库操作。
[!WARNING]
字段与前端提交数据对应，无数据库字段
DO：数据库数据的「临时映射器」（后端→数据库）
DO（Data Object）是后端与数据库表一一映射的「临时容器」，仅在Service 层→数据库流转，用于直接操作数据库。
DO接受数据库查询到的信息
[!WARNING]
字段与数据库表一一对应，含敏感信息
VO 与 DO 的转换逻辑（核心链路）
前端数据 → Controller 用 VO 接收并校验 → Service 层将 VO 转换为 DO（处理业务逻辑，如加密、补全字段） → DO 与数据库交互 → Service 层将 DO 转换为 DTO（过滤敏感字段，适配前端需求） → Controller 用 ResponseDTO 封装 DTO 返回前端
前后端核心交互流程（全链路概括）
- 前端发起请求（Axios 封装）
前端通过 Axios 构建完整请求：指定 GET/POST 等方法（对应后端注解）、拼接路径（含动态参数），GET 参数放 URL、POST/PUT 参数放请求体，拦截器统一加请求头（如 Token）、显 loading；请求发送到后端 Controller。 - 后端接收与校验（Controller 入口）
Controller 通过路径注解映射请求，用 3 种方式接收参数（@PathVariable 接路径参数、@RequestParam 接查询参数、@RequestBody+VO 接请求体），并通过 VO 类注解（如 @NotBlank）校验参数，失败则用 ResponseDTO 返错误信息。 - 后端业务处理（Service+Mapper 联动）
校验通过后，Controller 调用 Service 层处理业务：Service 用 Mapper 操作数据库，通过 DO 类（与数据库表映射）完成 CRUD；处理后将 DO 转 DTO（过滤敏感字段、适配前端格式），再封装到 ResponseDTO。 - 后端返回响应（ResponseDTO 统一封装）
Controller 将含状态码（2xx 成功 / 4xx 客户端错 / 5xx 服务错）、提示信息、DTO 数据的 ResponseDTO 返回前端。 - 前端处理响应（Axios 拦截器 + 业务逻辑）
前端 Axios 响应拦截器隐藏 loading，统一解析 ResponseDTO：成功则提取 data 渲染页面，失败则根据状态码处理（如 401 跳转登录）；同时通过 Vue 代理（开发环境）或后端 CORS（生产环境）解决跨域，敏感接口靠 Token 做身份校验。
[!CAUTION]
后端返回的ResponseDTO类 一般包含 状态码 返回信息 obj类（表示所有）的数据
mounted初了解
mounted() {
this.query()
}
- 这是 Vue.js 的生命周期钩子函数
mounted()的用法 - 触发时机：组件模板渲染为真实 DOM 并挂载到页面后
- 功能：组件挂载完成后立即调用
query()方法 - 常见用途：执行初始化操作（如请求数据、初始化插件等需 DOM 存在的操作）
判断 this 指向的优先级
[!hint]
js中
箭头函数：直接继承外层作用域的 this（无自己的 this）。
显式绑定：call/apply/bind 绑定的对象。
构造函数调用：new 创建的实例对象。
对象方法调用：调用方法的对象。
普通函数调用：全局对象（非严格模式）或 undefined（严格模式）。记住：this 永远指向「调用函数的那个对象」，而箭头函数是例外（继承外层 this）。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
