Laravel大型項目系列教程

時間  2019-11-06
標籤 laravel 大型項目 系列 教程 简体版
原文   原文鏈接

Laravel大型項目系列教程（一）javascript

1、簡介

本教程將使用Laravel完成一個多用戶的博客系統，大概會包含以下內容：

- 路由管理。
- 用戶管理，如用戶註冊、修改信息、鎖定用戶等。
- 文章管理，如發表文章、修改文章等。
- 標籤管理，文章會有一到多個標籤。
- 數據庫管理，如遷移、填充數據等。
- Web表單驗證。
- Blade模版引擎。
- 分頁處理。
- 安全處理。
- 單元測試。
- 部署到應用服務器Apache。

儘可能保證每節教程完整並能運行，會在教程的最後附上這節教程的代碼下載地址。

> Tip：教程中必要的知識點都會有一個超連接

2、環境要求

- PHP 5.4+
- MySQL 5.1+
- Composer（[中國鏡像](http://pkg.phpcomposer.com/)）

3、Let's go!

1.新建一個Laravel項目

使用以下命令建立一個名爲blog的Laravel項目：

php

$ composer create-project laravel/laravel blog --prefer-dist



建立完成以後進入到blog目錄，修改`app/config/app.php`中的`timezone`爲`RPC`、`locale`爲`zh`，而後在blog目錄下啓動它自帶的開發服務器：

css

$ php artisan serve
Laravel development server started on http://localhost:8000



打開瀏覽器輸入`localhost:8000`，若是頁面以下圖就說明項目搭建完成了：

http://anything-about-doc.qiniudn.com/laravel-blog/1.png
2.安裝插件

在`composer.json`中增長：

html

"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`改爲你本身的配置：

java

'mysql' => array(
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'blog',
    'username'  => 'root',
    'password'  => '',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => '',
),



須要在MySQL中先建立一個名爲blog的數據庫

配置完成以後，建立users表的數據庫遷移文件：

mysql

$ php artisan migrate:make create_users_table --create=users



咱們會發如今`app\database\migrations`下多了一個`*_create_users_table.php`文件，在這個文件中修改：

jquery

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();
});



以後進行數據庫遷移：

laravel

$ php artisan migrate



你會驚訝地發如今數據庫中多了兩張表`users`和`migrations`，`users`表就是咱們定義的表，`migrations`表記錄了遷移的信息。

4.建立User模型

數據庫遷移完成以後咱們將使用[Eloquent ORM](http://v4.golaravel.com/docs/4.2/eloquent)，這是Laravel讓人着迷的重要緣由之一。咱們會發如今`app\models`下已經有一個`User.php`文件了，對其修改：

git

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');
    protected $guard = array('email', 'password');
}



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中[數據庫的遷移和填充](http://v4.golaravel.com/docs/4.2/migrations)

6.建立視圖模版

咱們將使用Laravel中的[Blade模版引擎](http://v4.golaravel.com/docs/4.2/templates)，使用下面命令建立三個視圖：

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](http://amazeui.org/)框架來作爲前端框架，修改`default.blade.php`：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>ShiYanLou Blog</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no"/>
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="alternate icon" type="image/x-icon" href="{{ URL::asset('i/favicon.ico') }}"/>
  <link rel="stylesheet" href="//cdn.amazeui.org/amazeui/2.1.0/css/amazeui.min.css"/>
  {{ HTML::style('css/custom.css') }}
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
  <div>
    <h1>
      <a href="/">ShiYanLou Blog</a>
    </h1>
    @include('_layouts.nav')
  </div>
</header>

@yield('main')

@include('_layouts.footer')

<script src="//cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.amazeui.org/amazeui/2.1.0/js/amazeui.min.js"></script>
</body>
</html>



`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`：

<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only"
        data-am-collapse="{target: '#collapse-head'}"><span>nav switch</span>
        <span></span></button>
<div class="am-collapse am-topbar-collapse" id="collapse-head">
  <div>
   
 <a href="#" class="am-btn am-btn-primary am-topbar-btn am-btn-sm 
topbar-link-btn"><span></span> Login</a>
  </div>
</div>



修改`footer.blade.php`：

<footer>
  <p>© 2015 By <a href="http://www.shiyanlou.com" target="_blank">www.shiyanlou.com</a></p>
</footer>



修改`index.blade.php`：

@extends('_layouts.default')

@section('main')
<div class="am-g am-g-fixed blog-g-fixed">
  <div>
      <h1>Welcome to ShiYanLou！</h1>
  </div>
</div>
@stop



`@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`會出現下圖這樣：

http://anything-about-doc.qiniudn.com/laravel-blog/2.png
終於見到了親手編寫的第一個頁面，是否是有點小激動啊？

8.建立登陸視圖

在`nav.blade.php`中修改登陸超連接的地址：

<a href="{{ URL::to('login') }}" class="am-btn am-btn-primary am-topbar-btn am-btn-sm topbar-link-btn"><span></span> Login</a>



`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>
          {{ 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`按鈕會出現下圖這樣：
http://anything-about-doc.qiniudn.com/laravel-blog/4.png

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>
      <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 data-am-dropdown>
        <a data-am-dropdown-toggle href="javascript:;">
          <span></span> {{{ Auth::user()->nickname }}} <span></span>
        </a>
        <ul>
          <li><a href="{{ URL::to('logout') }}"><span></span> Exit</a></li>
        </ul>
      </li>
    </ul>
  @else
    <div>
     
 <a href="{{ URL::to('login') }}" class="am-btn am-btn-primary 
am-topbar-btn am-btn-sm topbar-link-btn"><span></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');
}));



下面就能夠嘗試用戶登陸了，若是輸入信息有誤，會出現錯誤信息如：

http://anything-about-doc.qiniudn.com/laravel-blog/5.png


登陸成功後會出現下圖這樣：
http://anything-about-doc.qiniudn.com/laravel-blog/6.png
這裏咱們使用了Laravel自帶的[身份驗證](http://v4.golaravel.com/docs/4.2/security)Auth，你也可使用更增強大的[Sentry](https://github.com/cartalyst/sentry)，[Web表單驗證](http://v4.golaravel.com/docs/4.2/validation)用了Validator，View和Redirect詳細能夠查看[視圖和響應](http://v4.golaravel.com/docs/4.2/responses)文檔，還使用了[路由過濾器](http://v4.golaravel.com/docs/4.2/routing)，`csrf`過濾器可使咱們輕鬆地防護`csrf`攻擊。

10.退出登陸

在`routes.php`中增長：

Route::get('logout', array('before' => 'auth', function()
{
    Auth::logout();
    return Redirect::to('/');
}));



如今你就能夠實現退出功能了，點擊`Exit`：

http://anything-about-doc.qiniudn.com/laravel-blog/7.png

退出後會跳轉到主頁。


11.小結

至此簡單的用戶登陸功能就完成了，你除了要完成上述的例子外，還要完成`記住我`的功能哦！你能夠經過下面途徑來完成：

- [Laravel官網](http://laravel.com/)
- [中文文檔1](http://v4.golaravel.com/docs/4.2)、[中文文檔2](http://laravel-china.org/docs/quick)
- [實驗樓論壇](http://forum.shiyanlou.com/)
- [Laravel中文網問答社區](http://wenda.golaravel.com/)
- [PHPHub中文社區](https://phphub.org/)
- [API文檔](http://laravel.com/api/4.2/)
- [laravel.io](http://laravel.io/)
- [LARACASTS](http://laracasts.com/)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程