Mergulhe profundamente no Laravel Livewire

 composer create-project--prefer-dist laravel/laravel: ^ 7.0 blog-wire

 composer requer livewire/livewire

//app.blade.php


     @livewireStyles

 @yield ('conteúdo') @livewireScripts

 php artisan make: componente Alert

 php artisan make: livewire Alert

//App\Http\Livewire\Alert.php
  
 {{$ message}}

Para vincular uma propriedade de componente a um elemento de entrada html, você usaria o seguinte sintaxe:

 wire: model="nome da propriedade"

Ao digitar na caixa de entrada, você verá o valor de $ message sendo atualizado em tempo real. Isso é muito semelhante ao conceito de vinculação de dados em estruturas como Vue.js, React e Angular. Saiba mais sobre as propriedades Livewire aqui .

Ações Livewire

Assim como você pode vincular dados no modelo de visualização a propriedades públicas de componentes, você também pode mapear eventos do lado do cliente para métodos em seus componentes. Por exemplo, você pode responder a eventos de clique, eventos keyup e keydown etc. usando métodos definidos em sua classe de componente.

Vejamos um exemplo:

  likes=! $ this-> likes; }
} //livewire/post-alert.blade.php
 
 Vendo a ação livewire em ação & # x1f61c; 
  Gostar  @if ($ gostou)   @outro   @fim se

Na classe de componente acima, criamos um método toggleLike () que alterna o valor da propriedade likes para seu valor booleano oposto. Na visualização do modelo, temos um botão e um ícone de coração que é colorido de vermelho ou cinza com base no valor da propriedade likes .

Usamos a sintaxe wire: click=[action name] para vincular o método toggleLike ao evento de clique.

Muitos casos de uso do Livewire giram em torno de propriedades e ações e, como tal, são muito importantes para entender. Esses conceitos podem ser aplicados a coisas como criar formulário , editar formulário , excluir formulário , etc. Leia mais sobre ações Livewire aqui .

Validação de dados

O Livewire torna a validação de dados perfeita. Para validar os dados vindos de uma visão de modelo de formulário, você deve escrever uma propriedade $ rules que contém suas regras de validação, assim como faria no Laravel. Depois disso, você chama $ this → validate () no método que faz a validação.

Vejamos um formulário para criar uma postagem no blog:

...
classe CreatePost extends Component
{ public $ title, $ body; public $ success; protegido $ rules=[ 'title'=>'obrigatório | string | max: 220', 'body'=>'obrigatório' ]; função pública render () { visualização de retorno ('livewire.create-post') -> extends ('layouts.app') -> seção ('conteúdo'); } public function create () { $ this-> validate (); Post:: criar ([ 'título'=> $ this-> título, 'slug'=> Str:: slug ($ this-> título), 'body'=> $ this-> body, 'author_id'=> auth ()-> id () ]); $ this-> sucesso=verdadeiro; }
} //livewire/create-post
 @if ($ sucesso) 
 A postagem foi criada com sucesso 
 @fim se 
 
  Título da postagem   @error ('title')  {{$ message}}  @enderror 
 
  Corpo da postagem    @error ('body')  {{$ message}}  @enderror 
 
  Publicar  
 

No código do formulário acima, quando o usuário envia a postagem, e ela não passa na validação, os erros de validação são exibidos, tudo sem uma atualização da página.

Primeiros passos com Laravel Livewire

Já disse o suficiente-vamos entrar em ação. Você pode acompanhar no repositório GitHub enquanto construímos nosso aplicativo de demonstração.

Como queremos que os usuários conectados possam gerenciar suas próprias postagens, eles devem primeiro criar uma conta. Usaremos o sistema de autenticação integrado do Laravel para isso.

Primeiro, instale o pacote laravel/ui composer:

 compositor requer laravel/ui

Em seguida, execute php artisan ui vue--auth para fazer o scaffold de todo o sistema de autenticação, seguido por php artisan migrate para fazer suas migrações de banco de dados.

N.B ., a maioria das coisas que costumávamos fazer com os controladores agora serão feitas com componentes Livewire.

Vamos continuar criando o modelo necessário para nosso aplicativo de postagens de blog, App \ Post :

  belongsTo (User:: class,'author_id','id'); }
}

