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.自定义状态列的显示效果（定义一个作用域插槽，加一个开关）