Laravel 5 系列入門教程（四）【最適合中國人的 Laravel 教程】【完結】

時間  2019-11-07
標籤 laravel 系列 入門 教程 適合 完結 简体版
原文   原文鏈接

原文發表在個人我的網站：Laravel 5 系列入門教程（四）【最適合中國人的 Laravel 教程】php

本教程示例代碼見：https://github.com/johnlui/Learn-Laravel-5

你們在任何地方卡住，最快捷的解決方式就是去看個人示例代碼。css

本文是本系列教程的完結篇，咱們將一塊兒給 Page 加入評論功能，讓遊客在前臺頁面能夠查看、提交、回覆評論，同時咱們將在後臺完善評論管理功能，能夠刪除、編輯評論。Page 和評論將使用 Eloquent 提供的「一對多關係」。最終，咱們將獲得一個我的博客系統的雛形，並佈置一個大做業，供你們實戰練習。html

1. 初識 Eloquent

Laravel Eloquent ORM 是 Laravel 中很是重要的部分，也是 Laravel 能如此流行的緣由之一。中文文檔在：jquery

  1. http://laravel-china.org/docs/5.0/eloquent
  2. http://www.golaravel.com/laravel/docs/5.0/eloquent/

在前面的教程中已經創建好的 learnlaravel5/app/Page.php 就是一個 Eloquent Model 類：laravel

php<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Page extends Model {

    //

}

若想進一步瞭解 Eloquent，推薦閱讀系列文章：深刻理解 Laravel Eloquent。git

2. 建立 Comment 模型

首先咱們要新建一張表來存儲 Comment，命令行運行：github

bashphp artisan make:model Comment

