nuxt框架前后端登录注册功能实现(一)

最近跟着视频做一个前后端分离的项目，后端是java，前端是vue，前端用的框架有nuxt用来做前台页面，后台页面是利用vue-admin-template-master。
目前到了前台的注册和登录过程，下面简单描述一下注册和功能的实现。
1. 注册功能：
利用element-ui的表单组件，做出注册的表单，样式什么的是视频资料里直接复制的，然后自己更改了一点点，如图

element-ui的组件表单验证做的很不错完全够使用，官方的例子如下：

只要有一个表单输入框未满足验证规则，点击提交按钮就会提示规则，
实现步骤：在表单元素<el-form>上添加一个ref属性，vue中ref类似于普通元素的id属性

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

:model指定vue中data里的对象，因为提交表单一般用一个对象,可以再<el-form>上加rules然后后续定义方法，也可以再每个<el-form-item>上加上rules,prop指定要提交对象的属性

<el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{validator: checkEmail, trigger: ['blur','change']}]">
    <div>
       <el-input type="text" placeholder="邮箱地址" v-model="user.mobile"/>
       <i class="el-icon-message"/>
    </div>
</el-form-item>

validator: checkEmail中checkEmail指验证规则的方法可以再methods中定义：

checkEmail(rule, value, callback) {
        //debugger
        if (!(/^([A-z0-9]{6,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(value))) {
          return callback(new Error('邮箱格式不正确'))
        }
        return callback()
}

最后点击提交或者注册提交时需要使用到<el-form-item>处的ref属性，不然不会出现提交时还检测是否通过验证规则
代码如下

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
}

如果this.$refs[formName]这种格式不生效，试试this.$refs.formName
以上是注册的表单验证过程，后端接口以及登录步骤将在后续文章中写到。
下一篇链接：https://blog.csdn.net/six_teen/article/details/108650767