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项目实战12登录与退出功能-请求登录

VUE项目实战27.实现添加用户功能-表单渲染和校验规则实现

VUE项目实战27.实现添加用户功能-表单渲染和校验规则实现

[Vue项目实战]登录功能实现

python实战项目练习-Django商城项目之注册功能实现

Vue实战篇|使用路由管理用户权限(动态路由)