BootstrapLaravel大型项目系列教程(四)显示文章列表和用户改文章

有些编心语:不知不觉已第四有了,非常感谢很多人口给多少编提的见地,改了重重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()使用了预加载,可以减掉查询次数。

公布几篇文章然后访问首页:

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按钮后会见越反至用户主页显示文章列表,并且点击标题时能跳反到展示文章内容页面:

用户主页完成了,另外当当首页和文章内容页面点击作者时也克过反到对应用户之主页,但是一旦无是随用户是无操作权限的,给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.首页分页显示文章

当文章很多时不时,我们将分页显示了,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.改动文章的视图

立即步而促成以用户主页能够修改文章了,自己之章只能协调还是管理人修改,在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.改文章

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.剔除文章

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

 

咱俩这边去文章其实是软删除,它以数据库中还是有的。

当点击Yes继会发觉文章给删去了。

7.小结

本节课程完成了在首页和用户主页显示文章与标签列表,用户能够管理自己之稿子,但只有在首页实现了分页显示文章,你得友善实现以用户主页也分页显示,在剔除文章确认提示的时段,你可加上要去除文章的标题,这样用户体验会再度好,你一点一滴可随你的想法进行落实。这节便到此结束了,我们都落实了组织者用户管理,下节即令拿完善管理员模块,实现文章与标签管理。

变动忘还有最后的代码下载:

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

 

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

相关文章