vue加php怎么实现登陆
php
vue
vue加php实现登录的方法：1、创建登录部分的代码文件；2、创建Javascript代码；3、在vue项目中使用PHP来做用户的注册和登录功能即可。
本文操作环境：Windows7系统，PHP7.1版，Dell G3电脑。
Vue + PHP 做用户注册登录功能
对于一款应用来说，最基本的就是用户的注册和登录功能，这篇博客就总结一下在vue项目中如何使用PHP来做用户的注册和登录功能。
登录部分：
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
<?php
session_start();
header('Content-Type:application/json; charset=utf-8');
$myid = $_POST[userid];
$mycode = md5($_POST[usercode]);
if($myid!=''&&$mycode!='')
{
$conn = new mysqli("localhost:3306", "root", "", "personal");
if ($conn != null)
{
$sql = "select * FROM user_login where user_id='$myid' or user_mail = '$myid' ";
$result =$conn->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
<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.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]+$/; //只能是数字和字母
if(this.usercode.length<9) //检测长度
{
this.errorFlag = 1;
this.errorMsg = '密码长度须在9-20个字符，只能由英文和数字组成';
result = 0;
}
else if(!testall.test(this.usercode)) //检测英文和数字
{
this.errorFlag = 1;
this.errorMsg = '密码只能使用英文+数字,且不能为纯数字';
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 = '密码不能为纯数字';
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 = '请填写全部的信息后获取验证码';
}
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);
//发送邮件
$.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 = '我们发送了一封邮件到你的邮箱，请尽快验证'
}
}
})
}
},
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 = '此邮箱已被注册,换个邮箱试试吧';
}
}
})
}
}
}
})})登录后复制
<?php
session_start();
header('Content-Type:application/json; charset=utf-8');
$myid = $_POST[userid];
$mycode = md5($_POST[usercode]);
$myname = $_POST[username];
$mymail = $_POST[usermail];
$gm = 'vchenzhecom';
$conn = new mysqli("47.106.190.129:3306", "root", "52F7cbad94f2", "personal");
$test = "SELECT * FROM user_login WHERE `user_id` = '$myid'";
$testResult = $conn->query($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);
?>登录后复制
推荐学习：《PHP视频教程》
以上是vue加php怎么实现登陆的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
vue怎么给按钮添加函数
Apr 08, 2025 am 08:51 AM
可以通过以下步骤为 Vue 按钮添加函数：将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。
PHP的未来：改编和创新
Apr 11, 2025 am 12:01 AM
PHP的未来将通过适应新技术趋势和引入创新特性来实现：1)适应云计算、容器化和微服务架构，支持Docker和Kubernetes；2)引入JIT编译器和枚举类型，提升性能和数据处理效率；3)持续优化性能和推广最佳实践。
vue函数怎么传参数
Apr 08, 2025 am 07:36 AM
向 Vue.js 函数传递参数有两种主要方法：使用插槽传递数据或使用 bind 绑定函数，并提供参数：使用插槽传递参数：在组件模板中传递数据，在组件内访问并用作函数的参数。使用 bind 绑定传递参数：在 Vue.js 实例中绑定函数，并提供函数参数。
vue怎么a标签跳转
Apr 08, 2025 am 09:24 AM
实现 Vue 中 a 标签跳转的方法包括：HTML 模板中使用 a 标签指定 href 属性。使用 Vue 路由的 router-link 组件。使用 JavaScript 的 this.$router.push() 方法。可通过 query 参数传递参数，并在 router 选项中配置路由以进行动态跳转。
vue的div怎么跳转
Apr 08, 2025 am 09:18 AM
Vue 中 div 元素跳转的方法有两种：使用 Vue Router，添加 router-link 组件。添加 @click 事件监听器，调用 this.$router.push() 方法跳转。
PHP与Python：了解差异
Apr 11, 2025 am 12:15 AM
PHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。
PHP的当前状态：查看网络开发趋势
Apr 13, 2025 am 12:20 AM
PHP在现代Web开发中仍然重要，尤其在内容管理和电子商务平台。1)PHP拥有丰富的生态系统和强大框架支持，如Laravel和Symfony。2)性能优化可通过OPcache和Nginx实现。3)PHP8.0引入JIT编译器，提升性能。4)云原生应用通过Docker和Kubernetes部署，提高灵活性和可扩展性。
PHP和Python：比较两种流行的编程语言
Apr 14, 2025 am 12:13 AM
PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。
