How to implement login with vue and php-PHP Problem-php.cn

Table of Contents

Vue PHP does user registration and login function

HTML

Javascript

PHP

Registration part

Home

Backend Development

PHP Problem

How to implement login with vue and php

藏色散人

Dec 08, 2021 am 10:42 AM

php vue

How to add php to vue to realize login: 1. Create the code file of the login part; 2. Create the Javascript code; 3. Use PHP in the vue project to do the user registration and login functions.

How to implement login with vue and php

The operating environment of this article: Windows 7 system, PHP version 7.1, Dell G3 computer.

For an application, the most basic It is the user registration and login function. This blog summarizes how to use PHP to do the user registration and login function in the vue project.

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>

Copy after login

Javascript

import $ from &#39;./js/jquery.js&#39;;import &#39;./css/mobilecommon.css&#39;;import Vue from &#39;../node_modules/vue/dist/vue.js&#39;;$(function(){
    var vm = new Vue({
        el:"#app",
        data:{
            userid:&#39;&#39;,
            usercode:&#39;&#39;,
            errorFlag:false,
            errorMsg:&#39;&#39;
        },
        methods:{
            login(){
                var thisvue = this;
                if(thisvue.userid==&#39;&#39;||thisvue.usercode==&#39;&#39;)
                {
                    thisvue.errorMsg = &#39;请输入用户名和密码&#39;;
                    thisvue.errorFlag = true;
                }
                else{
                    $.ajax({
                        type:&#39;POST&#39;,
                        url:&#39;../server/login.php&#39;,
                        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 = &#39;账号或密码错误&#39;;
                                thisvue.usercode = &#39;&#39;;
                                thisvue.errorFlag = true;
                            }
                        }
                    })

                }
            }
        }
    })})

Copy after login

PHP

