本文操作环境：Windows7系统，PHP7.1版，Dell G3电脑。
Vue + PHP 做用户注册登录功能
对于一款应用来说，最基本的就是用户的注册和登录功能，这篇博客就总结一下在vue项目中如何使用PHP来做用户的注册和登录功能。
登录部分：
HTML
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<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
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
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 = '此邮箱已被注册,换个邮箱试试吧';
}
}
})
}
}
}
})})
登录后复制复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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怎么实现登陆的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是爱撒娇板栗最近收集整理的关于vue加php怎么实现登陆的全部内容，更多相关vue加php怎么实现登陆内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复