此组件，简单实现了防短信轰炸，样式我使用了一些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>
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的 使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。 解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述： 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland