文章模块数据列表页的实现

文章列表逻辑

建立模型
在/app/Http/Controllers/PostController.php 文件中引入 Post模型。
use App\Post;
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
//列表页面
public function index()
{
$posts = Post::orderBy('created_at','desc')->get();
return view('post/index',compact('posts'));
}
页面渲染:在视图中输出数据
@extends("layout.main")
@section("content")
<div class="col-sm-8 blog-main">
<div>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://ww1.sinaimg.cn/large/44287191gw1excbq6tb3rj21400migrz.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww3.sinaimg.cn/large/44287191gw1excbq5iwm6j21400min3o.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww2.sinaimg.cn/large/44287191gw1excbq4kx57j21400migs4.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div style="height: 20px;">
</div>
<div>
@foreach($posts as $post)
<div class="blog-post">
<h2 class="blog-post-title"><a href="/posts/{{$post->id}}}" >{{$post->title}}</a></h2>
<p class="blog-post-meta">{{$post->created_at}}<a href="/user/5">Kassandra Ankunding2</a></p>
<p>{{$post->content}}
<p class="blog-post-meta">赞 0 | 评论 0</p>
</div>
@endforeach
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1</span></li>
<li><a href="http://127.0.0.1:8000/posts?page=2">2</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=3">3</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=4">4</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=5">5</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=6">6</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=7">7</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=8">8</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=9">9</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=10">10</a></li>
<li><a href="http://127.0.0.1:8000/posts?page=2" rel="next">»</a></li>
</ul>
</div><!-- /.blog-main -->
</div>
@endsection
时间格式:https://carbon.nesbot.com/docs/

数据填充:https://github.com/fzaninotto/Faker

编辑 :/database/factories/ModelFactory.php ,增加下面代码
/** @var \Illuminate\Database\Eloquent\Factory $factory */
$factory->define(App\User::class, function (Faker\Generator $faker) {
static $password;
return [
'name' => $faker->name,
'email' => $faker->unique()->safeEmail,
'password' => $password ?: $password = bcrypt('secret'),
'remember_token' => str_random(10),
];
});
$factory->define(App\Post::class, function (Faker\Generator $faker) {
return [
'title' => $faker->sentence(6),
'content' => $faker->paragraph(10)
];
});
分页实现
在控制器增加分页函数
class PostController extends Controller
{
//列表页面
public function index()
{
$posts = Post::orderBy('created_at','desc')->paginate(1);
return view('post/index',compact('posts'));
}
...
在视图调用分页函数
{{$posts->links()}}
@extends("layout.main")
@section("content")
<div class="col-sm-8 blog-main">
<div>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://ww1.sinaimg.cn/large/44287191gw1excbq6tb3rj21400migrz.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww3.sinaimg.cn/large/44287191gw1excbq5iwm6j21400min3o.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww2.sinaimg.cn/large/44287191gw1excbq4kx57j21400migs4.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div style="height: 20px;">
</div>
<div>
@foreach($posts as $post)
<div class="blog-post">
<h2 class="blog-post-title"><a href="/posts/{{$post->id}}}" >{{$post->title}}</a></h2>
<p class="blog-post-meta">{{$post->created_at->toFormattedDateString()}}<a href="/user/5">Kassandra Ankunding2</a></p>
<p>{{$post->content}}
<p class="blog-post-meta">赞 0 | 评论 0</p>
</div>
@endforeach
{{$posts->links()}}
</div><!-- /.blog-main -->
</div>
@endsection
运行如下:

字符截取命令
{{str_limit($post->content,'6','...')}}
@extends("layout.main")
@section("content")
<div class="col-sm-8 blog-main">
<div>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://ww1.sinaimg.cn/large/44287191gw1excbq6tb3rj21400migrz.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww3.sinaimg.cn/large/44287191gw1excbq5iwm6j21400min3o.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww2.sinaimg.cn/large/44287191gw1excbq4kx57j21400migs4.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div style="height: 20px;">
</div>
<div>
@foreach($posts as $post)
<div class="blog-post">
<h2 class="blog-post-title"><a href="/posts/{{$post->id}}}" >{{$post->title}}</a></h2>
<p class="blog-post-meta">{{$post->created_at->toFormattedDateString()}}<a href="/user/5">Kassandra Ankunding2</a></p>
<p>{{str_limit($post->content,'6','...')}}
<p class="blog-post-meta">赞 0 | 评论 0</p>
</div>
@endforeach
{{$posts->links()}}
</div><!-- /.blog-main -->
</div>
@endsection
