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">注 冊</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+正則驗證
? ? 點擊登錄，
?? ??? ?? ? （先以手機號查詢數據庫，判斷該用戶是不是已經注冊過，然后檢測手機號是不是和密碼是匹配的）
?? ??? ??? ?? ? 數據庫查詢手機號和密碼是否一致（有手機號，密碼不對，沒有手機號）
轉載于:https://www.cnblogs.com/donve/p/11153702.html
總結
以上是生活随笔為你收集整理的vue+Mint-ui实现登录注册的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PowerDNS + PowerDNS-
- 下一篇： html5倒计时秒杀怎么做,vue 设