创建一个组件：注册组件
（register/index.vue、script.js、style.scss,register/header）
注册路由
router/index.js
{
path: '/register',
components: {
header: RegisterHeader,
content: Register
}
}
构建前端注册流程
写页面，确定需要的数据 index.vue----使用的是mint-ui的组件
<mt-field :state="phoneNumState" type="number" v-model="phoneNum" placeholder="请输入您的手机号"></mt-field>
<mt-field placeholder="验证码" type="number" v-model="code" :state="codeState">
<span @click.stop = "sendCode">{{ codeStr }}</span>
</mt-field>
<mt-field :state="passwordState" type="password" v-model="password" placeholder="密码:不能少于6位"></mt-field>
<div class="registerBtn" @click = "register">注 册</div>
监听数据的变化，验证其有效性----使用watch进行正则验证
watch: {
phoneNum (newVal, oldVal) {
if (tools.isPoneAvailable(newVal)) {
this.phoneNumState = 'success'
} else {
this.phoneNumState = 'error'
}
if (newVal == '') { // 如果输入为空，取消状态显示
this.phoneNumState = ''
}
},
password (newVal, oldVal) {
if (newVal.length >= 6) {
this.passwordState = 'success'
} else {
this.passwordState = 'error'
}
if (newVal == '') { // 如果输入为空，取消状态显示
this.passwordState = ''
}
},
code (newVal, oldVal) {
if (newVal.length == 4 && newVal == this.admincode) {
this.codeState = 'success'
} else {
this.codeState = 'error'
}
if (newVal == '') { // 如果输入为空，取消状态显示
this.codeState = ''
}
}
}
发送验证码--先验证其是不是已经注册过，注册过直接登录即可，未注册继续执行（倒计时验证）
sendCode () {
axios.get(tools.baseUrl + '/api/getPhoneCode?phoneNum=' + this.phoneNum)
.then((res) => {
console.log(res.data)
if (res.data.state == 0) {
this.phoneNumState = 'warning'
Toast('该手机号已经注册，请直接登录')
} else {
this.admincode = res.data.code
if (this.flag) {
this.startTime(20)
}
}
})
.catch((err) => {
console.log(err)
})
}
// （倒计时验证）
startTime (time) {
var timer = setInterval(() => {
time--
if (time == 0) {
this.flag = true
this.codeStr = '发送验证码'
clearInterval(timer)
} else {
this.codeStr = time + 's后重新发送'
this.flag = false // 防止用户连续点击
}
}, 1000)
},
点击注册按钮，先验证其余表单是不是都通过，如果通过，进行注册，未通过，提示信息----注意密码的加密
register () {
if (this.phoneNumState != 'success') {
Toast('请确保手机号是正确的')
return
}
if (this.codeState != 'success') {
Toast('请确保验证码的正确性')
return
}
if (this.passwordState != 'success') {
Toast('请确保密码是有效的')
return
}
// 对密码进行加密
this.password = md5(this.password)
// 提交数据
axios.post(tools.baseUrl + '/api/registerUserAction', {phoneNum: this.phoneNum,password: this.password})
.then((res) => {
if (res.data == 1) {
Toast('注册成功')
this.phoneNum = ''
this.code = ''
this.password = ''
} else {
Toast('注册失败')
}
})
},
登录
先写表单，标明状态
验证输入的正确性-----watch+正则验证
点击登录，
（先以手机号查询数据库，判断该用户是不是已经注册过，然后检测手机号是不是和密码是匹配的）
数据库查询手机号和密码是否一致（有手机号，密码不对，没有手机号）