vue查询列表中所有用户信息_Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能...
前言
由于之前的作者没有再更新这个后台管理系统项目的文章了，我想着把它的项目重头到位做一遍，把剩下的文章写完，把这个项目记录完整，以后遇到类似的后台管理系统项目，可以快速复习一些知识点。
添加用户
这个操作在用户列表页面，所以路由不用再进行 处理了。
基于单文件组件：
添加事件绑定--弹出新增用户对话框
添加dialog对话框
Element-UI组件>dialog对话框>自定义内容>表单
重点属性：
:visible.sync：控制当前对话框的显示和隐藏，如果 值为true,则显示
label-width：label宽度
model：表单的数据源绑定
v-model：单个表单元素的数据绑定
细节：
表单元素的绑定数据的名称不要随意，而是参照接口
：如果为label设置宽度没有必须为每一个元素单独设置，而是可以在form中统一设置
在dialog添加表单结构
为表单元素添加验证提示信息
:rules属性的设置
rules规则的添加
prop的名称必须和规则的名称对应
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: [//[email protected]
{ required: true, message: '请输入邮箱', trigger: 'blur'},
{ message:'请输入合法的邮箱', pattern: /\w+[@]\w+[.]\w+/, trigger: 'blur'}
],
mobile: [//[email protected]
{ required: true, message: '请输入手机号', trigger: 'blur'},
{ message:'请输入正确的手机号', pattern: /^1\d{10}$/, trigger: 'blur'}
]
}
在事件中进行用户数据的验证--可以阻止 本次提交
为表单添加ref属性
为按钮添加绑定事件
validate方法可以实现表单数据的验证，这个验证的规则与之前所设置的Rules完全对应
这个函数在实现完验证之后会传递一个值给当前函数的回调，如果值为true,则说明验证通过，否则说明不通过
发起新增用户的请求，接收返回值，实现数据的刷新
引入接口方法
调用接口方法，传递参数，添加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) =>{returnaxios({
method:'post',
url:'users',
data
})
}
编辑用户
组件中的业务处理
为编辑按钮添加事件--弹框
添加dialog
添加dialog对象的属性
//控制新增用户对话框的显示和隐藏
addDialogFormVisible: false,//新增数据的表单数据绑定对象
addForm: {
username:'',
password:'',
email:'',
mobile:''},
在弹出框 的时候需要加载默认数据
重点是slot-scope的使用
通过scope可以获取这一行的对应的数据对象
scope.row就是当前这一行的数据对象
//单击编辑弹出对话框，加载默认数据
handleEdit (obj) {
console.log(obj)//让弹出框显示
this.editDialogFormVisible = true
//表单元素实现的双向数据绑定，所以我们只需要为表单元素的双向绑定数据对象有数据就行
this.editForm.id =obj.idthis.editForm.username =obj.usernamethis.editForm.email =obj.emailthis.editForm.mobile =obj.mobile
}
添加数据验证的提示:和之前新增用户完全一样
单击确定实现修改操作
修改提交之前再次实现用户数据验证
接收操作返回值，进行数据刷新，关闭弹出框...
//编辑用户
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) =>{returnaxios({
method:'put',
url: `users/${data.id}`,
data
})
}
删除用户
组件中的业务处理
添加删除事件绑定
写出删除确认提示框：内容不是很复杂，但是也没有自动消息(既不是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) =>{returnaxios({
method:'delete',
url: `users/${id}`
})
}
分配用户角色
组件中的业务处理
绑定分配角色的事件
添加分配角色对话框
下拉列表结构说明
//当用户进行选择之后，会自动的将:value所对应数据赋值给v-model所指定的属性
v-for="item in options":key="item.value":label="item.label" //用于展示的数据--给用户看的
:value="item.value" //这个展示数据背后的value值，它就是相当于背后的唯一标识id
>
观察接口方法：接口需要的是id
接口方法
//分配用户角色//id:就是id号//rid:也是一个id号
export const grantUserRole = (id, rid) =>{returnaxios({
method:'put',
url: `users/${id}/role`,
data: { rid: rid }
})
}
修改用户状态
vue组件的业务处理
处理不同用户不同的状态的展示
之前都是绑定了同个属性值--value2,所以其中一个状态变化也会影响到其它switch的状态变化
我们发现数据中有一个属性mg_state，它就是用来描述当前用户的状态
所以我们可以将swtich的v-model绑定为用户数据 的mg_state
为switch添加状态切换的事件：change事件就是在切换状态时的触发事件，这个事件有一个参数，就是当前状态
这个事件如果没有传递参数，那么就默认的当前状态做为参数
如果你手动传递了参数，默认的参数就不会再进行传递，你可以手动的添加$event
$event的值就是当前的状态值
你也可以将之前数据源数据双向绑定属性做为参数传递
实现状态的修改:调用接口方法
//修改用户状态
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) =>{returnaxios({
method:'put',
url: `users/${id}/state/${type}`
})
}
补充：Token
token是一种新的状态保持的方式：客户端使用用户名和密码请求登录。服务端收到请求，验证用户名和密码。验证成功后，服务端会生成一个token，然后把这个token发送给客户端。客户端收到token后把它存储起来，可以放在cookie或者Local Storage(本地存储)里。客户端每次向服务端发送请求的时候都需要带上服务端发给的token。服务端收到请求，然后去验证客户端请求里面带着token，如果验证成功，就向客户端返回请求的数据。
现在我们有一个需求：我们需要获取到token值，并且在每一次后台数据请求的时候传递这个token给服务器。
存储token 》 获取token 》 传递token。
存储token
在登陆成功之后的返回值中就包含token
我们可以使用本地存储来实现对token值的存储：localStorage sessionStorage
获取token + 传递token
什么时候获取并进行传递：每个请求发送的时候都需要传递token,我们当然不想每个请求都单独进行处理
拦截器就是在这个场景提供支持的
axios提供了拦截器功能
//添加请求拦截器
axios.interceptors.request.use(function(config) {//在发送请求之前做些什么
//获取可能有的token数据，进行请求头的设置，格式Authorization:token
var token = localStorage.getItem('itcast_pro_token')//console.log(config)
config.headers['Authorization'] =tokenreturnconfig
},function(error) {//对请求错误做些什么
returnPromise.reject(error)
})
效果展示
如果您喜欢这篇文章，可以打赏点钱给我 ：)
支付宝 微信
