文章详情

登录

短信预约信息系统项目管理师 报名、考试、查分时间动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue加php怎么实现登陆

2021-03-06 02:37

关注

本文操作环境：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">&times;</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;
                    
                }
                
                
                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);
	?>

以上就是vue加php怎么实现登陆的详细内容，更多请关注编程界其它相关文章！

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

vue加php怎么实现登陆

后端开发2021-03-06

vue加php怎么实现登陆

后端开发2024-04-25

vue加php如何实现登陆

后端开发2023-06-22

Vue实现登陆跳转

后端开发2024-04-02

vue实现登陆功能

后端开发2024-04-02

PHP怎么实现用户登陆功能

后端开发2023-06-03

php怎么用cookie来实现登陆界面

后端开发2024-04-25

php怎么用cookie来实现登陆界面

后端开发2019-03-28

怎么使用vue cli实现项目登陆页面

后端开发2023-07-04

Vue如何实现登陆跳转

后端开发2024-04-02

vue如何实现登陆页面

后端开发2023-06-30

vue实现登陆页面开发实践

后端开发2024-04-02

vue项目实现登陆注册效果

后端开发2024-04-02

Laravel怎么实现登陆过期后跳转到登陆页面

后端开发2023-07-04

Vue实战记录之登陆页面的实现

后端开发2024-04-02

ssh,scp怎么实现自动登陆

后端开发2023-06-09

nodejs怎么实现登陆验证功能

后端开发2023-06-30

Java怎么实现微信授权登陆

后端开发2023-06-15

Java编写怎么实现登陆窗口

后端开发2023-06-30

Token登陆验证机制怎么实现

后端开发2023-06-21
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