vue+element-ui商城后台管理系统(day03)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

day03

一. 实现操作列的功能
二. 补充一些git操作
三. 权限管理
四. 上传到git
五. 自己写发现的问题

一. 实现操作列的功能

1.1 实现编辑用户

  • 创建dialog
  • 为编辑按钮添加点击事件(传入id)
  • 根据API和id获取数据并把数据保存在一个data

    • form与info的数据要分开
    • 因为要重置表单操作
  • 编辑用户表单操作

    • 重置修改表单的操作
    • 表单预校验
    • 通过则关闭dialogmessage 刷新用户列表

1.2 实现删除用户功能

  • 全局注册主件Messagebox.comfirm
  • cofirm传入的参数的含义
  • confirm点击确认返回promise, 点击取消调用catch, 如果用async和await就要把catch写出来
  • 发送delete请求删除用户

二. 补充一些git操作

2.1 当写好了新的代码发现事master但是想建立新分支?

git checkout -b \'new-branch\'

2.2 想更改分支名字

  • ① 重命名远程分支对应的本地分支(没有远程分支的话直接这样就可以了)

git branch -m oldName newName

  • ② 删除远程分支

git push --delete origin oldName

  • ③ 将本地新分支push到远程

git push origin newName

  • ④ 把修改后的本地分支与远程分支关联

git branch --set-upstream-to origin/newName

  • 设分支关联的意义

    • 不用每次push都要指定哪一个远程关联的分支
    • git branch -vv
  • 如果更新了代码却在master想建立在分支

    • 可以直接git branch -b \'new branch name\'
  • git的流程图

三. 权限管理

3.1 权限列表

  • 创建新分支
  • 页面结构

    • 面包屑
    • 卡片 > 表格
  • 用Tag组件与v-if根据作用域插槽的属性来判断显示哪一种标签

3.2 角色列表

  • 用户 => 角色 => 权限

    • 用用户绑定角色, 然后再根据角色来分配权限, 而不是直接把权限分配给用户
  • 获取角色信息
  • 绘制基本表格信息(编辑, 删除, 分配权限)
  • 用<el-table-colum type="expand"></el-table-colum>来设置扩展栏
  • 利用栅格系统<el-row/><el-col/>来分配一级权限与二级权限

    • 再用tag标签来包起来
  • 一级权限

    • 添加边框

      • 第一个添加顶部, 全部都添加底部边框
      • :class=[ index1 === 0 ? \'bdTop\' : \'\', \'bdBottom\' ]
      • 小箭头字体图标
  • 二级权限

    • html结构

<el-row>
    <el-col v-for>
        一级权限内容
    <el-col/>
    <el-col>
        二级权限内容
        <el-row>
        	<el-col v-for>
                二级权限内容
            <el-col/>
            <el-col>
                <el-tag v-for>三级权限内容<el-tag/>
            <el-col/>
        <el-row/>
    <el-col/>
<el-row/>

  • 为权限加添样式使其可以居中(给父级)

.vcenter {
	display: flex;
    aitems~
}

  • 为权限列表的tag组件添加删除标签, 确认删除框
  • 防止删除权限后进行全体的刷新

    • 所以不用this.getRolesList()
    • 用role.children = res.data

3.3 分配权限

  • 控制分配权限的dialog的显示与隐藏

  • 在点击分配权限的时候获取权限列表并渲染出来

  • 通过Tree组件和其data与props属性来确定渲染出来的树形结构

  • 组件优化

    • 添加复选框
    • 添加node-key属性使其点击复选框的时候选中的是它的id值
    • 默认渲染展开全部

  • 添加默认选中

    • data中存放一个保存三级节点id的属性
    • 再放:default-checked-keys中

  • 使用递归来添加默认选中权限

    getTreeKeys (node) {
      if (!node.children) {
        // 显示的子权限
        return this.showTreeRights.push(node.id)
      } else {
        // 默认的展开
        this.showTreeExpand.push(node.id)
      }
      node.children.forEach(value => {
        this.getTreeKeys(value)
      })
    },

  • 连续点击不同角色会出现没有权限的地方被勾选上

    • 解决方法:

      • 在每次关闭dialog的时候清空arr

  • 权限分配提交

    • 使用组件的方法来获得版选中与全选中的id(node-key)
    • 用…arr的方法添加在一个数组中
    • 因为不能直接获取角色id所以要定义一个data来存放打开dialog的时候的id
    • 因为传送的数据类型是一个字符串, 使用arr.join(\',\')可以获取字符串形式
    • 获取tree组件被选中和被版选中的方法

      • getCheckedKeys
      • getHalfCheckedKeys

  • 角色分配

    • 所有角色的数据列表也要保存
    • 要把el-select双向绑定一个id存放的属性才会出现选中的效果
    • 发送请求
    • 给dialog添加关闭后重置userInfo与选中的id

四. 上传到git

五. 自己写发现的问题

5.1 使用element-ui的MessageBox组件

  • 要有删除键一定要在Message后面.confirm

    • Vue.prototype.confirm = Message.confirm

5.2 table与form的prop问题

  • form的prop是rules对应key
  • table的prop是data对应的值的key

5.3 table的column调用作用域插槽溢出问题

  • 如果template的v-slot="value"而下面使用{{ value }}会有溢出的风险
  • 把{{ value }}改为{{ value.row }}

5.4 tree问题

  • 每次点开分配权限的时候要刷新tree组件的:data?不然会出现已选的复选框不正常的问题(这里就是list)

5.5 v-model不要在前面加:

以上是 vue+element-ui商城后台管理系统(day03) 的全部内容， 来源链接： utcz.com/z/375898.html

回到顶部