一、思维导图整体知识结构梳理
1. Axios
- axios 发送请求
- 安装：
npm install axios - 引入：
import axios from 'axios' - GET 请求：
axios.get(url,{params})params 拼接到 url 查询参数 - POST 请求：
axios.post(url,data)data 请求体参数 - 获取响应：
.then(res=>{})获取返回数据 - 异常捕获：
.catch(err=>{})捕获网络 / 服务端错误 - async/await 简化异步代码，搭配 try-catch 捕获异常
- 安装：
- axios 封装
- 创建独立
api/request.js文件 - 创建 axios 实例
axios.create() - 基础配置：baseURL、timeout 超时时间
- 请求拦截器：自动携带 token，Authorization
- 响应拦截器：后端返回数据预处理，剥离外层 data
- 创建独立
- axios 封装查找
- 接口统一管理：按业务模块拆分 api 文件（user.js、data.js）
- 每个接口封装函数，导出供页面调用
- 调用方式：导入接口函数，async 调用
- 问题排查思路
- 浏览器 Network 面板，确认请求地址、请求方式
- 查看请求头 token 是否携带
- 查看后端返回状态码与错误信息
- 区分前端传参错误 or 后端服务报错
2. 本地存储
- localStorage
- API：setItem、getItem、removeItem、clear
- 特点：永久保存浏览器，除非手动清除缓存；只能存储字符串
- 存储对象：
JSON.stringify()转字符串；读取JSON.parse()还原对象
- sessionStorage
- API：setItem、getItem、removeItem、clear
- 特点：会话存储，关闭浏览器标签页数据自动消失；同样仅支持字符串
- 业务场景：保存登录 token、用户基础信息；页面临时缓存数据，减少重复请求
- 注意点：存储容量有限（约 5M），不适合存大量数据；前端可随意篡改，不能存敏感、核心业务数据
3. 消息提示
- Element Plus ElMessage 全局消息组件
- 消息类型
- success：成功提示（绿色）
- error：失败提示（红色）
- warning：警告提示（黄色）
- info：普通信息提示（灰色）
- 使用方式：
ElMessage.success('操作成功') - 可全局封装消息工具函数，统一管理提示样式、持续时间
4. 编程式导航
- 两种跳转 API
router.push()：新增历史记录，可以点击浏览器返回按钮回到上一页；两种传参：query、paramsrouter.replace()：替换当前历史记录，不会新增历史栈，无法回退到当前页面
- 路由传参
- query 传参：参数拼接在 URL 地址栏，刷新页面数据不丢失；
$route.query接收 - params 传参：参数藏在路由对象里，地址栏不可见；刷新页面数据丢失；
$route.params接收
- query 传参：参数拼接在 URL 地址栏，刷新页面数据不丢失；
- 使用场景：点击按钮，完成接口请求之后，代码里跳转页面（区别于 router-link 标签跳转）
5. 路由守卫
- 全局前置守卫
router.beforeEach- 参数：to 目标路由对象；from 来源路由对象；next 放行函数，控制是否允许跳转
- 核心权限拦截逻辑
- 获取本地存储的 token
- 有 token：next () 直接放行进入目标页面
- 无 token，且目标页面不是登录页：next ('/login') 强制跳转到登录页
- 无 token 访问登录页：next () 放行
- 执行时机：每次路由跳转之前触发
- 作用：页面访问权限控制
6. 数据交互
- 导入已经封装好的接口函数
- 使用 async+await 异步调用接口
- 拿到后端返回数据，赋值给响应式变量
- 模板绑定变量，渲染表格 / 列表页面
- 加载状态控制：请求前开启 loading，请求结束关闭 loading
- 异常处理：接口报错，弹出错误提示
7. 项目实战
- 项目介绍 & AI 工具使用
- 整体功能模块分析、业务流程
- AI 工具在开发中的作用：快速生成代码模板、排查代码错误、定位 bug、生成注释 / 优化代码、写接口文档
- 项目要求
- 功能需求清单：登录、列表查询、分页、新增、编辑、删除
- 接口规范：请求方式、参数格式、返回体统一规范
- UI 页面要求：使用 ElementPlus 组件，页面布局、交互效果
- 代码规范：文件命名、变量命名、代码缩进、注释要求
- 项目交付标准：可正常启动、无报错、打包部署
8. 配套拓展内容
- OSS 对象存储
- OSS 介绍：对象存储服务，用于存放图片、视频、文件等静态资源
- 开通服务流程、Bucket 存储空间创建：设置存储名称、地域、读写权限
- 前端直传 OSS 流程：获取签名，上传文件
- 上传成功拿到文件访问地址，保存到业务表单
- AI 流式输出
- 流式输出概念：后端分段持续返回文本，不等全部响应完成
- 原理：SSE Server-Sent Events / Websocket
- 前端实现：持续接收分片数据，不断拼接渲染页面
- 场景：大模型对话，打字机效果 AI 回答
二、制作意图
本次复盘梳理 Vue 前端项目完整搭建流程，把 Axios 网络请求、本地存储、路由、权限守卫、数据交互串联成完整前端业务链路；同时结合项目实战、OSS 文件上传、AI 流式输出拓展内容，打通前后端联调开发的完整思路，用于面试和项目开发快速查阅。
三、当日学习总结
- 掌握 Axios 封装、请求拦截、响应拦截，学会统一管理后端接口，掌握接口调试排错思路
- 分清 localStorage 与 sessionStorage 的存储特性、使用场景与安全限制
- 掌握 Vue3 编程式路由跳转、路由传参，全局前置守卫实现登录鉴权拦截，是前端权限控制核心考点
- 学会在页面中调用接口、处理 loading、异常捕获，完成后端数据渲染
- 了解 ElementPlus 消息提示组件快速反馈用户操作结果
- 熟悉项目开发完整规范，了解 OSS 前端直传、SSE 流式输出拓展知识点，适配 Java 智能体项目开发
