Vue電商后台管理系統項目第3篇-首頁用戶列表增刪改查功能

前言

由於之前的作者沒有再更新這個后台管理系統項目的文章了，我想着把它的項目重頭到位做一遍，把剩下的文章寫完，把這個項目記錄完整，以后遇到類似的后台管理系統項目，可以快速復習一些知識點。

新的項目地址：https://github.com/C4az6/vue_manage_system

 

添加用戶

這個操作在用戶列表頁面，所以路由不用再進行 處理了。

基於單文件組件：

1. 添加事件綁定--彈出新增用戶對話框
2. 添加dialog對話框
3. Element-UI組件>dialog對話框>自定義內容>表單

重點屬性：

1. :visible.sync：控制當前對話框的顯示和隱藏，如果 值為true,則顯示
2. label-width：label寬度
3. model：表單的數據源綁定
4. v-model：單個表單元素的數據綁定

細節：

1. 表單元素的綁定數據的名稱不要隨意，而是參照接口
2. <el-form :model="addForm" :label-width="'120px'">：如果為label設置寬度沒有必須為每一個元素單獨設置，而是可以在form中統一設置

在dialog添加表單結構

<!-- 新增用戶對話框 -->
<el-dialog title="新增用戶" :visible.sync="addDialogFormVisible">
    <el-form :model="addForm" :label-width="'120px'">
        <el-form-item label="用戶名">
            <el-input v-model="addForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密碼">
            <el-input v-model="addForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="郵箱">
            <el-input v-model="addForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手機號">
            <el-input v-model="addForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary">確 定</el-button>
    </div>
</el-dialog>

為表單元素添加驗證提示信息

1. :rules屬性的設置
2. rules規則的添加
3. prop的名稱必須和規則的名稱對應
4. rules規則添加在data屬性中的

 

// 新增用戶和編輯用戶數據驗證規則
      rules: {
        username: [
          { required: true, message: '請輸入用戶名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請輸入密碼', trigger: 'blur' },
          { min: 6, max: 16, message: '長度在 6 到 16 個字符', trigger: 'blur' }
        ],
        email: [
          // [e-mail]
          { required: true, message: '請輸入郵箱', trigger: 'blur' },
          { message: '請輸入合法的郵箱', pattern: /\w+[@]\w+[.]\w+/, trigger: 'blur' }
        ],
        mobile: [
          // [e-mail]
          { required: true, message: '請輸入手機號', trigger: 'blur' },
          { message: '請輸入正確的手機號', pattern: /^1\d{10}$/, trigger: 'blur' }
        ]
      }

在事件中進行用戶數據的驗證--可以阻止 本次提交

1. 為表單添加ref屬性
2. 為按鈕添加綁定事件
3. validate方法可以實現表單數據的驗證，這個驗證的規則與之前所設置的Rules完全對應
4. 這個函數在實現完驗證之后會傳遞一個值給當前函數的回調，如果值為true,則說明驗證通過，否則說明不通過

發起新增用戶的請求，接收返回值，實現數據的刷新

1. 引入接口方法
2. 調用接口方法，傳遞參數，添加then的回調

// 新增用戶
add () {
    // 再次進行用戶數據的驗證
    this.$refs.addForm.validate(valid => {
        if (valid) {
            // 發起新增用戶請求
            addUser(this.addForm)
                .then(res => {
                if (res.data.meta.staus === 201) {
                    this.$message({
                        type: 'success',
                        message: res.data.meta.msg
                    })
                    // 數據刷新
                    this.addDialogFormVisible = false
                    // 表單元素的數據重置
                    this.$refs.addForm.resetFields()
                    this.init()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.meta.msg
                    })
                }
            })
                .catch(() => {
                this.$message({
                    type: 'error',
                    message: 'err'
                })
            })
        } else {
            // 中止本次請求
            return false
        }
    })
}

后台接口方法：@/api/users.js

// 新增用戶
export const addUser = (data) => {
  return axios({
    method: 'post',
    url: 'users',
    data
  })
}

 

編輯用戶

組件中的業務處理

1. 為編輯按鈕添加事件--彈框

2. 添加dialog

<!-- 編輯用戶對話框 -->
    <el-dialog title="編輯用戶" :visible.sync="editDialogFormVisible">
      <el-form ref='editForm' :model="editForm" :rules='rules' :label-width="'120px'">
        <el-form-item label="用戶名">
          <el-input v-model="editForm.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="郵箱" prop='email'>
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手機號" prop='mobile'>
          <el-input v-model="editForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false;$refs.editForm.resetFields()">取 消</el-button>
        <el-button type="primary">確 定</el-button>
      </div>
    </el-dialog>

添加dialog對象的屬性

// 控制新增用戶對話框的顯示和隱藏
      addDialogFormVisible: false,
      // 新增數據的表單數據綁定對象
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },

在彈出框 的時候需要加載默認數據

1. 重點是slot-scope的使用
2. 通過scope可以獲取這一行的對應的數據對象
3. scope.row就是當前這一行的數據對象

// 單擊編輯彈出對話框，加載默認數據
    handleEdit (obj) {
      console.log(obj)
      // 讓彈出框顯示
      this.editDialogFormVisible = true
      // 表單元素實現的雙向數據綁定，所以我們只需要為表單元素的雙向綁定數據對象有數據就行
      this.editForm.id = obj.id
      this.editForm.username = obj.username
      this.editForm.email = obj.email
      this.editForm.mobile = obj.mobile
    }

添加數據驗證的提示:和之前新增用戶完全一樣

