TALL로 당신의 첫 번째 블로그 - 다섯 번째 부분 만들기

안녕하세요, 이번 강좌 시리즈를 시청하신 것을 환영합니다.지난 회에서 공장을 만드는 법을 배웠고 샘플 데이터를 사용하여 데이터베이스에 피드를 추가했습니다.이 컬렉션은 Laravel Livewire 구성 요소로 Google 블로그를 구성하는 UI 섹션에서 시작합니다.
이 자습서가 끝나면 다음을 수행할 수 있습니다.

Livewire 구성 요소가 무엇인지 설명합니다.

원하는 대로 Livewire 구성 요소를 생성하고 수정합니다.

Tailwind CSS 유틸리티 클래스를 사용하여 블레이드 뷰 파일의 요소를 실제 레이아웃합니다.

여느 때처럼 안전벨트를 매고 돌진하자.
참고: Githubhere에 액세스할 수 있는 엔트리 프로젝트가 있습니다.

소개하다.

제2부분 개술

이 자습서의 두 번째 부분에서는 기본 Laravel Jetstream 시작 페이지로 돌아가도록 일반 사용자를 위한 라우팅을 구성한 것을 기억합니다.만약 당신이 기억하고 있다면, 우리 블로그가 대중을 대상으로 하는 페이지에는 두 가지 경로가 있습니다. 바로 홈페이지와 분류 페이지입니다.홈 페이지에는 블로그 게시물이 나열되고 분류 페이지에는 특정 범주의 모든 블로그 게시물이 나열됩니다.이 강좌 시리즈here의 두 번째 부분을 놓치면 언제든지 이 부분을 읽을 수 있습니다.
이 두 페이지에서 작업을 하고, 환영 페이지를 이번 프로그램의 더 재미있는 블로그 게시물 목록으로 바꿀 것입니다. 비록 Tailwind CSS 유틸리티가 소개되었지만.그래.계속 읽어.

Livewire 구성 요소 소개

Livewire 구성 요소는 다시 사용할 수 있는 코드 세션입니다. 한 번 정의하고 프로그램의 다른 부분에서 사용할 수 있습니다.이들은 Laravel 구성 요소와 같지만 Laravel과 Livewire의 기능을 동시에 갖추고 있다.기본적으로 는 해당 뷰 파일을 사용하여 Livewire 구성 요소를 생성합니다.Livewire 구성 요소 클래스도 app/Http/Livewire 디렉터리에 있고, 그에 상응하는 보기는 Resources/views/Livewire 디렉터리에 있습니다.

Livewire 구성 요소 생성

Livewire 구성 요소는 터미널에서 make:livewire 또는 livewire:make Artisan 명령을 실행하여 생성됩니다.

php artisan make:livewire PostItem
// or ...
php artisan livewire:make PostItem

이것은 기본 Livewire Component 클래스를 확장하고 보기와 내연 텍스트를 보여주는 render 방법을 포함하는 가장 기본적인 Livewire 구성 요소를 만들 것입니다.

<?php // tall-blog/app/Http/Livewire/PostItem.php 
namespace App\\Http\\Livewire;

use Livewire\\Component;

class PostItem extends Component {
    public function render() {
        return view('livewire.post-item');
    }
}

그리고 그에 상응하는 관점:

{{\-- tall-blog/resources/views/livewire/post-item.blade.php --}}
<div>
    {{\-- If you look to others for fulfillment, you will never truly be fulfilled. --}}
</div>

추가 --inline 옵션은 Livewire의 구성 요소가 내장된 구성 요소이며, render 방법에서 보기를 되돌려주지 않습니다.따라서

php artisan make:livewire PostItem --inline

결과는 다음과 같습니다.

...
public function render() {
    return <<<'blade'
            <div></div>
        blade;
}
...

Livewire 구성 요소의 public 속성은 구성 요소의 보기 파일에서 언제든지 사용할 수 있다는 점을 이해하는 것이 중요합니다. 따라서 순수한 Laravel 컨트롤러를 사용할 때처럼 view 방법으로 전달할 필요가 없습니다.

