laravel 5.5登入註冊重構

阿新 • • 發佈：2019-01-03

高爾基曾說過：我撲在書籍上，像飢餓的人撲在麵包上一樣。雖然我沒有到達那個地步，但是我還是會向蝸牛一樣向著陽光慢慢挪動，滿懷希望！

最近通過學習laravel找到了一些學習方法，可以說是自己的正能量，就是每天晚上下班之後，回到宿舍（宿舍之所以稱之為宿舍，因為它再好也不如家裡好^_^），看看新知識。然後第二天去公司，敲一敲，練一練。艾老師（艾賓浩斯）說過，人過了八到九個小時之後，記憶的知識大概只有開始記憶的時候的35%，但是我覺得應該是50%，為什麼這麼說呢，因為我學的是新知識，之前沒有了解過的，並帶著100%的希冀在學習，所以記起來也會深刻一些。切記，每天晚上不要學習太多知識，不然腦子會瓦特掉的，我每天也就學習一個小時，看一下視訊（因為本人不怎麼喜歡看書，但是最近也在看關於Python的書籍，形式所逼啊！

），然後將視訊的中的知識截圖發到QQ上，第二天在公司想不起來的時候看一下，效果還行，還有就是第二天想不起來的知識，我會在便籤中記錄，然後下午下班之前在看下（最近總想著開發管理自己知識短板的網站），這樣自己也會很有成就感，對成就感，可以每天把學到的東西，寫篇部落格，堅持更博（不太容易），這樣也會提升你對知識的渴望，俗話說得好，一個習慣的養成需要90天，我相信每天的努力，早晚有一天，你會變成你當初夢想的樣子！廢話說的有點多了，繼續我今天的主題：laravel的登入註冊重構！Fighting！

路由

