10-5 修改視圖以顯示商品列表

1. 接著開啟/專案/resources/views/product/index.blade.php一般可以利用@foreach及@endforeach寫法來產生迴圈，以便列出所有商品，不過此處，我們改用@forelse、@ematy、@endforelse來產生迴圈，並可在沒有資料的情況下，顯示相關資訊。

2. 至於排版部份，我們使用BootStrap4的卡片疊（https://bootstrap.hexschool.com/docs/4.2/components/card/#card-decks）來呈現商品，其好處是頭尾可以等高，看起來較為整齊：

   @extends('layouts.app')
   @section('content')
       <h1>商品一覽</h1>
       <div class="card-deck">
       @forelse($products as $product)
           <div class="card mb-4">
               <img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->title }}">
               <div class="card-body">
                   <h5 class="card-title">{{ $product->title }}</h5>
               </div>
               <div class="card-footer text-center">
                   ${{ $product->price }}
                   <a href="#" class="btn btn-primary">加入購物車</a>
               </div>
           </div>
           @if($loop->iteration % 2 == 0)
               <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
           @endif
           @if($loop->iteration % 3 == 0)
               <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
           @endif
           @if($loop->iteration % 4 == 0)
               <div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
           @endif
           @if($loop->iteration % 5 == 0)
               <div class="w-100 d-none d-xl-block"><!-- wrap every 5 on xl--></div>
           @endif
       @empty
           <div class="card mb-4">
               <div class="card-body">
                   <h1 class="card-title">目前無任何商品</h1>
               </div>
           </div>
       @endforelse
       </div>
   @endsection
   

3. 不過卡片疊的缺點是無法自適應，所以，我們在16~27行，根據出現的數量，讓程式根據目前螢幕大小自動加入類似換行語法（其實不是換行，只是看起來會有類似效果）。
4. 以3個就換行的「w-100 d-none d-md-block d-lg-none」為例，當螢幕不大時（如平板），一列出現三個商品，所以，每三個商品就出現一次換行區塊。
   • w-100代表寬度100%，詳細可參考：https://bootstrap.hexschool.com/docs/4.2/utilities/sizing/
   • d-代表bootstrap4的display屬性
   • none表示一般是不顯示；
   • md-block，代表螢幕可限範圍符合md標準（約768 ~ 991 px之間）時，以區塊顯示（就會有換行效果）；
   • lg-none，代表螢幕可視範圍符合md標準時（約 992 ~ 1199 px），也不顯示。
   • 這些呈現效果上的用法可參考：https://bootstrap.hexschool.com/docs/4.2/utilities/display/
5. $loop->iteration是所謂的循環變數，用來取得現在跑到第幾圈，可以用的變數有：https://learnku.com/docs/laravel/5.8/blade/3902#the-loop-variable
6. $loop->iteration % 5 == 0，其中%是求餘數，也就是說目前的圈數若可以被5整除（餘數=0），亦即每出現五組商品時，就加入類似換行的效果：
   

7. 當螢幕比較小時，兩組就行

8. 若是沒有資料，則顯示自訂資訊：
   

9. 大功告成！請直接在網址輸入：  myshop.test/product或 http://myshop.test（注意，後面不可以有 / ，否則路由以後會誤判）