vue+Mint-ui实现登录注册

创建一个组件：注册组件

（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">注&nbsp;&nbsp;册</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+正则验证

点击登录，

（先以手机号查询数据库，判断该用户是不是已经注册过，然后检测手机号是不是和密码是匹配的）

数据库查询手机号和密码是否一致（有手机号，密码不对，没有手机号）