vue加php怎么实现登陆-PHP问题-PHP中文网

首页

后端开发

PHP问题

vue加php怎么实现登陆

藏色散人

Dec 08, 2021 am 10:42 AM

phpvue

vue加php实现登录的方法：1、创建登录部分的代码文件；2、创建Javascript代码；3、在vue项目中使用PHP来做用户的注册和登录功能即可。

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=&#39;http://www.beian.gov.cn&#39; style="text-decoration:none;color:black;" target=&#39;_blank&#39;>闽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

15b93c187883aa3c037d01b51ea68a46query($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==&#39;&#39;||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!=&#39;&#39;&&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=&#39;http://www.beian.gov.cn&#39; style="text-decoration:none;color:black;" target=&#39;_blank&#39;>闽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.lengthf34756522ee61935ee0b63bde8b051a8100000&&thisvue.codef19a7cf7a874e9d65ba2b0abe8d9f209query($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怎么实现登陆的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

显示更多

vue加php怎么实现登陆

Vue + PHP 做用户注册登录功能

登录部分：

HTML

Javascript

PHP

注册部分

HTML

Javascript

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3 Linux新版

WebStorm Mac版

MinGW - 适用于 Windows 的极简 GNU

PhpStorm Mac 版本

热门话题