// This:
class PostItem extends Component {
    public $post;
    public function render() {
        return view('livewire.post-item');
    }
}

// is the same as this:
class PostItem extends Component {
    public $post;
    public function render() {
        return view('livewire.post-item', ['post' => $post]);
    }
}

Livewire 구성 요소 렌더링

Livewire 구성 요소는 다시 사용할 수 있어야 합니다.따라서 Laravel 구성 요소를 사용하고 싶은 모든 곳에서 사용할 수 있습니다.<livewire:component-name /> 태그 구문 또는 @livewire('component-name') 블레이드 명령 구문을 사용하여 구성 요소를 표시할 수 있습니다.

<div>
    <livewire:post-item />
</div>
{{-- Or --}}
<div>
    @livewire('post-item')
</div>

어셈블리에 매개변수 전달

다음과 같이 매개변수를 지정하여 부품에 매개변수를 전달할 수 있습니다.

<livewire:post-item :post="$post" />
{{-- or --}}
@livewire('post-item', ['post' => $post])

PostItem 구성 요소 및 뷰에서 $post 변수를 사용할 수 있습니다.

액세스 라우팅 매개변수

Livewire는 기존 Laravel 컨트롤러에서처럼 라우팅 매개 변수에 액세스해야 하는 경우 mount 방법을 사용할 수 있습니다.

class MyComponent extends Component {
    public $userId;

    public function mount($userId) {
        $this->userId = $userId;
    }

    public function render() {
        return view('livewire.my-component');
    }
}

이 기능을 통해 Livewire 구성 요소는 Laravel 컨트롤러의 행동을 크게 시뮬레이션할 수 있고 전체 페이지 구성 요소를 쉽게 만들 수 있습니다.

우리 블로그의 구성 요소 만들기

현재 Livewire 구성 요소에 대해 깊이 있게 알고 계셔서 저희 블로그에 계속 관심을 가져보도록 하겠습니다.위에서 시작하지 않은 경우 터미널에서 다음 명령을 실행하여 프로젝트의 첫 번째 Livewire 구성 요소를 만듭니다.

php artisan make:livewire PostItem

이 구성 요소는 홈 페이지와 클래스 페이지의 목록에 있는 게시물 항목을 표시합니다.app/Http/Livewire/positem에서 구성 요소 클래스를 엽니다.php는 처음에 공공 $post 속성을 추가합니다.component 클래스의 모양은 다음과 같아야 합니다.

<?php // tall-blog/app/Http/Livewire/PostItem.php
namespace App\Http\Livewire;

use Livewire\Component;

class PostItem extends Component {
    public $post;

    public function render() {
        return view('livewire.post-item');
    }
}

위에서 말한 바와 같이, $post 속성은 현재 보기 파일에서 언제든지 사용할 수 있습니다. public 라고 명시되어 있기 때문입니다.resources/views/livewire/post item에서 칼날 보기 파일을 엽니다.칼날.php.다음 항목이 포함되어 있는지 확인합니다.

{{-- tall-blog/resources/views/livewire/post-item.blade.php --}}
<article class="flex flex-col mb-2 rounded-md shadow-md md:mb-0">
    <a href="{{ route('post-detail', ['slug' => $post->slug]) }}">
        <img src='{{ asset("storage/posts/$post->featured_image") }}' 
            alt="{{ $post->title }}" class="w-full h-56 rounded-t-md">
    </a>
    <div class="p-3">
        <h3 class="text-lg font-semibold text-gray-900">
            <a href="{{ route('post-detail', ['slug' => $post->slug]) }}">
                {{ $post->title }}
            </a>
        </h3>
        <p class="text-gray-800">
            <a href="{{ route('post-detail', ['slug' => $post->slug]) }}">
                {{ $post->excerpt }}
            </a>
        </p>
        <div class="flex flex-row justify-between mt-2">
            <a href="{{ route('category', ['category' => $post->category]) }}" 
                 class="px-2 text-sm text-indigo-900 bg-indigo-100 rounded">
                {{ $post->category }}
            </a>
            <small>
                {{ $post->published_date }}
            </small>
        </div>
    </div>