成功之後，修改 migration 文件 learnlaravel5/database/migrations/***_create_comments_table.php 的相應位置爲：web

phpSchema::create('comments', function(Blueprint $table)
{
    $table->increments('id');
    $table->string('nickname');
    $table->string('email')->nullable();
    $table->string('website')->nullable();
    $table->text('content')->nullable();
    $table->integer('page_id');
    $table->timestamps();
});

以後運行：ajax

bashphp artisan migrate

去數據庫裏瞧瞧，comments 表已經躺在那兒啦。數據庫

3. 創建「一對多關係」

修改 Page 模型：

php<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Page extends Model {

  public function hasManyComments()
  {
    return $this->hasMany('App\Comment', 'page_id', 'id');
  }

}

搞定啦~ Eloquent 中模型間關係就是這麼簡單。

模型間關係中文文檔：http://laravel-china.org/docs/5.0/eloquent#relationships

擴展閱讀：深刻理解 Laravel Eloquent（三）——模型間關係（關聯）

4. 前臺提交功能

修改 Comment 模型：

php<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model {

  protected $fillable = ['nickname', 'email', 'website', 'content', 'page_id'];

}

增長一行路由：

phpRoute::post('comment/store', 'CommentsController@store');

運行如下命令建立 CommentsController 控制器：

phpphp artisan make:controller CommentsController

修改 CommentsController：

php<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use Redirect, Input;

use App\Comment;

class CommentsController extends Controller {

    public function store()
    {
        if (Comment::create(Input::all())) {
            return Redirect::back();
        } else {
            return Redirect::back()->withInput()->withErrors('評論發表失敗！');
        }

    }

}

修改視圖 learnlaravel5/resources/views/pages/show.blade.php：

php@extends('_layouts.default')

@section('content')


<h4>
    <a href="/">⬅️返回首頁</a>
  </h4>





<h1 style="text-align: center; margin-top: 50px;">{{ $page->title }}</h1>




<hr>




<div id="date" style="text-align: right;">
    {{ $page->updated_at }}
  </div>




<div id="content" style="padding: 50px;">
    <p>
      {{ $page->body }}
    </p>
  </div>




<div id="comments" style="margin-bottom: 100px;">

    @if (count($errors) > 0)
      <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div id="new">
      <form action="{{ URL('comment/store') }}" method="POST">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="page_id" value="{{ $page->id }}">
        <div class="form-group">
          <label>Nickname</label>
          <input type="text" name="nickname" class="form-control" style="width: 300px;" required="required">
        </div>
        <div class="form-group">
          <label>Email address</label>
          <input type="email" name="email" class="form-control" style="width: 300px;">
        </div>
        <div class="form-group">
          <label>Home page</label>
          <input type="text" name="website" class="form-control" style="width: 300px;">
        </div>
        <div class="form-group">
          <label>Content</label>
          <textarea name="content" id="newFormContent" class="form-control" rows="10" required="required"></textarea>
        </div>
        <button type="submit" class="btn btn-lg btn-success col-lg-12">Submit</button>
      </form>
    </div>

<script>
function reply(a) {
  var nickname = a.parentNode.parentNode.firstChild.nextSibling.getAttribute('data');
  var textArea = document.getElementById('newFormContent');
  textArea.innerHTML = '@'+nickname+' ';
}
</script>

    <div class="conmments" style="margin-top: 100px;">
      @foreach ($page->hasManyComments as $comment)

        <div class="one" style="border-top: solid 20px #efefef; padding: 5px 20px;">
          <div class="nickname" data="{{ $comment->nickname }}">
          @if ($comment->website)
            <a href="{{ $comment->website }}">
              <h3>{{ $comment->nickname }}</h3>
            </a>
          @else
            <h3>{{ $comment->nickname }}</h3>
          @endif
            <h6>{{ $comment->created_at }}</h6>
          </div>
          <div class="content">
            <p style="padding: 20px;">
              {{ $comment->content }}
            </p>
          </div>
          <div class="reply" style="text-align: right; padding: 5px;">
            <a href="#new" onclick="reply(this);">回覆</a>
          </div>
        </div>

      @endforeach
    </div>
  </div>


@endsection

前臺評論功能完成。

查看效果：

pic

pic

5. 後臺管理功能

修改基礎視圖 learnlaravel5/resources/views/app.blade.php 爲：

php<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>

    <link href="/css/app.css" rel="stylesheet">

    <!-- Fonts -->
  <link href='http://fonts.useso.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Learn Laravel 5</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/admin">後臺首頁</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li><a href="/admin/comments">管理評論</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    @if (Auth::guest())
                        <li><a href="/auth/login">Login</a></li>
                        <li><a href="/auth/register">Register</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/auth/logout">Logout</a></li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    @yield('content')

    <!-- Scripts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

修改後臺路由組（增長了一行）：

phpRoute::group(['prefix' => 'admin', 'namespace' => 'Admin', 'middleware' => 'auth'], function()
{
  Route::get('/', 'AdminHomeComtroller@index');
  Route::resource('pages', 'PagesController');
  Route::resource('comments', 'CommentsController');
});

建立 Admin\CommentsController ：

bashphp artisan make:controller Admin/CommentsController

Admin/CommentsController 要有 查看全部、查看單個、POST更改、刪除四個接口：

php<?php namespace App\Http\Controllers\Admin;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use App\Comment;

use Redirect, Input;

class CommentsController extends Controller {

    public function index()
    {
        return view('admin.comments.index')->withComments(Comment::all());
    }

    public function edit($id)
    {
        return view('admin.comments.edit')->withComment(Comment::find($id));
    }

    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'nickname' => 'required',
            'content' => 'required',
        ]);
        if (Comment::where('id', $id)->update(Input::except(['_method', '_token']))) {
            return Redirect::to('admin/comments');
        } else {
            return Redirect::back()->withInput()->withErrors('更新失敗！');
        }
    }

    public function destroy($id)
    {
        $comment = Comment::find($id);
        $comment->delete();

        return Redirect::to('admin/comments');
    }

}

接下來建立兩個視圖：

learnlaravel5/resources/views/admin/comments/index.blade.php：

php@extends('app')

@section('content')


<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-default">
        <div class="panel-heading">管理評論</div>

        <div class="panel-body">

        <table class="table table-striped">
          <tr class="row">
            <th class="col-lg-4">Content</th>
            <th class="col-lg-2">User</th>
            <th class="col-lg-4">Page</th>
            <th class="col-lg-1">編輯</th>
            <th class="col-lg-1">刪除</th>
          </tr>
          @foreach ($comments as $comment)
            <tr class="row">
              <td class="col-lg-6">
                {{ $comment->content }}
              </td>
              <td class="col-lg-2">
                @if ($comment->website)
                  <a href="{{ $comment->website }}">
                    <h4>{{ $comment->nickname }}</h4>
                  </a>
                @else
                  <h3>{{ $comment->nickname }}</h3>
                @endif
                {{ $comment->email }}
              </td>
              <td class="col-lg-4">
                <a href="{{ URL('pages/'.$comment->page_id) }}" target="_blank">
                  {{ App\Page::find($comment->page_id)->title }}
                </a>
              </td>
              <td class="col-lg-1">
                <a href="{{ URL('admin/comments/'.$comment->id.'/edit') }}" class="btn btn-success">編輯</a>
              </td>
              <td class="col-lg-1">
                <form action="{{ URL('admin/comments/'.$comment->id) }}" method="POST" style="display: inline;">
                  <input name="_method" type="hidden" value="DELETE">
                  <input type="hidden" name="_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-danger">刪除</button>
                </form>
              </td>
            </tr>
          @endforeach
        </table>


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


@endsection

learnlaravel5/resources/views/admin/comments/edit.blade.php：

php@extends('app')

@section('content')


<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-default">
        <div class="panel-heading">編輯評論</div>

        <div class="panel-body">

          @if (count($errors) > 0)
            <div class="alert alert-danger">
              <strong>Whoops!</strong> There were some problems with your input.<br><br>
              <ul>
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif

          <form action="{{ URL('admin/comments/'.$comment->id) }}" method="POST">
            <input name="_method" type="hidden" value="PUT">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="page_id" value="{{ $comment->page_id }}">
            Nickname: <input type="text" name="nickname" class="form-control" required="required" value="{{ $comment->nickname }}">
            <br>
            Email:
            <input type="text" name="email" class="form-control" required="required" value="{{ $comment->email }}">
            <br>
            Website:
            <input type="text" name="website" class="form-control" required="required" value="{{ $comment->website }}">
            <br>
            Content:
            <textarea name="content" rows="10" class="form-control" required="required">{{ $comment->content }}</textarea>
            <br>
            <button class="btn btn-lg btn-info">提交修改</button>
          </form>

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


@endsection

後臺管理功能完成，查看效果：

pic

pic

6. 大做業

依賴於 Page 的評論功能已經所有完成，我的博客系統雛形誕生。在本系列教程的最後，佈置一個大做業：構建出 Article 的先後臺，而且加上 Article 與 Comment 的一對多關係，加入評論和評論管理功能。在作這個大做業的過程當中，你將會反覆地回頭去看前面的教程，反覆地閱讀中文文檔，會仔細閱讀個人代碼，等你完成大做業的時候，Laravel 5 就真正入門啦~~

教程（四）代碼快照：https://github.com/johnlui/Learn-Laravel-5/archive/tutorial_4.zip

Laravel 5 系列入門教程【最適合中國人的 Laravel 教程】到此結束，謝謝你們！

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