茶多多项目【验证码登录页面】

<template><div class="login container"><Header></Header><section><!-- <form action=""> --><div class="login-tel"><input v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*" type="text"/></div><div class="login-code"><input v-model="userCode"  placeholder="请输入短信验证码" pattern="[0-9]*" type="text"/><button @click="sendCode" :disabled="disabled">{{codeMsg}}</button></div><div class="login-btn" @click="login">登录</div><!-- </form> --><div class="tab"> <span @click="goUserLogin">密码登录</span><span @click="goRegister">快速注册</span></div></section><Tabbar></Tabbar></div>
</template><script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/views/login/Header.vue";
import http from "@/common/api/request.js"
import { Toast } from 'mint-ui';
import {mapMutations} from "vuex"export default {components: { Tabbar, Header },name: "Login",data() {return {disabled:false,userTel:"",//用户输入的手机号codeNum:6,//定时器的倒计时秒数codeMsg:'获取短信验证码',code:"",//短信验证码userCode:"",//用户输入的短信验证码// 验证规则rules:{// 手机号验证userTel:{rule:/^1[23456789]\d{9}$/,msg:'手机号不能为空,并且是11位数字'},}};},methods: {...mapMutations(['USER_LOGIN']),//这里是用到了vuex！！！！！！！！！！    //  点击快速注册goRegister(){this.$router.push("/register")},// 点击密码登录goUserLogin(){this.$router.push("/userLogin")},// 点击获取短信验证码按钮sendCode(){// 前端验证if(!this.validate("userTel")) return//如果没有通过验证。直接return掉，如果通过验证就进行下面的操作//请求短信验证码接口http.$axios({ url:"/api/code",method:"POST",data:{    phone:this.userTel  //前端给后端传的数据}}).then(res=>{console.log("这里是Login的res(点击获取短信验证码)",res)//res.data就是手机验证码if(res.success){this.code=res.data}})// 禁用按钮this.disabled=true// 倒计时let timer=setInterval(() => { //6秒没有走完的时候，显示’重新发送‘this.codeNum--this.codeMsg=`重新发送${this.codeNum}`}, 1000);// 判断什么时候停止定时器setTimeout(() => {clearInterval(timer)this.codeNum=6this.disabled=falsethis.codeMsg="获取短信验证码"}, 6000);},validate(key){// ??????????????????????     ?????????????let bool=true //test() 方法是正则表达式的一个方法，用于检测一个字符串是否匹配某个模式.语法：regexp.test(str) if(!this.rules[key].rule.test(this[key])){  //this[key]就是用户输入的值  key就是传递过来的userTel// 提示信息Toast(this.rules[key].msg)bool=false//这里用bool做变量来定义true和false,直接return true会报错return false //没有通过正则验证，就返回flase}else{return bool} },// 点击登录按钮login(){if(this.code==this.userCode){// 证明用户输入的短信验证码是正确的// 发送请求http.$axios({    url:"/api/addUser",method:"POST",data:{ phone:this.userTel  //前端给后端传的数据}}).then(res=>{if(!res.success) returnconsole.log("这里是Login的res(点击登录按钮)",res);this.USER_LOGIN(res.data)//！！！！！！！！！！不用commit了，直接调用// 跳转到我的页面中this.$router.push("/my")})}}},
};
</script><style lang="scss" scoped>
section{display: flex;flex-direction: column;background-color: #f5f5f5;// justify-content: center;align-items: center;font-size: 0.39rem;div{width: 8.93rem;height: 1.173rem;margin: 0.26rem 0;font-size: 0.3733rem;}.login-tel{margin-top: 0.8rem;input{width: 8.93rem;}}input{line-height: 1.173rem;background-color: #FFFFFF;border: 1px solid #ccc;border-radius: 6px;box-sizing: border-box;//加了这个属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里padding: 0 0.2667rem;}.login-code{display: flex;input{flex: 1;}button{line-height: 1.173rem;color: #fff;background-color: #b0352f;border: 0;border-radius: 0.16rem;padding: 0 8px;}}.login-btn{background-color: #b0352f;line-height: 44px;border-radius: 6px;text-align: center;color: #fff;font-size: 18px;}.tab{font-size: 0.4rem;display: flex;justify-content: space-between;}
}
</style>

茶多多项目【验证码登录页面】相关推荐

项目1login登录页面方案设计
文章目录需求 MySQL表实现方案 index页面 login(注册) sign up(登录) home页面 sign out(登出) reset password(重置密码) 1. **旧密码密 ...
Web收银台系统[项目] -- (3) 登录页面
1. 登录页面的过程: 输入用户名和密码点击登录, 点击完登录之后, 还是要交给相应的servlet, 接着这个登录的servlet会去操作数据库, 进行查询一下当前要登录的用户在数据库中是否存在, ...
小程序开发——手机号验证码登录页面
最终做出页面效果: login.wxml <view class="main_candidate"><view class="inputbox flex ...
【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）
目录效果图: 一.template部分二.style样式三.script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们 ...
【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能
目录 1.前端登录页面手机号验证码登录页面: 2.前端获取验证码的函数: 3.后端获取验证码代码 4.前端登录的函数: 5.后端登录的实现 6.注册功能前后端的实现 1.前端登录页面手机号验证码登录页 ...
登录页面自动刷新验证码，并校验输入验证码和后台生成的验证码是否一致
登录jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEn ...
JS关于登录页面使用手机验证码登录
这两天在弄一个项目,登录页面打算用手机验证码登录. 需要使用到 jQuery和 ajax 用于验证手机号码输入框分别判断以下情况并作出弹窗警告 1:是否为空 2:是否为11位数字 3:是否是13,1 ...
idea 启动界面导入项目_如何为您的项目启动有效的登录页面
idea 启动界面导入项目 by Christian-Peter Heimbach 通过克里斯蒂安·彼得·海姆巴赫如何为您的项目启动有效的登录页面 (How to launch an effecti ...
项目登录页面测试及测试用例
这篇博客是写的JavaWeb项目的用户登录和修改密码的测试用例项目的登录页面如下图所示用户登录测试用例也是面试中经常被问起的,所以做个总结功能: 1.输入正确的用户名,正确的密码,验证是否登录成 ...

茶多多项目【验证码登录页面】

茶多多项目【验证码登录页面】相关推荐

最新文章

热门文章