建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vue加php怎么實現(xiàn)登陸
本文操作環(huán)境：Windows7系統(tǒng)，php7.1版，Dell G3電腦。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、承德縣網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、承德縣網(wǎng)絡(luò)營銷、承德縣企業(yè)策劃、承德縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供承德縣建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
Vue + PHP 做用戶注冊登錄功能
對于一款應(yīng)用來說，最基本的就是用戶的注冊和登錄功能，這篇博客就總結(jié)一下在vue項目中如何使用PHP來做用戶的注冊和登錄功能。
登錄部分：
HTML
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
query($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);
}
?>
注冊部分
HTML
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,//檢測當前用戶名是否已經(jīng)注冊
testpass:false,//檢測密碼安全
testmail:false, //檢測郵箱是否被注冊過了
},
methods:{
testUserIdFunc(){ //檢測用戶名是否已經(jīng)注冊
var thisvue = this;
var testall = /^[a-zA-Z][a-zA-Z0-9]*$/; //只能是數(shù)字和字母
if(thisvue.userid=='')
{
thisvue.testUserId = false;
return 0;
}
else if(!testall.test(thisvue.userid)) //檢測英文和數(shù)字
{
this.errorFlag = 1;
this.errorMsg = '用戶名必須以英文開頭，且只能由英文和數(shù)字組成';
}
else if(thisvue.userid.length<9)
{
thisvue.errorFlag = 1;
thisvue.errorMsg = '用戶名長度須在9-16之間';
thisvue.testUserId = false;
return 0;
}
else{
$.ajax({
type:'POST',
url:'../server/testUserId.php',
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]+$/; //只能是數(shù)字和字母
if(this.usercode.length<9) //檢測長度
{
this.errorFlag = 1;
this.errorMsg = '密碼長度須在9-20個字符，只能由英文和數(shù)字組成';
result = 0;
}
else if(!testall.test(this.usercode)) //檢測英文和數(shù)字
{
this.errorFlag = 1;
this.errorMsg = '密碼只能使用英文+數(shù)字,且不能為純數(shù)字';
result = 0;
}
else if(this.usercode!=this.usercodes)
{
this.errorFlag = 1;
this.errorMsg = '兩次密碼輸入不一致';
result = 0;
}
/*else if(testenglish.test(this.usercode))
{
this.errorFlag = 1;
this.errorMsg = '密碼不能為純數(shù)字';
result = 0;
}*/
if(result==1)
{
this.errorFlag = 0;
this.testpass = 1;//如果密碼驗證成功，則通過
}
return result;
},
register(){
var thisvue = this;
if(thisvue.usermail==''||thisvue.code=='')
{
thisvue.errorMsg = '你還沒有進行郵箱驗證';
thisvue.errorFlag = 1;
}
else{
thisvue.verifyCode();
$.ajax({
url:'../server/register.php',
type:'POST',
data:$("#registerForm").serialize(),
success:function(res)
{
if(res.code==1)
{
window.location.href = 'indexmobile.html';
}
else{
thisvue.errorMsg = '注冊失敗';
thisvue.errorFlag = 1;
}
}
})
}
},
getCode(){ //獲取驗證碼
if(this.userid==''||this.username==''||this.usercode==''||this.usercodes==''||this.usermail=='')
{
this.errorFlag = 1;
this.errorMsg = '請?zhí)顚懭康男畔⒑螳@取驗證碼';
}
else if(this.usercode!=this.usercodes)
{
this.errorFlag = 1;
this.errorMsg = '兩次密碼輸入不一致';
}
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);
//發(fā)送郵件
$.ajax({
type:'POST',
url:'../server/mail/sendMail.php',
async:false,
data:{
address:thisvue.usermail },
success:function(res)
{
if(res.code==1)
{
thisvue.errorFlag = 1;
thisvue.errorMsg = '我們發(fā)送了一封郵件到你的郵箱，請盡快驗證'
}
}
})
}
},
verifyCode(){ //驗證驗證碼
var thisvue =this;
if(thisvue.code>100000&&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 = '此郵箱已被注冊,換個郵箱試試吧';
}
}
})
}
}
}
})})
query($test);
if(mysqli_num_rows($testResult)==0)
{
$path="/home/www/htdocs/carelesswhisper/src/img/".$myid; //判斷目錄存在否，存在給出提示，不存在則創(chuàng)建目錄
if (is_dir($path)){
$result = ['code'=>'1','msg'=>'覆蓋用戶目錄'];
}
else{//第三個參數(shù)是“true”表示能創(chuàng)建多級目錄，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);
?> 新聞標題：vue加php怎么實現(xiàn)登陸
網(wǎng)站路徑：http://www.dlmjj.cn/article/ccopgeh.html
