1.流程简介
1.1弹窗的设置
- 设置弹窗el-dialog，并且创建弹窗内容，传递选中栏的用户名与昵称
- 创建显示窗口的函数showReset
- 创建重置的图标
- 返回第二步中所用的变量名称，并设置是否默认显示
- 测试1：
1.2确认修改用户密码发送请求
- 发送get请求，传递获取到的id参数
- 判断状态码是否成功
- 关闭弹窗
- 重新获取数据
10.测试2
2.测试
2.1测试1——弹窗测试是否有效
2.2测试2——重置密码是否有效
首先，去到navicat中修改加密过后密码pwd
使用重置密码的按钮发送请求
前端测试结果
数据库测试结果
使用新密码登录测试结果
3.主要代码——弹窗函数与发送重置密码请求函数
// 显示重置密码的弹窗
showReset(row){
this.resetId = row.id
this.resetName = row.name
this.resetNickName = row.nick_name
this.resetDialogVisible = true
},
// 重置密码弹窗中的确认操作
async resetUser(){
const {data: res} = await this.$axios.get('/api/user/reset', {params: {id:this.resetId} })
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.resetDialogVisible = false
this.getUserList()
}
4.完整代码
<!-- src/components/user/User.vue -->
<template>
<div>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-card>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入用户名" v-model="queryInfo.name">
<el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
</el-input>
</el-col>
<el-col :span="2">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible=true">新增用户</el-button>
</el-col>
</el-row>
<el-row >
<el-col>
<el-table :data="userList" border style="width:100%">
<el-table-column type="index"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column prop="nick_name" label="昵称"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column label="操作">
<!--
当一个方框中有多个按键功能时，可以使用查槽的方式去传递信息。
利用slot-scope定义的属性scope.row，可以直接获取到整行的信息
-->
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle @click="showEdit(scope.row)"></el-button>
<el-button type="warning" icon="el-icon-refresh" circle @click="showReset(scope.row)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="showDel(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pnum" :page-sizes="[1,2,5,10]" :page-size="queryInfo.psize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<!-- 新增用户的dialog模态框 -->
<!-- 通过visible.sync显示 -->
<el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%" :before-close="addFormClose">
<!-- ref用于获取表单数据，绑定表单。 -->
<el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
<!-- prop绑定规则 -->
<el-form-item label="账号" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nick_name">
<el-input v-model="addForm.nick_name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="addForm.pwd"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="real_pwd">
<el-input v-model="addForm.real_pwd"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="addForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addFormClose">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑用户的dialog模态框 -->
<el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%">
<!-- ref用于获取表单数据，绑定表单。 -->
<el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="80px">
<!-- prop绑定规则 -->
<el-form-item label="账号" prop="name">
<el-input v-model="editForm.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nick_name">
<el-input v-model="editForm.nick_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUser">确 定</el-button>
</span>
</el-dialog>
<!-- 删除用户的dialog模态框 -->
<el-dialog title="删除用户" :visible.sync="delDialogVisible" width="30%">
<span>确定是否删除用户名为：{{delName}} 昵称为：{{delNickName}}吗？？？？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="delDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="delUser">确 定</el-button>
</span>
</el-dialog>
<!-- 重置用户密码的dialog模态框 -->
<el-dialog title="重置用户密码" :visible.sync="resetDialogVisible" width="30%">
<span>确定是否删除用户名为：{{resetName}} 昵称为：{{resetNickName}}吗？？？？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="resetDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="resetUser">确 定</el-button>
</span>
</el-dialog>
</el-card>
</div>
</template>
<script>
export default {
data () {
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.addForm.pwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
const validatePhone = (rule, value, callback) => {
// 定义一个正则来验证手机号是否有效
let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
if (phoneReg.test(value)){
return callback()
}
return callback(new Error('请输入有效的手机号'))
}
const validateEmail = (rule, value, callback) => {
// 定义一个正则来验证手机号是否有效
let EmailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (EmailReg.test(value)){
return callback()
}
return callback(new Error('请输入有效的邮箱号'))
}
return {
userList : [],
// 用于传递页码和每页的条数,控制搜索条件
queryInfo: {
// 默认值
name:'',
pnum: 1,
psize: 2
},
// 用于统计总共有几条数据
total: 0,
addDialogVisible:false,
editDialogVisible:false,
delDialogVisible:false,
resetDialogVisible:false,
addForm:{},
editForm:{},
delName : '',
delNickName: '',
delId: 0,
resetName : '',
resetNickName: '',
resetId: 0,
addFormRules:{
// 一个字段可以多个规则
// required是否必填，message提示信息（输入框下面），trigger：什么时候触发（光标不在输入框或回车）
name:[
{ required: true, message: '请输入用户名', trigger:'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
nick_name:[
{ required: true, message: '请输入昵称', trigger:'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
pwd:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
real_pwd:[
{ validator: validatePass2, trigger:'blur'}
],
phone:[
{ validator: validatePhone, trigger:'blur'}
],
email:[
{ validator: validateEmail, trigger:'blur'}
]
},
editFormRules:{
phone:[
{ validator: validatePhone, trigger:'blur'}
],
email:[
{ validator: validateEmail, trigger:'blur'}
]
}
}
},
// 创建时进行的操作
created(){
this.getUserList()
},
// 异步操作转同步：因为加载到这个页面时候就必须加载此数据
methods: {
async getUserList(){
// 发送请求到后端：当时定义的请求方式是put，定义的地址是/user_list, 传递第几页第几条
const { data : res } = await this.$axios.get('/api/user/user_list', { params: this.queryInfo })
// 避免报错
if(res.status != 200) return this.$msg.error(res.msg)
console.log(res.data);
this.total = res.data.totalPage
this.userList = res.data.users
},
// 改变每页显示多少条数据
handleSizeChange(val) {
this.queryInfo.psize = val
// 一定记得改变完要调用方法
this.getUserList()
},
// 改变展示哪一页
handleCurrentChange(val) {
this.queryInfo.pnum = val
this.getUserList()
},
searchUser(){
this.queryInfo.pnum = 1
this.getUserList()
},
// 每次打开之前触发的函数
addFormClose(){
// $refs.addFormRef获取到整个组件
this.$refs.addFormRef.resetFields()
this.addDialogVisible = false
},
addUser(){
// 发送请求之前，验证数据是否规范valid
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
// 发送请求
const { data: res } = await this.$axios.post(
'/api/user/user',
this.$qs.stringify(this.addForm)
)
// 验证结果
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
// 隐藏窗口
this.addDialogVisible = false
// 重置增加用户的表单
this.$refs.addFormRef.resetFields()
// 重新获取用户列表
this.getUserList()
})
},
// 显示信息在编辑用户窗口
async showEdit(row){
// 发送请求：获取后台实时数据
const { data: res} = await this.$axios.get('/api/user/user', {params: { id: row.id }})
if (res.status !== 200) return this.$msg.error(res.msg)
console.log(res)
this.editForm = res.data
// 先获取数据再显示窗口
this.editDialogVisible = true
},
editUser(){
// 发送请求之前，验证数据是否规范valid
this.$refs.editFormRef.validate(async valid=>{
if(!valid) return
// 发送请求
const {data: res} = await this.$axios.put('/api/user/user',this.$qs.stringify(this.editForm))
// 验证结果
if (res.status !== 200 ) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.editDialogVisible = false
this.getUserList()
})
},
// 显示确认删除用户的弹窗
showDel(row){
this.delId = row.id
this.delName = row.name
this.delNickName = row.nick_name
this.delDialogVisible = true
},
async delUser(){
const {data: res} = await this.$axios.delete('/api/user/user', { data:{ id: this.delId}})
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.delDialogVisible = false
this.getUserList()
},
// 显示重置密码的弹窗
showReset(row){
this.resetId = row.id
this.resetName = row.name
this.resetNickName = row.nick_name
this.resetDialogVisible = true
},
// 重置密码弹窗中的确认操作
async resetUser(){
const {data: res} = await this.$axios.get('/api/user/reset', {params: {id:this.resetId} })
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.resetDialogVisible = false
this.getUserList()
}
}
}
</script>
<style>
.el-table{
margin-top: 10px;
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
