从零构建 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 页面如下:

从零构建 Laravel 论坛三:话题列表

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
    从零构建 Laravel 论坛三:话题列表

    如果不指定需要测试方法 ( –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} 页面如下:
从零构建 Laravel 论坛三:话题列表和话题详情

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);
    }
  1. 运行测试
    php artisan test tests/Feature/TopicTest.php
    从零构建 Laravel 论坛三:话题列表和话题详情

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
    从零构建 Laravel 论坛三:话题列表和话题详情
本作品采用《CC 协议》,转载必须注明作者和本文链接
木木林
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

不错的,我也想写写啊

2年前 评论
laradocs 2年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!