創建一個組件：注冊組件
（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+正則驗證
點擊登錄，
（先以手機號查詢數據庫，判斷該用戶是不是已經注冊過，然后檢測手機號是不是和密碼是匹配的）
數據庫查詢手機號和密碼是否一致（有手機號，密碼不對，沒有手機號）