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

day03

---

一. 實現操作列的功能
二. 補充一些git操作
三. 權限管理
四. 上傳到git
五. 自己寫發現的問題

---

一. 實現操作列的功能

1.1 實現編輯用戶

• 創建dialog
• 為編輯按鈕添加點擊事件(傳入id)
• 根據API和id獲取數據並把數據保存在一個data
  • form與info的數據要分開
  • 因為要重置表單操作
• 編輯用戶表單操作
  • 重置修改表單的操作
  • 表單預校驗
  • 通過則關閉dialog message 刷新用戶列表

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不要在前面加: