本文详述了如何在 Laravel 框架下实现用户注册、登录和退出功能。从创建视图文件、控制器、添加路由，到利用 AJAX 处理表单提交，以及使用 Laravel 内置的验证和会话管理，确保用户操作的安全和流畅。
文章目录
前言
前台用户管理模块包括用户登录、注册和退出功能。单击顶部导航石侧的 “登录”按钮，弹出登录表单模态框，在登录表单中输人用户名和密码，单击 “立刻登录”按钮，即可完成登永操作。如果不是连册用户，单击顶部导航右侧的 “注册”按钮，弹出注册表单模态框，在注册表单中，输人用户名、邮箱、密码和确认密码信息，单击“立即注册” 按钮，即可完成注册操作。下面实现前台用户的注册、登录和退出功能。
安装环境
1.Linux系统
可以直接使用下面这些命令
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
然后安装一下镜像
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
安装composer
composer global require laravel/installer
最后安装laravel
composer create-project laravel/laravel demo --prefer-dist
2.windows系统
也是先安装composer 此过程会比较慢
composer global require laravel/installer
安装好后在cmd执行命令创建test项目
laravel new test
然后通过composer create-project来创建laravel项目
composer create-project --prefer-dist laravel/laravel test 5.4.*
test是应用名称，同样也可以自定义；5.4.*是指定安装laravel5.4版本，若不加这个版本号，默认是安装laravel最新版本。
最后通过http://localhost/laravelapp/public来访问新安装的Laravel应用。
用户注册
1.创建header.dlade.php文件
具体代码如下
<div class="header">
<header>
<div class="container">
<a href="{{url(https://blog.csdn.net/"%3C/span%3E%3Cspan%20class=%22token%20operator%22%3E/%3C/span%3E%3Cspan%20class=%22token%20string%20double-quoted-string%22%3E")}}" style="color:#000000">
</a>
<ul class="header-right">
@if(session()->has('users.name'))
<li>
<a href="#" class="j-layout-pwd">
<i class="fa fa-user fa-fw"></i>{{ session()->get('users.name') }}
</a>
</li>
<li><a href="{{ url(https://blog.csdn.net/'logout') }}"><i class="fa fa-power-off fa-fw"></i>退出</a></li>
@else
<li><a href="#" data-toggle="modal" data-target="#loginModal">登录</a></li>
<li><a href="#" data-toggle="modal" data-target="#registerModal">注册</a></li>
@endif
</ul>
</div>
</header>
<!-- 栏目列表 -->
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container">
<div></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/index.php">首页</a>
</li>
@foreach($category as $v)
@if(isset($v['sub']))
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{$v['name']}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
@foreach($v['sub'] as $val)
<a class="dropdown-item" href="{{url(https://blog.csdn.net/'lists',%20['id'%20=>%20%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20variable%22%3E$val%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string%20single-quoted-string%22%3E'id'%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3C/span%3E])}}">{{$val['name']}}</a>
@endforeach
</div>
</li>
@else
<li class="nav-item">
<a class="nav-link" href="{{url(https://blog.csdn.net/'lists',%20['id'%20=>%20%3Cspan%20class=%22token%20interpolation%22%3E%3Cspan%20class=%22token%20variable%22%3E$v%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E[%3C/span%3E%3Cspan%20class=%22token%20string%20single-quoted-string%22%3E'id'%3C/span%3E%3Cspan%20class=%22token%20punctuation%22%3E]%3C/span%3E%3C/span%3E])}}">{{$v['name']}}</a>
</li>
@endif
@endforeach
</ul>
</div>
</div>
</nav>
</div>
<!-- 登录表单 --->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">登录</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" name="name" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" name="password" class="form-control" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary" id="login">登录
</button>
</div>
</div>
</div>
</div>
<!-- 注册表单 --->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">注册</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="username1">用户名</label>
<input type="text" name="name" class="form-control" id="username1">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" name="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="password1">密码</label>
<input type="password" name="password" class="form-control" id="password1">
</div>
<div class="form-group">
<label for="confirm">确认密码</label>
<input type="password" class="form-control" id="confirm">
</div>
</div>
<div class="modal-footer">
{{csrf_field()}}
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary" id="register">立即注册</button>
</div>
</div>
</div>
</div>
<script>
$("#login").bind("click", function() {
var data = {
'name': $("#username").val(),
'password': $("#password").val(),
'_token': "{{ csrf_token() }}"
};
$.post("{{ url(https://blog.csdn.net/'login') }}", data, function(result) {
if (result.status == 1) {
alert(result.msg);
window.location.reload();
} else {
alert(result.msg);
return;
}
});
});
$("#register").bind("click", function() {
var data = {
'name': $("#username1").val(),
'email': $("#email").val(),
'password': $("#password1").val(),
' password_confirmation': $("#confirm").val(),
'_token': "{{ csrf_token() }}"
};
$.post("{{ url(https://blog.csdn.net/'register') }}", data, function(result) {
if (result.status == 1) {
alert(result.msg);
$('#registerModal').modal('hide');
location.reload();
} else {
alert(result.msg);
return;
}
});
});
</script>
在登录和注册表单提交时，使用了jQuery的AJAX技术，将表单数据通过POST请求发送到后台处理。在登录和注册成功后，页面会刷新以更新用户状态。
具体来说，登录表单中有一个id为"loginModal"的模态框，包括用户名和密码的输入框以及"登录"和"关闭"按钮。当"登录"按钮被点击时，通过jQuery的$.post()方法将输入框中的数据以POST请求的方式发送到后台的"login"路由进行处理。处理成功后，如果返回的状态为1，就弹出一个提示框并刷新页面。如果返回的状态不为1，就弹出一个错误提示框。
注册表单的处理方式与登录表单类似，不同之处在于注册表单中多了一个确认密码的输入框，同时在发送请求时需要添加一个"_token"字段，用于防止CSRF攻击。
2.创建User控制器
具体命令如下
php artisan make:controller UserController
然后在控制器中添加register方法，用于提交用户的注册信息
具体代码如下
public function register(Request $request)
{
$rule = [
'name' => 'required|unique:users',
'email' => 'required|email',
'password' => 'required|min:6',
'password_confirmation' => 'required'
];
$message = [
'name.require' => '用户名不能为空',
'name.unique' => '用户名不能重复',
'email.require' => '邮箱不能为空',
'email.email' => '邮箱格式不符合规范',
'password.require' => '密码不能为空',
'password.min' => '密码最少为6位',
'password.confirmed' => '密码和确认密码不一致'
];
$validator = Validator::make($request->all(), $rule, $message);
if ($validator->fails()) {
foreach ($validator->getMessageBag()->toArray() as $v) {
$msg = $v[0];
}
return response()->json(['status' => '2', 'msg' => $msg]);
}
$re = User::create($request->all());
if ($re) {
Session::put('users', ['id' => $re->id, 'name' => $re->name]); // 注册成功后保存登录状态
return response()->json(['status' => '1', 'msg' => '注册成功']);
} else {
return response()->json(['status' => '2', 'msg' => '注册失败']);
}
}
使用表单验证和模型的create()方法进行处理。具体来说，该方法接收一个Request对象作为参数，其中包含了注册表单提交的数据。首先，使用rule和message数组定义了表单验证的规则和错误提示信息。然后，使用Validator::make()方法将提交的数据和验证规则进行比较，如果验证失败，则返回一个错误提示信息。如果验证成功，则调用User模型的create()方法，将数据插入到数据库中。如果插入成功，则使用Session::put()方法保存登录状态，并返回一个成功提示信息。如果插入失败，则返回一个失败提示信息。最后，使用response()->json()方法将结果以JSON格式返回给前端。
3.添加路由
在routes\web.php中添加路由
Route::post('/register', 'UserController@register');
最后通过浏览器访问，测试用户是否能注册
用户登录
1.在控制器中创建login方法
public function login(Request $request)
{
$rule = [
'name' => 'required|bail',
'password' => 'required|min:6'
];
$message = [
'name.required' => '用户名不能为空',
'password.required' => '密码不能为空',
'password.min' => '密码最少为6位'
];
$validator = Validator::make($request->all(), $rule, $message);
if ($validator->fails()) {
foreach ($validator->getMessageBag()->toArray() as $v) {
$msg = $v[0];
}
return response()->json(['status'=>'2', 'msg'=>$msg]);
}
$name = $request->get('name');
$password = $request->get('password');
$theUser = User::where('name', $name)->first();
if ($theUser) {
if ($password == $theUser->password) {
Session::put('users', ['id' => $theUser->id,'name' => $name]);
return response()->json(['status' => '1', 'msg' => '你已登录成功,欢迎光临!!!']);
} else {
return response()->json(['status' => '2', 'msg' => '很遗憾,密码错误!!!']);
}
} else {
return response()->json(['status' => '2', 'msg' => '用户不存在']);
}
}
使用 Laravel 的 Validator 类验证输入数据。如果验证失败，它会返回相应的错误消息和状态码。如果验证通过，它会检查用户是否存在于数据库中并且密码是否匹配。
注意 需要在控制器中代入session的命名空间
use Illuminate\Support\Facades\Session;
2.添加路由
具体代码如下
Route::post('/login', 'UserController@login');
用户退出
1.退出按钮添加链接
代码如下
<li><a href="{{ url(https://blog.csdn.net/'logout') }}"><i class="fa fa-power-off fa-fw"></i>退出</a></li>
2.创建logout方法
public function logout()
{
if (request()->session()->has('users')) {
request()->session()->pull('users', session('users'));
}
return redirect('/');
}
这个函数用于用户退出登录。它首先检查会话中是否存在用户信息，如果存在则将其删除。然后重定向到主页。
3.添加路由
Route::get('/admin/logout', 'Admin\UserController@logout');
最后通过浏览器访问，单击退出按钮，是否可以退出登录。
扫一扫
2906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
