Laravel大型项目体系教程(四)彰显作品列表和用户修改著作

小编心语:不知不觉已经第四有些了,异常感谢很两人给小编提的理念,改了无数bug,希望今后能继续帮小编找找茬~小编也不期待误导我们~这一节,首要讲的 是怎么体现作品列表和让用户修改随笔,小编预告一下(一共有八节哦)假若有不知道地方,或者本文呢没有注脚白的地点,敬请期待下一章节。

一、前言

上节课程中实现了宣布随笔的效率,本节教程旅长大概实现在首页和用户主页分页显示著作和标签列表、用户可以修改删除随笔。

二、Let’s go

1.首页显示小说和标签列表

俺们需要在首页突显作品和标签列表,修改views/index.blade.php

@extends('_layouts.default')

@section('main')
<div class="am-g am-g-fixed">
  <div class="am-u-md-8">
      @foreach ($articles as $article)
      <article class="blog-main">
        <h3 class="am-article-title blog-title">
          <a href="{{ URL::route('article.show', $article->id) }}">{{{ $article->title }}}</a>
        </h3>
        <h4 class="am-article-meta blog-meta">
            by <a href="#">{{{ $article->user->nickname }}}</a> posted on {{ $article->created_at->format('Y/m/d H:i') }} under 
            @foreach ($article->tags as $tag)
        <a href="#" style="color: #fff;" class="am-badge am-badge-success am-radius">{{ $tag->name }}</a>
            @endforeach
        </h4>
        <div class="am-g">
          <div class="am-u-sm-12">
            @if ($article->summary)
          <p>{{ $article->summary }}</p>
            @endif
            <hr class="am-article-divider"/>
          </div>
        </div>
      </article>
      @endforeach
  </div>

  <div class="am-u-md-4 blog-sidebar">
      <br/>
    <div class="am-panel-group">
      <section class="am-panel am-panel-default">
        <div class="am-panel-hd"> Tags</div>
        <ul class="am-list">
          @for ($i = 0, $len = count($tags); $i < $len; $i++)
            <li>
              <a href="#">{{ $tags[$i]->name }} 
            @if ($i == 0)
              {{ $tags[$i]->count }}
            @elseif ($i == 1)
              {{ $tags[$i]->count }}
            @elseif ($i == 2)
              {{ $tags[$i]->count }}
            @else
              {{ $tags[$i]->count }}
            @endif
              </a>
            </li>
          @endfor          
        </ul>
      </section>
    </div>
  </div>
</div>
@stop

 

custom.css中增加:

@media only screen and (min-width: 641px) {
  .blog-sidebar {
    font-size: 1.4rem;
  }
}

.blog-main {
  padding: 20px 0;
}

.blog-title {
  margin: 10px 0 20px 0;
}

.blog-meta {
  font-size: 14px;
  margin: 10px 0 20px 0;
  color: #222;
}

.blog-meta a {
  color: #27ae60;
}

 

修改routes.php

Route::get('/', function()
{
    $articles = Article::with('user', 'tags')->orderBy('created_at', 'desc')->paginate(10);
    $tags = Tag::where('count', '>', '0')->orderBy('count', 'desc')->orderBy('updated_at', 'desc')->take(10)->get();
    return View::make('index')->with('articles', $articles)->with('tags', $tags);
});

 

上面Article::with()使用了预加载,能够减小查询次数。

发布几篇随笔然后访问首页:

图片 1

2.实现用户主页

俺们在发布作品后应当能在用户主页看到作品列表,并能对著作进行操作,先在导航栏nav.blade.php@else下边添加一个按钮My Articles

<div class="am-topbar-right">
  <a href="{{ URL::to('user/'. Auth::id() . '/articles') }}" class="am-btn am-btn-primary am-topbar-btn am-btn-sm topbar-link-btn"> My Articles</a>
</div>

 

修改home.blade.php

@extends('_layouts.default')

@section('main')
<div class="am-g am-g-fixed blog-g-fixed">
  <div class="am-u-sm-12">
      <table class="am-table am-table-hover am-table-striped ">
      <thead>
      <tr>
        <th>Title</th>
        <th>Tags</th>
        @if ($user->id == Auth::id())
        <th>Managment</th>
        @endif
      </tr>
      </thead>
      <tbody>
        @foreach ($articles as $article)
        <tr>
          <td><a href="{{ URL::route('article.show', $article->id) }}">{{{ $article->title }}}</a></td>
          <td>
          @foreach ($article->tags as $tag)
            {{ $tag->name }}
          @endforeach
          </td>
          @if ($user->id == Auth::id())
            <td>
              <a href="{{ URL::to('article/'. $article->id . '/edit') }}" class="am-btn am-btn-xs am-btn-primary"> Edit</a>
              {{ Form::open(array('url' => 'article/' . $article->id, 'method' => 'DELETE', 'style' => 'display: inline;')) }}
                  <button type="button" class="am-btn am-btn-xs am-btn-danger" id="delete{{ $article->id }}"> Delete</button>
              {{ Form::close() }}
            </td>
          @endif
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
    </div>
    <div class="am-modal-footer">
      No
      Yes
    </div>
  </div>
