Vue項目練習--電商后台管理系統的功能---用戶管理模塊

Vue項目練習--電商后台管理系統的功能---登錄頁面

 

 

 用戶管理概述：

通過后台管理用戶的賬號信息，具體包括用戶信息的展示、添加、修改、刪除、角色分配、賬號啟用/注銷等功能。

1.列表展示

• 面包屑導航 el-breadcrum
• Element-UI 的Card卡片組件
• Element-UI 柵格系統基本使用 el-row。el-row代表每一行，el-col代表每一列，:span代表每一列代表多寬，整個一行有24個格子。每一欄之間的距離使用:gutter來進行指定
• 表格布局 el-table、 el-pagination

這里分欄之間使用了間隔，以及隔行變色功能

 

 

 

 

添加索引列：

 

 

 

 

2.用戶狀態列和操作列處理

• 作用域插槽
• 接口調用

<template slot-scope="scope">
    <!-- 開關 -->
    <el-switch v-model="scope.row.mg_state" @change="stateChanged(scope.row.id, scope.row.mg_state)">
    </el-switch>
</template>

　　

如何將bool值按需渲染成開關的顯示效果？需要用到作用域插槽，通過作用域插槽接收scope，然后就可以使用scope.row屬性，代表這一行對應的數據，並且使用Element-UI 的Switch組件

scope.row就是當前這一行的數據

如果你同時為這一列指定了prop和作用域插槽，作用域插槽會覆蓋prop，所以就不需要prop

使用自定義插槽的形式渲染操作列：

操作這一列不對應任何的數據結構，要渲染成什么樣子完全是由程序員自己決定。但是操作這一列必須要拿到對應的id才能進行操作，所以必須使用作用域插槽的形式來渲染

需要使用Element-UI 的Tooltip組件

3.渲染表格數據

　　3.1 調用后台接口

　　3.2 表格數據初填充

const { data: res } = await this.$http.get('users', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.error('查詢用戶列表失敗！ ')
}
this.total = res.data.total
this.userlist = res.data.users

　獲取用戶列表數據：total表示所有的用戶數量，pagenum表示第幾頁，users代表第pagenum頁的用戶

渲染用戶列表數據：

4.分頁器

分頁組件包括：

• 當前頁碼： pagenum
• 每頁條數： pagesize
• 記錄總數： total
• 頁碼變化事件
• 每頁條數變化事件
• 分頁條菜單控制

<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum"
    :page-sizes="[2, 3, 5, 10]"
    :page-size="queryInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
</el-pagination>

layout作用是用來指定頁面上顯示哪些布局結構的

5.搜索功能

將搜索關鍵字，作為參數添加到列表查詢的參數中。

<el-input
    placeholder="請輸入搜索的內容"
    v-model="queryInfo.query"
    clearable
    @clear="getUserList">
    <el-button slot="append"
        icon="el-icon-search"
        @click="getUserList">
　　</el-button>
</el-input>

　

實現搜索功能：當用戶在文本框中輸入了不同的名稱之后，點擊搜索按鈕，可以根據指定的名稱來搜索不同的用戶。

首先應該將文本框和data中的數據做雙向綁定，綁定之后，點擊搜索按鈕可以調用獲取用戶列表的函數，重新渲染列表數據

優化搜索功能：當輸入搜索數據並點擊搜索按鈕之后，會重新渲染搜索的數據結果，但是如果我們想要再查看所有的用戶，必須刪掉搜索框中的內容，並且再重新點擊一下搜索按鈕。我們的需求是，當我們想查看全部的數據時，搜索框內可以提供一個清空的按鈕，只要我們一點清空，文本框就可以被重置了，所有用戶就會被立即查詢出來了

此時只是文本框被清空了，但是數據並沒有被重置，如何在清空文本框的同時重置所有的數據呢？

6.用戶管理-用戶狀態控制　

　　6.1 開關組件的用法

　　6.2  接口調用更改用戶的狀態