Agora vamos criar nosso arquivo de migração,
php artisan make: migration create_posts_table-table=posts:

 Schema:: create ('posts', function (Blueprint $ table) { $ tabela-> id (); $ tabela-> string ('título'); $ table-> string ('slug')-> unique (); $ table-> longText ('body'); $ table-> integer ('author_id'); $ table-> timestamps (); $ tabela-> softDeletes ();
});

Criação de componentes

Estaremos criando um componente para cada ação do blog que desejamos, ou seja, criar postagem, editar postagem, listar postagens e visualizar postagem. Vamos continuar e criar os componentes:

• php artisan make: livewire CreatePost
• php artisan make: livewire EditPost
• php artisan make: livewire ListPost
• php artisan make: livewire HomePost
• php artisan make: livewire ReadPost

Podemos renderizar um componente Livewire diretamente de rotas como esta:

 Route:: get ('/posts/create', [\ App \ Http \ Livewire \ CreatePost:: class,'__invoke'])-> middleware ('auth');

Em vez de chamar as ações do controlador, iremos rotear para os componentes Livewire, como mostrado acima. Vamos agora adicionar todas as rotas de que precisamos em web.php :

 Route:: get ('/', function () { visualização de retorno ('índice');
});
Auth:: routes ();
Route:: get ('/post/{slug}', [\ App \ Http \ Livewire \ ReadPost:: class,'__invoke']);
Route:: get ('/home','HomeController @ index')-> nome ('home');
Route:: get ('/posts/create', [\ App \ Http \ Livewire \ CreatePost:: class,'__invoke'])-> middleware ('auth');
Route:: get ('/posts/{id}/edit', [\ App \ Http \ Livewire \ EditPost:: class,'__invoke'])-> middleware ('auth');

O componente para renderizar a lista de artigos terá a seguinte aparência:

//ListPost.php
 paginate (20); visualização de retorno ('livewire.list-post', ['posts'=> $ posts]) -> extends ('layouts.app') -> seção ('conteúdo'); }
} //livewire/list-post.blade.php
 
 Minhas postagens    Adicionar novo  
 
 @forelse ($ posts as $ post) 
 
    Editar  
 
 
 {{$ post-> título}} 
 
 {!! substr (strip_tags ($ post-> body), 0, 200) !!} 
  Publicado em {{$ post-> created_at}}  
 
 @vazio 
 Você ainda não escreveu nenhuma postagem, escreva uma agora 
 @endforelse 

Então, para criar uma postagem, usaremos isto:

//CreatePost.php
'obrigatório | string | max: 220', 'body'=>'obrigatório' ]; função pública render () { visualização de retorno ('livewire.create-post') -> extends ('layouts.app') -> seção ('conteúdo'); } public function create () { $ this-> validate (); Post:: criar ([ 'título'=> $ this-> título, 'slug'=> Str:: slug ($ this-> título), 'body'=> $ this-> body, 'author_id'=> auth ()-> id () ]); $ this-> sucesso=verdadeiro; }
}

No componente acima, criamos variáveis ​​públicas para conter o título e o conteúdo do corpo de uma postagem do blog, bem como uma variável sucesso para indicar se a criação da postagem foi bem-sucedida.

No método render () , Livewire nos permite especificar o arquivo de layout a ser usado na renderização do componente e a seção onde queremos que ele seja exibido por meio do extends () e section () , respectivamente.

Agora, a visualização do modelo se parece com isto:

 
 @if ($ sucesso) 
 
 A postagem foi criada com sucesso.  Ver todas as postagens  
 
 @fim se 
 
   @error ('title')  {{$ message}}  @enderror 
 
  Corpo da postagem    @error ('body')  {{$ message}}  @enderror 
 
  Publicar  
 

Se você navegar em seu navegador para /posts/create , deverá ver o formulário de criação exibido:

Este é um exemplo bastante básico de como o Livewire pode ser aplicado no mundo real.

Conclusão

O Livewire preenche a lacuna entre o back-end e o front-end. Você obtém o benefício da interatividade em tempo real sem ter que escrever muito JavaScript sozinho. Se você já usou o Vue.js antes, é muito fácil ver os benefícios do Livewire.

O Livewire não é uma ótima escolha para aplicativos que exigem muito do cliente. Mas em situações em que você deseja um aplicativo renderizado por servidor com uma pitada de reatividade, o Livewire o atenderá bem.

Novamente, o aplicativo que desenvolvemos neste tutorial pode ser encontrado em G it H ub .

A postagem Mergulho profundo no Laravel Livewire apareceu primeiro em LogRocket Blog .

Source link