</div>
<script>
  $(function() {
    $('[id^=delete]').on('click', function() {
      $('.am-modal-bd').text('Sure you want to delete it?');
      $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
          $(this.relatedTarget).parent().submit();
        },
        onCancel: function() {
        }
      });
    });
  });
</script>
@stop

 

先添加一个UserController

$ php artisan generate:controller UserController

 

UserController.php中增加:

public function articles(User $user)
{
    return View::make('home')->with('user', $user)->with('articles', Article::with('tags')->where('user_id', '=', $user->id)->orderBy('created_at', 'desc')->get());
}

 

routes.php中增加:

Route::get('user/{user}/articles', 'UserController@articles');

 

并修改原来的Route::get('home')

Route::get('home', array('before' => 'auth', function()
{
    return View::make('home')->with('user', Auth::user())->with('articles', Article::with('tags')->where('user_id', '=', Auth::id())->orderBy('created_at', 'desc')->get());
}));

 

现行当用户登录或点击My Articles按钮后会跳转到用户主页呈现作品列表,并且点击标题时能跳转到突显著作内容页面:

图片 2

用户主页完成了,另外当在首页和著作内容页面点击作者时也能跳转到相应用户的主页,可是假如不是本用户是没有操作权限的,给views/index.blade.php中的作者扩充链接地址:

<a href="{{ URL::to('user/' . $article->user->id . '/articles') }}">{{{ $article->user->nickname }}}</a>

 

articles/show.blade.php中的作者扩充链接地址:

<a href="{{ URL::to('user/' . $article->user->id . '/articles') }}" style="cursor: pointer;">{{{ $article->user->nickname }}}</a>

 

明日点击这多个超链接的时候就能跳转到相应用户的主页了,可是没有操作权限:

图片 3

3.首页分页显示作品

当随笔很多时,大家将要分页显示了,Laravel已经为我们兑现好了分页逻辑,但它默认的是Bootstrap的样式,由于我们利用AmazeUI,所以需要自定义表示器。先在app目录创制一个名为Blog的文本夹,那么些文件夹中首要性放置我们自己写的扩大类,在里面新建一个名为PaginationPresenter.php的文件,修改:

class PaginationPresenter extends Illuminate\Pagination\Presenter {

    public function getActivePageWrapper($text)
    {
        return '<li class="am-active"><a href="">'.$text.'</a></li>';
    }

    public function getDisabledTextWrapper($text)
    {
        return '<li class="am-disabled"><a href="">'.$text.'</a></li>';
    }

    public function getPageLinkWrapper($url, $page, $rel = null)
    {
        return '<li><a href="'.$url.'">'.$page.'</a></li>';
    }
}

 

完成之后那多少个类还无法被找到,需要在composer.josn中的autoload classmap中增加"app/Blog",然后实施:

$ composer dump-autoload

 

如此这般这些类就能被找到了,现在开创分页链接的视图:

$ php artisan generate:view pagination

 

修改pagination.blade.php

<ul class="am-pagination am-pagination-centered">
    {{ with(new PaginationPresenter($paginator))->render() }}
</ul>

 

完成后修改app/config/view.php中的pagination的值为pagination,在routes.phpRoute::get('/')paginate()的参数就是指定每页展现的多少,由于自身作品相比少,暂时把它设为2,最终在views/index.blade.php闽南语章呈现之后添加{{ $articles->links() }},现在走访首页就相会到如下分页链接了:

图片 4

4.改动著作的视图

这步要促成在用户主页可以修改作品了,自己的随笔只好自己如故管理人修改,在ArticleController.php中加进一个过滤器:

public function canOperation($route, $request)
{
    if (!(Auth::user()->is_admin or Auth::id() == Article::find(Route::input('article'))->user_id))
    {
        return Redirect::to('/');
    }
}

 

上面的Route::input('article')可以获取路由参数,这里就是随笔的id值,然后在构造函数中增长应用过滤器,再添加一个csrf过滤器:

$this->beforeFilter('csrf', array('only' => array('store', 'update', 'destroy')));
$this->beforeFilter('@canOperation', array('only' => array('edit', 'update', 'destroy')));

 

创办修改著作的视图:

$ php artisan generate:view articles.edit

 

修改articles/edit.blade.php

@extends('_layouts.default')