<?php
	session_start();
	header(&#39;Content-Type:application/json; charset=utf-8&#39;);
	$myid = $_POST[userid]; 
	$mycode = md5($_POST[usercode]);
	if($myid!=&#39;&#39;&&$mycode!=&#39;&#39;)
	{
		$conn = new mysqli("localhost:3306", "root", "", "personal");
		if ($conn != null) 
		{
			$sql = "select * FROM user_login where user_id=&#39;$myid&#39; or user_mail = &#39;$myid&#39; ";
			$result =$conn->query($sql);
	  		$resArray = mysqli_fetch_array($result); 		
	  		if($resArray["user_password"] == $mycode)
	  		{
				$_SESSION[&#39;chenzhe_user_id&#39;] = $resArray[&#39;user_id&#39;];
				$result_array[0] = [&#39;code&#39;=>&#39;1&#39;,&#39;msg&#39;=>&#39;登陆成功&#39;];
				echo json_encode($result_array);
	  		}
	  		else
	  		{
				$result_array[0] = [&#39;code&#39;=>&#39;0&#39;,&#39;msg&#39;=>&#39;用户名或密码输入错误&#39;];
				echo json_encode($result_array);
	  		}
			$conn->close();
		}
	}
	else
	{
		$result_array[0] = [&#39;code&#39;=>&#39;0&#39;,&#39;msg&#39;=>&#39;请输入用户名或密码&#39;];
		echo json_encode($result_array);
	}
	?>

Copy after login

Registration part

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>

Copy after login

Javascript

import $ from &#39;./js/jquery.js&#39;;import &#39;./css/mobilecommon.css&#39;;import Vue from &#39;../node_modules/vue/dist/vue.js&#39;;$(function(){
    var vm = new Vue({
        el:"#app",
        data:{
            errorMsg:&#39;&#39;,
            errorFlag:0,
            //填写注册信息
            userid:&#39;&#39;,
            username:&#39;&#39;,
            usercode:&#39;&#39;,
            usercodes:&#39;&#39;,
            usermail:&#39;&#39;,
            //验证注册信息
            code:&#39;&#39;,
            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==&#39;&#39;)
                {
                    thisvue.testUserId = false;
                    return 0;
                }
                else if(!testall.test(thisvue.userid)) //检测英文和数字
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;用户名必须以英文开头，且只能由英文和数字组成&#39;;
                }
                else if(thisvue.userid.length<9)
                {
                    thisvue.errorFlag = 1;
                    thisvue.errorMsg = &#39;用户名长度须在9-16之间&#39;;
                    thisvue.testUserId = false;
                    return 0;
                }    
                else{
                    $.ajax({
                        type:&#39;POST&#39;,
                        url:&#39;../server/testUserId.php&#39;,
                        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 = &#39;密码长度须在9-20个字符，只能由英文和数字组成&#39;;
                    result = 0;
                }
                else if(!testall.test(this.usercode)) //检测英文和数字
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;密码只能使用英文+数字,且不能为纯数字&#39;;
                    result = 0;
                
                }
                else if(this.usercode!=this.usercodes)
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;两次密码输入不一致&#39;;
                    result = 0;
                    
                }
                /*else if(testenglish.test(this.usercode))
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;密码不能为纯数字&#39;;
                    result = 0;
                }*/
                
                if(result==1)
                {
                    this.errorFlag = 0;
                    this.testpass = 1;//如果密码验证成功，则通过
                } 
                return result;
            },
            register(){
                var thisvue = this;
                if(thisvue.usermail==&#39;&#39;||thisvue.code==&#39;&#39;)
                {
                    thisvue.errorMsg = &#39;你还没有进行邮箱验证&#39;;
                    thisvue.errorFlag = 1;
                }
                else{
                    thisvue.verifyCode();
                    $.ajax({
                        url:&#39;../server/register.php&#39;,
                        type:&#39;POST&#39;,
                        data:$("#registerForm").serialize(),
                        success:function(res)
                        {
                            if(res.code==1)
                            {
                                window.location.href = &#39;indexmobile.html&#39;;
                            }
                            else{
                                thisvue.errorMsg = &#39;注册失败&#39;;
                                thisvue.errorFlag = 1;
                            }
                        }
                    })
                }                
            },
            getCode(){ //获取验证码
                if(this.userid==&#39;&#39;||this.username==&#39;&#39;||this.usercode==&#39;&#39;||this.usercodes==&#39;&#39;||this.usermail==&#39;&#39;)
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;请填写全部的信息后获取验证码&#39;;
                }
                else if(this.usercode!=this.usercodes)
                {
                    this.errorFlag = 1;
                    this.errorMsg = &#39;两次密码输入不一致&#39;;
                }
                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:&#39;POST&#39;,
                        url:&#39;../server/mail/sendMail.php&#39;,
                        async:false,
                        data:{
                            address:thisvue.usermail                        },
                        success:function(res)
                        {
                            if(res.code==1)
                            {
                                thisvue.errorFlag = 1;
                                thisvue.errorMsg = &#39;我们发送了一封邮件到你的邮箱，请尽快验证&#39; 
                            }
                        }
                    })
                }
            },
            verifyCode(){ //验证验证码
                var thisvue =this;
                if(thisvue.code>100000&&thisvue.code<999999)
                {
                    $.ajax({
                        type:&#39;POST&#39;,
                        url:&#39;../server/mail/verifyCode.php&#39;,
                        data:{code:thisvue.code},
                        success:function(res)
                        {
                            if(res.code==&#39;1&#39;)
                            {
                                thisvue.testcode=1;
                            }
                            else{
                                thisvue.errorFlag=1;
                                thisvue.errorMsg=&#39;验证码不正确，请重新输入&#39;;
                                return 0;
                            }
                        }
                    })
                }
            },
            testmailFunc(){
                var thisvue = this;
                if(this.usermail!=&#39;&#39;&&this.usermail.indexOf(&#39;@&#39;)!=&#39;&#39;)
                {
                    $.ajax({
                        type:&#39;POST&#39;,
                        url:&#39;../server/testmail.php&#39;,
                        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 = &#39;此邮箱已被注册,换个邮箱试试吧&#39;;
                            }
                        }
                    })
                }
            }
        }
    })})

Copy after login

