vue电商管理系统实战总结

一.登录模块

进行用户名 、密码ui结构,对表单数据进行双向数据的绑定,进行rule验证规则,然后对表单进行预验证。配置axios发送登录请求。

Message是弹框组件,message挂载到vue上,Vue.prototype.$message =Message

1.登录完成后的操作

1.将登录成功后的token 保存在客户端的sessionstorge

1.1项目中除了登录其他之外的API接口,必须是在登录之后才能进行访问。

1.2token只在当前网站打开期间有效,所以将token保存在sessionstorge

window.sessionStorge.getItem('token',res.data.token)

1.3通过编程式导航跳转到后台主页

this.$router.push('/home)

2.通过路由导航守卫控制访问权限

1.先在router.js中挂载路由导航守卫
router.beforeEach((to,for,next)=>{
   to //将要访问的路径
    from //从哪个页面跳转而来
    next //是一个函数,表示放行



if(toPath === '/login') return next()
 //获取token
const tokenStr = window.sessionStorge.getItem('token')
if(!tokenStr)  return next('/login')
})

2.退出功能实现原理

1.1先清空token

window.sessionStorge.clear

//跳转到登录页   this.$router.push('/login')

3.重置登录表单

先给重置按钮绑定一个点击事件 @click="resetLoginForm"

//重置登录表单
resetLoginForm(){
    this.$refs.loginFormRef.resetFields()
}

二、主页布局

1.通过axios拦截器添加token验证

axios.interceptors.request.use(config => {
console.log(config)
config.headers.Authorization = window.sessionStorge.getItem('token')
return config
})

三、用户列表

1.通过路由的形式展示用户列表组件

2.布局,获取用户列表数据

3.为表格添加索引列  type="index"

4.自定义状态列的显示效果(定义一个作用域插槽,加一个开关)

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值