Laravel 및 Livewire를 사용하는 점수 앱

안녕하세요 독자 여러분...

오늘은 이 블로그에서 라라벨과 라이브와이어를 이용한 스코어 앱의 예를 들어보겠습니다. 이전 포스트에서 우리는 laravel과 livewire를 설치하고 사용하는 방법을 보았습니다. 여기에서 게시물을 볼 수 있습니다.

더 이상 사용할 수 없는 기사

또한 로그인 후 환영 메시지를 표시하는 하나의 livewire 구성 요소를 만들었습니다.

그래서 오늘의 블로그 게시물에서는 간단한 점수 앱 예제로 livewire가 작동하는 것을 볼 것입니다. 사용하기가 매우 쉽고 크기가 충분하지 않을 때 내 프로젝트에 livewire를 사용하는 것을 좋아했습니다.

코딩 부분부터 시작하겠습니다.

다음 명령을 실행합니다.php artisan make:livewire ScoreCounter
하나는 클래스 파일이고 다른 하나는 resources/views/livewire 폴더에서 찾을 수 있는 보기 파일입니다.

1단계 - 보기 파일 열기 - resources/views/livewire/score-counter 및 아래 코드 추가

<div>
    {{-- In work, do what you enjoy. --}}
    <div class="flex flex-row text-center">
        <div class="w-1/2 p-10">
            <h1 class="mb-5 text-2xl">
                Team A
            </h1>
            <h1 class="mb-9 text-5xl text-fuchsia-600 font-extrabold">
                {{ $scoreA }}
            </h1>
            <div class="text-white">
                <button wire:click="increment('teamA')" class="text-2xl border border-indigo-600 bg-indigo-500 rounded mx-2 px-10 py-1 mb-2">+</button>
                <button wire:click="decrement('teamA')" class="text-2xl border border-red-400 bg-red-600 rounded mx-2 px-10 py-1">-</button>
            </div>
        </div>
        <div class="w-1/2 p-10 border-l-2">
            <h1 class="mb-5 text-2xl">
                Team B
            </h1>
            <h1 class="mb-9 text-5xl text-fuchsia-600 font-extrabold">
                {{ $scoreB }}
            </h1>
            <div class="text-white">
                <button wire:click="increment('teamB')" class="text-2xl border border-indigo-600 bg-indigo-500 rounded mx-2 px-10 py-1 mb-2">+</button>
                <button wire:click="decrement('teamB')" class="text-2xl border border-red-400 bg-red-600 rounded mx-2 px-10 py-1">-</button>
            </div></div>
    </div>
</div>

2단계 - ScoreCounter에 있는 app/Http/Livewire/ScoreCounter.php라는 클래스 파일을 열고 아래 코드를 추가합니다.

    public $scoreA = 0, $scoreB = 0;

    public function increment($team)
    {
        $team == 'teamA' ? $this->scoreA++ : $this->scoreB++;
    }

    public function decrement($team)
    {
        $team == 'teamA' ? $this->scoreA-- : $this->scoreB--;
    }

전체 코드는 다음과 같습니다.

<?php
namespace App\Http\Livewire;

use Livewire\Component;

class ScoreCounter extends Component
{
    public $scoreA = 0, $scoreB = 0;

    public function increment($team)
    {
        $team == 'teamA' ? $this->scoreA++ : $this->scoreB++;
    }

    public function decrement($team)
    {
        $team == 'teamA' ? $this->scoreA-- : $this->scoreB--;
    }

    public function render()
    {
        return view('livewire.score-counter');
    }
}

render() 메서드는 팀 A와 팀 B의 점수를 표시하는 점수 앱의 보기 구성 요소를 렌더링합니다.

먼저 두 개의 공용 변수 scoreA 및 scoreB를 만들고 초기 값을 0으로 할당했습니다. 이제 이 공용 변수는 어디에서나 액세스할 수 있습니다.

두 번째로 두 가지 방법을 정의했습니다.
매개변수로 team_name을 사용하는 increment() 및 decrement().

증분 버튼을 클릭하면 버튼을 클릭한 팀 이름이 있는 클래스 파일로 전달되고 매개변수로 team_name을 확인하고 일치하면 해당 특정 팀의 점수를 증가시킵니다. 점수 카운터를 감소시키기 위해 동일한 절차가 사용됩니다.

예를 들어 B 팀의 증가 버튼을 클릭하면 B 팀의 점수가 증가하고 A 팀의 점수가 증가합니다.

최종 출력은 스크린샷을 참조하십시오.



행복한 코딩..
읽어주셔서 감사합니다... 🦄 ❤️ 🦄