首頁 > php教程 > PHP开发 > 主體

Laravel實現用戶註冊與登入

高洛峰
發布: 2016-12-27 10:43:53
原創
3522 人瀏覽過

Laravel身為最優雅的PHP框架,許多學習PHP的朋友造就對Laravel垂涎欲滴。今天就來實現你的願望,讓我們一起從零開始,利用Laravel實現Web應用最常見的註冊和登入功能!所有的課程源碼都放在Github上:laravel-start. Race Start !

首先我們來明確一下我們這個課程需要的東西:

Laravel 4.2
Bootstrap 3.3
Laravel就是我們關心的核心部分,Bootstrap用來快速設定一些前端的CSS樣式。

1.安裝Laravel

簡單說明之後我們來進入下一步,安裝Laravel,在這我們是透過Composer來安裝,打開命令列終端,執行:

cd Sites
登入後複製

Sites就是web應用的根目錄,你可以根據需要換成自己的根目錄,然後再執行:

composer create-project laravel/laravel laravel
登入後複製

laravel就是你的應用目錄名,你可以取一個你喜歡的名字。執行上面的指令之後,等一段時間(畢竟在國內,網速是個大坑),安裝完以後你會得到這一堆目錄:

Laravel實現用戶註冊與登入

我們主要操作models和controllers和views這三個目錄:這就是MVC的構成啊!

2.安裝Bootstrap

然後再命令列執行:

cd laravel/public/packages
登入後複製

這裡的laravel與上面的應用目錄對應,如果你在安裝的時候用了其他的名字,請對應換上。來到packages這個目錄後安裝Bootstrap,直接在命令列執行:

bower install bootstrap
登入後複製

這個比較快,然後等這個下載完之後你就會得到最新的穩定版Bootstrap。在目錄packages目錄下的 bower_components/bootstrap/dist/這裡就包含了Bootstrap的css,js,fonts這三個我們在開發過程中常用到的樣式文件,js和字體檔案。成功後你將會看到這個:

Laravel實現用戶註冊與登入

註:這裡使用的bower這個工具,它負責管理一些前端的套件。
到這裡,我們的前期工作已經準備好了。不過在進入下一步之前,我們得先確保我們的laravel/app/storage目錄有相應的寫入權限,所以回到laravel目錄,如果你在安裝完bower之後沒動過命令行,可以直接通過:

cd ../../
登入後複製

回到laravel目錄,然後在執行:

chmod -R 755 app/storage
登入後複製

這一步搞定之後我們就可以進入真正的開發階段了。

3.配置資料庫並建立表格:

在開始設定之前,我們要為我們的laravel應用程式建立一個資料庫,我將它命名為laravel-start,

Laravel實現用戶註冊與登入

然後在編輯器中開啟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實現用戶註冊與登入

終於,我們的前奏搞完了,可以正式來魯Laravel了。

4.啟動服務來試試

直接在laravel目錄執行:

php artisan serve
登入後複製

打開瀏覽器,輸入localhost:8000,回車,Bingo!
OK,先給自己三十秒的掌聲時間,如果你順利地走到了這一步的話。恭喜你,你已經進入Laravel的大門,更多驚喜我們再一一道來.....

5.創建公用視圖

好了,我们现在开始了,首先在app/views/文件夹下创建一个layouts文件夹,再再这个文件夹下新建一个php文件,命名为main.blade.php,在这个文件里写上下面这些代码:

<!DOCTYPE html>
<html>
    <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文件夹通常用来存放视图文件的功用部分,比如一些网页的头部

和尾部
,这里就是存放了头部
部分
感觉main.blade.php的名字很奇怪?不用担心,Laravel的视图文件命名遵循filename.blade.php的规则,因为Laravel是用Blade这个模板引擎解析的,你不用深究,就照着上面的名字规则来命名视图文件就OK

为视图文件添加CSS样式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现Laravel 4之美</title>
       {{HTML::style(&#39;packages/bower_components/bootstrap/dist/css/bootstrap.min.css&#39;) }}
        {{ HTML::style(&#39;css/main.css&#39;)}}
    </head>
    <body>
    </body>
</html>
登入後複製

没错,就是在原来的main.blade.php的基础上添加两行代码;然后我们来创建我们的main.css,这个主要是用来放我们自己定义的样式。在public文件夹下创建css文件夹,在css文件夹创建main.css文件,大功告成。

添加导航栏。在main.blade.php文件的标签中加上以下代码:

<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(&#39;users/register&#39;, &#39;注册&#39;) }}</li>
                    <li>{{ HTML::link(&#39;users/login&#39;, &#39;登陆&#39;) }}</li>
                </ul>
            </div>
        </div>
</body>
登入後複製

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

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

        <div class="container">
            @if(Session::has(&#39;message&#39;))
            <p class="alert">{{ Session::get(&#39;message&#39;) }}</p>
            @endif
        </div>
登入後複製

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

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

@if(conditions) 
#code...
@endif
登入後複製

到这里就结束了么?NO,如果到这里就结束的话,其他的视图文件是怎么插入main.blade.php的之间的呢?所以,不要忘了还有一个重要的事:{{ $content }},于是乎,上面的代码就变成了这样:

        <div class="container">
        @if(Session::has(&#39;message&#39;))
        <p class="alert">{{ Session::get(&#39;message&#39;) }}</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文件中使用了

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板