//註冊頁面
Route::get('/register', '\App\Http\Controllers 
\RegisterController@index');
//註冊行為
Route::post('/register', '\App\Http\Controllers\RegisterController@register');
//登入頁面
Route::get('/login', '\App\Http\Controllers\LoginController@index');
//登入行為
Route::post('/login', '\App\Http\Controllers\LoginController@login');
//登出行為
Route::get('/logout', '\App\Http\Controllers 
\LoginController@logout');

使用 `artisan` 建立控制器

php artisan make:controller RegisterController  //使用者註冊控制器
php artisan make:controller LoginController     //使用者登入控制器

渲染使用者註冊頁面

class RegisterController extends Controller
{
    public function index()
    {
        //渲染註冊頁面
        return view('user.regist');
    }
}

建立 `user/regist.blade.php` 模板(基於boostrap的註冊頁面，有需要的可以帶走)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>註冊</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://v3.bootcss.com/examples/signin/signin.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container">

    <form class="form-signin" method="POST" action="/register">
        {{ csrf_field() }}
        <h2 class="form-signin-heading">請註冊</h2>
        <label for="name" class="sr-only">名字</label>
        <input type="text" name="name" id="name" class="form-control" placeholder="名字" required autofocus>
        <label for="inputEmail" class="sr-only">郵箱</label>
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="郵箱" required autofocus>
        <label for="inputPassword" class="sr-only">密碼</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="輸入密碼" required>
        <label class="sr-only">重複密碼</label>
        <input type="password" name="password_confirmation" class="form-control" placeholder="重複輸入密碼" required>

        <button class="btn btn-lg btn-primary btn-block" type="submit">註冊</button>
    </form>

</div>

</body>
</html>

渲染使用者登入頁面

class LoginController extends Controller
{
    public function index()
    {
        //渲染註冊頁面
        return view('user.login');
    }
}

建立 `user/login.blade.php` 模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>登陸</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://v3.bootcss.com/examples/signin/signin.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container">

    <form class="form-signin" method="POST" action="/login">
        {{ csrf_field() }}
        @include('layout.errors')
        <h2 class="form-signin-heading">請登入</h2>
        <label for="inputEmail" class="sr-only">郵箱</label>
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">密碼</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="1" name="is_remember"> 記住我
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登陸</button>
        <a href="/register" class="btn btn-lg btn-primary btn-block" type="submit">去註冊>></a>
    </form>

</div> <!-- /container -->

</body>
</html>

渲染效果圖

註冊頁面

這裡寫圖片描述

登入頁面

這裡寫圖片描述

下面開始我們的註冊行為

這裡寫圖片描述

路由地址雖然一樣，但是提交方式不一樣所以路由不衝突

在註冊的控制器中定義註冊的處理方法

public function register()
{
    //驗證

    //邏輯

    //渲染
}

表單提交三步驟

驗證
邏輯
渲染

首先在表單中加上{{ csrf_field() }}

這裡寫圖片描述

寫登錄檔單驗證邏輯

public function register()
{
    //驗證
    $this->validate(\request(),[
        //unique(驗證user表中是否存在使用者的名字)
        'name' => 'required|min:3|max:10|unique:user,name',
        //email屬性就是驗證是否符合email規則
        'email' => 'required|unique:user,email|email',
        //confirmed就是驗證密碼和確認密碼保持一致
        'password' => 'required|min:8|max:16|confirmed'
    ]);

    //邏輯
    $name = \request('name');
    $email = \request('email');
    $password = bcrypt(\request('password'));
    //這裡User(當然要在上面先引入)
    User::create(compact(['name', 'email', 'password']));

    //渲染(註冊成功跳轉至登入頁面)
    return view('user.login');
}

如果登入成功，跳轉至登入頁面，失敗，則展示失敗資訊，所以我們還需要在表單中定義失敗模板，因為不定義的話，頁面不會展示錯誤資訊，失敗之後只會重新整理當前頁面，容易讓人費解！

因為很多頁面要用到，所以我們不如定義一個錯誤資訊的模板 `errors.blade.php`

<div class="errors">
    @if (count($errors) > 0)
        <div class="box-body">
            <div class="alert alert-danger alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4><i class="icon fa fa-ban"></i>錯誤：</h4>
                @foreach($errors->all() as $error)
                    {{$error}}
                @endforeach
            </div>
        </div>
    @endif
</div>

然後在註冊摸板中引用 `@include('layout.errors')`

<form class="form-signin" method="POST" action="/register">
        {{ csrf_field() }}
        <h2 class="form-signin-heading">請註冊</h2>
        <label for="name" class="sr-only">名字</label>
        <input type="text" name="name" id="name" class="form-control" placeholder="名字" required autofocus>
        <label for="inputEmail" class="sr-only">郵箱</label>
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="郵箱" required autofocus>
        <label for="inputPassword" class="sr-only">密碼</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="輸入密碼" required>
        <label class="sr-only">重複密碼</label>
        <input type="password" name="password_confirmation" class="form-control" placeholder="重複輸入密碼" required>
        @include('layout.errors')
        <button class="btn btn-lg btn-primary btn-block" type="submit">註冊</button>
    </form>

這樣一個註冊功能就寫好了！

使用者登入

//登入頁面
Route::get('/login', '\App\Http\Controllers\LoginController@index');
//登入行為
Route::post('/login', '\App\Http\Controllers\LoginController@login');
//登出行為
Route::get('/logout', '\App\Http\Controllers\LoginController@logout');

登入邏輯 `登入成功跳轉至文章列表，失敗則返回剛才的頁面`

public function login()
{
    //驗證
    $this->validate(request(),[
        'email' => 'required|email',
        'password' => 'required',
        //是否記住密碼 
        'is_remember' => 'integer'
    ]);

    //邏輯
    $user = \request(['email', 'password']);
    $is_remember = \request('is_remember');
    if (\Auth::attempt($user, $is_remember)) {
        return redirect('/posts');
    }

    //渲染
    return \Redirect::back->withErrors('郵箱或密碼不正確');
}

登出行為

public function logout()
{
    //退出登入，並跳轉至登入頁面
    Auth::logout();
    return view('user.login');
}

laravel 5.5登入註冊重構

高爾基曾說過：我撲在書籍上，像飢餓的人撲在麵包上一樣。雖然我沒有到達那個地步，但是我還是會向蝸牛一樣向著陽光慢慢挪動，滿懷希望！

路由

使用 artisan 建立控制器

渲染使用者註冊頁面

建立 user/regist.blade.php 模板(基於boostrap的註冊頁面，有需要的可以帶走)

渲染使用者登入頁面

建立 user/login.blade.php 模板

渲染效果圖

註冊頁面

登入頁面

下面開始我們的註冊行為

在註冊的控制器中定義註冊的處理方法

表單提交三步驟

寫登錄檔單驗證邏輯

因為很多頁面要用到，所以我們不如定義一個錯誤資訊的模板 errors.blade.php

然後在註冊摸板中引用 @include('layout.errors')

使用者登入

登入邏輯 登入成功跳轉至文章列表，失敗則返回剛才的頁面

登出行為

重構就這樣寫好了，藉助Auth輕鬆實現laravel的重構~

相關推薦

使用 `artisan` 建立控制器

建立 `user/regist.blade.php` 模板(基於boostrap的註冊頁面，有需要的可以帶走)

建立 `user/login.blade.php` 模板

因為很多頁面要用到，所以我們不如定義一個錯誤資訊的模板 `errors.blade.php`

然後在註冊摸板中引用 `@include('layout.errors')`

登入邏輯 `登入成功跳轉至文章列表，失敗則返回剛才的頁面`