Laravel大型项目系列教程(一)
Laravel大型項目系列教程(一)
一、課程概述
1.課程介紹
本教程將使用Laravel完成一個多用戶的博客系統,大概會包含如下內容:
- 路由管理。
- 用戶管理,如用戶注冊、修改信息、鎖定用戶等。
- 文章管理,如發表文章、修改文章等。
- 標簽管理,文章會有一到多個標簽。
- 數據庫管理,如遷移、填充數據等。
- Web表單驗證。
- Blade模版引擎。
- 分頁處理。
- 安全處理。
- 單元測試。
- 部署到應用服務器Apache。
盡量保證每節教程完整并能運行,會在教程的最后附上這節教程的代碼下載地址。
Tip:教程中必要的知識點都會有一個超鏈接
- PHP 5.4+
- MySQL 5.1+
- Composer([中國鏡像](http://pkg.phpcomposer.com/))
三、Let's go!
1.新建一個Laravel項目
使用如下命令創建一個名為blog的Laravel項目:
創建完成之后進入到blog目錄,修改app/config/app.php中的timezone為PRC、locale為zh,然后在blog目錄下啟動它自帶的開發服務器:
$ php artisan serve Laravel development server started on http://localhost:8000打開瀏覽器輸入localhost:8000,如果頁面如下圖就說明項目搭建完成了:
2.安裝插件
在composer.json中增加:
"require-dev": {"way/generators": "~2.0" },運行composer update安裝,完成后在app/config/app.php的providers中增加
'Way\Generators\GeneratorsServiceProvider'運行php artisan是不是多了generate選項,它可以快速地幫我們創建想要的組件。
3.建立數據庫
把app/config/database.php中connections下的mysql改成你自己的配置:
'mysql' => array('driver' => 'mysql','host' => 'localhost','database' => 'blog','username' => 'root','password' => '','charset' => 'utf8','collation' => 'utf8_unicode_ci','prefix' => '', ),
需要在MySQL中先創建一個名為blog的數據庫
配置完成之后,創建users表的數據庫遷移文件:
$ php artisan migrate:make create_users_table --create=users我們會發現在app\database\migrations下多了一個*_create_users_table.php文件,在這個文件中修改:
Schema::create('users', function(Blueprint $table) {$table->increments('id');$table->string('email');$table->string('password');$table->string('nickname');$table->boolean('is_admin')->default(0);$table->boolean('block')->default(0);$table->timestamps(); });之后進行數據庫遷移
$ php artisan migrate你會驚訝地發現在數據庫中多了兩張表users和migrations,users表就是我們定義的表,migrations表記錄了遷移的信息。
4.創建User模型
數據庫遷移完成之后我們將使用Eloquent ORM,這是Laravel讓人著迷的重要原因之一。我們會發現在app\models下已經有一個User.php文件了,對其修改:
use Illuminate\Auth\UserInterface; use Illuminate\Auth\UserTrait;class User extends Eloquent implements UserInterface {use UserTrait;protected $table = 'users';protected $hidden = array('password', 'remember_token'); }5.填充數據
有了User模型后,我們就可以向數據庫填充數據了,在app/database/seeds下創建一個名為UsersSeeder.php的文件,增加如下:
class UsersSeeder extends Seeder {public function run(){User::create(['email' => 'admin@shiyanlou.com','password' => Hash::make(''),'nickname' => 'admin','is_admin' => 1,]);} }然后在DatabaseSeeder.php中增加:
$this->call('UserTableSeeder');之后就真正地向數據庫填充數據:
$ php artisan db:seed你可以查看數據庫,會發現users表中多了一條記錄。
詳情可以查看Laravel中數據庫的遷移和填充
6.創建視圖模版
我們將使用Laravel中的Blade模版引擎,使用下面命令創建三個視圖:
php artisan generate:view _layouts.default php artisan generate:view _layouts.nav php artisan generate:view _layouts.footer php artisan generate:view index之后你可以在app/views下發現多了一個index.blade.php和一個_layouts文件夾,在_layouts文件夾下有三個文件default.blade.php、footer.blade.php和nav.blade.php。我們將使用AmazeUI框架來做為前端框架,修改default.blade.php:
URL::asset('i/favicon.ico')會生成http://localhost:8000/i/favicon.ico,HTML::style('css/custom.css')會生成<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">,其中的i和css文件夾是放在public目錄下的,public目錄是項目的資源文件夾。@include('_layouts.nav')會包含app/views/_layouts/nav.blade.php文件,@yield('main')是用于模版繼承的。
修改nav.blade.php
修改footer.blade.php:
<footer class="footer"><p>? 2015 By <a href="http://www.shiyanlou.com" target="_blank">www.shiyanlou.com</a></p> </footer>修改index.blade.php:
@extends('_layouts.default')會繼承app/views/_layouts/default.blade.php文件,@yield('main')對應@section('main')并填充為其中的內容。
在public目錄下新建兩個文件夾i和css,在i文件夾里放置一個名為favicon.ico的圖標,在css文件夾下新建一個名為custom.css的文件,修改如下:
.footer p {color: #7f8c8d;margin: 0;padding: 15px 0;text-align: center;background: #2d3e50; }.topbar-link-btn {color: #fff !important; }7.修改路由訪問首頁
視圖已經有了,這時候需要把路由跟視圖進行關聯,修改app/routes.php如下:
Route::get('/', function() {return View::make('index'); });不出意外,這時候訪問localhost:8000會出現下圖這樣:
終于見到了親手編寫的第一個頁面,是不是有點小激動啊?
8.創建登錄視圖
在nav.blade.php中修改登錄超鏈接的地址:
URL::to('login')會生成http://localhost:8000/login這個地址。
創建login.blade.php:
$ php artisan generate:view login修改login.blade.php:
@extends('_layouts.default')@section('main')<div class="am-g am-g-fixed"><div class="am-u-lg-6 am-u-md-8"><br/>@if (Session::has('message'))<div class="am-alert am-alert-danger" data-am-alert><p>{{ Session::get('message') }}</p></div>@endif@if ($errors->has())<div class="am-alert am-alert-danger" data-am-alert><p>{{ $errors->first() }}</p></div>@endif{{ Form::open(array('url' => 'login', 'class' => 'am-form')) }}{{ Form::label('email', 'E-mail:') }}{{ Form::email('email', Input::old('email')) }}<br/>{{ Form::label('password', 'Password:') }}{{ Form::password('password') }}<br/><label for="remember_me"><input id="remember_me" name="remember_me" type="checkbox" value="1">Remember Me</label><br/><div class="am-cf">{{ Form::submit('Login', array('class' => 'am-btn am-btn-primary am-btn-sm am-fl')) }}</div>{{ Form::close() }}<br/></div></div> @stop在routes.php中增加:
Route::get('login', function() {return View::make('login'); });這時候訪問localhost:8000/login或者點擊導航條的Login按鈕會出現下圖這樣:
9.實現登錄
創建用戶登錄后主頁:
$ php artisan generate:view home修改home.blade.php:
@extends('_layouts.default')@section('main') <div class="am-g am-g-fixed blog-g-fixed"><div class="am-u-sm-12"><h1>Hello {{{ Auth::user()->nickname }}}</h1></div> </div> @stop上面的{{{ }}}可以對字符串做轉義處理,一定程度上避免XSS攻擊。
修改nav.blade.php:
<div class="am-collapse am-topbar-collapse" id="collapse-head">@if (Auth::check())<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right"><li class="am-dropdown" data-am-dropdown><a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"><span class="am-icon-users"></span> {{{ Auth::user()->nickname }}} <span class="am-icon-caret-down"></span></a><ul class="am-dropdown-content"><li><a href="{{ URL::to('logout') }}"><span class="am-icon-power-off"></span> Exit</a></li></ul></li></ul>@else<div class="am-topbar-right"><a href="{{ URL::to('login') }}" class="am-btn am-btn-primary am-topbar-btn am-btn-sm topbar-link-btn"><span class="am-icon-user"></span> Login</a></div>@endif </div>在Routes.php中增加:
Route::post('login', array('before' => 'csrf', function() {$rules = array('email' => 'required|email','password' => 'required|min:6','remember_me' => 'boolean',);$validator = Validator::make(Input::all(), $rules);if ($validator->passes()){if (Auth::attempt(array('email' => Input::get('email'),'password' => Input::get('password'),'block' => 0), (boolean) Input::get('remember_me'))){return Redirect::intended('home');} else {return Redirect::to('login')->withInput()->with('message', 'E-mail or password error');}} else {return Redirect::to('login')->withInput()->withErrors($validator);} }));Route::get('home', array('before' => 'auth', function() {return View::make('home'); }));下面就可以嘗試用戶登錄了,如果輸入信息有誤,會出現錯誤信息如:
登錄成功后會出現下圖這樣:
這里我們使用了Laravel自帶的身份驗證Auth,你也可以使用更加強大的Sentry,Web表單驗證用了Validator,View和Redirect詳細可以查看視圖和響應文檔,還使用了路由過濾器,csrf過濾器可以使我們輕松地防御csrf攻擊。
10.退出登錄
在routes.php中增加:
Route::get('logout', array('before' => 'auth', function() {Auth::logout();return Redirect::to('/'); }));現在你就可以實現退出功能了,點擊Exit:
退出后會跳轉到主頁。
11.小結
至此簡單的用戶登錄功能就完成了,你除了要完成上述的例子外,還要完成記住我的功能哦!你可以通過下面途徑來完成:
- Laravel官網
- 中文文檔1、中文文檔2
- 實驗樓論壇
- Laravel中文網問答社區
- PHPHub中文社區
- API文檔
- laravel.io
- LARACASTS
代碼下載
$ git clone https://github.com/shiyanlou/laravel-blog-1.git總結
以上是生活随笔為你收集整理的Laravel大型项目系列教程(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaWeb结合七牛云存储搭建个人相册
- 下一篇: Laravel大型项目系列教程(二)之用