Vue2项目总结-电商后台管理系统

const router =  new Router({
  routes:[
    {path: '/' , redirect: '/login'},
    {path: '/login' , component:() => import('@/components/Login.vue')},
    { path: '/home' , component:() => import('@/components/Home.vue'),
      redirect: '/welcome',
      children: [
        { path: '/welcome' , component:() => import('@/components/Welcome.vue') },
        { path: '/users' , component:() => import('@/components/user/Users.vue')},
        { path: '/rights' , component:() => import('@/components/power/Rights.vue')},
        { path: '/roles' , component:() => import('@/components/power/Roles.vue')},
        { path: '/categories' , component:() => import('@/components/goods/Cate.vue')},
        { path: '/params' , component:() => import('@/components/goods/Params.vue')},
        { path: '/goods' , component:() => import('@/components/goods/List.vue')},
        { path: '/goods/add' , component: () => import('@/components/goods/Add.vue')},
        { path: '/orders' , component: () => import('@/components/order/Order.vue')},
        { path: '/reports' , component: () => import('@/components/report/Report.vue')}
      ]
    }
  ]
})

login() {
  this.$refs.loginFormRef.validate(async (valid) => {
    // console.log(valid)
    if (!valid) {
      return
    } else {
      const { data: res } = await this.$http.post('login', this.loginForm)
      // console.log(data)
      if (res.meta.status != 200) {
        this.$message.error('登录失败！')
      } else {
        this.$message.success('登录成功！')
        //将token值保存到客户端中
        window.sessionStorage.setItem('token', res.data.token)
        //并且跳转路由
        this.$router.push('/home')
      }
    }
  })
},

//挂载路由守卫
router.beforeEach((to , from , next) => {
//to 表示将要跳转的页面
//from 表示从哪个页面来的
//next() 表示放行  next('/login')表示强制跳转到登录页面
  if(to.path === '/login'){
    // console.log(to)
    next()
  }else{
    //获取用户当前客户端的token值
    const tokenStr = window.sessionStorage.getItem('token')
    //如果没有token值，强制跳转到登录页面
    //如果存在token，就放行
    if(!tokenStr){
      next('/login')
    }else{
      next()
    }
  }

})

//登录时的校验对象
loginFormRules: {
  username: [
    { required: true, message: '请输入登录账户', trigger: 'blur' },
    {
      min: 3,
      max: 10,
      message: '长度在 3 到 10 个字符',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    {
      min: 3,
      max: 15,
      message: '长度在 3 到 15 个字符',
      trigger: 'blur',
    },
  ],
},

reset() {
  // console.log(this)
  //实现表单的重置功能
  this.$refs.loginFormRef.resetFields()
},

exit() {
  window.sessionStorage.clear()
  this.$router.push('/login')
},

data() {
   return {
     menuList: [],
     iconList: {
       125: 'el-icon-s-custom',
       103: 'el-icon-lock',
       101: 'el-icon-shopping-cart-1',
       102: 'el-icon-s-order',
       145: 'el-icon-s-data',
     },
     closeValue: false,
     activePath: '',
   }
 }，
  created() {
   this.getMenuList()
   this.activePath = window.sessionStorage.getItem('activePath')
 },
 //保存链接的激活状态
   saveNavState(activePath) {
     window.sessionStorage.setItem('activePath', activePath)
     this.activePath = activePath
   },

//保存链接的激活状态
  saveNavState(activePath) {
    window.sessionStorage.setItem('activePath', activePath)
    this.activePath = activePath
  },

//监听用户状态修改的事件
   async userStateChange(userInfo) {
     // console.log(userInfo)
     const { data: res } = await this.$http.put(
       `users/${userInfo.id}/state/${userInfo.mg_state}`
     )
     if (res.meta.status !== 200) {
       userInfo.mg_state = !userInfo.mg_state
       this.$message.error('更新用户状态失败！')
     }
     this.$message.success('更新用户状态成功！')
   },

queryInfo: {
       query: '',
       //当前的页数
       pagenum: 1,
       //当前每页显示多少条数据
       pagesize: 2,
     },
           // 页码总数数据
     total: 0,

//修改用户
    editUser() {
      //预校验
      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('更新用户信息成功！')
      })
    },

