데모 앱용 블레이드 구성 요소 및 지침

데모 프로젝트를 구축할 때 초보자로서 자격 증명을 공유하지 않고 프로젝트를 선보이고 싶을 수 있습니다. 따라서 데모 앱에 대한 로그인 방법을 만들어야 합니다. 매우 간단합니다. 그러나 우리는 그것을 위해 구성 요소를 만들지 않는 이유는 무엇입니까? 저에게는 우아해 보입니다. 이를 달성할 수 있는 방법을 살펴보겠습니다.

먼저 특정 섹션에 대한 레이아웃을 만듭니다.

php artisan make:component Demo/LoginAsDemoLayout

이렇게 하면 resources/views/components/login-as-demo-layout.blade.php에서 블레이드 구성 요소가 생성됩니다.

이 코드를 거기에 넣으십시오.

<div>
    <div class="row justify-content-center mt-3">
        <div class="col-md-12">
            {{ $slot }}
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.login_as').on('click', function () {
                var $_role = $(this).attr('id').replace('login_as_', '');
                $.ajax({
                    url: "{{ route('login_as') }}",
                    type: "POST",
                    data: { param: $_role },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (data) {
                        window.location.href = data.redirect
                    }
                });
            });
        });
    </script>
@endpush

이제 login-as.blade.php에서 resources/views/components/demo/buttons라는 이름의 클래스를 만들지 않고 버튼 구성 요소를 만듭니다.

이 코드를 복사하여 거기에 붙여넣으십시오.

<div>
    @foreach($roles as $role)
        <button id="login_as_{{ $role }}" class="login_as btn btn-primary btn-block">Login as {{ ucwords(preg_replace('/[-,_]/', ' ', $role)) }}</button>
    @endforeach
</div>

이제 이$roles가 어디서 왔는지 궁금할 것입니다. 여기에 블레이드 구성 요소의 마법이 있습니다.

버튼을 표시하려는 곳에 이 코드를 넣습니다.

<x-demo.login-as-demo-layout>
     <x-demo.buttons.login-as :roles="['super-admin', 'admin', 'manager']"/>
</x-demo.login-as-demo-layout>

x-demo.login-as-demo-layout - 데모 섹션에 표시하려는 기본 레이아웃입니다.

x-demo.buttons.login-as - 버튼입니다

.
x-demo.buttons.login-as에 실제로 소품:roles이라고 하는 속성과 같은 것이 있음을 알 수 있습니다. 이 소품은 변수처럼 작동합니다. 따라서 변수의 모든 항목을 전달할 수 있습니다.

이 시나리오에서는 필요한 만큼 항목을 추가할 수 있음을 의미하는 배열을 전달했습니다. 이제 수동으로 수행하는 대신 배열의 다른 항목을 푸시할 수 있는 새 역할이 있다고 가정해 보겠습니다. 데이터베이스에서 역할을 동적으로 전달할 수도 있습니다. 어느 쪽이 꽤 멋지죠?

이제 또 다른 멋진 부분을 보여드리겠습니다. Blade If Directive라고 합니다.

데모 섹션을 비활성화하고 싶다고 상상해 보십시오.

그래서 간단히 이것을 할 수 있습니다.

APP_DEMO에 키.env를 추가하고 true로 설정합니다.

해당 키를 config/app.php에 추가

'demo' => env('APP_DEMO', 'false'),

코드에서 if 조건 수행

@if(config('app.demo') === true)
show content
@endif

그러나 이것은 전통적인 방법이 아닙니다. 데모용으로만 영구적인 지침을 만드는 것은 어떻습니까?

조건 부분을 제외하고 위의 단계를 따르고 이 간단한 코드를 boot 의 AppServiceProvider 메서드 내부에 복사하십시오.

Blade::if('_demo', function () {
    return config('app.demo') === true;
});

용법

@_demo
{{-- Login As Component --}}
<x-demo.login-as-demo-layout>
    <x-demo.buttons.login-as :roles="['super-admin', 'admin', 'manager']"/>
</x-demo.login-as-demo-layout>
@end_demo

어떤 경우에는 작동하지 않습니다. 이 명령을 실행합니다.

php artisan view:clear

이제 이 블로그의 시작 부분에 왜 ajax의 컨트롤러 코드를 넣지 않았는지 생각할 수 있습니다. 이는 이 블로그의 범위가 아니기 때문입니다. 또한 자신만의 컨트롤러를 생성하는 방법에 따라 다릅니다. 내가 어떻게했는지보고 싶을 수도 있습니다. 여기있어.

간단히 호출 가능한 컨트롤러를 생성합니다.

php artisan make:controller Auth/LoginAsController --invokable

이 코드를 거기에 붙여넣습니다.

public function __invoke(Request $request)
{
    $login_as = $request->get('param');
    $find_user = function ($email) {
        $this->user =  User::where('email', '=', $email)->first();
    };

    match ($login_as) {
        'super_admin' => $find_user(SUPER_ADMIN),
        'admin' => $find_user(ADMIN),
        'manager' => $find_user(MANAGER),
        'default' => 'Could not find user'
    };

    Auth::login($this->user);

    return response()->json([
        'msg' => 'Logged in successful',
        'redirect' => redirect()->intended()->getTargetUrl() // use appropriate url where you want to redirect
    ]);
}

나는 개인적으로 모든 응용 프로그램에서 이것을 사용합니다. 간단한 Git Pull 명령을 사용하여 한 번 코딩하고 모든 프로젝트에서 사용할 수 있습니다. 이건 다음 블로그에서 설명하겠습니다.