</article>

우선, 이 파일의 $post 변수를 사용하고 있으며, 블로그 글 항목을 포함하고 있습니다.Tailwind CSS 클래스 유틸리티를 사용하여 루트 요소<article>의 스타일을 설계하고 있습니다.이 예에서 우리는 그 내용을 Flexbox에 놓았는데 그 중에서 flex-direction는 col이다. 이것은 우리가 위에서 아래로 내용을 놓기를 원한다는 것을 의미한다.mb-2는 8픽셀 간격의 밑값을 나타내는 실용류로 그 중에서 rounded-md와 shadow-md는 각각 중등 원형과 중등 음영 모양을 나타낸다.
다음은 앵커 요소a 태그입니다.게시물 상세 정보 페이지 (route helper 함수 사용) 에 대한 명칭 루트를 인용하고 있습니다. 이 페이지는 게시물의 slug를 사용하여 링크를 구축합니다.게시물 세부 경로를 만들지 않았으므로 홈 경로 아래에 추가해야 합니다.

Route::get('/', function () {
     return view('welcome');
})->name('home');

// Add below route
Route::get('{slug}', function ($slug) {
    return view('welcome');
})->name('post-detail');

나무의 다음은 그림입니다. 우리는 w-full 나무의 너비 (100%) 를 가득 채웠고, 나무의 높이는 h-56 (224px 상당) 이고, 꼭대기는 원형입니다.post 이미지 src 속성은posts 폴더에 있는 그림을 가리킵니다. 이것은 우리가 이전에 만든 storage 기호 링크에 있습니다.asset도 도움말 기능 중 하나로 칼날 보기에서 자산(css, 이미지, js) 파일을 표시할 수 있습니다.파일 자체는posts 폴더에 업로드되고 그 이름은 데이터베이스에 저장됩니다.
다음 블록은 제목, 발췌문, 분류, 발표 날짜를 포함하고 모든 내용을 하나의 잘 채워진 ((p-3 div 요소로 포장합니다.제목과 발췌문 모두 Tailwind CSS 색상 유틸리티와 다른 회색 텍스트 색상을 사용합니다.마지막으로 주의해야 할 것은 우리의 글의 종류와 발표 날짜도 왼쪽에서 오른쪽(div)까지의 플렉스박스row 용기에 포장되어 있으며, 이 용기는 justify-between 실용 프로그램을 가지고 있어 이 두 요소가 div 요소의 좌우 양쪽에 배치될 수 있도록 한다.
post-item 구성 요소가 완성되었습니다.홈 페이지의 모든 게시물을 보여 주는 다른 구성 요소를 만듭니다.이 구성 요소는 데이터베이스에서 모든 댓글을 가져오고, 위에서 만든postitem 구성 요소에 모든 댓글을 표시합니다.[게시물 표시] 구성 요소를 만들려면 명령을 입력합니다.

php artisan make:livewire ShowPosts

생성된 구성 요소를 app/Http/Livewire/ShowPosts에서 엽니다.php는 다음 내용과 동일한지 확인합니다.

<?php // tall-blog/app/Http/Livewire/ShowPosts.php
namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;

class ShowPosts extends Component {
    public $posts;

    public function mount() {
        $this->posts = Post::where('is_published', true)->get();
    }
    public function render() {
        return view('livewire.show-posts')->layout("layouts/guest");
    }
}

$posts 속성은 데이터베이스에서 얻은 모든 댓글을 저장합니다. 이 구성 요소를 설치할 때 이 댓글을 저장합니다. (이것이 바로 조회를 mount 방법에 두는 이유입니다.)우리는 발표된 게시물에만 흥미를 느낀다.게스트 레이아웃 파일인 사용할 레이아웃도 지정했습니다.기본적으로 Livewire는 리소스/뷰/레이아웃/어플리케이션을 사용합니다.칼날.php 레이아웃 파일.그러나 Jetstream은 이 레이아웃에 인증과 다른 검사를 추가했기 때문에 이 검사가 없는 상황에서 레이아웃 파일을 사용하면 오류가 발생할 수 있습니다. 이것이 바로 리소스/views/layouts/guest를 사용하는 이유입니다.칼날.php 레이아웃 파일.
현재 상응하는 참고 자료/views/livewire/show 댓글을 엽니다.칼날php blade 보기를 표시하고 다음을 입력합니다.

<div class="gap-4 m-2 md:grid md:grid-cols-2 lg:grid-cols-4">
    @foreach ($posts as $post)
        @livewire('post-item', ['post' => $post], key($post->id))
    @endforeach
</div>

이것은 네가 상상한 것보다 간단하다.우리는 $posts 집합에서 순환하고, 이전에 만든 PostItem 구성 요소를 사용하여 집합을 보여줍니다. $post 매개 변수를 post 매개 변수에 전달하고, 키 post id를 줍니다. 이 키는 현재 post 항목을 다른 항목과 구분하는 데 사용됩니다. 예를 들어,post의 가시성을 전환하려면 매우 필요합니다.
순풍 부분에서 저희가 보여드렸어요.

작은 화면의 블록 컨테이너

화면 장치에 두 열의 격자 용기와

대형 스크린 장치

에 4열의 격자 용기
모든 이 물건들 사이에는 16화소의 간격이 있다.물론 8 픽셀의 간격도 있다.
이제 홈 페이지 경로를 다음과 같이 변경합니다.

...
Route::get('/', App\Http\Livewire\ShowPosts::class)->name('home');
...

터미널에 연결하여 php artisan serve를 실행하고 브라우저를 http://127.0.0.1:8000로 열면 홈페이지에서 댓글을 볼 수 있습니다.

이제 다음 Artisan 명령을 실행하여 마지막 Livewire 구성 요소를 만들면 특정 범주의 모든 게시물이 표시됩니다.

php artisan make:livewire CategoryPosts --inline

show posts 구성 요소 보기 파일을 다시 사용하기 때문에 CategoryPosts 구성 요소를 연결할 것입니다.이 두 가지 방법은 데이터베이스에서 필터하는 것 외에 다를 것이 없기 때문에 이런 방법을 사용하는 것이 더욱 간단하다.
다음과 일치하도록 구성 요소 수정CategoryPosts:

<?php 
// tall-blog/app/Http/Livewire/CategoryPosts.php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;

class CategoryPosts extends Component {
    public $posts;

    public function mount($category) {
        $this->posts = Post::where('category', $category)
             ->where('is_published', true)
             ->get();
    }
    public function render() {
        return view('livewire.show-posts')
                 ->layout("layouts/guest");
    }
}

이것은 ShowPosts 구성 요소와 거의 같습니다. 다만, 쿼리를 mount 방법에 기반한 주어진 종류의 쿼리 문자열로 변경합니다.범주 라우트를 다음과 같이 변경합니다.

...
Route::get('categories/{category}', CategoryPosts::class)->name('category');
...

내장 PHP 서버가 실행되지 않으면 서버를 시작합니다.

php artisan serve

이제 홈페이지로 돌아가서 어떤 종류든 클릭하세요.범주 페이지로 전송하여 같은 범주의 게시물을 표시합니다.

이 회는 이것으로 끝냅니다.나는 네가 이 강좌를 정말 좋아하길 바란다. 나도 네가 다음 편을 읽는 것을 보고 싶다.우리는 우리의 및 Facebook 페이지에 업데이트를 발표했다.만약 당신이 개의치 않는다면, 당신은 우리의 모든 소셜 미디어 페이지를 주목해서, 새로운 댓글을 올릴 때 알림을 받을 수 있습니다.
트위터:
Facebook:https://www.facebook.com/bandughana
감사합니다. 다음 댓글 또 만나요.