:::

10. 建立前台顯示商品頁面

一、商品列表的路由(/product/index)

  1. 商品的新增、刪除、修改我們都在後台做完了,接著我們只要在前台將商品展示出來即可。
  2. 一般「列表」功能,其路由名稱預設是/index(強烈建議,但非強制),搭配資源,其路由便是「/product/index」,也就是說,當瀏覽器網址輸入「http://網址/product/inedx」時,系統便會新增商品的界面
  3. 不過我們也希望,網站一進來,就是商品列表,所以,我們也一併將首頁改為商品列表。
  4. 由於是從網址輸入,所以其動詞是get
  5. 此界面可放在名為/專案/resources/views/product/index.blade.php的視圖中,利用view()來呼叫之
  6. 最後,將此路由命名為product.index,以方便連結。所以,請開啟\專案\routes\web.php網站路由並編輯之:
    Route::get('/', function () {
        return view('product.index');
    });
    Route::get('/product/index', function () {
        return view('product.index');
    })->name('product.index');
    
    Auth::routes();
    
    Route::get('/home', 'HomeController@index')->name('home');
    

二、建立index的視圖

  1. 我們可以直接把 /專案/resources/views/welcome.blade.php另存為新的子視圖 /專案/resources/views/product/index.blade.php
    @extends('layouts.app')
    @section('content')
        <h1>商品一覽</h1>
    @endsection
    
  2. 如此不管是執行 http://myshop.testhttp://myshop.test/product/index 都會看到相同畫面

 

到GitHub觀看此單元程式異動

 


:::

書籍目錄

展開 | 闔起

快速登入


https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1419%26tbsn%3D43

計數器

今天: 5044504450445044
昨天: 2489248924892489
總計: 8027026802702680270268027026802702680270268027026