<el-switch
    v-model="scope.row.mg_state"
    @change="stateChanged(scope.row.id, scope.row.mg_state)">
</el-switch>

async stateChanged(id, newState) {
    const { data: res } = await this.$http.put(`users/${id}/state/${newState}`)
    if (res.meta.status !== 200) {
        return this.$message.error('修改狀態失敗！ ')
    }
}

實現用戶狀態的修改：需要把用戶狀態的更改同步保存到數據庫中

• 第一步，需要監聽到switch開關狀態的改變，拿到最新的狀態
• 第二步，要調用對應的API接口，把最新的狀態保存到數據庫中

6.用戶管理-添加用戶

　6.1 添加用戶表單彈窗布局

• 彈窗組件Dialog的用法
• 控制彈窗顯示和隱藏

<el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%">
    <el-form :model="addForm" label-width="70px">
        <el-form-item label="用戶名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>
    <!-- 更多表單項 -->
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="resetAddForm">取 消</el-button>
        <el-button type="primary" @click="addUser">確 定</el-button>
    </span>
</el-dialog>

在對話框中渲染添加用戶的表單：

　　6.2 表單驗證

內置表單驗證規則

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" >
    <!-- 表單 -->
</el-form>

addFormRules: {
    username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],
    password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }],
}

this.$refs.addFormRef.validate(async valid => {
    if (!valid) return
})

 

 

 自定義表單驗證規則

const checkMobile = (rule, value, cb) => {
    let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    if (reg.test(value)) {
        cb()
    } else {
        cb(new Error('手機號碼格式不正確'))
    }
}

mobile: [
    { required: true, message: '請輸入手機號', trigger: 'blur' },
    { validator: checkMobile, trigger: 'blur' }
]

　　

使用自定義校驗規則驗證郵箱和手機號：

• 第一步，先定義一個箭頭函數代表一個校驗規則，然后給該箭頭函數取個名字
• 第二步，在具體的規則中通過validator來使用自定義規則

　　6.3表單提交

將用戶信息作為參數，調用后台接口添加用戶

this.$refs.addFormRef.validate(async valid => {
    if (!valid) return
    const { data: res } = await this.$http.post('users', this.addForm)
    if (res.meta.status !== 201) {
        return this.$message.error('添加用戶失敗！ ')
    }
    this.$message.success('添加用戶成功！ ')
    this.addDialogVisible = false
    this.getUserList()
})

　　

在整個對話框關閉之后重置整個表單：

添加用戶的預驗證功能：

7. 用戶管理-編輯用戶

　　7.1 根據 ID 查詢用戶信息

 

<el-button type="primary" size="mini" icon="el-icon-edit"
    @click="showEditDialog(scope.row.id)">
</el-button>

async showEditDialog(id) {
    const { data: res } = await this.$http.get('users/' + id)
    if (res.meta.status !== 200) {
        return this.$message.error('查詢用戶信息失敗！ ')
    }
    // 把獲取到的用戶信息對象，保存到 編輯表單數據對象中
    this.editForm = res.data
    this.editDialogVisible = true
}

　　用戶名不需要有校驗規則，所以不需要prop屬性

 

　　7.2 編輯提交表單

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.$message.success('編輯用戶信息成功！ ')
    this.getUserList()
    this.editDialogVisible = false
})

 8 用戶管理-刪除用戶

<el-button type="danger" size="mini" icon="el-icon-delete"
    @click="remove(scope.row.id)">
</el-button>

async remove(id) {
    // 詢問是否要刪除
    const confirmResult = await this.$confirm('此操作將永久刪除該用戶, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(err => err)
    const { data: res } = await this.$http.delete('users/' + id)
    if (res.meta.status !== 200) return this.$message.error('刪除用戶失敗！ ')
    this.$message.success('刪除用戶成功！ ')
    this.getUserList()
}

需要使用ElementUI中的MessageBox彈窗組件：