Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk melaksanakan log masuk dengan vue dan php
Bagaimana untuk melaksanakan log masuk dengan vue dan php
- 藏色散人asal
- 2021-12-08 10:42:473129semak imbas
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 .
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='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);
}
?>
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==''||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.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);
?>
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：
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
Artikel sebelumnya：Apakah maksud php stdin?Artikel seterusnya：Apakah maksud php stdin?
Artikel berkaitan
Lihat lagi- Bagaimana untuk log keluar dan mengosongkan sesi dalam php
- Bagaimana untuk melaksanakan log masuk kod imbasan WeChat dalam PHP
- Apakah yang berlaku apabila halaman alu-aluan laravel tidak dipaparkan semasa log masuk ke tapak web?
- Bagaimana untuk melaksanakan log masuk PHP tanpa menggunakan pangkalan data