Vue+element-ui+axios实现登录注册接口(二)

Vue+element-ui+axios实现登录注册接口(二)

关于在写接口之前的准备工作在我的上一篇博客之中已有说明，不清楚的小伙伴可以先去看一眼，链接在此准备工作+登录接口。

这一篇我们来讨论下注册。其实接口这块，一通百通，尤其是登录和注册这两个，非常相似。

1、postman测试

首先我们在接口文档找到注册的后台地址：

这里我们可以清楚的看到注册地址是http://localhost:8181/api/v1/sign，并且需要body参数name和password。接下来我们打开postman，输入对应url、method、header里边的content-type，并且在body下面的raw里边输入参数作为注册的账号和密码（注意一定要是先前还没有注册过的，就是说要是数据库里的用户信息里边没有的）。我的测试如下：

这里显示success就说明注册成功啦。

2、两次密码的一致性校验

由于注册要输入两次密码，防止用户犯输入性错误，因此这里需要进行密码的一致性校验。

就像登录界面那样，我们对用户名和密码的格式增加了校验规则，不过是用了rule规则来校验。在这里呢我们可以自己定义一个校验器validator，把它发到rule里面就可以。

部分script代码：

首先我们在data里面定义两个校验器，检验输入框是否为空以及两次密码是否一致。

//在data里面定义两个校验器
 var validatePass = (rule, value, callback) => {
        if (value === '') {
                callback(new Error('请输入密码'));
        } else {
                if (this.signForm.repassword !== '') {
                    this.$refs.signForm.validateField('checkPass');
                }
                callback();
            }
        };
var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.signForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

之后我们在rule里面引入校验器：

signRules: {
        username: [
          {required: true, trigger: 'change' },
          {min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}
        ],
        password: [
          { required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
          { validator: validatePass, trigger: 'blur' }
        ],
        repassword: [
          {required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
           { validator: validatePass2, trigger: 'blur'}
        ]
      },

这样子校验规则就可以使用了。

3、注册按钮+axios获取后台数据

export default {
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
                callback(new Error('请输入密码'));
        } else {
                if (this.signForm.repassword !== '') {
                    this.$refs.signForm.validateField('checkPass');
                }
                callback();
            }
        };
var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.signForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
    return {
      signForm: {
        username: '',
        password: '',
        repassword:''
      },
      // 发生改变时触发validate事件
      signRules: {
        username: [
          {required: true, trigger: 'change' },
          {min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}
        ],
        password: [
          { required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
          { validator: validatePass, trigger: 'blur' }
        ],
        repassword: [
          {required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
           { validator: validatePass2, trigger: 'blur'}
        ]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      redirect: undefined,
    }
  }，
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType  = ''
      } else {
        this.passwordType = 'password'
      }
      //点完显示密码后聚焦输入框
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleRegister() {
      this.$refs.signForm.validate(valid => {
        // 获取loginform的实例（el-form），找到validate方法，根据验证规则rules校验是否valid
        if (valid) {
        this.loading = true
          this.$axios({
            method: 'post',
            url: '/api/v1/sign',
            headers: {
              'Content-Type': "application/json;charset=UTF-8"
            },
            data: {
              name: this.signForm.username,
              password: this.signForm.password
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.message === 'SUCCESS'){
            this.$router.push('/login')	//登录验证成功路由实现跳转
            this.$notify({
              title: '提示',
              message: '注册成功',
              duration: 3000
            });
            }else{
              this.$notify({
                title: '提示',
                message: '用户登录失败',
                duration: 3000
              });
            } 
          })
          .catch(() => {
             his.$notify({
              title: '提示',
              message: '用户访问错误',
              duration: 3000
            });
              console.log(err)
            })
          } else {
          console.log('error submit!!')
          return false
          }
      })
    }
  }
}
</script>

对于按钮，我们首先用一句this.$refs.signForm.validate(valid => {}来判断是否满足校验规则，即输入框格式、两次密码一致性等等。

之后就跟上一篇的登录很像，以res.data.message === 'SUCCESS’是否成立来判断可不可以注册成功。

最后附上部分html代码：

<el-form 
	ref="signForm"
    :model="signForm" 
	:rules="signRules" 
	class="login-form" autocomplete="on" 
	label-position="left"
/>
	<el-form-item prop="username">
        <span class="iconfont svg-container">
          &#xe632;
        </span>
        <el-input
          ref="username"
          v-model="signForm.username"
          placeholder="请输入手机号"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
     </el-form-item>

     <el-form-item prop="password">
         <span class="iconfont svg-container">
           &#xe663;
         </span>
         <el-input
            :key="passwordType"
            ref="password"
            v-model="signForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            autocomplete="on"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleRegister"
          />
          <span class="el-icon-view show-pwd" @click="showPwd">
          </span>
      </el-form-item>
      <el-form-item prop="repassword">
          <span class="iconfont svg-container">
            &#xe663;
          </span>
          <el-input
            :key="passwordType"
            ref="repassword"
            v-model="signForm.repassword"
            :type="passwordType"
            placeholder="再次确认密码"
            name="repassword"
            tabindex="2"
            autocomplete="on"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleRegister"
          />
          <span class="el-icon-view show-pwd" @click="showPwd">
          </span>
      </el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleRegister">注册</el-button>
</el-form>

4结语

关于登录注册功能就分享到这里，咱下次见。

本篇文章如有错的地方，欢迎在评论指正。喜欢在微信看技术文章，可以微信搜索「胡录乱影」，回复【Python】【前端基础】【vue开发】即可获得视频资源，回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板，还有更多资料，建议后台留言或者直接私信我。

另，如果觉得这本篇文章写得不错，有点东西的话，各位人才记得来个三连【点赞+关注+分享】。