版本Laravel 7.1
这篇文章大一的时候写的了,现在回看有诸多不妥或错误之处,仅留作纪念,建议不要参考本文。
自定义登录注册页面
直接修改resources/views/auth下面的login.blade.php和register.blade.php诗最简单的方法。
但是前端给的注册登录是合并在一个页面内的,当然可以复制两份按照上面的步骤,但是考虑到日后维护,我想让注册和登录都指向同一个视图,以后修改就不用同时修改两份。
琢磨良久。
注册页面:
vendor/laravel/ui/auth-backend/RegistersUsers.php
public function showRegistrationForm()
{
return view('auth.register');
}
修改view函数的参数即可。
登录页面:
vendor/laravel/ui/auth-backend/AuthenticatesUsers.php
public function showLoginForm()
{
return view('auth');
}
修改view函数的参数即可。
直接修改vendor文件夹内的内容当然不是最好的办法,但我琢磨出来的办法就只有这个。
使用Ajax注册
这里只说注册,登录同理
csrf_token处理
由于laravel自带反csrf攻击,所以我们在post的时候应该传递我们页面的token值,通过csrf_token()函数获取。可作为表单数据传递(name:"_toekn"),也可以写入请求头。
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
如何接收并展示后台返回的错误信息
返回错误信息都是在验证阶段返回的,当用ajax时,验证器会返回json数据,我们只要接收数据就可以了。
验证器返回的json结构
{
"message":"The given data was invalid.",
"errors":{}
}
errors数组内是具体的错误,并且已经经过语言文件转换。
我们只需要输出errors中所有的错误给用户看就可以了
var res = jQuery.parseJSON(xhr.responseText);
$("#err").html("");
for(var key in res.errors){
$("#err").html($("#err").html()+res.errors[key]+"<br>")
}
注册成功如何跳转
laravel注册成功后并不返回json,所以在我们指定datatype:'json'
时,就算后端注册成功,我们也无法进入success,所以我们需要在error中继续判断后端成功注册的情况。
通过调用F12查看控制台XHR记录,可以看到当注册成功时,返回的HTTP状态码为201,所以我们只需要判断状态码是否为201即可。
if(xhr.status==201){
window.location.reload();
}
刷新页面后,由于是已经登录的状态,会自动重定向到home页面。
另外
- 页面过期时(即token值不匹配),后端返回419状态码。
- 已经登录时,后端返回200状态码。
完整Ajax代码
$("#regbtn").click(function(){
var name = $("#regname").val()
var email = $("#regemail").val()
var pwd = $("#regpassword").val()
var cfpwd = $("#password-confirm").val()
var flag
$("#err").html("loading..");
if(pwd!=cfpwd){
$("#err").html("两次输入的密码不一致!");
return false;
}
$.ajax({
type: 'POST',
url: '{{route('register')}}',
data: {"password_confirmation" : cfpwd, "password" : pwd, "email" : email, "name" : name, "_token" : "{{csrf_token()}}"},
dataType: 'json',
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
success: function(data){
window.location.replace("{{route('home')}}")
},
error: function(xhr, type, errorthrown){
if(xhr.status==419)
$("#err").html("页面过期!请刷新页面");
else if(xhr.status==201){
window.location.reload();
}
else if(xhr.status==200){
window.location.reload();
}
else{
var res = jQuery.parseJSON(xhr.responseText);
$("#err").html("");
for(var key in res.errors){
$("#err").html($("#err").html()+res.errors[key]+"<br>")
}
}
}
});
});
在Laravel中体会到了面向对象编程的小小弊端,就是不断找父类找到吐。