VUE项目实战28.实现添加用户功能-预校验与发起新增请求
Posted 光仔December
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE项目实战28.实现添加用户功能-预校验与发起新增请求相关的知识,希望对你有一定的参考价值。
接上篇《27.实现添加用户功能(1)-表单渲染和校验规则实现》
上一篇我们实现了新增用户表单的渲染和校验规则的实现,本篇我们来完成用户新增的预校验和网络请求的发起。
一、表单预校验
我们来实现在添加用户前的表单预校验功能,即我们填写完用户信息在点击“确定”按钮时,调用一个函数,在函数中对整个表单数据进行一个预验证,确保在真正提交后台之前所有数据是合法的。
首先我们为“确定”按钮绑定一个点击事件函数:
<!-- 底部区 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser()">确 定</el-button>
</span>
我们将之前写在click里面的的“addDialogVisible = false”先去掉(待会放在点击的函数里),然后添加一个addUser的函数:
// 点击按钮,添加新用户
addUser()
this.$refs.addUserFormRef.validate(valid =>
console.log(valid);
)
这里我们调用了用户校验对象“addUserFormRef”的validate方法,该方法可以获取用户信息的校验结果,如果没有校验通过,valid为false,通过为true:
所以我们判断valid为true的时候,才可以发起用户添加的请求:
// 点击按钮,添加新用户
addUser()
this.$refs.addUserFormRef.validate(valid =>
if(!valid) return;//校验没通过,返回
//可以发起添加用户的网络请求
)
二、发起添加用户的网络请求
上面预校验通过之后,紧接着就可以使用包装好的axios进行添加用户的请求,接口文档如下:
返回的状态为201即代表用户添加成功。
编写代码如下:
// 点击按钮,添加新用户
addUser()
this.$refs.addUserFormRef.validate(async valid =>
if(!valid) return;//校验没通过,返回
//可以发起添加用户的网络请求
const data:res = await this.$http.post('users',this.addUserForm);
if(res.meta.status!=201)
return this.$message.error('添加用户失败!');
this.$message.success('添加用户成功!');
// 隐藏添加用户的对话框
this.addDialogVisible = false;
//重新获取用户列表数据
this.getUsersList();
)
这里我们访问用户的users接口,然后将表单中的addUserForm对象提交到后台,如果后台返回201,即代表我们的用户添加到后台数据库成功,然后关闭对话框并刷新用户列表。
注意,这里我们的同步标识“async”应放在await所在的匿名函数内部,和await对应的代码在一个方法体上,如果放在addUser外侧会导致不匹配而报错。
效果:
查询我们刚刚的用户信息:
注:如果大家有发现el-input出现输入不进去内容的情况,参考:https://www.jb51.net/article/185529.htm解决。
至此我们添加用户的功能已经完全实现。
下一篇我们来完成用户的修改操作。
参考:黑马程序员(www.itheima.com)Vue项目实战教学视频
转载请注明出处:https://blog.csdn.net/u013517797/article/details/122283960
以上是关于VUE项目实战28.实现添加用户功能-预校验与发起新增请求的主要内容,如果未能解决你的问题,请参考以下文章
VUE项目实战27.实现添加用户功能-表单渲染和校验规则实现
VUE项目实战27.实现添加用户功能-表单渲染和校验规则实现