vue加PHP实现登录的方法：1、创建登录部分的代码文件；2、创建Javascript代码；3、在vue项目中使用PHP来做用户的注册和登录功能即可。
本文操作环境：Windows7系统，PHP7.1版，Dell G3电脑。
Vue + PHP 做用户注册登录功能
对于一款应用来说，最基本的就是用户的注册和登录功能，这篇博客就总结一下在vue项目中如何使用PHP来做用户的注册和登录功能。
登录部分：
HTML
<div id=app class=container>
<div style=text-align:center;margin-top:60px;>
<img src=../src/icon/vlogo.png style=width:20rem;height:auto; alt=>
</div>
<form class=form middle>
<br>
<div class=form-group>
<input type=text class=form-control input100 v-model=userid placeholder=用户名 / 邮箱/>
</div>
<div class=form-group>
<input type=password class=form-control input100 v-model=usercode placeholder=密码 @keyup.13=login />
</div>
<label class=errorMsg v-if=errorFlag v-cloak >{{ errorMsg }}</label>
<div class=form-group btn100>
<button type=button @click=login class=btn btn-primary btn100>登陆</button>
</div>
<div class=form-group btn100>
<a href=./registermobile.html class=btn btn-default btn100>注册</a>
</div>
<h6 style=text-align:right;>
<a href=./findpassword.html style=margin-right:2rem;>找回密码</a>
</h6>
<hr>
<h6 style=text-align:center;margin-top:3rem;>
<a style=margin-right:2rem;>© vchenzhe</a>
<a href='http://www.beian.gov.cn' style=text-decoration:none;color:black; target='_blank'>闽ICP备19008574号-1</a>
</h6>
</form>
</div>Javascript
import $ from './js/jquery.js';import './css/mobilecommon.css';import Vue from '../node_modules/vue/dist/vue.js';$(function(){ var vm = new Vue({ el:#app, data:{ userid:'', usercode:'', errorFlag:false, errorMsg:'' }, methods:{ login(){ var thisvue = this; if(thisvue.userid==''||thisvue.usercode=='') { thisvue.errorMsg = '请输入用户名和密码'; thisvue.errorFlag = true; } else{ $.ajax({ type:'POST', url:'../server/login.PHP', data:{ userid:thisvue.userid, usercode:thisvue.usercode }, success:function(res){ if(res[0].code==1) { thisvue.errorFlag = false; window.location.href=./homemobile.html; } else{ thisvue.errorMsg = '账号或密码错误'; thisvue.usercode = ''; thisvue.errorFlag = true; } } }) } } } })})
PHP
<?PHP session_start(); header('Content-Type:application/json; charset=utf-8'); $myid = $_POST[userid]; $mycode = md5($_POST[usercode]); if($myid!=''&&$mycode!='') { $conn = new MysqLi(localhost:3306, root, , personal); if ($conn != null) { $sql = select * FROM user_login where user_id='$myid' or user_mail = '$myid' ; $result =$conn->query($sql); $resArray = MysqLi_fetch_array($result); if($resArray[user_password] == $mycode) { $_SESSION['chenzhe_user_id'] = $resArray['user_id']; $result_array[0] = ['code'=>'1','msg'=>'登陆成功']; echo json_encode($result_array); } else { $result_array[0] = ['code'=>'0','msg'=>'用户名或密码输入错误']; echo json_encode($result_array); } $conn->close(); } } else { $result_array[0] = ['code'=>'0','msg'=>'请输入用户名或密码']; echo json_encode($result_array); } ?>
注册部分
HTML
<div class=container style=margin-top:2rem; id=app>
<ol class=breadcrumb btn100>
<li><a href=./indexmobile.html>返回</a></li>
<li class=active>注册</li>
</ol>
<p class=errorMsg v-if=errorFlag==1 v-cloak >{{errorMsg}}</p>
<form class=form id=registerForm>
<div class=form-group has-Feedback>
<input type=text @keyup=testUserIdFunc v-model=userid name=userid minlength=9 maxlength=16 class=form-control input100 placeholder=用户名 required>
<span v-show=testUserId class=glyphicon glyphicon-ok form-control-Feedback aria-hidden=true style=color:#5cb85c;></span>
</div>
<div class=form-group>
<input type=text v-model=username name=username maxlength=10 class=form-control input100 placeholder=昵称 required>
</div>
<div class=form-group has-Feedback >
<input type=password @keyup=readInfo v-model=usercode name=usercode minlength=9 maxlength=20 class=form-control input100 placeholder=密码 required>
<span v-show=testpass class=glyphicon glyphicon-ok form-control-Feedback aria-hidden=true style=color:#5cb85c;></span>
</div>
<div class=form-group has-Feedback >
<input type=password @keyup=readInfo v-model=usercodes name=checkusercode maxlength=20 class=form-control input100 placeholder=确认密码 required>
<span v-show=testpass class=glyphicon glyphicon-ok form-control-Feedback aria-hidden=true style=color:#5cb85c;></span>
</div>
<div class=form-group has-Feedback >
<input type=email @keyup=testmailFunc v-model=usermail name=usermail class=form-control input100 placeholder=邮箱 required>
<span v-show=testmail class=glyphicon glyphicon-ok form-control-Feedback aria-hidden=true style=color:#5cb85c;></span>
</div>
<div class=form-group btn100 style=display:flex; >
<input type=number v-model=code class=form-control placeholder=验证码 required>
<button v-if=testUserId==0||testpass==false||usermail==''||testmail==false type=button class=btn btn-default btn80 btn-disabled disabled style=margin-left:1rem;>获取验证码</button>
<button v-show=btnGetCode==0 v-if=testUserId==1&&testpass==true&&usermail!=''&&testmail==true type=button class=btn btn-default btn80 @click=getCode style=margin-left:1rem;>获取验证码</button>
<button v-show=btnGetCode==1 type=button class=btn btn-disabled btn80 disabled style=margin-left:1rem;>已发送({{ clock }}s)</button>
</div>
<div class=btn100>
<button type=button class=btn btn-primary btn100 @click=register>注册</button>
</div>
</form>
<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=false>
<div class=modal-dialog>
<div class=modal-content>
<div class=modal-header>
<button type=button class=close data-dismiss=modal aria-hidden=true>×</button>
<h4 class=modal-title id=myModalLabel>消息</h4>
</div>
<div class=modal-body>
{{ errorMsg }}
</div>
<div class=modal-footer>
<button type=button class=btn btn-primary data-dismiss=modal>确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<h6 style=text-align:center;margin-top:3rem;>
<a href=./index.html style=margin-right:2rem;>电脑版</a>
<a href='http://www.beian.gov.cn' style=text-decoration:none;color:black; target='_blank'>闽ICP备19008574号-1</a>
</h6>
</div>Javascript
import $ from './js/jquery.js';import './css/mobilecommon.css';import Vue from '../node_modules/vue/dist/vue.js';$(function(){ var vm = new Vue({ el:#app, data:{ errorMsg:'', errorFlag:0, //填写注册信息 userid:'', username:'', usercode:'', usercodes:'', usermail:'', //验证注册信息 code:'', btnGetCode:0, //用于判断当前是否获取了一次验证码，默认是0，获取一次后改成1 testcode:0, //用于判断当前是否完成了验证码验证，默认是0，验证通过是1 clock:60, testUserId:false,//检测当前用户名是否已经注册 testpass:false,//检测密码安全 testmail:false, //检测邮箱是否被注册过了 }, methods:{ testUserIdFunc(){ //检测用户名是否已经注册 var thisvue = this; var testall = /^[a-zA-Z][a-zA-Z0-9]*$/; //只能是数字和字母 if(thisvue.userid=='') { thisvue.testUserId = false; return 0; } else if(!testall.test(thisvue.userid)) //检测英文和数字 { this.errorFlag = 1; this.errorMsg = '用户名必须以英文开头，且只能由英文和数字组成'; } else if(thisvue.userid.length<9) { thisvue.errorFlag = 1; thisvue.errorMsg = '用户名长度须在9-16之间'; thisvue.testUserId = false; return 0; } else{ $.ajax({ type:'POST', url:'../server/testUserId.PHP', data:{ user_id:thisvue.userid }, success:function(res) { if(res.code==1) { thisvue.testUserId = true; thisvue.errorFlag = 0; } else{ thisvue.testUserId = false; thisvue.errorFlag = 1; thisvue.errorMsg = res.msg; } } }) } }, readInfo(){ //检索密码安全等 var result = 1; var testall = /^(?!\d+$)[\da-zA-Z]+$/; //只能是数字和字母 if(this.usercode.length<9) //检测长度 { this.errorFlag = 1; this.errorMsg = '密码长度须在9-20个字符，只能由英文和数字组成'; result = 0; } else if(!testall.test(this.usercode)) //检测英文和数字 { this.errorFlag = 1; this.errorMsg = '密码只能使用英文+数字,且不能为纯数字'; result = 0; } else if(this.usercode!=this.usercodes) { this.errorFlag = 1; this.errorMsg = '两次密码输入不一致'; result = 0; } /*else if(testenglish.test(this.usercode)) { this.errorFlag = 1; this.errorMsg = '密码不能为纯数字'; result = 0; }*/ if(result==1) { this.errorFlag = 0; this.testpass = 1;//如果密码验证成功，则通过 } return result; }, register(){ var thisvue = this; if(thisvue.usermail==''||thisvue.code=='') { thisvue.errorMsg = '你还没有进行邮箱验证'; thisvue.errorFlag = 1; } else{ thisvue.verifyCode(); $.ajax({ url:'../server/register.PHP', type:'POST', data:$(#registerForm).serialize(), success:function(res) { if(res.code==1) { window.location.href = 'indexmobile.html'; } else{ thisvue.errorMsg = '注册失败'; thisvue.errorFlag = 1; } } }) } }, getCode(){ //获取验证码 if(this.userid==''||this.username==''||this.usercode==''||this.usercodes==''||this.usermail=='') { this.errorFlag = 1; this.errorMsg = '请填写全部的信息后获取验证码'; } else if(this.usercode!=this.usercodes) { this.errorFlag = 1; this.errorMsg = '两次密码输入不一致'; } else{ var thisvue = this; thisvue.btnGetCode = 1; //把获取验证码按钮禁用 var timer1 = setInterval(function(){thisvue.clock=thisvue.clock-1;},1000); setTimeout(function(){ clearInterval(timer1); thisvue.btnGetCode=0; thisvue.clock=60; },60000); //发送邮件 $.ajax({ type:'POST', url:'../server/mail/sendMail.PHP', async:false, data:{ address:thisvue.usermail }, success:function(res) { if(res.code==1) { thisvue.errorFlag = 1; thisvue.errorMsg = '我们发送了一封邮件到你的邮箱，请尽快验证' } } }) } }, verifyCode(){ //验证验证码 var thisvue =this; if(thisvue.code>100000&&thisvue.code<999999) { $.ajax({ type:'POST', url:'../server/mail/verifyCode.PHP', data:{code:thisvue.code}, success:function(res) { if(res.code=='1') { thisvue.testcode=1; } else{ thisvue.errorFlag=1; thisvue.errorMsg='验证码不正确，请重新输入'; return 0; } } }) } }, testmailFunc(){ var thisvue = this; if(this.usermail!=''&&this.usermail.indexOf('@')!='') { $.ajax({ type:'POST', url:'../server/testmail.PHP', data:{ user_mail:thisvue.usermail }, success:function(res){ if(res.code==1) { thisvue.testmail = true; thisvue.errorFlag = 0; } else{ thisvue.testmail = false; thisvue.errorFlag = 1; thisvue.errorMsg = '此邮箱已被注册,换个邮箱试试吧'; } } }) } } } })})
<?PHP session_start(); header('Content-Type:application/json; charset=utf-8'); $myid = $_POST[userid]; $mycode = md5($_POST[usercode]); $myname = $_POST[username]; $mymail = $_POST[usermail]; $gm = 'vchenzhecom'; $conn = new MysqLi(47.106.190.129:3306, root, 52F7cbad94f2, personal); $test = SELECT * FROM user_login WHERE `user_id` = '$myid'; $testResult = $conn->query($test); if(MysqLi_num_rows($testResult)==0) { $path=/home/www/htdocs/carelesswhisper/src/img/.$myid; //判断目录存在否，存在给出提示，不存在则创建目录 if (is_dir($path)){ $result = ['code'=>'1','msg'=>'覆盖用户目录']; } else{//第三个参数是“true”表示能创建多级目录，iconv防止中文目录乱码 $res=mkdir(iconv(UTF-8, GBK, $path),0777,true); $result = ['code'=>'1','msg'=>'注册成功']; } $conn->query( INSERT INTO user_login VALUES('$myid','$mycode','$myname','$mymail','imageFile/image.jpg','未填','未填','未填','未填','0') ); $conn->query(INSERT INTO personal_follow VALUES('$gm','$myid',1,'2019',0)); $conn->query(INSERT INTO personal_follow VALUES('$myid','$gm',1,'2019',0)); $conn->close(); } else{ $result = ['code'=>'0','msg'=>'此用户名已被使用']; } $_SESSION['code']=''; echo json_encode($result); ?>
推荐学习：《PHP教程》
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
