vue登录注册组件自己摸索
此组件，简单实现了防短信轰炸，样式我使用了一些Bootstarp的表单样式，
由于接口有bug只是模拟了登录注册
注册
<template>
<div class="warp">
<div class="main">
<div class="header">
<div class="left">
<router-link to="/login"><i class="iconfont icon-iconfanhui"></i></router-link>
</div>
<div class="centers"><h1>注册</h1></div>
</div>
<div class="rmain">
<div class="register-form">
<div class="form-group">
<input type="text" class="form-control yz" ref="yanzhen" placeholder="验证码">
<div class="form-group-yz">
<img @click="refreshpic" :src="imgSrc" class="form-group-yz-img"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control register-form-inp" placeholder="请输入手机号" ref="user" @keydown="btnYes">
<div class="register-form-btn"><button ref="btn" :class="btnClassName" :disabled="btnBoolen" @click="getNoteValue">{{this.btnValue}}</button></div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入短信验证码" ref="note">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="密码" ref="pwd">
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" @click="register">注册</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Register",
data(){
return{
//图片验证码
imgSrc:"http://vueshop.glbuys.com/api/vcode/chkcode?token=1ec949a15fb709370f&nowtime=1312423435",
//用来发判断发送验证码
isrefreshpic:false,
//定时器初始值
auth_time:0,
//disabled的初始值
btnBoolen:true,
btnClassName:"btn",
btnValue:"获取短信验证码"
}
},
methods: {
//图片验证码
refreshpic: function () {
var sj = Math.ceil(Math.random() * 100000)
this.imgSrc = "http://vueshop.glbuys.com/api/vcode/chkcode?token=1ec949a15fb709370f&nowtime=1312423435" + sj
},
//zhuceyanzheng
register: function () {
var phone = this.$refs.user.value//手机号
var pwd = this.$refs.pwd.value//密码
var refreshImages = this.$refs.yanzhen.value//验证码
if (refreshImages === "") {
this.$toast("验证码不能为空")
return
} else if (phone === "") {
this.$toast("手机号不能为空")
} else {
if (phone.length != 11) {
this.$toast('请输入有效的手机号码，需是11位！');
return;
} else {
var myreg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
if (!myreg.test(phone)) {
this.$toast('手机号码格式不正确');
return;
} else {
var ifMessageOk = this.getValue()
if(ifMessageOk){
// 匹配密码
if (pwd === "") {
this.$toast("密码不能为空")
return
} else {
var url = `http://vueshop.glbuys.com/api/home/user/reg?token=1ec949a15fb709370f&vcode=${refreshImages}&cellphone=${phone}&password=${pwd}`;
console.log(url)
//验证用户名是否存在
var urls = `http://vueshop.glbuys.com/api/home/user/isreg?token=386777c139fd9e2ac5&username=${phone}`;
this.$http.post(urls).then((res) => {
if (res.data.status == "0") {
this.$http.post(url).then((res) => {
console.log(res)
if (res.data.status == "0") {
this.$alert("注册成功")
location.href = `/#/login`
}
})
}
})
}
}
}
}
}
},
//获取短信验证码的按钮禁启用
btnYes: function () {
//因为是从零开始所以当输入10位是其实为11位数，所以判断当输入的长度为10的时候解除按钮的禁用
if(this.$refs.user.value.length=="10"){
this.btnBoolen=false
this.btnClassName="btns"
}
},
//获取短信验证码
getNoteValue: function () {
var refreshImages = this.$refs.yanzhen.value//验证码
console.log(this.$refs.btn)
//验证码验证
/*放短信轰炸
* 思路：
* 1.当输入完验证码的之后输入手机号进行手机号长度验证button是否禁启用，
* 2.当点击button的时候判断验证码是否正确
* 正确的话button出现倒计时并禁用按钮，倒计时结束启用，否则弹出输入的验证码不正确，到此来防止无限获取验证码
* */
//验证验证码是否为空
if (refreshImages === "") {
this.$toast("验证码不能为空")
return
} else {
//如果不为则发送数据请求验证是否正确并将isrefreshpic 赋值为true 负责为false （赋值可以省略不写）
this.$http.get(`http://vueshop.glbuys.com/api/home/user/checkvcode?token=1ec949a15fb709370f&vcode=${refreshImages}`).then((res) => {
if (res.data.code == "201") {
this.$toast("验证码输入正确")
this.isrefreshpic = true
//判断isrefreshpic的值是设置的值是否为true，如果为true，把button禁用显示倒计时否则不显示倒计时。
//如果为false则不显示倒计时。
if (this.isrefreshpic) {
var sj = Math.ceil(Math.random(10 + 1) * 100000)
window.localStorage.setItem("note", sj)
console.log(sj)
//定时器
this.auth_time = 10;
var timer = setInterval(()=>{
this.auth_time--;
if(this.auth_time<=0){
clearInterval(timer)
this.btnBoolen = false;
this.btnClassName="btns"
this.btnValue="获取短信验证码"
}else {
this.btnBoolen = true;
this.btnValue=`重新获取(${this.auth_time})S`
this.btnClassName="btn"
}
},1000)
} else {
this.$toast("验证码输入错误")
}
} else {
this.$toast("验证码输入错误")
this.isrefreshpic = false
}
})
}
},
//短信验证码的比对
getValue: function () {
var note = this.$refs.note.value//短信验证码
var notes = window.localStorage.getItem('note')
console.log(note)
console.log(notes)
if(note == "") {
this.$alert("短信验证码不能为空")
return false;
}else if(note == notes) {
this.$alert("短信验输入正确");
return true;
}else{
this.$alert("短信验输入错误")
this.$refs.note.value=""
return false;
}
}
}
}
</script>
<style scoped>
.h1, h1 {
line-height: 1.5rem;
}
.btn-block {
display: block;
width: 90%;
margin-left: 21px;
}
.header{
width: 100%;
line-height: 1.5rem;
display: flex;
border-bottom: 1px solid #D6D6D6;
}
.header .left{
flex: 1;
}
.header .centers{
flex: 9;
font-size: 20px;
font-weight: normal;
line-height: 1.5rem;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
.form-control {
width: 90%;
margin-left: 5%;
height: 45px;
border-radius: 0;
}
.register-form {
margin-top: 0.5rem;
}
.form-control {
margin-bottom: 15px;
}
.register-form-inp {
width: 63%;
float: left;
}
.form-group {
margin-bottom: 15px;
}
.register-form-btn {
width: 30%;
float: left;
margin-left: 2%;
}
.register-form-btn .btn{
background: #ccc;
border: none;
}
.register-form-btn .btns{
background: #fff;
border: 1px solid #9e157c;
color: #9e157c;
}
.form-group-yz {
position: relative;
}
.form-group-yz-img {
width: 1.4rem;
height: 0.5rem;
position: absolute;
top: -48px;
left: 75%;
}
.register-form-btn {
width: 30%;
float: left;
margin-left: 2%;
}
.register-form-btn button {
height: 45px;
font-size: 0.2rem;
color: #000000;
}
</style>
登录
<template>
<div class="warp">
<div class="main">
<div class="header">
<div class="left">
<router-link to="/home"><i class="iconfont icon-iconfanhui"></i></router-link>
</div>
<div class="center"><h1>登录</h1></div>
</div>
<div class="lmian">
<div class="login-main">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-8">
<input type="text" ref="name" class="form-control" placeholder="手机号">
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input type="password" ref="pwd" class="form-control" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 inptext">
<button type="button" class="btn btn-danger btn-lg btn-block" @click="add">登录</button>
</div>
</div>
</form>
</div>
<div class="login-base">
<div class="login-base-le">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
<span>忘记密码</span>
</div>
<router-link to="/register">
<div class="login-base-ri">
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
<span>快速注冊</span>
</div>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data () {
return {
visibility: false,
list:[]
}
},
methods:{
add:function () {
var user=this.$refs.name.value
var pwd=this.$refs.pwd.value
console.log(user,pwd)
if(user==""){
this.$alert("用户名不能为空")
}else if(pwd==""){
this.$alert("密码不能为空")
}else{
// cellphone=13918763344(手机号)
// passwrod=123456(密码)
var url=`http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f&cellphone=${user}&passwrod=${pwd}`;
this.$http.post(url).then((res)=>{
// console.log(res.data.message[0].pwd)
console.log(res)
if(res.data.status=="0"){
this.$toast("登陆成功")
location.href="/#/home"
}
})
}
}
}
}
</script>
<style scoped>
.h1, h1 {
line-height: 1.5rem;
}
.header{
width: 100%;
line-height: 1.5rem;
display: flex;
border-bottom: 1px solid #D6D6D6;
}
.header .left{
flex: 1;
}
.header .center{
flex: 9;
font-size: 20px;
font-weight: normal;
}
.heder .center h1{
line-height: 1.5rem;
}
.form-control {
display: block;
width: 97%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.lmian{
flex: 1;
}
.col-sm-8 {
position: relative;
min-height: 1px;
/* padding-right: 15px; */
/* padding-left: 15px; */
}
.btn-block {
width: 90%;
margin-left: 5%;
}
.login-base {
width: 90%;
height: 0.5rem;
margin-left: 5%;
overflow: hidden;
}
.login-base-le {
float: left;
font-size: 0.2rem;
color: #666666;
}
.login-base-ri {
float: right;
font-size: 0.2rem;
color: #666666;
}
.form-horizontal .form-group {
margin: 27px;
}
</style>