从零构建 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';
.
.Copy

4.3、 补全话题列表的方法#

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

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

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>Copy

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);
    }Copy

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'));
    }
    .
    .Copy

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>Copy

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);
    }Copy

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]);
    }Copy

2. 修改 resources/views/topics/index.blade.php 里的链接

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

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);
    }
    .
    .Copy

4. 运行测试
   php artisan test tests/Feature/TopicTest.php
   

本作品采用《CC 协议》，转载必须注明作者和本文链接