Laravel 上手教程之实现用户注册和登陆

时间 2021-02-16

标签 php css html 前端 mysql laravel git github web sql 栏目 PHP 繁體版

原文原文链接

Laravel身为最优雅的PHP框架，不少学习PHP的小伙伴造就对Laravel垂涎欲滴。今天就来实现你的愿望，让咱们一块儿从零开始，利用Laravel实现Web应用最多见的注册和登陆功能！全部的课程源码已放在Github上：laravel-start. Race Start !php

首先咱们来明确一下咱们这个课程须要的东西：css

Laravel 4.2
Bootstrap 3.3

Laravel就是咱们关心的核心部分，Bootstrap用来快速设置一些前端的CSS样式。html

1.安装Laravel

简单说明以后咱们来进入下一步，安装Laravel，在这咱们是经过Composer来安装，打开命令行终端，执行：前端

cd Sites

Sites就是web应用的根目录，你能够根据须要换成你本身的根目录，而后再执行：mysql

composer create-project laravel/laravel laravel

laravel就是你的应用目录名，你能够取一个你喜欢的名字。执行上面的命令以后，等一段时间（毕竟在国内，网速是个大坑）,安装完之后你会获得这一堆目录：laravel

咱们主要操做models和 controllers和 views这三个目录：这就是MVC的构成啊！git

2.安装Bootstrap

而后再命令行执行：github

cd laravel/public/packages

这里的laravel与上面的应用目录对应，若是你在安装的时候用了其余的名字，请对应换上。来到packages这个目录后安装Bootstrap，直接在命令行执行：web

bower install bootstrap

这个比较快，而后等这个下载完以后你就会获得最新的稳定版Bootstrap。在目录packages目录下的 bower_components/bootstrap/dist/这里就包含了Bootstrap的css,js,fonts这三个咱们在开发过程当中常常用到的样式文件，js和字体文件。成功后你将看到这个：sql

注：这里使用的bower这个工具，它负责管理一些前端的包。

到这里，咱们的前期工做已经准备好了。不过在进入下一步以前，咱们得先确保咱们的laravel/app/storage目录有相应的写入权限，因此回到laravel目录，若是你在安装完bower以后没动过命令行，能够直接经过：

cd ../../

回到laravel目录，而后在执行：

chmod -R 755 app/storage

这一步搞定以后咱们就能够进入真正的开发阶段了。

3.配置数据库并建表：

在开始配置以前，咱们要为咱们的laravel应用建立一个数据库，我将它命名为laravel-start,

而后在编辑器中打开app/config/database.php文件，对相应的数据库配置项填入，如：

'default' => 'mysql',

// 数据库链接

'connections' => array(

    'mysql' => array(
        'driver'    => 'mysql',
        'host'      => '127.0.0.1',
        'database'  => 'laravel-start',
        'username'  => 'root',
        'password'  => '',
        'charset'   => 'utf8',
        'collation' => 'utf8_unicode_ci',
        'prefix'    => '',
    ),

链接完数据库以后，还得建立一个Users表，你能够直接在数据库中建立Users表，也能够利用Laravel的artisan来建立，这里咱们使用Laravel的artisan来建表，顺道了解一点点关于Laravel migrate的知识。执行下面语句：

php artisan migrate:make create-users-table

以上命令会建立一个migrate文件（文件位于app/database/migrations目录下），这个文件的名字就是create-users-table，而后咱们能够经过编辑刚刚生成的migrate文件来建立Users表。

public function up() {
       Schema::create('users', function($table){
        $table->increments('id');
        $table->string('username', 20);
        $table->string('email', 100)->unique();
        $table->string('password', 64);
        $table->string('remember_token',62)->default('default');
        $table->timestamps();
        });
}

上面的方法使用了laravel的Schema Builder类，上面这段代码使用up()方法的建立一个users表，这个表里有5个字段：id自增，username长度20之内，email长度100之内而且是惟一的，password长度64之内，remember_token是为了在登陆的时候更方便实用，Laravel会自动将token值填充进来，但在最开始你必须设一个默认值,timestamp当前的时间戳。在这咱们须要注意的一点是：最好在down()加上下面的代码，以防某天咱们须要删除Users这个表。

public function down()
{
    Schema::drop('users');
}

上面的都作好之后，执行一下下面这一句神奇的命令：

php artisan migrate

有图有真相：

终于，咱们的前奏搞完了，能够正式来鲁Laravel了。

4.启动服务来试试

直接在laravel目录执行：

php artisan serve

打开浏览器，输入localhost:8000，回车，Bingo！
OK，先给本身三十秒的掌声时间，若是你顺利地走到了这一步的话。恭喜你，你已经进入Laravel的大门，更多惊喜咱们再一一道来.....

5.建立公用视图

好了，咱们如今开始了，首先在app/views/文件夹下建立一个layouts文件夹，再再这个文件夹下新建一个php文件，命名为main.blade.php,在这个文件里写上下面这些代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现Laravel 4之美</title>
    </head>

    <body>

    </body>
</html>

PS:layouts文件夹一般用来存放视图文件的功用部分，好比一些网页的头部<header>和尾部<footer>,这里就是存放了头部<header>部分

感受main.blade.php的名字很奇怪？不用担忧，Laravel的视图文件命名遵循filename.blade.php的规则，由于Laravel是用Blade这个模板引擎解析的，你不用深究，就照着上面的名字规则来命名视图文件就OK

为视图文件添加CSS样式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现Laravel 4之美</title>
       {{HTML::style('packages/bower_components/bootstrap/dist/css/bootstrap.min.css') }}
        {{ HTML::style('css/main.css')}}

    </head>

    <body>

    </body>
</html>

没错，就是在原来的main.blade.php的基础上添加两行代码；而后咱们来建立咱们的main.css,这个主要是用来放咱们本身定义的样式。在public文件夹下建立css文件夹，在css文件夹建立main.css文件，大功告成。

添加导航栏。在main.blade.php文件的<body>标签中加上如下代码：

<body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">

                    <a class="navbar-brand hidden-sm" href="/">Laravel新手上路</a>
                </div>


                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li>{{ HTML::link('users/register', '注册') }}</li>
                    <li>{{ HTML::link('users/login', '登录') }}</li>
                </ul>

            </div>
        </div>
</body>

上面只是引用了一些简单的Bootstrap的class，也没什么难的，不用伤心。

到这里基本的功用部分就结束了，可是咱们的追求从不会这么low，因此为了更好地与用户交互，咱们但愿在用户进行某个操做以后给出一些反馈，好比注册成功的时候说:少年，你已成功注册本站，恭喜恭喜。等，因而乎，咱们再为main.blade.php添加一点点代码：

<div class="container">
            @if(Session::has('message'))
            <p class="alert">{{ Session::get('message') }}</p>
            @endif
        </div>

为了现实这些反馈信息给用户，咱们得使用Session::get('message')方法，固然，咱们得首先从逻辑上判断一下这个message是否存在，因此这里用了一个简单的if判断。

在blade引擎的视图中if 的使用格式是

@if(conditions) 

#code...

@endif

到这里就结束了么？NO，若是到这里就结束的话，其余的视图文件是怎么插入main.blade.php的<body></body>之间的呢？因此，不要忘了还有一个重要的事：{{ $content }},因而乎，上面的代码就变成了这样：

<div class="container">
        @if(Session::has('message'))
        <p class="alert">{{ Session::get('message') }}</p>
        @endif
        {{ $content }}
        </div>

{{ $content }}在这里就是表示其余的视图文件内容，你能够在理解上将其余的视图看成一个字符串来理解，只不过这个字符串很长，并且刚好包含了HTML标签而已。下面你将体会到这种想法。

建立完咱们的公用视图main.blade.php后，咱们先来为main.css添加咱们的CSS样式：

body {
     padding-top: 60px;
 } 
.form-signup, .form-signin {
     margin: 0 auto;
 }

由于咱们在main.blade.php文件中使用了<div class="navbar navbar-inverse navbar-fixed-top">，Bootstrap的navbar高为40px，因此我将body样式设为padding-top: 60px;避免下面的注册表单被navbar覆盖。

终于要进入正题

我擦，前面搞这么久才进入正题？对的，我说的是从这里开始咱们就开始进入Laravel的Controller世界了，别高潮那么快，更好的事情还在后头。

6.建立UsersController

来到app/controllers文件夹，并在这里建立UsersController.php文件并加入下面的代码:

<?php 
class UsersController extends BaseController {

}
?>

而后告诉咱们的UsersController咱们要使用main.blade.php做为咱们的layouts，因此：

<?php 
class UsersController extends BaseController {
    protected $layout = "layouts.main";
}
?>

这里使用了路径别名，你不用layouts/main.blade.php,你只须要layouts.main，Laravel会自动帮你找到layouts下相应的文件。

7.实现注册

接着为咱们的UsersController添加用户注册时访问到的方法：

public function getRegister() {
    $this->layout->content = View::make('users.register');
}

这里咱们将content制定为users/register.blade.php文件（咱们等下会建立这个文件），若是你够细心的话，你可能就注意到了：这里的content就是上面咱们在main.blade.php写的{{ $content }}，也就是说等下渲染视图的时候，咱们的users/register.blade.php文件会替换掉main.blade.php的{{ $content }}进行显示。如今，清晰了没？还不清晰？随时联系我....若是你不嫌我长得丑的话。

天然而然的，咱们如今要作的就是建立users/register.blade.php这个文件了，来到views文件夹，建立一个新的文件夹users/,再在里面新建register.blade.php，写上下面这些内容：

{{ Form::open(array('url'=>'users/create', 'class'=>'form-signup')) }}
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">欢迎注册</h3>
                </div>
                <div class="panel-body">
                {{ Form::open(array('url'=>'users/create', 'class'=>'form-signup')) }}


                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>

                    <fieldset>
                        <div class="form-group">
                            {{ Form::text('username', null, array('class'=>'form-control', 'placeholder'=>'用户名')) }}
                        </div>
                        <div class="form-group">
                        {{ Form::text('email', null, array('class'=>'form-control', 'placeholder'=>'邮箱')) }}
                       </div>
                        <div class="form-group">
                        {{ Form::text('password', null,array('class'=>'form-control', 'placeholder'=>'密码')) }} 
                        </div>                       
                        <div class="form-group">
                        {{ Form::text('password_confirmation', null,array('class'=>'form-control', 'placeholder'=>'确认密码')) }}
                       </div>
                        {{ Form::submit('立刻注册',array('class'=>'btn btn-large btn-success btn-block')) }}
                    </fieldset>
                {{ Form::close() }}

                </div>
            </div>
        </div>
    </div>
</div>

这里咱们使用了Laravel的Form类来建立咱们的注册表单，首先调用open()方法，表示建立表单的开始，而且咱们也为其经过数组的形式传人一些参数，url表示表到提交的地址，class就是表示CSS样式的类。接下来咱们使用了：

@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach

@foreach循环将每一个表单的错误信息输出。由于咱们在让用户注册的时候老是要验证一下用户输入的数据是否知足咱们设定的规则，好比邮箱这一栏咱们规定它必须为正确的邮箱形式，而若是用户没有输入正确的邮箱格式，咱们就会返回错误信息给用户看。That's it.

再下来须要说明的就是几个Form输入框的建立方式了：

{{ Form::text() }} //建立type=text 输入框
{{ Form::password() }}//建立type=password 输入框
{{ Form::submit() }}//建立type=submit 输入框

各个输入框的值咱们都设为null，由于咱们用placeholder来更好的替代了，第三个参数是你能够经过一个数组来传人相应的HTML选项来实现咱们的布局，好比上面的array('class'=>'form-control', 'placeholder'=>'确认密码')等。

最后别忘咱们要用{{ Form::close() }}来结束表单。

到这里咱们就把注册页面搞定了，紧接下来就是正确地设置好咱们的路由以使咱们能正确访问到咱们的getRegister()方法。因而，带着神圣的使命感，咱们打开app/routes.php这个文件，首先能够将里面的：

Route::get('/', function()
{
    return View::make('hello');
});

这几行代码干掉（你能够注视掉或者直接删了，建议是注释），而后再添上下面这一行代码；

Route::controller('users', 'UsersController');

注意到第一个参数users没，这个告诉就是说咱们在访问UsersController的方法的时候咱们遵循下面这个格式：

/users/actionName

好比咱们想访问UsersController的getRegister()，咱们能够在浏览器地址栏输入的格式是：

/users/register

因而，打开你的浏览器，在地址栏输入：

http://localhost:8000/users/register

见证奇迹吧。是否是很爽！哈哈哈。

若是如今你在这个注册表单添上相应的注册信息，而后点击注册的话，你会获得一个意外的错误:NotFoundHttpException!那是由于咱们尚未为注册表单写提交地址:users/create。因此咱们天然要来到UsersController中，为其添上postCreate():

public function postCreate() {

}

这样咱们就把地址users/create正确地搞定了，只是咱们尚未为其添加相应的条件判断语句，由于咱们首先要在这里说明一点就是：getRegister()和postCreate()的不一样，没错前面的get或post就是表明http的提交方式，咱们在注册表单中使用的是post方法，因此这里要使用postCreate()。

说明上面的细节以后，咱们还要作一件很是重要的事：表单验证。便是先在用户提交表单的时候验证其输入数据的合法性，以便于咱们在数据库中能存储正确的数据，这里就联系到前面的：

@foreach($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach

这里的$error就是咱们在用户输入数据不合法的时候返回给用户的错误提示信息。因此，咱们如今app/models/User.php中添加咱们的表单验证规则(我通常将验证规则放在模型modal中)：

public static $rules = array(
    'username'=>'required|alpha|min:2',
    'email'=>'required|email|unique:users',
    'password'=>'required|alpha_num|between:6,12|confirmed',
    'password_confirmation'=>'required|alpha_num|between:6,12'
    );

说明一下上面的一些规则表示什么意思:

required:必填的，不能为空
alpha:字母
email:邮件格式
unique:users:惟一，参考users表的设置
alpha_num:字母或数字
between:长度位于哪两个数字之间
confirmed:须要确认的

在咱们有了验证规则，咱们再来完善咱们的postCreate()，即为其添加一些条件判断使用户在注册时能够保存用户的注册信息和进一步引导用户到登录页面：

咱们来一步一步地理清思路：首先判断用户提交的数据是否经过了验证

public function postCreate() {
    $validator = Validator::make(Input::all(), User::$rules);

    if ($validator->passes()) {
        // 验证经过就存储用户数据
    } else {
        // 验证没经过就显示错误提示信息    
    }
}
}

上面咱们经过Input::all()来获取表单传过来的值，又调用User::$rules来得到验证规则，最后经过把这两个以参数的形式传入Validator::make()实现验证，下面的判断语句就很清晰了，验证经过后干吗，没经过又该干吗。思路清晰就OK。

接着咱们再来完善咱们的postCreate()代码：

if ($validator->passes()) {
    $user = new User;//实例化User对象
    $user->username = Input::get('username');
    $user->email = Input::get('email');
    $user->password = Hash::make(Input::get('password'));
    $user->save();

    return Redirect::to('users/login')->with('message', '欢迎注册，好好玩耍!');
} else {
    // 验证没经过就显示错误提示信息      
}

上面的咱们经过Input::get('fieldName')来得到相应的表单输入框的值，这里须要注意的是咱们对密码进行了加密，由于咱们都是棒棒的工程师，不会像以前的CSDN同样保存明文密码的，因此在密码这一栏咱们使用Hash::make()来加密传入的密码。而后咱们经过$user->save()来将咱们的数据保存到数据库中。数据保存以后，咱们用Redirect::to()将页面跳转到users/login,并经过width将注册成功的信息返回给用户。

Redirect::to()的参数规则是:controller/action。前面是控制起，后面就是具体的方法名。

上面是验证经过的状况，如今咱们看看验证没有经过的状况：

if ($validator->passes()) {
    $user = new User;//实例化User对象
    $user->username = Input::get('username');
    $user->email = Input::get('email');
    $user->password = Hash::make(Input::get('password'));
    $user->save();

    return Redirect::to('users/login')->with('message', '欢迎注册，好好玩耍!');
} else {
    return Redirect::to('users/register')->with('message', '请您正确填写下列数据')->withErrors($validator)->withInput();    
}

这里若是用户没有经过验证，我让其重定向到注册页，并经过withErrors($validator)将错误信息传到注册页面，经过withInput()将没有输错的数据也传给注册页面（正确来讲是传给register方法，不过你能够根据上面那样理解，我的以为也还OK），这样一来，咱们就有了错误信息和一些正确的表单信息（不用用户屡次输入），以提升整个过程的用户体验。

再进一步，咱们在开发的时候永远不要忘记一件很重要的事：安全。那么在这里咱们须要POST提交表单，咱们就要保证它不会被CSRF攻击，解决这个问题咱们须要在UsersController里添加下面的代码：

public function __construct() {
    $this->beforeFilter('csrf', array('on'=>'post'));
}

构造方法请放在其余方法前面。

8.实现登陆

接下来的一步就是建立login的视图文件了，咱们依旧来到咱们最熟悉的views/users/下，新建文件名为login.blade.php的文件，在里面放上如下的代码：

<div class="container">
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">欢迎登陆</h3>
            </div>
            <div class="panel-body">
                {{ Form::open(array('url'=>'users/signin', 'class'=>'form-signin')) }}
                <fieldset>
                    <div class="form-group">
                     {{ Form::text('email', null, array('class'=>'form-control', 'placeholder'=>'邮箱')) }}
                    </div>
                    <div class="form-group">
                     {{ Form::password('password', array('class'=>'form-control', 'placeholder'=>'密码')) }} 
                    </div>
                     {{ Form::submit('立刻登陆',array('class'=>'btn btn-large btn-success btn-block')) }}

                </fieldset>
                {{ Form::close() }}
                  <hr/>
            </div>
        </div>
    </div>
</div>
</div>

这里的一些要点跟register.blade.php同样，你不明白的话能够看看前面的。而后咱们须要在UsersController里面定义getLogin()方法：

public function getLogin() {
    $this->layout->content = View::make('users.login');
}

这里也是指定了content的模版为users/login.blade.php，道理跟前面同样。
这时候咱们就能够注册新用户了，若是你的浏览器还保留在http://localhost:8000/users/register你能够试着输入你的用户名，邮箱，密码来注册一个，固然你也能够故意输错，看看会有什么信息返回给你。enjoy！

正常状况下，你注册完以后就吼跳到登陆界面（已经写好了），可是咱们在登陆的时候也须要验证，若是你仔细看上面的login.blade.php的话，你会发现咱们在这里将用户的登陆表单提交地址设置为
'url'=>'users/signin'，因此接下来的一步就是为UsersController补充postSignin()方法：

public function postSignin() {
    if (Auth::attempt(array('email'=>Input::get('email'), 'password'=>Input::get('password')))) {
        return Redirect::to('users/dashboard')->with('message', '欢迎登陆');
    } else {
        return Redirect::to('users/login')->with('message', '用户名或密码错误')->withInput();
    }
}

这里咱们使用Auth类来验证用户输入的信息是否和数据库的信息一致，若是验证经过，那么咱们就将用户重定向到users/dashboard，若是没经过，就从新跳回登陆页，状况跟注册时候几乎如出一辙，我相信你看得懂。

既然是重定向到users/dashboard那么咱们就来写写getDashboard()方法，到这里可能不用我说你都知道应该在UsersController添加下面的代码：

public function getDashboard() {
    $this->layout->content = View::make('users.dashboard');
}

这里再多说一句，这个Dashboard的页面通常是在登陆后才能看到的，为了限制一些没登陆的人处处乱逛，咱们只须要在UsersController中的构造函数加一行代码，变成这样的：

public function __construct() {
    $this->beforeFilter('csrf', array('on'=>'post'));
    $this->beforeFilter('auth', array('only'=>array('getDashboard')));
}

如今逻辑是否是很清晰，咱们接下来的一步天然是建立dashboard.blade.php文件了，这个从getDashboard()看出咱们依然是将这个视图文件存在views/users/目录下，咱们就简单地在dashboard.blade.php写上几行入门级的HTML：

<div class="welcome">
    <center>
    <a href="http://www.jellybool.com" target="_blank">
<img src="https://wt-prj.oss.aliyuncs.com/766e22da1e8c467a8af35d90c9185409/7680dd9d-c0e4-42ea-86b8-ddd63d07faa6.png" >
</a>
    </center>
    <center><h1>欢迎来到管理面板！</h1></center>
</div>

写到这里咱们还不能登陆，由于在Laravel中auth过滤(filter)会默认将没登陆的用户重定向到/login,但咱们须要的是重定向到users/login，因此咱们须要自定义咱们的filter规则,打开app/filter.php，在代码的开始加上下面的代码：

Route::filter('auth', function()
{
    if (Auth::guest()) return Redirect::guest('users/login');
});

到这里就大功告成了，若是你以前注册了一个用户，请用你的邮箱和密码到

http://localhost:8000/users/login

尝试登陆一下，你会发现：Bingo！！！登陆进去了！

9.实现退出

可是细心的你发现了没，咱们还有一个须要完善的地方.....没错！就是咱们的导航，咱们已经登陆进去了，它仍是显示登陆和注册，不科学啊！因此回到最初咱们的main.blade.php在连接部分咱们将它改成：

<ul class="nav navbar-nav navbar-right hidden-sm">
          @if(!Auth::check())
               <li>{{ HTML::link('users/register', '注册') }}</li>
               <li>{{ HTML::link('users/login', '登录') }}</li>

            @else
            <li>{{ HTML::link('users/logout', '退出') }}</li>
            @endif
            </ul>

没错，咱们为导航这里加入了条件判断语句，若是用户没有经过Auth::check(),也就是没有登陆的话，咱们显示登陆和注册，若是登陆了就显示退出，

既然有了users/logout这个连接，那么咱们就会想到在UsersController写这个getLogout()方法，并且这个方法是负责清理用户的登陆信息的，因此：

public function getLogout() {

        if(Auth::check())
        { 
            Auth::logout();
        } 
    return Redirect::to('users/login')->with('message','你如今已经退出登陆了!'); 

    }

这里咱们Auth::logout()将用户的登陆信息（主要就是session信息）清除掉，而后再将用户重定向到登陆界面。

10.最后的最后

这个小教程写到这里就基本结束了，但愿各位玩的愉快。最后多说一句：编程是咱们最容易学习的超能力，永远要相信本身能够改变世界！

Thank You all.