接上篇《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