注册页面调用接口完成注册

介绍

在前面几章中介绍了用guiplan进行注册页面的制作，express+mongo后端制作验证码接口，注册接口的制作，并且在注册页面中如何去使用验证码。这节课将介绍注册页面是如何调用接口并完成注册。

步骤

1. 自动创建前端接口api方法
   在接口配置中除了可以插入接口代码，还可以插入api，也就是前端去调用接口的方法也自动创建好了，我们只需要在下方点击插入到文件即可。
   
   自动生成的api方法会根据条件的配置，自动添加各种判断，不能为空的判断如下：
   

2. 调用接口
   插入api创建了一个接口调用方法之后，我们再回到编辑页面。
   选中el-form元素，找到之前创建好的注册方法
   选中这个方法在校验成功里点击内容，再点击右边的tab，点击“接口”，选中“用户注册”，再点击“插入接口”按钮与“插入接口参数”按钮，这样我们就可将接口与接口参数都添加进来，再根据自己的注册参数赋值给注册接口参数。这样我们的接口调用就做好了。如下图：
   
   这里密码最好进行一下加密,可以自己定义加密规则，如在原来在密码后面添加guiplan字段。或者两层嵌套md5加密等等。

import md5 from '../libs/md5'
export function setPassword(str){ // 制定密码加密规则
	return md5(str + 'guiplan')
}

var user2Param = {
        username:this.form.username,
        password:setPassword(this.form.password), // 将密码加密
        access:'',
        avatar:'',
        token:'',
        name:'',
        code:this.form.code
      }

3. 跳转页面：最后点击注册按钮即可完成注册功能，完成注册之后我们也可以直接将页面跳转到登录页面
   this.$router.push(’/login’)。
   

总结

由于前面的准备工作都完成了，这里的流程也非常简单。在注册方法里校验成功的代码下，添加接口的调用。再根据接口返回的结果来判断是否注册成功并做出对应的跳转或提示等。接口的调用也非常简单，只需一键搞定。