隨手扎

30天成爲Laravel萌新（第23天） - 頁面清單上篇

October 10, 2019

因為重點不在於CSS，不在於Bootstrap。其實大可以將頁面弄的很美觀。在Laravel專案資料夾中，其實有一個給npm使用的package.json檔案。不過還是來把重點放在Laravel上。

使用Pagnation前

Laravel提供一個超級簡單的方式，來處理分頁問題。不過在使用前，來看看原本要怎麼實現index()。不但要取得頁數，並計算檢索數量，然後從資料庫透過offset()、linit()的方式取得資料。

    public function index(Request $request)
    {
        $offset = $request->query("offset", 0);
        $limit = $request->query("limit", 30);
        $page = $request->query("page");

        if($page){
            $offset = ($page - 1) * $limit;
        }else{
            $page = ($offset / $limit) + 1;
        }

        $request->merge([
            "offset" => $offset,
            "page" => $page,
        ]);

        $posts = BlogPost::orderBy('activity_id','ASC')
                    ->offset($offset)
                    ->limit($limit)
                    ->get();
        return view("blog/index",[
            "posts"=>$posts,
            "page"=>$page,
            "total_pages" => $total_pages,
        ]);
    }

就連頁面模板，都有些複雜…

除了文章清單連結外，下面的頁面選單列非常複雜。不但要在控制器裡計算頁面數量，並傳遞進視圖。相比起來，使用Laravel提供的Pagnation就簡單太多了。賣個關子明天說。

@extends("base",['title'=>'網誌文章'])

@section('title', '網誌文章')


    @section('body')
        <div class="container">
            <ul>
                @foreach ($posts as $post)
                    <li><a href="{{route("blog/post.show", ["id"=>$post->id])}}">{{ $post->title }}</a></li>
                @endforeach
            </ul>
        </div>


        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="?page={{$page-1}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                @for($i=1; $i <= $total_pages; $i++)
                    <li class="page-item"><a class="page-link" href="?page={{$i}}">{{$i}}</a></li>
                @endfor
                <li class="page-item">
                    <a class="page-link" href="?page={{$page+1}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

    @endsection