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+正则验证

    点击登陆，

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

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