Bagaimana untuk melaksanakan log masuk dengan vue dan php-masalah PHP-php.cn

Jadual Kandungan

Vue PHP melakukan pendaftaran pengguna dan fungsi log masuk

Bahagian log masuk:

HTML

Javascript

PHP

Bahagian Pendaftaran

Rumah

pembangunan bahagian belakang

masalah PHP

Bagaimana untuk melaksanakan log masuk dengan vue dan php

藏色散人

Dec 08, 2021 am 10:42 AM

php vue

Cara menambah php ke vue untuk merealisasikan log masuk: 1. Buat fail kod bahagian log masuk 2. Buat kod Javascript 3. Gunakan PHP dalam projek vue untuk melakukan fungsi pendaftaran dan log masuk .

Bagaimana untuk melaksanakan log masuk dengan vue dan php

Persekitaran pengendalian artikel ini: sistem Windows 7, PHP versi 7.1, komputer Dell G3.

Vue PHP melakukan pendaftaran pengguna dan fungsi log masuk

Untuk aplikasi, ia adalah yang paling asas Ia adalah fungsi pendaftaran pengguna dan log masuk Blog ini meringkaskan cara menggunakan PHP untuk melakukan fungsi pendaftaran dan log masuk pengguna dalam projek vue.

Bahagian log masuk:

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>

Salin selepas log masuk

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

                }
            }
        }
    })})

Salin selepas log masuk

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

Salin selepas log masuk

Bahagian Pendaftaran

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Pembelajaran yang disyorkan: "Tutorial Video PHP"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan log masuk dengan vue dan php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7554

Tutorial CakePHP

1382

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Masa Depan PHP: Adaptasi dan Inovasi Apr 11, 2025 am 12:01 AM

Masa depan PHP akan dicapai dengan menyesuaikan diri dengan trend teknologi baru dan memperkenalkan ciri -ciri inovatif: 1) menyesuaikan diri dengan pengkomputeran awan, kontena dan seni bina microservice, menyokong Docker dan Kubernetes; 2) memperkenalkan pengkompil JIT dan jenis penghitungan untuk meningkatkan prestasi dan kecekapan pemprosesan data; 3) Berterusan mengoptimumkan prestasi dan mempromosikan amalan terbaik.

Cara Lulus Parameter untuk Fungsi Vue Apr 08, 2025 am 07:36 AM

Terdapat dua cara utama untuk lulus parameter ke fungsi Vue.js: Lulus data menggunakan slot atau mengikat fungsi dengan mengikat, dan menyediakan parameter: lulus parameter menggunakan slot: lulus data dalam templat komponen, diakses dalam komponen dan digunakan sebagai parameter fungsi. Lulus parameter menggunakan mengikat mengikat: Fungsi mengikat dalam contoh Vue.js dan menyediakan parameter fungsi.

Cara melompat tag ke vue Apr 08, 2025 am 09:24 AM

Kaedah untuk melaksanakan lompatan tag dalam Vue termasuk: menggunakan tag dalam templat HTML untuk menentukan atribut HREF. Gunakan komponen router-link routing VUE. Gunakan ini. $ Router.push () kaedah dalam JavaScript. Parameter boleh dilalui melalui parameter pertanyaan dan laluan dikonfigurasikan dalam pilihan penghala untuk lompatan dinamik.

Cara melompat ke Div Vue Apr 08, 2025 am 09:18 AM

Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.

PHP vs Python: Memahami Perbezaan Apr 11, 2025 am 12:15 AM

PHP dan Python masing -masing mempunyai kelebihan sendiri, dan pilihannya harus berdasarkan keperluan projek. 1.Php sesuai untuk pembangunan web, dengan sintaks mudah dan kecekapan pelaksanaan yang tinggi. 2. Python sesuai untuk sains data dan pembelajaran mesin, dengan sintaks ringkas dan perpustakaan yang kaya.

Status Semasa PHP: Lihat trend pembangunan web Apr 13, 2025 am 12:20 AM

PHP tetap penting dalam pembangunan web moden, terutamanya dalam pengurusan kandungan dan platform e-dagang. 1) PHP mempunyai ekosistem yang kaya dan sokongan rangka kerja yang kuat, seperti Laravel dan Symfony. 2) Pengoptimuman prestasi boleh dicapai melalui OPCACHE dan NGINX. 3) Php8.0 memperkenalkan pengkompil JIT untuk meningkatkan prestasi. 4) Aplikasi awan asli dikerahkan melalui Docker dan Kubernet untuk meningkatkan fleksibiliti dan skalabiliti.

PHP dan Python: Membandingkan dua bahasa pengaturcaraan yang popular Apr 14, 2025 am 12:13 AM

PHP dan Python masing -masing mempunyai kelebihan mereka sendiri, dan memilih mengikut keperluan projek. 1.PHP sesuai untuk pembangunan web, terutamanya untuk pembangunan pesat dan penyelenggaraan laman web. 2. Python sesuai untuk sains data, pembelajaran mesin dan kecerdasan buatan, dengan sintaks ringkas dan sesuai untuk pemula.

See all articles