Laravel 5~實現速查表

LaravelChen發表於2017-08-07
Laravel

平時我們可能需要做一個速查表，那麼速查表的關鍵在於怎麼將每個單詞進行排序，按照什麼樣的規則排序呢?一般情況下，我們都是按照字典順序，也就是按照首字母來排序，so，我們就來利用Laravel5來實現這樣的功能!

1.準備工作

設計一張表tag,其作用用來顯示所有的word,表結構如下:
 Schema::create('tags', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name')->unique();
            $table->timestamps();
  });
利用factory生成相應的資料，這裡我們生成200條資料,在生成資料前請確認您的factory 寫好了適配的程式碼:
$factory->define(App\Tag::class, function (Faker\Generator $faker) {
    return [
        'name' => $faker->unique()->word,
    ];
});
然後執行:
php artisan tinker
factory(App\Tag::class,200)->create();

至此，已經完成的準備工作

2.邏輯編寫

我們現在已經擁有了200個單詞了，那麼如何利用model來對著200個單詞進行按大寫字母來排序呢，那麼我們就需要用到資料庫中的函式orderBy和groupBy函式了,具體的程式碼如下:

web.php
Route::get('/tag/show', function () {
    $tags = \App\Tag::orderBy('name')->get()->groupBy(function ($tag) {
        return substr($tag->name, 0, 1);
    });
    return $tags;
    return view('tags.show', compact('tags'));
});

其中groupBy函式內部的函式返回的是每個單詞的首字母，這樣一來我們就將200個單詞按照每個單詞的首字母的順序進行分組排序了，結果大概如下:

{
"a": [
        {
        "id": 94,
        "name": "a",
        "created_at": "2017-08-05 02:56:59",
        "updated_at": "2017-08-05 02:56:59"
        },
        {
        "id": 92,
        "name": "ab",
        "created_at": "2017-08-05 02:56:59",
        "updated_at": "2017-08-05 02:56:59"
        },
        {
        "id": 115,
        "name": "accusamus",
        "created_at": "2017-08-05 02:56:59",
        "updated_at": "2017-08-05 02:56:59"
        },
    ],
"b": [
        {
        "id": 48,
        "name": "beatae",
        "created_at": "2017-08-05 02:56:59",
        "updated_at": "2017-08-05 02:56:59"
        },
        {
        "id": 57,
        "name": "blanditiis",
        "created_at": "2017-08-05 02:56:59",
        "updated_at": "2017-08-05 02:56:59"
        }
    ],
  //省略...
}

然後我們利用foreach進行輸出資料:

@foreach($tags as $letter =>$tagCollection)
        <div class="letter-group title is-1">
            {{$letter}}
        </div>
        <ul>
      @foreach($tagCollection as $tag)
          <li class="title is-5">
               <a href="{{url('/tags/'.$tag)}}">{{$tag->name}}</a>
         </li>
       @endforeach
      </ul>
@endforeach

3.完整前端程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
    <link rel="stylesheet" href="{{mix('/css/app.css')}}">
</head>
<body>
<div class="section hero is-primary  is-bold">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">Tags</h1>
            <p class="subtitle">
                Every tag on the title.
            </p>
        </div>
    </div>
</div>
<div class="section">
    <div class="container">
        <ul class="has-colums">
            @foreach($tags as $letter =>$tagCollection)
                <div class="letter-group title is-1">
                    {{$letter}}
                </div>
                <ul>
                    @foreach($tagCollection as $tag)
                        <li class="title is-5">
                            <a href="{{url('/tags/'.$tag)}}">{{$tag->name}}</a>
                        </li>
                    @endforeach
                </ul>
            @endforeach
        </ul>
    </div>
</div>
</body>
</html>

效果圖

file

LaravelChen

相關文章