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+正則驗證

    點擊登陸，

            （先以手機號查詢數據庫，判斷該用戶是否是已經註冊過，而後檢測手機號是否是和密碼是匹配的）

                數據庫查詢手機號和密碼是否一致（有手機號，密碼不對，沒有手機號）