電商后台管理系統的功能——用戶管理模塊
1. 用戶管理概述
通過后台管理用戶的賬號信息，具體包括用戶信息的展示、添加、修改、刪除、角色分配、賬號啟用/注銷等功能。
- 用戶信息列表展示
- 添加用戶
- 修改用戶
- 刪除用戶
- 啟用或禁用用戶
- 用戶角色分配
2. 用戶管理-列表展示
① 用戶列表布局
- 面包屑導航 el-breadcrumb
- Element-UI 的Card卡片組件
- Element-UI 柵格系統基本使用 el-row。el-row代表每一行，el-col代表每一列，:span代表每一列代表多寬，整個一行有24個格子。每一欄之間的距離使用:gutter來進行指定
- 表格布局 el-table、 el-pagination
隔行變色功能：
添加索引列：
② 用戶狀態列和操作列處理
- 作用域插槽
- 接口調用
<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組件
③ 表格數據填充
- 調用后台接口
- 表格數據初填充
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頁的用戶
渲染用戶列表數據：
④ 表格數據分頁
分頁組件用法：
- 當前頁碼： 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作用是用來指定頁面上顯示哪些布局結構的
⑤ 搜索功能
將搜索關鍵字，作為參數添加到列表查詢的參數中。
<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中的數據做雙向綁定，綁定之后，點擊搜索按鈕可以調用獲取用戶列表的函數，重新渲染列表數據
優化搜索功能：當輸入搜索數據並點擊搜索按鈕之后，會重新渲染搜索的數據結果，但是如果我們想要再查看所有的用戶，必須刪掉搜索框中的內容，並且再重新點擊一下搜索按鈕。我們的需求是，當我們想查看全部的數據時，搜索框內可以提供一個清空的按鈕，只要我們一點清空，文本框就可以被重置了，所有用戶就會被立即查詢出來了
此時只是文本框被清空了，但是數據並沒有被重置，如何在清空文本框的同時重置所有的數據呢？
3. 用戶管理-用戶狀態控制
① 開關組件的用法
② 接口調用更改用戶的狀態
<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接口，把最新的狀態保存到數據庫中
4. 用戶管理-添加用戶
① 添加用戶表單彈窗布局
- 彈窗組件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>
在對話框中渲染添加用戶的表單：
② 表單驗證
內置表單驗證規則
<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來使用自定義規則
③ 表單提交
將用戶信息作為參數，調用后台接口添加用戶
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() })
在整個對話框關閉之后重置整個表單：
添加用戶的預驗證功能：
5. 用戶管理-編輯用戶
① 根據 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屬性
② 編輯提交表單
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 })
6. 用戶管理-刪除用戶
<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彈窗組件：
7. 將用戶管理功能上傳到碼雲
- 使用git checkout -b user創建一個新分支並切換到該分支上
- 使用git branch查看當前所處的分支，所有代碼的修改也一起被切換到了user子分支中
- 使用git status命令檢查當前分支的代碼狀態
- 使用git add .命令統一增加到暫存區
- 使用git commit -m "完成用戶列表功能的開發"命令把user分支提交到本地倉庫中
本地user的代碼就是最新的了
使用git push -u origin user命令把本地的user分支推送到雲端中
master是主分支，但是它的代碼還是舊的，應該立即把所有的代碼合並到主分支上
- 使用git checkout master命令切換到主分支
- 使用git merge user命令從主分支上把user分支上的代碼合並過來
- 使用git push命令將本地的master分支的代碼推送到雲端，這樣master分支上的代碼也是最新的了
代碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue