laravel实战项目之登录页面显示
本文目录
- 一、登录步骤
-
- 1.1 登录
- 1.2 检查是否登录
- 1.3 登录成功得到用户信息
- 二、登录页面显示
-
- 2.1 路由分层
- 2.2 引入定义好的路由文件
- 2.3 创建视图模版
- 2.4 创建控制器
- 2.5 修改登录模版及控制器方法
一、登录步骤
使用laravel提供一个登录方法auth()登录。
1.1 登录
登录：
auth() -> attempt([数组 账号和密码]); //返回true或false
1.2 检查是否登录
检查是否登录：
auth() -> check(); // 返回true或false
1.3 登录成功得到用户信息
登录成功得到用户信息：
auth() -> user(); // 用户模型
1、修改用户模型的父类：
namespace App\Models;
// use Illuminate\Database\Eloquent\Model;
// 继承可以使用 auth登录的模型类
use Illuminate\Foundation\Auth\User as AuthUser;
class User extends AuthUser
{
// 拒绝添加的字段
protected $guarded = [];
}
2、配置config/auth.php文件
二、登录页面显示
2.1 路由分层
路由分层：在routes文件夹中新建admin文件夹表示后台路由。
在admin文件夹下创建admin.php，写入如下代码：
// 后台路由
// 路由分组
Route::group(['prefix' => 'admin', 'namespace' => 'Admin'], function () {
// 登录显示
Route::get('login', 'LoginController@index') -> name('admin.login');
// 登录处理
Route::post('login','LoginController@login') -> name('admin.login');
});
2.2 引入定义好的路由文件
在web.php中写入如下代码引入：
// 引入定义好的后台路由文件 include base_path('routes/admin/admin.php');
2.3 创建视图模版
在resources/views文件夹下创建admin/login/login.blade.php：
我们在这使用的模版是H-ui.admin这个模版网上一大堆，可以自行去下载。
我们在public文件夹下创建admin文件夹，把static和lib文件夹拷贝过去：
接着将下载下来的login.html 中所有内容复制到admin/login/login.blade.php中
2.4 创建控制器
php artisan make:controller Admin/LoginController
写入方法：
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class LoginController extends Controller
{
// 登录显示
public function index () {
// 指定视图的模版
return view('admin.login.login');
}
}
效果：
2.5 修改登录模版及控制器方法
1、修改登录模版中action地址：
增加隐藏域：
@csrf：
修改input name：
2、增加登录方法（post）：
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class LoginController extends Controller
{
// 登录显示
public function index () {
// 指定视图的模版
return view('admin.login.login');
}
// 登录 别名 admin.login 根据别名生成url route(别名)；
public function login(Request $request) {
// 表单验证
$post = $this->validate($request, [
'username' => 'required',
'password' => 'required'
]);
dump($post);
dump($request -> all());
}
}
接下来我们去输入错误的账号和密码发现页面还是在login，我们去输入正确的账号和密码，效果如下：
接下来如果用户输入错误的账号或密码的话我们要有提示框，我们去到H-ui.admin官网警告组件如下：
就可以参照里面的代码，复制到login.blade.php中：
增加代码：
<!-- 验证错误信息提示 -->
@if($errors->any())
<div class="Huialert Huialert-error"><i class="Hui-iconfont">
@foreach($errors->all() as $error)
<li>{
{
$error}}</li>
@endforeach
</div>
@endif
当我们空白点击效果如下：
我们还可以自定义去设置提醒如下：
在表单验证这块：
加入如下代码：
// 表单验证
$post = $this->validate($request, [
'username' => 'required',
'password' => 'required'
], [
'username.required' => '没账号还想登录？你以为你是超人？'
]);
效果：
tips：由于这部分验证比较经常用，我们可以独立出来做成公共的，以方便后续模版包含使用，在resources\views\admin文件夹下新建文件夹common文件夹：
新建文件：
validate.blade.php将验证的代码转移过来：
在login.blade.php中引入表单验证：
效果还是跟之前一样：
最后给出本篇login.blade.php代码：
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
<link href="static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css" />
<title>后台登录 - H-ui.admin v3.1title>
head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value="" />
<div class="header">div>
<div class="loginWraper">
<div id="loginform" class="loginBox">
@include('admin.common.validate')
<form class="form form-horizontal" action="{
{route('admin.login')}}" method="post">
@csrf
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont">i>label>
<div class="formContr ols col-xs-8">
<input id="" name="username" type="text" placeholder="账户" class="input-text size-L">
div>
div>
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont">i>label>
<div class="formControls col-xs-8">
<input id="" name="password" type="password" placeholder="密码" class="input-text size-L">
div>
div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<label for="online">
<input type="checkbox" name="online" id="online" value="">
使我保持登录状态label>
div>
div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<button type="submit" class="btn btn-success radius size-L"> 登 录 button>
<button type="reset" class="btn btn-default radius size-L"> 取 消 button>
div>
div>
form>
div>
div>
<div class="footer">Copyright 你的公司名称 by H-ui.admin v3.1div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js">script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js">script>
body>
html>
在学习的php的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。