VUE调用接口实现增删改查
增删改查:增加方法调用接口需要传入新增数据的参数addUser(){//提交请求前,表单预验证this.$refs.addUserFormRef.validate(asyncvalid=>{//console.log(valid)//表单预校验失败if(!valid)returnconst{data:res}=awaitthis.$http.post('user...
增删改查:增加方法调用接口需要传入新增数据的参数
addUser () {
// 提交请求前,表单预验证
this.$refs.addUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.post('users', this.addUserForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败!')
}
this.$message.success('添加用户成功!')
// 隐藏添加用户对话框
this.addDialogVisible = false
this.getUserList()
})
}
查询方法:需要传入id值
async showEditDialog (id) {
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败!')
}
this.editUserForm = res.data
this.editDialogVisible = true
},
修改方法:需要传入id值
editUser () {
// 提交请求前,表单预验证
this.$refs.editUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.put(
'users/' + this.editUserForm.id,
{
email: this.editUserForm.email,
mobile: this.editUserForm.mobile
}
)
if (res.meta.status !== 200) {
this.$message.error('更新用户信息失败!')
}
// 隐藏添加用户对话框
this.editDialogVisible = false
this.$message.success('更新用户信息成功!')
this.getUserList()
})
},
删除方法:需要传入要删除数据的id值 // 删除用户
async removeUserById (id) {
const confirmResult = await this.$confirm(
'此操作将永久删除该用户, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 点击确定 返回值为:confirm
// 点击取消 返回值为: cancel
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
}
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('删除用户失败!')
this.$message.success('删除用户成功!')
this.getUserList()
},
更多推荐
所有评论(0)