Comment implémenter la connexion avec vue et php-Problème PHP-php.cn

Table des matières

Vue + PHP pour la fonction d'enregistrement et de connexion des utilisateurs

Partie connexion :

HTML

Javascript

PHP

Partie inscription

Maison

développement back-end

Problème PHP

Comment implémenter la connexion avec vue et php

藏色散人

Dec 08, 2021 am 10:42 AM

php vue

Comment ajouter php à vue pour réaliser la connexion : 1. Créez le fichier de code de la partie de connexion ; 2. Créez le code Javascript ; 3. Utilisez PHP dans le projet vue pour effectuer les fonctions d'enregistrement et de connexion des utilisateurs.

Comment implémenter la connexion avec vue et php

L'environnement d'exploitation de cet article : système Windows 7, PHP version 7.1, ordinateur Dell G3.

Vue + PHP pour la fonction d'enregistrement et de connexion des utilisateurs

Pour une application, la chose la plus élémentaire est la fonction d'enregistrement et de connexion des utilisateurs. Ce blog résume comment utiliser PHP dans le projet vue Pour effectuer l'utilisateur. fonctions d'enregistrement et de connexion.

Partie connexion :

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>

Copier après la connexion

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;
                            }
                        }
                    })

                }
            }
        }
    })})

Copier après la connexion

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);
	}
	?>

Copier après la connexion

Partie inscription

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>

Copier après la connexion

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;;
                            }
                        }
                    })
                }
            }
        }
    })})

Copier après la connexion

rrree

Apprentissage recommandé : Tutoriel vidéo"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7465

Tutoriel CakePHP

1376

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment pouvez-vous empêcher une classe d'être prolongée ou une méthode d'être remplacée en PHP? (mot-clé final) Apr 08, 2025 am 12:03 AM

Dans PHP, le mot-clé final est utilisé pour empêcher les classes d'être héritées et les méthodes écrasées. 1) Lors du marquage de la classe comme final, la classe ne peut pas être héritée. 2) Lors du marquage de la méthode comme final, la méthode ne peut pas être réécrite par la sous-classe. L'utilisation de mots clés finaux garantit la stabilité et la sécurité de votre code.

Comment référencer le fichier JS avec Vue.js Apr 07, 2025 pm 11:27 PM

Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.

Comment utiliser Watch in Vue Apr 07, 2025 pm 11:36 PM

L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Que signifie la charge paresseuse? Apr 07, 2025 pm 11:54 PM

Dans vue.js, le chargement paresseux permet de charger dynamiquement les composants ou les ressources, en réduisant le temps de chargement des pages initiales et en améliorant les performances. La méthode de mise en œuvre spécifique comprend l'utilisation de & lt; keep-alive & gt; et & lt; composant est & gt; composants. Il convient de noter que le chargement paresseux peut provoquer des problèmes de FOUC (écran d'éclat) et ne doit être utilisé que pour les composants qui nécessitent un chargement paresseux pour éviter les frais généraux de performances inutiles.

Comment ajouter des fonctions aux boutons pour Vue Apr 08, 2025 am 08:51 AM

Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.

Comment interroger la version de Vue Apr 07, 2025 pm 11:24 PM

Vous pouvez interroger la version Vue en utilisant Vue Devtools pour afficher l'onglet Vue dans la console du navigateur. Utilisez NPM pour exécuter la commande "NPM List -g Vue". Recherchez l'élément VUE dans l'objet "dépendances" du fichier package.json. Pour les projets Vue CLI, exécutez la commande "Vue --version". Vérifiez les informations de la version dans le & lt; script & gt; Tag dans le fichier html qui fait référence au fichier VUE.

Comment utiliser Vue Traversal Apr 07, 2025 pm 11:48 PM

Il existe trois méthodes courantes pour que Vue.js traverse les tableaux et les objets: la directive V-FOR est utilisée pour traverser chaque élément et les modèles de rendu; La directive V-Bind peut être utilisée avec V-FOR pour définir dynamiquement les valeurs d'attribut pour chaque élément; et la méthode .map peut convertir les éléments du tableau en nouveaux tableaux.

See all articles