Laravel 개발자에게 좋은 소식 : LiveWire를 사용하여 동적 인터페이스 구성을 단순화하십시오! 이 기사에서는이 강력한 Laravel 풀 스택 프레임 워크 인 Livewire를 사용하는 방법을 안내하며 동적 대화 형 인터페이스를 쉽게 생성하며 JavaScript 코드의 양을 크게 줄입니다. LiveWire를 사용하면 지루한 기본 구현보다는 응용 프로그램 기능 개발에 집중할 수 있습니다.
코어 포인트 :
LiveWire는 주로 PHP 및 블레이드 템플릿을 사용하여 Laravel 동적 인터페이스를 구축하고 JavaScript 코드가 거의없는 풀 스택 프레임 워크입니다.
이 튜토리얼은 LiveWire가 페이지 재 장전없이 동적 UI 업데이트 (예 : 검색 및 정렬)를 처리하는 방법을 보여주는 CRUD 앱 구축을 안내합니다.
LiveWire는 vue.js, 특히 프론트 엔드 프레임 워크 초보자의 훌륭한 대안이며, 당신이 익숙한 Laravel 템플릿을 최대한 활용하여 더 부드러운 학습 곡선을 갖습니다.
설정 프로세스에는 새 Laravel 프로젝트 작성, 데이터베이스 설정, LiveWire 설치 및 기타 필요한 종속성이 포함됩니다.
LiveWire의 주요 기능에는 실시간 확인, 페이징 및 인터페이스에서 직접 사용자 상호 작용 관리 (사용자 생성, 업데이트 및 삭제)가 포함됩니다. -
최적화 기술은 셰이크 방지 기술을 사용하여 검색 입력 및 지연된로드 양식 제출물을 사용하여 성능 및 사용자 경험을 향상시키는 것과 같은
튜토리얼에서 강조됩니다. -
- 라이브 와이어 란 무엇입니까?
LiveWire는 블레이드 템플릿과 소량의 JavaScript를 사용하여 반응 형 동적 인터페이스를 구축 할 수있는 라이브러리입니다. "Small"은 브라우저 이벤트를 통해 데이터를 전달하고 이에 응답하기 위해 JavaScript 만 작성하면됩니다. -
라이브 와이어를 사용하여 페이지를 다시로드하지 않고 다음 기능을 구현할 수 있습니다.
- Pagination
형식 검증
알림
파일 업로드 미리보기 <li>
</li>
<not> LiveWire의 기능은 그 이상이라는 점에 유의해야합니다. 더 많은 시나리오에 사용할 수 있으며 위는 가장 일반적인 시나리오 중 일부일뿐입니다. </not></prev></is>
</ul>
<p> Livewire와 Vue 의 비교
<always> vue는 Laravel 개발자가 응용 프로그램에 상호 작용을 추가 할 수있는 선호하는 프론트 엔드 프레임 워크였습니다. 이미 VUE를 사용하고 있다면 LiveWire를 배우는 것이 선택 사항입니다. 그러나 Laravel 프론트 엔드 개발을 처음 접하고 Vue 대안을 찾고 있다면 Livewire는 훌륭한 옵션입니다. 블레이드를 사용하여 템플릿 파일을 작성하기 때문에 학습 곡선은 vue보다 더 평평합니다.
Livewire와 Vue의 비교에 대한 자세한 내용은 "Laravel Livewire vs Vue"를 확인하십시오. </always></p>
응용 프로그램 개요 <p>
<a> 우리는 실시간 CRUD 응용 프로그램을 만들 것입니다. 본질적으로 페이지 재 장전이 필요하지 않은 CRUD 응용 프로그램입니다. LiveWire는 검색 필드를 통한 필터링 결과, 열 제목별로 정렬 및 간단한 페이지 매김 (이전 및 다음)을 포함하여 UI를 업데이트하는 데 필요한 모든 AJAX 요청을 처리합니다. 사용자를 생성하고 편집하면 부트 스트랩 모달 상자를 사용합니다. </a></p>
<p> </p>
<the> github 리포지토리를 방문 하여이 프로젝트의 소스 코드를 볼 수 있습니다. <ul>
전제 조건 <li> </li>이 자습서는 PHP 응용 프로그램 개발에 대한 경험이 있다고 가정합니다. Laravel 경험은 도움이되지만 필요하지는 않습니다. 순수한 PHP 또는 기타 PHP 프레임 워크 만 알고 있다면 계속 배울 수도 있습니다. <p>
이 자습서는 컴퓨터에 다음 소프트웨어를 설치했다고 가정합니다.
</p>
<p> php
<l l> mysql </l></p>
nginx <ul>
작곡가
<n n> 노드 및 npm
Mac을 사용하는 경우 DBNGIN 및 LARAVEL VALET을 설치하는 것이 MySQL 및 Nginx를 설치하는 것보다 편리합니다. <li>
프로젝트 설정 </li>
<a> 당신은 새로운 라 라벨 프로젝트를 만들 수 있습니다 :
<li>
<the> 생성 된 LiveCrud 폴더로 이동하십시오. 이것은 자습서 전체에서 모든 명령을 실행하는 루트 프로젝트 폴더입니다. </the>
</li>
다음 단계는 선택한 데이터베이스 관리 도구를 사용하여 MySQL 데이터베이스를 만드는 것입니다. 데이터베이스 LiveCrud의 이름을 지정하십시오. <li>
백엔드 종속성을 설치하는 <end>
<one> 우리는 하나의 백엔드 종속성 만 라이브 와이어입니다. 다음 명령으로 설치하십시오
</one></end>
</li>
<li> 참고 : 데모를 만들 때 사용한 특정 버전을 설치했습니다. 앞으로이 기사를 읽으면 최신 버전을 설치하는 것이 좋습니다. GitHub 저장소의 프로젝트 변경 로그를 확인하여 아무것도 놓치지 않았는지 확인하십시오. </li>
<dat> 데이터베이스를 설정
<ault> 기본 마이그레이션을 업데이트하여 사용자 테이블을 생성하고 사용할 사용자 지정 필드를 추가하십시오.
<p>
<the the> 다음, 데이터베이스/팩토리/userfactory.php 파일을 업데이트하고 다음을 추가 한 사용자 정의 필드의 값을 제공합니다.
</the></p>
<the> 마지막으로 데이터베이스/시드러/DatabaseSeeder.php 파일을 열고 통화를 통해 가상 사용자를 생성하기 위해 호출을합니다.
<p>
<update> 사용중인 테스트 데이터베이스로 .env 파일을 업데이트하는 것을 잊지 마십시오. 이 경우 데이터베이스 LiveCrud를 지명했습니다. 완료되면 마이그레이션과 시드러를 실행하여 데이터베이스를 채우십시오.
<strong>
<end> 프론트 엔드 종속성을 설정
<ify> 작업을 단순화하기 위해 부트 스트랩에 Laravel Scaffold를 사용합니다. 이렇게하려면 먼저 Laravel/UI 패키지를 설치해야합니다.
</ify></end></strong>
<bo> 다음, 부트 스트랩 4를 설치하십시오. WebPack.mix.js 파일에 구성이 추가되고 리소스/js/app.js 및 resources/sass/app.scss 파일을 만듭니다.
</bo></update></p>
<f> 다음은 리소스/sass/app.scss 파일에 awsome을 추가하십시오. 기본적으로 이미 글꼴, 변수 및 부트 스트랩 가져 오기를 포함해야합니다.
<p>
마무리 후 모든 종속성을 설치 한 후
</p>
<pre class="brush:php;toolbar:false"><code class="language-bash">composer create-project laravel/laravel livecrud</code>
(다음 단계, 공간 제한으로 인해 세그먼트에서 출력됩니다. 나머지를 얻으려면 계속 질문하십시오)
>
위 내용은 Laravel Livewire로 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
