Vue电商后台项目总结

request 拦截器

//请求拦截器
request.interceptors.request.use(
  config=>{
    const { user } = store.state;
    if (user && user.token) {
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    return config;
  },
  (error)=> {
    return Promise.reject(error);
  }
);

响应拦截器

request.interceptors.response.use(res=>res,
err=>{
console.log('err',Object.keys(err))
if(err&& err.response && err.response.status==401){
router.push("/login");
}
)

挂载路由导航守卫

router.beforeEach((to,from,next)=>{
//to 将要访问的路径
//from 代表从哪个路径跳转而来
//next 是一个函数,表示放行
// next()放行 next('/login') 强制跳转
if(to.path==='/login')return next()
//获取token
const tokenStr=window.sessionStorage.getItem('token')
if(!tokenStr) return next('/login')
next()
}

分页效果的实现

//1.分页结构
<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='queryInfo.pagenum' :page-sizes='[1,2,5,10]' :page-size='queryInfo.pagesize' layout='total ,sizes,prev,pager,next,jumper' :total='total'>
</el-pagination>
//2.定义数据
data(){
  return{
queryInfo:{
query:''
//当前的页数
pagenum:1
//当前每页显示多少条数据
pagesize:2
     }
   }
}
//3.监听pagesize改变的事件
handleSizeChange(newSize){
this.queryInfo.pagesize=newSize
this.getUserList()
}
//4.监听页码值改变的事件
handleCurrentChange(newPage){
this.queryInfo.pagenum=newPage
this.getUserList()
}

添加用户操作

//在data添加用户的表单数据
addForm:{
username:'',
password:'',
email:'',
mobile:''
}
addUser({
this.$refs.addFormRef.validate(async valid=>{
if(!valid) return 
//可以发起添加用户的请求
const {data:res}=await this.$http.post('users',this.addForm)
if(res.meta.status!==201){
this.$message.success('添加用户成功!')
//隐藏添加用户的对话框
this.addDialogVisible=false
//重新获取用户列表
this.getUserList()
}
})})

修改及查询用户的操作

//1.展示修改用户的对话框
//2.根据id查询对应的用户信息
//3.渲染修改用户的表单
//4.实现修改用户表单的重置操作
//5.完成提交修改之前的表单验证
//6.提交修改完成的表单
data(){
return:{
editForm:{
email:null
mobile:null
}
}
}
//展示编辑用户的对话框
async showEditDialog(){
const {dta:res}=await this.$http.get('users'+id)
if(res.meta.status!==200){
return this.$message.error('查询用户信息失败!')
}
//将查询到的数据赋值给定义的editForm对象
this.editForm=res.data
//关闭对话框
this.editDialogVisible=true
}
//监听修改用户对话框的关闭事件
editDialogClosed(){
this.$refs.editFormRef.resetFields()
}
//修改用户逻辑
editUserInfo(){
this.$refs.editFormRef.validate(async valid=>{
if(!valid) return
//发起修改用户信息的请求
const {data:res}=await this.$http.put('users/'+this.editForm.id,{
email:this.editForm.email,
mobile:this.editForm.mobile
})
if(res.meta.status!==200){
return this.$message.error('更新用户信息失败!')
}
//关闭对话框
this.editDialogVisible=false
//刷新数据列表
this.getUserList()
//提示修改成功
this.$message.success('更新用户信息成功')
}
)
}