Maison > Article > développement back-end > Comment implémenter la connexion avec vue et php
Comment implémenter la connexion avec vue et php
- 藏色散人original
- 2021-12-08 10:42:473077parcourir
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.
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='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
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);
}
?>
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==''||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">×</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.lengthf34756522ee61935ee0b63bde8b051a8100000&&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 = '此邮箱已被注册,换个邮箱试试吧';
}
}
})
}
}
}
})})rrreeApprentissage 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：
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
Article précédent：Que signifie php stdin ?Article suivant：Que signifie php stdin ?