<template>
<div class="bodyMask"> </div>
<div id="header" class="index_nav">
<div class="content">
<a href="javascript:void(0);" id="logo"><img src="/images/1504859476522.jpg" height="40" /></a>
<ul id="nav">
</ul>
<div class="clear"></div>
</div>
<a id="headSHBtn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
</div>
<div id="sitecontent">
<div class="npagePage Pageyemian" id="page_none">
<div id="banner" class="">
<div style="background-image:url(./images/1504853176556.jpg);"></div>
</div>
<div class="content">
<div class="header">
<p class="title">用户登陆</p>
</div>
<div class="fw postbody" id="postbody">
<el-form ref="loginForm" :model="loginForm" :rules="rules" style="width:100%;" label-width="20%">
<el-form-item label="用户名" prop="uname">
<el-input v-model="loginForm.uname" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="upwds">
<el-input v-model="loginForm.upwds" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="
验证码" prop="captcha">
<el-input v-model="loginForm.captcha" placeholder="请输入
验证码" style="width: 60%;"></el-input>
<!--
验证码图片 -->
<img :src="captchaUrl" alt="
验证码" @click="refreshCaptcha" style="cursor: pointer; height: 40px;"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login(loginForm)" :loading="loadingbut">{{loadingbuttext}}</el-button>
<el-button type="danger" @click="cancel">重置</el-button>
<el-button type="success" @click="$router.push('/register')" >注册</el-button>
</el-form-item>
</el-form>
<p style="text-align: center;"><img src="/images/147626231032.jpg" title="undefined" alt="undefined" width="800" vspace="0" border="0" height="" /></p>
<hr />
<p><br /></p>
<p><br /></p>
</div>
</div>
</div>
</div>
<div id="online_open"><i class="fa fa-comments-o"></i></div>
<div id="online_lx">
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
loginForm: {
uname: '',
upwds: '',
captcha: ''
},
//
验证规则
rules: {
uname: [{required: true, message: '请输入用户名', trigger: 'blur'}],
upwds: [{required: true, message: '请输入密码', trigger: 'blur'}],
captcha: [{required: true, message: '请输入
验证码', trigger: 'blur'}]
},
loadingbut: false,
loadingbuttext: '登录',
captchaUrl: '/captcha', //
验证码图片的URL
dialogVisible: true
}
},
mounted () {
console.log('Captcha URL:', this.captchaUrl);
},
methods: {
login (loginForm) {
this.$refs['loginForm'].validate((valid) => {
if (valid) {
this.loadingbut = true
this.loadingbuttext = '登录中...'
this.$axios
.post('/logins',{
uname: loginForm.uname,
upwds: loginForm.upwds,
captcha: loginForm.captcha
})
.then(successResponse => {
if (successResponse.data === "ok") {
//Message Box
this.$alert('登录成功', {confirmButtonText: '确定' })
this.$store.commit('changeLogin',this.loginForm.uname)
let path = this.$route.query.redirect
this.$router.replace({path: path === '/' || path === undefined ? '/mains': path})
}else {
this.$alert('用户名或密码错误或
验证码错误！', {confirmButtonText: '确定' })
this.loadingbut = false;
this.loadingbuttext = '登录';
}
})
.catch(failResponse => {
this.$alert(failResponse.response.status, {confirmButtonText: '确定' })
})
}
else {
this.$alert('表单
验证失败', {confirmButtonText: '确定' })
return false;
}
})
},
cancel(){
this.$refs['loginForm'].resetFields()
},
refreshCaptcha () {
// 刷新
验证码
this.captchaUrl = `/captcha?timestamp=${new
Date().getTime()}`
}
}
}
</script>
<style scoped>
@import '../../public/css/4101.css';
@import '../../public/css/lib.css';
@import '../../public/css/style.css';
</style> 为什么这么写
验证码显现不出来
本文详细介绍了通过App发起请求获取并验证验证码的过程。包括从服务器获取加密处理后的_PhoneVerifyCookie，并将其用于后续的注册请求中，以完成验证码的校验。
扫一扫
8512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