<?php
session_start();
	header(&#39;Content-Type:application/json; charset=utf-8&#39;);
	$myid = $_POST[userid];
	$mycode = md5($_POST[usercode]);
	$myname = $_POST[username];
	$mymail = $_POST[usermail];
	$gm = &#39;vchenzhecom&#39;;
	$conn = new mysqli("47.106.190.129:3306", "root", "52F7cbad94f2", "personal");
	$test = "SELECT * FROM user_login WHERE `user_id` = &#39;$myid&#39;";
	$testResult = $conn->query($test);
	if(mysqli_num_rows($testResult)==0)
	{
		$path="/home/www/htdocs/carelesswhisper/src/img/".$myid; //判断目录存在否，存在给出提示，不存在则创建目录
		if (is_dir($path)){
			$result = [&#39;code&#39;=>&#39;1&#39;,&#39;msg&#39;=>&#39;覆盖用户目录&#39;]; 
		}
		else{//第三个参数是“true”表示能创建多级目录，iconv防止中文目录乱码
			$res=mkdir(iconv("UTF-8", "GBK", $path),0777,true); 
			$result = [&#39;code&#39;=>&#39;1&#39;,&#39;msg&#39;=>&#39;注册成功&#39;];
		}
		$conn->query(" INSERT INTO user_login VALUES(&#39;$myid&#39;,&#39;$mycode&#39;,&#39;$myname&#39;,&#39;$mymail&#39;,&#39;imageFile/image.jpg&#39;,&#39;未填&#39;,&#39;未填&#39;,&#39;未填&#39;,&#39;未填&#39;,&#39;0&#39;) ");
		$conn->query("INSERT INTO personal_follow VALUES(&#39;$gm&#39;,&#39;$myid&#39;,1,&#39;2019&#39;,0)");
		$conn->query("INSERT INTO personal_follow VALUES(&#39;$myid&#39;,&#39;$gm&#39;,1,&#39;2019&#39;,0)");
		$conn->close();
		
	}
	else{
		$result = [&#39;code&#39;=>&#39;0&#39;,&#39;msg&#39;=>&#39;此用户名已被使用&#39;]; 
	}
	$_SESSION[&#39;code&#39;]=&#39;&#39;;
	echo json_encode($result);
	?>

Copy after login

Recommended study: "PHP Video Tutorial"

The above is the detailed content of How to implement login with vue and php. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7583

CakePHP Tutorial

1386

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

122

Related knowledge

How to add functions to buttons for vue Apr 08, 2025 am 08:51 AM

You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

The Future of PHP: Adaptations and Innovations Apr 11, 2025 am 12:01 AM

The future of PHP will be achieved by adapting to new technology trends and introducing innovative features: 1) Adapting to cloud computing, containerization and microservice architectures, supporting Docker and Kubernetes; 2) introducing JIT compilers and enumeration types to improve performance and data processing efficiency; 3) Continuously optimize performance and promote best practices.

PHP vs. Python: Understanding the Differences Apr 11, 2025 am 12:15 AM

PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.

PHP's Current Status: A Look at Web Development Trends Apr 13, 2025 am 12:20 AM

PHP remains important in modern web development, especially in content management and e-commerce platforms. 1) PHP has a rich ecosystem and strong framework support, such as Laravel and Symfony. 2) Performance optimization can be achieved through OPcache and Nginx. 3) PHP8.0 introduces JIT compiler to improve performance. 4) Cloud-native applications are deployed through Docker and Kubernetes to improve flexibility and scalability.

PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

How to pass parameters for vue function Apr 08, 2025 am 07:36 AM

There are two main ways to pass parameters to Vue.js functions: pass data using slots or bind a function with bind, and provide parameters: pass parameters using slots: pass data in component templates, accessed within components and used as parameters of the function. Pass parameters using bind binding: bind function in Vue.js instance and provide function parameters.

How to jump to the div of vue Apr 08, 2025 am 09:18 AM

There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.

How to jump a tag to vue Apr 08, 2025 am 09:24 AM

The methods to implement the jump of a tag in Vue include: using the a tag in the HTML template to specify the href attribute. Use the router-link component of Vue routing. Use this.$router.push() method in JavaScript. Parameters can be passed through the query parameter and routes are configured in the router options for dynamic jumps.

See all articles

How to implement login with vue and php

Vue PHP does user registration and login function

Login part:

HTML

Javascript

PHP

Registration part

HTML

Javascript

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics