文章列表页的实现

未分类

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

文章列表逻辑

建立模型

在/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

Leave a comment

您的电子邮箱地址不会被公开。 必填项已用 * 标注