一、思维导图整体知识结构梳理
页面布局
ElementPlus Container 容器布局
- 组件说明
el‑container：外层容器；子元素包含el‑header/el‑footer垂直排列，不包含则水平排列el‑header：顶栏容器el‑aside：侧边栏容器el‑main：主要内容区域容器el‑footer：底栏容器
侧边菜单栏
- 使用 ElementPlus 菜单组件实现左侧导航；点击菜单切换右侧内容，需要 Vue‑Router 路由实现
Vue Router
介绍
- 定位：Vue 官方客户端路由解决方案
- SPA 单页应用路由作用
- URL 和页面内容绑定
- 更新浏览器 URL，页面不重新加载服务端资源
- 根据不同访问路径，展示不同组件
Router 三大核心组成
- 路由实例 Router：整个应用路由管理中心，总调度员；维护 URL 路径与组件映射对照表；处理导航、路由守卫
- Router‑Link：路由链接组件，最终渲染为 a 标签；不刷新整个页面，实现前端跳转
- Router‑View：路由视图，路由匹配的组件渲染放置的位置
实现步骤
- 安装：
npm install vue‑router - 创建路由实例：
src/router/index.js；配置path路径与component组件映射关系；import { createRouter, createWebHistory } from 'vue‑router' - 注册路由组件
main.js：createApp(App).use(router).mount('#app') - 使用路由
Router‑Link做跳转导航Router‑View放置页面渲染位置
路由进阶‑嵌套路由
- 适用场景：部分页面不需要公共布局（如登录页）
- 配置：路由配置中写
children数组；父组件内部需要放置Router‑View用于渲染子路由组件
登录模块
ElementPlus 表单校验
- 核心 API
ref：获取表单组件实例rules：校验规则对象validator：自定义校验函数trigger：触发校验时机 blur 失去焦点form.validate()：执行全部表单校验
- 登录表单逻辑：收集用户名、密码表单数据；表单校验通过，发起请求登录
Axios 发送登录请求
- 安装 axios：
npm install axios - Vite 跨域处理：修改
vite.config.js配置代理解决跨域
本地存储 localStorage
- 特点：浏览器本地存储，容量约 5MB；key‑value 字符串存储，全部值为字符串
- API
localStorage.setItem(key,value)：保存数据localStorage.getItem(key)：获取数据localStorage.removeItem(key)：删除数据localStorage.clear()：清空全部存储
编程式导航
- 作用：js 代码实现页面跳转，替代
Router‑Link点击 - API：
useRouter()获取路由；router.push(路径) - 使用场景：页面跳转携带参数，例如登录→详情页
- 核心口诀
Router：用来 "走"(跳转)Route：用来 "看"(读取参数)
路由传参‑query 传参
- 传参：
router.push({path:'xxx',query:{key:value}}) - 接收参数：
import { useRoute } from 'vue‑router'；const route = useRoute()；route.query获取参数对象
Axios 拦截器
- 创建 axios 实例：
axios.create({baseURL:'接口基础地址',timeout:超时时间}) - 请求拦截器
request.use
- 执行时机：请求发送到后端之前执行
- 业务用途：在请求头自动携带 token 令牌
- 响应拦截器
response.use
- 2xx 成功响应：直接返回
response.data，简化后续获取数据 - 非 2xx 错误响应：返回
Promise.reject(error)抛出错误给业务捕获
- 导出实例，业务组件引入使用
路由守卫 beforeEach
- 作用：全局前置守卫，访问路由前执行逻辑；控制页面访问权限，拦截未登录访问
- 参数说明
to：将要去往的路由对象from：离开的路由对象next()：放行 / 重定向跳转
- 登录鉴权逻辑
- 如果去登录页，直接放行
next() - 读取
localStorage中的 token - 有 token：放行
next()；没有 token，强制跳转登录页next('/login')
- 如果去登录页，直接放行
二、制作意图
- 掌握 ElementPlus Container 布局容器，实现后台管理系统经典侧边栏 + 顶部栏 + 主内容页面框架；
- 学习 Vue‑Router 前端路由，理解 SPA 单页面原理；掌握路由实例、Router‑Link、Router‑View 三大核心；学会基础路由、嵌套路由、编程式跳转、query 传参；
- 使用 ElementPlus 表单校验完成登录页；Axios 发送后端请求；localStorage 保存 token；Axios 请求拦截器统一附加 token；
- 使用全局路由守卫
beforeEach做登录鉴权，未登录拦截跳转登录页，完成登录整套前端流程。
三、当日学习总结
Day41 学习后台管理系统登录全套前端技术：
- ElementPlus Container 容器快速搭建管理系统整体页面布局，搭配菜单组件，依靠 Vue‑Router 实现菜单切换页面。
- Vue‑Router 实现 SPA 前端路由，分为声明式导航 Router‑Link 与编程式导航 router.push；支持嵌套路由、query 参数传递。
- 登录页面：el‑form 表单校验；axios 发送登录请求；localStorage 持久化存储 token 令牌。
- Axios 拦截器：请求拦截统一给请求头带上 token，简化每一次接口调用；响应拦截统一处理返回数据。
- 全局路由守卫 beforeEach 做权限控制，访问非登录页面时校验本地 token，无 token 强制跳转登录，完成前端鉴权。