@section('main')
<div class="am-g am-g-fixed">
  <div class="am-u-sm-12">
      <h1>Edit Article</h1>
      <hr/>
    @if ($errors->has())
    <div class="am-alert am-alert-danger" data-am-alert>
      <p>{{ $errors->first() }}</p>
    </div>
    @endif
    {{ Form::model($article, array('url' => URL::route('article.update', $article->id), 'method' => 'PUT', 'class' => "am-form")) }}
        <div class="am-form-group">
        {{ Form::label('title', 'Title') }}
        {{ Form::text('title', Input::old('title')) }}
        </div>
        <div class="am-form-group">
        {{ Form::label('content', 'Content') }}
        {{ Form::textarea('content', Input::old('content'), array('rows' => '20')) }}
        <p class="am-form-help">
            <button id="preview" type="button" class="am-btn am-btn-xs am-btn-primary"> Preview</button>
        </p>
      </div>
      <div class="am-form-group">
        {{ Form::label('tags', 'Tags') }}
        {{ Form::text('tags', Input::old('tags')) }}
          <p class="am-form-help">Separate multiple tags with a comma ","</p>
        </div>
        <p><button type="submit" class="am-btn am-btn-success">
         Modify</button>
      </p>
    {{ Form::close() }}
  </div>
</div>

<div class="am-popup" id="preview-popup">
  <div class="am-popup-inner">
    <div class="am-popup-hd">
      <h4 class="am-popup-title"></h4>
      &times;
    </div>
    <div class="am-popup-bd">
    </div>
  </div>
</div>
<script>
  $(function() {
      $('#preview').on('click', function() {
          $('.am-popup-title').text($('#title').val());
          $.post('preview', {'content': $('#content').val()}, function(data, status) {
            $('.am-popup-bd').html(data);
          });
          $('#preview-popup').modal();
      });
  });
</script>
@stop

 

routes.php中增加:

Route::post('article/{id}/preview', array('before' => 'auth', 'uses' => 'ArticleController@preview'));

 

这是为着修改文章时可以预览随笔。

ArticleController.php中修改:

public function edit($id)
{
    $article = Article::with('tags')->find($id);
    $tags = '';
    for ($i = 0, $len = count($article->tags); $i < $len; $i++) {
        $tags .= $article->tags[$i]->name . ($i == $len - 1 ? '' : ',');
    }
    $article->tags = $tags;
    return View::make('articles.edit')->with('article', $article);
}

 

现行在用户主页点击修改作品时会跳转到修改页面:

图片 5

5.改动著作

ArticleController.php累加修改随笔的事情逻辑:

public function update($id)
{
    $rules = [
        'title'   => 'required|max:100',
        'content' => 'required',
        'tags'    => array('required', 'regex:/^\w+$|^(\w+,)+\w+$/'),
    ];
    $validator = Validator::make(Input::all(), $rules);
    if ($validator->passes()) {
        $article = Article::with('tags')->find($id);
        $article->update(Input::only('title', 'content'));
        $resolved_content = Markdown::parse(Input::get('content'));
        $article->resolved_content = $resolved_content;
        $tags = array_unique(explode(',', Input::get('tags')));
        if (str_contains($resolved_content, '<p>')) {
            $start = strpos($resolved_content, '<p>');
            $length = strpos($resolved_content, '</p>') - $start - 3;
            $article->summary = substr($resolved_content, $start + 3, $length);
        } elseif (str_contains($resolved_content, '</h')) {
            $start = strpos($resolved_content, '<h');
            $length = strpos($resolved_content, '</h') - $start - 4;
            $article->summary = substr($resolved_content, $start + 4, $length);
        }
        $article->save();
        foreach ($article->tags as $tag) {
            if (($index = array_search($tag->name, $tags)) !== false) {
                unset($tags[$index]);
            } else {
                $tag->count--;
                $tag->save();
                $article->tags()->detach($tag->id);
            }
        }
        foreach ($tags as $tagName) {
            $tag = Tag::whereName($tagName)->first();
            if (!$tag) {
                $tag = Tag::create(array('name' => $tagName));
            }
            $tag->count++;
            $article->tags()->save($tag);
        }
        return Redirect::route('article.show', $article->id);
    } else {
        return Redirect::route('article.edit', $id)->withInput()->withErrors($validator);
    }
}

 

这部分较难的是对Tag的拍卖,可能本身的不二法门不是最好的。

如此这般就能确实的兑现修改了:

图片 6

6.删减小说

ArticleController.php中增加:

public function destroy($id)
{
    $article = Article::find($id);
    foreach ($article->tags as $tag) {
        $tag->count--;
        $tag->save();
        $article->tags()->detach($tag->id);
    }
    $article->delete();
    return Redirect::to('home');
}

 

我们这边删除著作其实是软删除,它在数据库中或者存在的。

图片 7

当点击Yes后会发现随笔被剔除了。

7.小结

本节科目完成了在首页和用户主页呈现著作和标签列表,用户可以管理自己的篇章,但只在首页实现了分页显示著作,你可以自己实现在用户主页也分页显示,在剔除小说确认指示的时候,你可以添加要去除随笔的标题,这样用户体验会更好,你完全可以按你的想法举办落实。这节就到此截至了,我们早已实现了协会者用户管理,下节就将通盘管理员模块,实现随笔和标签管理。

别忘记还有最终的代码下载:

$ git clone https://github.com/shiyanlou/laravel-blog-4.git

 

 看到这里,有没有很想去动手实践一下,点击这里,为你免费搭建好了在线编程环境,让你不再为搭建环境而烦恼

相关文章