1. 單擊確定實現修改操作

2. 修改提交之前再次實現用戶數據驗證

3. 接收操作返回值，進行數據刷新，關閉彈出框...

// 編輯用戶
    edit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          editUser(this.editForm).then(res => {
            // 一定不要靠猜，而是打印出數據分析數據內容和結構
            console.log(res)
            if (res.data.meta.status === 200) {
              this.$message({
                type: 'success',
                message: res.data.meta.msg
              })
              // 數據刷新
              this.editDialogFormVisible = false
              // 表單元素的數據重置
              this.$refs.editForm.resetFields()
              this.init()
            } else {
              this.$message({
                type: 'error',
                message: res.data.meta.msg
              })
            }
          }).catch(() => {
            console.log('err')
          })
        } else {
          return false
        }
      })
    }

接口方法的添加

// 編輯用戶
/**
 * 這個方法可以實現用戶數據的編輯
 * @param {object} data-用戶對象
 */
export const editUser = (data) => {
  return axios({
    method: 'put',
    url: `users/${data.id}`,
    data
  })
}

 

刪除用戶

組件中的業務處理

1. 添加刪除事件綁定
2. 寫出刪除確認提示框：內容不是很復雜，但是也沒有自動消息(既不是dialog也不是$message，而是messageBox)

messageBox的使用

 

在單擊確認的時候發起請求

 

// 根據id刪除用戶
    del (id) {
      // 彈出刪除確認框
      this.$confirm(`此操作將永久刪除id號為${id}的數據, 是否繼續?`, '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 發起刪除請求
        deleteUser(id)
          .then(res => {
            if (res.data.meta.status === 200) {
              this.$message({
                type: 'success',
                message: '刪除成功!'
              })
              this.init()
            }
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: '刪除失敗!'
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消刪除'
        })
      })
    }

接口方法的添加

// 刪除用戶
export const deleteUser = (id) => {
  return axios({
    method: 'delete',
    url: `users/${id}`
  })
}

 

分配用戶角色

組件中的業務處理

1. 綁定分配角色的事件
2. 添加分配角色對話框

下拉列表結構說明

// 當用戶進行選擇之后，會自動的將:value所對應數據賦值給v-model所指定的屬性
<el-select v-model="value" placeholder="請選擇">
    <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label" //用於展示的數據--給用戶看的
               :value="item.value" //這個展示數據背后的value值，它就是相當於背后的唯一標識id
               ></el-option>
</el-select>

觀察接口方法：接口需要的是id

接口方法

// 分配用戶角色
// id:就是id號
// rid:也是一個id號
export const grantUserRole = (id, rid) => {
  return axios({
    method: 'put',
    url: `users/${id}/role`,
    data: { rid: rid }
  })
}

 

修改用戶狀態

 vue組件的業務處理

處理不同用戶不同的狀態的展示

1. 之前都是綁定了同個屬性值--value2,所以其中一個狀態變化也會影響到其它switch的狀態變化

2. 我們發現數據中有一個屬性mg_state，它就是用來描述當前用戶的狀態

3. 所以我們可以將swtich的v-model綁定為用戶數據 的mg_state

<el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

為switch添加狀態切換的事件：change事件就是在切換狀態時的觸發事件，這個事件有一個參數，就是當前狀態

1. 這個事件如果沒有傳遞參數，那么就默認的當前狀態做為參數

2. 如果你手動傳遞了參數，默認的參數就不會再進行傳遞，你可以手動的添加$event

3. $event的值就是當前的狀態值

4. 你也可以將之前數據源數據雙向綁定屬性做為參數傳遞

<el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change='updateStatus(scope.row.id,scope.row.mg_state)'></el-switch>

實現狀態的修改:調用接口方法

// 修改用戶狀態
    updateStatus (id, type) {
      updateUserStatus(id, type)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            })
          }
        })
    }

接口方法

// 修改用戶狀態
export const updateUserStatus = (id, type) => {
  return axios({
    method: 'put',
    url: `users/${id}/state/${type}`
  })
}

 

補充：Token

token是一種新的狀態保持的方式：客戶端使用用戶名和密碼請求登錄。服務端收到請求，驗證用戶名和密碼。驗證成功后，服務端會生成一個token，然后把這個token發送給客戶端。客戶端收到token后把它存儲起來，可以放在cookie或者Local Storage（本地存儲）里。客戶端每次向服務端發送請求的時候都需要帶上服務端發給的token。服務端收到請求，然后去驗證客戶端請求里面帶着token，如果驗證成功，就向客戶端返回請求的數據。

現在我們有一個需求：我們需要獲取到token值，並且在每一次后台數據請求的時候傳遞這個token給服務器。

存儲token 》 獲取token 》 傳遞token。

存儲token

1. 在登陸成功之后的返回值中就包含token

2. 我們可以使用本地存儲來實現對token值的存儲：localStorage sessionStorage

獲取token + 傳遞token

1. 什么時候獲取並進行傳遞：每個請求發送的時候都需要傳遞token,我們當然不想每個請求都單獨進行處理

2. 攔截器就是在這個場景提供支持的

3. axios提供了攔截器功能

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  // 獲取可能有的token數據，進行請求頭的設置，格式Authorization:token
  var token = localStorage.getItem('itcast_pro_token')
  // console.log(config)
  config.headers['Authorization'] = token

  return config
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error)
})

 

效果展示

 

如果您喜歡這篇文章，可以打賞點錢給我 ：）

　　　　支付寶　　　　　　　　　　　　      微信