2021SC@SDUSC
目录
本次分析登录页面源码,页面位于src/views/login.vue,页面如下:
mounted
当我们进入此界面的时候,会触发vue周期函数中的mounted函数:
mounted() {
if (this.loginForm.loginName === "") {
this.$refs.loginName.focus();
} else if (this.loginForm.password === "") {
this.$refs.password.focus();
}
},
这个函数的作用是获取焦点。focus()方法主要是用于获取焦点,就是自动把光标放到此组件上面,无须用户再次操作。
密码填充
如果我们之前登录过并且记住了密码的话,当我们输入完用户名之后,页面会自动将记录的与用户名对应的密码填充到input框中,这是通过如下方法实现的:
getPsw() {
const cookVal = cookies.get(`u_${this.loginForm.loginName}`);
this.loginForm.password = cookVal && Decrypt(cookVal);
},
cookies.get(key)用户获取与key对应的value。
我们可以通过密码input框的右侧小眼睛控制密码是否显露,这是通过showPwd方法实现的,源码如下:
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
this.$nextTick(() => {
this.$refs.password.focus();
});
},
监听路由对象
watch: {
$route: {
handler: function(route) {
const query = route.query;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
}
},
immediate: true
}
},
query是vue的router的 路由对象属性,redirect 是路由的重定向属性,这个方法作用是监听路由获取上个路由(from)的地址和参数。
登录验证码
接下来分析登录的验证功能:
<el-button
:loading="loading"
type="primary"
class="login_btn"
@click.native.prevent="handleLogin"
>登录</el-button
>
点击登录按钮后触发handleLogin方法,这里的@click.native.prevent加了prevent,是用来阻止默认事件的,相当于Jquery里面的event.preventDefault方法阻止元素发生默认的行为。handleLogin源码如下:
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.needCaptcha) {
this.useVerify();
return;
}
this.loginApi();
} else {
return false;
}
});
},
登录操作这里实现了滑动验证码的操作。布尔属性neddCaptcha表明是否需要验证码。验证码方法useVerify源码如下:
useVerify() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$refs.verify.show();
} else {
return false;
}
});
},
系统实现的是滑动验证码,验证码源码:
<Verify
v-if="needCaptcha"
ref="verify"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '400px', height: '200px' }"
@success="verifylogin"
/>
如果验证成功,就调用verifylogin回调函数:
verifylogin(params) {
this.loginForm.verifyCode = params.captchaVerification;
if (this.loginForm.verifyCode) {
this.loginApi();
}
},
可以看到回调函数还调用了loginApi,这个方法是一个异步方法,我们下一篇文章分析。