vue 电商后台管理

本项目使用vue2 搭配element-ui框架完成

该项目主要有几个模块

1.登录鉴权模块

2.左侧菜单列表和退出

3.用户管理模块

4.权限管理模块

5.商品管理模块

6.订单管理模块

7.数据统计模块

主要用到的技术有：

1.vue框架

2.element-ui

3.aixos请求

4.vue-quill-editor富文本编辑器

5.echart

一、登录鉴权模块

登录 

我们先利用element的表单组件对输入的内容进行正则校验，然后根据后端发来的接口传入对应的数据，之后后端会给我们返回一个token，我们需要把它存储起来，在请求其他接口的时候，在封装的axios请求拦截器中把它携带到请求头中

api.interceptors.request.use(config=>{
    let token=store.state.token
    if(token){ // 判断如果token存在就加到请求头中
        config.headers.Authorization=token
    }
    return config
},error=>{
    console.log(error);
    Promise.reject(error)  // 处理错误请求
})

token过期处理

一般token都会有一个过期时间，过期后就无法再请求数据了，所以我们需要对token进行过期处理。在响应拦截中根据后端传来的状态码或者token过期字段来进行判断，如果过期了就清除token并返回登录页。

    if(res.data.meta.msg=='无效token'){  // 判断token是否过期
        MessageBox.confirm('登录已过期, 是否重新登录?', '提示', {  // elementUI组件
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            store.commit('saveToken',"") // 清除token
            location.href='/login' // 返回登录页
          }).catch(() => {
            
          });
    }

二、左侧菜单列表和退出

退出功能 

点击退出后我们就要退出到登录页，同时如果没有再次登录的话就不能跳转至其他页面，为此我们需要路由守卫，先判断当前是否有token，如果有就放行，没有就跳转至登录页

router.beforeEach((to, from, next) => {
  let token=store.state.token  // 先获取token
  if(token){ // 判断是否有token，有就放行
    next() 
  }else{    // 如果没有判断是否是去login页，是就放行，不是就跳转到login页
    if(to.path=='/login'){
      next()
    }else{
      next('/login')
    }
  }
})

左侧菜单列表

我们使用element的NavMenu导航菜单组件

collapse——是否开启水平折叠

router——是否启用路由模式，开启后会以index属性作为路由的path

三、用户管理模块

 用户管理模块主要是用来添加新的用户，给不同的角色设置不1同的角色身份

渲染数据 

根据接口，传入数据，在created中进行请求，渲染时我用到了element的table表格

添加用户

点击添加用户，弹出添加的模态框

 利用element的表单验证，通过后把参数传入接口进行请求，请求成功后关闭模态框

搜索用户

根据后端接口的需要，传入参数--如query或searchVal，在点击搜索按钮或者按下回车键时请求接口渲染页面

     getData() {  // 封装的请求数据的函数
      getUserData({
        pagenum: this.pagenum,