加速度
转眼又到端午放假，趁着这期间再整理一篇，这个小项目不大，但是时间拖的比较久，期间浪费了不少时间，加快速度，争取早点结束掉。
0. 其它
vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频
1. 界面相关效果
这一部分内容，回到之前完成的 Login.vue 页面，做逻辑之前先完成一些必要的效果。
-
切换登录
1）设置布尔值logingwey: true, // 短信登录为true,密码登录为false
2）设置相关 class
登录切换.gif
-
手机号合法检查
1）判断输入的手机号的位数
computed: {
// 返回true或者false，用test（），判断是否输入了11位1开头的数字
logincode () {
return /^1\d{10}$/.test(this.phone)
}
},
2）判断是否可以发送验证码
<button :disabled="!logincode"
class="get_verification"
:class="{login_code: logincode}"
@click.prevent ="righttime">
{{timenum > 0 ? `已发送${timenum}s` : '获取验证码'}}
</button>
-
倒计时效果
1）设置倒计时为30秒
righttime () {
// 倒计时
if (!this.timenum) {
this.timenum = 30 // 初始值为30秒
let clertime = setInterval(() => { // 计时器
this.timenum--
if (this.timenum <= 0) { // 如果减到0则清楚计时器
clearInterval(clertime)
}
}, 1000)
// ajax请求
}
}
发送验证码倒计时.gif
-
切换显示或隐藏密码
1）两个 input 设置密码显示与隐藏
<section class="login_verification">
<input type="password" maxlength="8" placeholder="密码"
v-if="showpwd" v-model="pwd">
<input type="text" maxlength="8" placeholder="密码"
v-else v-model="pwd">
<div class="switch_button " :class="showpwd ? 'on' : 'off'"
@click="showpwd = !showpwd">
<div class=""></div>
<span class="switch_text">{{showpwd ? '显示' : 'abc'}}</span>
</div>
</section>
-
前台验证提示
1）新建 AlertTip 文件夹与 AlertTip.vue 文件
2）搭好页面与 css
<template>
<div class="alert_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">确认</div>
</section>
</div>
</template>
<script>
export default {
props: {
alertText: String
},
methods: {
closeTip () {
// 分发自定义事件
this.$emit('closeTip')
}
}
}
</script>
3）login.vue 页调用并判断
showalert (alertText) {
this.alertshow = true
this.alertText = alertText
},
// 登录
login () {
if (this.logingwey) { // 短信登录
const { logincode, phone, code } = this
if (!this.logincode) {
// 手机号有误
this.showalert('手机号有误')
} else if (!this.code) {
// 验证码有误
this.showalert('验证码有误')
}
} else { // 密码登录
const { name, pwd, captcha } = this
if (!this.name) {
// 用户名不能为空
this.showalert('用户名不能为空')
} else if (!this.pwd) {
// 密码不能为空
this.showalert('密码不能为空')
} else if (!this.captcha) {
// 验证码有误
this.showalert('验证码有误')
}
}
},
closeTip () {
this.alertshow = false
this.alertText = ''
}
提示弹窗.gif
2. 动态一次性图形验证码
- 把 src 换成接口
<img class="get_verification" src="http://localhost:4000/captcha" @click="getCaptcha" ref="captchas" alt="captcha"> - 添加点击事件，点击刷新图片
// 刷新图片验证码
getCaptcha () {
this.$refs.captchas.src = `http://localhost:4000/captcha?time=${Date.now()}`
}
-
$refs的基本用法
VUE中$refs的基本用法
图片验证码刷新.gif
3. 结束
放在一篇有点长，分第二篇
点个赞呗！
