VUE项目实战28.实现添加用户功能-预校验与发起新增请求

Posted 2022-01-31 光仔December

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