开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：注册前端整合（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11452
注册前端整合（1）
内容介绍：
一、在 api 创建 register.js，定义注册接口的方法
二、页面中实现倒计时效果，使用js定时器的方法实现
三、注册提交的方法
四、调接口发送验证码
五、校验处理
前端的最终目的是调取后端的接口
整合注册功能，主要思路：
在注册页面输入昵称和手机号后，点击“获取验证码”，程序根据手机号调用接口发送验证码，接着原获取验证码位置会出现倒计时效果，最后数据都输入完成后，点击注册，数据将全部加入数据库中。
一、在 api 创建 register.js，定义注册接口的方法
1.手机验证码的发送
export default {
//根据手机号发验证码，发送验证码传入参数“phone”
sendcode( phone){
return request({
//接口地址是 edumsm/msm
ur1: ‘/ edumsm/msm/ send/${phone} ' ,
//提交方式为 get 提交
method: 'get’
}}
}
2.用户注册
//注册的方法
//将表单中的对象传入 registerMember 中
registerMember(formItem) {
//接口地址为 educenter/member，注册名 register
return request({
url: ' / educenter/member/register' ,
//提交方法为 post 提交
method: 'post',
data: formItem
}）
}
在注册页面中，引入方法
import registerApi from "@/ api/register'，下面开始调用方法。
（注册时包括昵称、手机号、验证码、密码，这些数据需要传入到接口中）
export default {
layout: "sign " ,
data() {
return {
params: {
//封装注册输入数据
mobile:’ ‘,
//手机号
code: ‘ ‘，
//验证码
nic kname :’ ’,
//昵称
password:’ ‘,
}，
验证码发送过程中，点击“发送验证码”，会有一个倒计时的效果
sending: true,
//是否发送验证码
second: 60,
//倒计时间
codeTest: ‘获取验证码’
二、页面中实现倒计时效果，使用 js 定时器的方法实现
<script>
//js 定时器的方法：
每隔一段时间执行一次 js 方法
//写一个变量固定值是60，每隔一秒让变量相应减一。
//使用方法 setinterval（），代码"alert ( 'test') "执行时间为每隔3000ms。
setinterval ( "alert ( 'test') ",3000);
< / script>
/ /倒计时
timeDown() {
//定时器 setInterval
let result = setInterval(()=>{
--this.second ;
//每隔一秒让 second 值减一
this.codeTest = this.second
if (this.second < 1) {
clearInterval( result);
this.sending = true;
this.disabled = false;
//初始值为60
this.second = 60;
this.codeTest =“获取验证码”
}
}，1000);
//每隔1000ms 就执行一次，让 second 值减1s
三、注册提交的方法
在页面中，需要输入昵称、手机号、验证码、密码，输入全部数据之后点击注册，立即这些数据会调接口被加入到数据库中。
代码实现：
找到注册按钮“button”，“button”中绑定了 click 事件，点击注册调用方法 submitRegister
submitRegister( ) {
//调用方法 registerMember（），传入封装注册数据
registerApi.registerMember(this.params)
.then(response => {
//提示注册成功
this.$messageK{
type: "success" ,
message:“注册成功”})
//跳转登录页面，用路由跳转到登录页面
this.$router.push( {path : " / login'})
})
四、调接口发送验证码
在注册页面输入手机号，点击“获取验证码”时，会调用手机号接口获取手机验证码，同时显示倒计时效果。
在页面中找到 codefun，点击后是一个超链接，调用接口发送验证码，使用方法 getCodeFun()。
//通过输入手机号发送验证码
getCodeFun() {
//调用接口发送验证码
registerApi.sendCode( this.params.mobile)
//如果执行.then 则证明发送成功
.then( response => {
//点击一次后，不能紧接着点击第二次
this.sending = false
//调用倒计时的方法
this.timeDown()
})
},
checkPhone (rule，value，cal1back){
// debugger
//若格式不正确，提示错误信息
if ( !(/^1[ 34578]\d{9}$/.test( value))) {
return callback(new Error("手机号码格式不正确"))
}
return callback()
}
主要步骤：
当输入手机号，点击“获取验证码”时，会调用手机号接口获取手机验证码。
发送完验证码后，原“获取验证码”位置会有倒计时效果，把所有值都输入进后，点击注册调用方法submitRegister，注册成功后会自动把所有值加入到数据库中。
五、校验处理
校验不需要单独做判断，只需要在框架本身加入规则结构，不需要再去判断一个值是否为空，如果是空值程序报错，不为空值继续向下执行，框架中已经封装了规则结构。
rules=" [ ( required: true，message : '请输入你的昵称'，trigger: 'blur’) ]"
默认规则表示在操作失去焦点（光标点击输入框为获取焦点，光标点击范围在输入框外为失去焦点）时，会触发该规则，提示“请输入你的昵称”。
除了自带的规则外，也可以自定义规则{validator: chec kPhone, trigger: "blur"}]" validator 填入自己创建的规则，trigger 填入触发条件。
例如：
手机号的校验规则
chec kPhone (rule,value，callback) {
// debugger
//正则表达式/^1[ 34578]1d{9}$，判断输入的值是否正确。
if (!(/^1[ 34578]1d{9}$/.test( value))) {
//若格式不正确，输出错误信息
return callback(new Error('手机号码格式不正确'))}
//若格式正确，继续向下执行
return callback(
}
