您的位置: 首页  >  文章  >  vue+element+axios+less做的后台管理系统

vue+element+axios+less做的后台管理系统

分类: 文章 • 2024-03-14 16:07:10
  1. 项目搭建先跳过
登录退出功能

登录业务流程：

  1. 在登录页输入用户名和密码
  2. 调用后台接口进行验证
  3. 通过验证后，根据后台返回的状态，跳转到项目主页

技术点：
4. http 是无状态的
5. 通过cookie在客户端记录状态
6. 通过session在服务器保存状态
7. 通过token维持状态
实操：
8. 登录用到的element表单组件
el-form(表单的数据绑定，校验规则，表单的引用)，el-forrn-item(通过prop来接收数据绑定里面的值)，el-input(prefix-icon=""设置图标，v-model=“”“form，form-item”的值)
9. data里面 初始化form数据
10. 表单的校验规则：
重置数据： 利用表单的引用，获取到表单的实例对象，调用resetFields
表单预校验：validate() 参数是一个回调函数，通过，返回true，拿返回值作为判断条件，如果失败return 成功，调用验证用户名密码是否正确
vue+element+axios+less做的后台管理系统
11. 我简单理解一下这个post接口：参数不能为空，就是你现在定义的username，password可以是空的字符串，但是在提交数据的时候，你的这两个字段都是有数据的，其实这也和表单的预校验是一样的
至此：请求成功，接下来就是将服务器返回的token通过sessionStroge保存在本地,然后跳转到项目主页
windoe.sessionStroge.setItem(‘token’,res.data.token)
this.$router.push(’/home’)
12. 项目中所有项目除了 登录之外的api，只要登录才能访问,路由守卫
router.beforeEach((to,form,next)=>{
if (to.path === ‘login’) return next()
var tokenStr = window.sessionStroge.getItem(‘token’)
if (!tokenStr) return next(’/login’)
next()
})

退出功能

清除token，并且跳转到登录页
window.sessionStroge.clear(’‘token’)
this.$router.push(’/login’)

主页布局

整体布局：container,header,container,aside,main
二级菜单栏布局：el-menu> el-submenu(需要index)> i span >

通过接口获取菜单栏数据
通过axios的请求拦截器添加token，保证有获取数据的权限
axios.interceptors.request.use(config=>{
config.headers.Authorization = window.sessionStroge.getItem(‘token’)
return config
)

动态渲染数据，并对路由进行控制
  1. 通过v-for双成循环，分别对一级菜单和二级惨菜单进行渲染
  2. 通过路由的相关属性，启用菜单的相关功能
  3. 保存当前状态(通过点击事件) 先将状态保存下来sessionstorge
  4. default-active：状态
  5. 自定义图标 :class=“iconObj[item.id]”
  6. 展开合住：roggleButton :collapse= 'isCollapse"
  7. el-aside :width:= isCollapse ? ‘64px’: ‘200px’’
用户管理

包括用户信息的展示，搜索，修改，删除

用户列表展示

  1. 面包屑导航：el-breadcrumb el-breadcrumb-item
  2. 卡片视图： card 栅格系统 row col input button,通过作用域插槽，自定义数据

相关推荐