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"><span class="am-icon-tags"></span> Tags</div><ul class="am-list">@for ($i = 0, $len = count($tags); $i < $len; $i++)<li><a href="#">{{ $tags[$i]->name }}@if ($i == 0)<span class="am-fr am-badge am-badge-danger am-round">{{ $tags[$i]->count }}</span>@elseif ($i == 1)<span class="am-fr am-badge am-badge-warning am-round">{{ $tags[$i]->count }}</span>@elseif ($i == 2)<span class="am-fr am-badge am-badge-success am-round">{{ $tags[$i]->count }}</span>@else<span class="am-fr am-badge am-round">{{ $tags[$i]->count }}</span>@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"><span class="am-icon-list"></span> 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)<span class="am-badge am-badge-success am-radius">{{ $tag->name }}</span>@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"><span class="am-icon-pencil"></span> 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 }}"><span class="am-icon-remove"></span> 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"><span class="am-modal-btn" data-am-modal-cancel>No</span><span class="am-modal-btn" data-am-modal-confirm>Yes</span></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中增加:

爱情不是避难所,想进去避难的话,是会被赶出来的。

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

相关文章:

你感兴趣的文章:

标签云: