從零構建 Laravel 論壇三：話題列表和話題詳情

三、引入使用者認證系統

引入 Laravel Breeze 作為使用者認證服務，這個包是 Laravel 8.5 文件中推薦的，我也是第一次使用，不知道好不好用。

四、話題列表

4.1、 新增路由

routes/web.php 增加話題列表的路由
Route::resource('topics', "TopicController", ['only' => 'index']);

4.2、 路由名稱空間

取消檔案 app/Providers/RouteServiceProvider.php 中路由名稱空間的註釋

.
.
    protected $namespace = 'App\\Http\\Controllers';
.
.

4.3、 補全話題列表的方法

app\Http\Controllers\TopicController.php 中的 index 方法內容填充如下

.
.
    public function index()
    {
        $topics = Topic::latest()->get();
        return view('topics.index',compact('topics'));
    }
.
.

4.4、 建立blade模板

新增 resources/views/topics/index.blade.php 內容如下

這裡的 blade 是繼承 Laravel Breeze 的頁面模板

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a>
        </x-slot>
        <!-- Session Status -->
        <x-auth-session-status class="mb-4" :status="session('status')" />
        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">話題</div>
                        <div class="panel-body">
                            @foreach($topics as $topic)
                                <article>
                                    <a href="/topics/{{ $topic->id }}">
                                        <h4>{{ $topic->title }}</h4>
                                    </a>
                                    <div class="body">{{ $topic->body }}</div>
                                </article>
                                <hr>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-auth-card>
</x-guest-layout>

4.5、 訪問話題列表

使用瀏覽器開啟 域名/topics 頁面如下：

4.6、話題單元測試

1. 建立測試檔案
   php artisan make:test TopicTest
2. TopicTest.php 中增加 test_a_user_can_view_all_topics 方法

   use App\Models\Topic;
   use Illuminate\Foundation\Testing\DatabaseMigrations;
   class TopicTest extends TestCase
   {
    use DatabaseMigrations;
    .
    .
    public function test_a_user_can_view_all_topics()
    {
        $topic = Topic::factory()->create();
        $response = $this->get('topics');
        $response->assertSee($topic->title);
    }

3. 執行測試
   php artisan test --filter a_user_can_browse_topics tests/Feature/TopicTest.php
   

   如果不指定需要測試方法 ( –filter 指定方法 )，將會把指定檔案裡 test_ 開頭的方法全部測試一遍

五、 話題詳情

5.1、 修改路由

routes/web.php 增加話題想起的路由
Route::resource('topics', "TopicController", ['only' => ['index', 'show']]);

5.2、完善詳情方法

app\Http\Controllers\TopicController.php 中的 show 方法內容填充如下

    .
    .
    public function show(Topic $topic)
    {
        return view('topics.show', compact('topic'));
    }
    .
    .

5.3、 建立blade模板

新增 resources/views/topics/show.blade.php 內容如下

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a>
        </x-slot>

        <!-- Session Status -->
        <x-auth-session-status class="mb-4" :status="session('status')" />

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {{ $topic->title }}
                        </div>
                        <div class="panel-body">
                            {{ $topic->body }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-auth-card>
</x-guest-layout>

5.4、 訪問話題詳情

使用瀏覽器開啟 域名/topics/{topic} 頁面如下：

5.5、話題詳情測試

TopicTest.php 中增加 test_a_user_can_read_a_single_topic 方法

    .
    .
    public function test_a_user_can_read_a_single_topic()
    {
        $topic = Topic::factory()->create();
        $response = $this->get('/topics/' . $topic->id);
        $response->assertSee($topic->title);
    }

3. 執行測試
   php artisan test tests/Feature/TopicTest.php
   

5.6、 優化話題詳情url

1. App\Models\Topic.php 檔案中增加生成連結的方法

    .
    .
    public function uri()
    {
        return route('topics.show', ['topic' => $this->id]);
    }

2. 修改 resources/views/topics/index.blade.php 裡的連結

   .
   .
   <article>
        <a href="{{ $topic->uri() }}">
            <h4>{{ $topic->title }}</h4>
        </a>
        <div class="body">{{ $topic->body }}</div>
   </article>
   .
   .

3. 修改 TopicTest.php 裡的連結

    .
    .
    public function test_a_user_can_read_a_single_topic()
    {
        $topic = Topic::factory()->create();
        $response = $this->get($topic->uri());
        $response->assertSee($topic->title);
    }
    .
    .

4. 執行測試
   php artisan test tests/Feature/TopicTest.php
   

本作品採用《CC 協議》，轉載必須註明作者和本文連結