本文操作环境：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>
javascriptimport $ 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>
javascriptimport $ 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 = '此邮箱已被注册,换个邮箱试试吧'; } } }) } } } })})
<?phpsession_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视频教程》
以上就是vue加php怎么实现登陆的详细内容。