//删除权限
   async removeRightById(role, roleId) {
     //弹框提示用户是否要删除
     const confirmResult = await this.$confirm(
       '此操作将永久删除该文件, 是否继续?',
       '提示',
       {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }
     ).catch((err) => err)

     if (confirmResult !== 'confirm') {
       return this.$message.info('取消了删除！')
     } else {
       //向服务器发送请求删除
       const { data: res } = await this.$http.delete(
         `roles/${role.id}/rights/${roleId}`
       )

       if (res.meta.status !== 200) {
         return this.$message.error('删除权限失败！')
       } else {
         role.children = res.data
       }
     }
   },

//监听级联选择器选中框变换
async handleChange() {
  this.getParamsData()
},

//指定级联选择器的配置对象
cateProps: {
  value: 'cat_id',
  label: 'cat_name',
  chidren: 'children',
},

data(){
      //Tabs标签页的双向绑定数据
      activeName: 'many',
}

//获取参数列表数据
   async getParamsData() {
     //如果选中的不是三级菜单，数组长度就为1或2，就清空数组
     if (this.selectedCateKeys.length !== 3) {
       this.selectedCateKeys = []
       this.manyTableData = []
       this.onlyTableData = []
       return
     } else {
       //根据所选分类的ID，和当前所处的面板，获取对应的参数
       const { data: res } = await this.$http.get(
         `categories/${this.cateId}/attributes`,
         {
           params: {
             sel: this.activeName,
           },
         }
       )
       if (res.meta.status !== 200) {
         this.$message.error('获取参数列表失败！')
       } else {
         //成功
         // console.log(res.data)
         //存储动态参数数据和静态属性数据
         res.data.forEach((item) => {
           item.attr_vals = item.attr_vals
           item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
           //控制文本框的显示与隐藏
           // item.inputVisible = false
           this.$set(item, 'inputVisible', false)
           //文本框中输入的值
           item.inputValue = ''
         })
         // console.log(res.data)
         if (this.activeName === 'many') {
           this.manyTableData = res.data
         } else {
           this.onlyTableData = res.data
         }
       }
     }
   },

//存储动态参数数据和静态属性数据
          res.data.forEach((item) => {
            item.attr_vals = item.attr_vals
            item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
            //控制文本框的显示与隐藏
            // item.inputVisible = false
            this.$set(item, 'inputVisible', false)
            //文本框中输入的值
            item.inputValue = ''
          })

//当tab标签页被选中时触发事件
async tabClicked() {
  // console.log(this.activeIndex)
  //访问的是商品参数面板
  if (this.activeIndex === '1') {
    //发起请求获取参数
    const { data: res } = await this.$http.get(
      `categories/${this.cateId}/attributes`,
      {
        params: { sel: 'many' },
      }
    )
    if (res.meta.status !== 200) {
      this.$message.error('获取商品参数失败！')
    } else {
      res.data.forEach((item) => {
        item.attr_vals =
          item.attr_vals.length === 0 ? [] : item.attr_vals.split(',')
      })
      // this.$message.success('成功！')
      this.manyTableData = res.data
      // console.log(this.manyTableDate)
    }
  } else if (this.activeIndex === '2') {
    //发起请求获取参数
    const { data: res } = await this.$http.get(
      `categories/${this.cateId}/attributes`,
      {
        params: { sel: 'only' },
      }
    )
    if (res.meta.status !== 200) {
      this.$message.error('获取商品参数失败！')
    } else {
      this.onlyTableData = res.data
      // console.log(this.onlyTableData)
    }
  }
},

//处理图片预览
handlePreview(file) {
  // console.log(file)
  this.previewPath = file.response.data.url
  this.previewVisible = true
},

//处理图片移除
handleRemove(file) {
  //1.获取将要删除的图片的临时路径
  const filePath = file.response.data.tmp_path
  //2.从pics数组中，找到该图片的索引值
  const i = this.addForm.pics.findIndex((x) => {
    x.pic === filePath
  })
  //3.调用数组的splice方法，从pics数组中移除
  this.addForm.pics.splice(i, 1)
},

// 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(this.$refs.main)
 const { data: res } = await this.$http.get('reports/type/1')
 if (res.meta.status !== 200) return this.$message.error('初始化折线图失败！')
 const data = _.merge(res.data, this.options)
 // 绘制图表
 myChart.setOption(data)

//导入NProgress包
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//配置axios请求拦截器
//在requst 拦截器中，展示进度条，NProgress.start()
axios.interceptors.request.use(config => {
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
//在response中 隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})