vue-shop之主页制作-用户管理|青训营笔记

lsm
133 阅读3分钟

vue-shop之主页制作-用户管理|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第5天

主页制作-用户管理

  • 通过接口获取菜单数据

    • 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌 即除登录外均需提供token才可请求

    • 通过axios请求拦截器 添加token来获得请求权限 也就是请求前的一个预处理

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

  • 通过v-for 循环请求得到并赋值给自定义的数组 注由于index值相同导致一个展开时全部展开，因此给其赋值id但不能使数字类型则+''解决

  • 美化侧边栏：给每个选项添加icon图标将id和图表一一对应放在一个对象内 在每次动态生成目录时为class动态生成值动态生成icon图标

  • 为home组件嵌套子路由 放于main区域内

  • 实现点击跳转并高亮的方式

    • 为二级菜单添加点击事件 将item值作为函数参数传入再点击的同时将index值保存到 windows.sessionstorage中
    • 定义一个数据储存路径值 将此值动态绑定到defaults-active属性实现高亮 每次点击为此数据赋值 window.sessionstorage.getItem()并且在created中也应为其赋值以确保刷新此页面后仍然保持高亮

  • 面包屑导航

  • 表格 type属性值设为index即可作为索引列

  • 使用插槽得到使用组件的属性值 利用 v-sloat="scope"指定填充区域 使用scope.row获取属性

    • switch状态改变后每次刷新switch会变回原来的状态 原因为：未改变数据库中状态的值导致每次刷新重新请求数据则会保持数据库中保持的状态
    • 调用switch的change事件 发起axios请求 将用户状态发送给后台

  • 实现搜索功能

    • 用v-modul实现数据的双向绑定 于userListInfozhong中的query即请求时的参数之一
    • 点击button时调用请求函数使后台返回所输入的用户名

  • 实现添加用户功能

    • 校验手机号和邮箱时使用自定义规则
    • test()正则表达式校验是否匹配某个模式
    • 关闭表单后需要重置表单
    • 对话框有close方法当对话框关闭时触发此方法的回调函数
    • 体检表单时首先要校验表单内容是否符合要求 符合时axios请求

  • 修改用户信息

    • 点击修改按钮触发显示dialog的函数 使与dialog绑定的属性数据值变为true

    • 需要将用户的数据显示在表单上 则通过id查询用户

    • id通过函数传参传递则通过 axios请求即可

    • 拿到id值得方法：通过v-slot='scpoe' scope.row即可获取组件的·属性值

    • input 添加属性值 disabled="true"禁止修改表单数据

    • 表单提交的一般操作

        editUserInfo () {
  //表单预验证
      this.$refs.editDialog.validate(async (valid) => {
        if (!valid) return this.$message.error('修改用户失败')
        const { data: res } = await this.$http.put('users/' + this.edaitForm.id, { email: this.edaitForm.email, mobile: this.edaitForm.mobile })
        if (res.meta.status !== 200) return this.$message.error('修改用户信息失败')
      // 关闭对话框
        this.editDialogVisible = false
   //重新获取信息渲染     
        this.getUsersList()
         this.$message.success('修改用户信息成功')
      })
    }

  • 删除功能

    • 根据id删除因此方法中需要传参
    • 需确认用户点击的为确认才发起axios请求
    • 用户确认删除返回： confirm 取消返回：cancel
    • 用户如果点击要删除通过this.$confirm()返回promise对象则通过操作最终发现返回一个字符串
avatar
文章
阅读
粉丝