vue后台管理系统实践方案总结(下)

1.项目初始化

  • 安装Vue脚手架
  • 通过Vue脚手架创建项目
  • 配置Vue路由
  • 配置Element-UI组件库
  • 配置Axios库
  • 初始化git远程仓库
  • 将本地项目托管到Github或码云中

相关依赖-按需导入
在这里插入图片描述

2.登录概述

1. 登录业务流程

  • 在登录页面输入用户名和密码
  • 调用后台接口进行验证
  • 通过验证之后,根据后台的响应状态跳转到项目主页

2. 登陆业务的相关技术点

  • http是无状态的
  • 通过cookie在客户端记录状态
  • 通过session在服务器端记录状态
  • 通过token方式维持状态

3.登陆页面的布局

通过Element-UI组件实现布局

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标

在这里插入图片描述
4.登录成功后
在这里插入图片描述
5.路由导航守卫控制访问权限
在这里插入图片描述

3.左侧菜单布局

在这里插入图片描述

菜单分为二级,并且可以折叠

在这里插入图片描述
通过接口获取菜单数据

通过axios请求拦截器添加token,保证拥有获取数据的权限

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
期待后续…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值