Это гостевой пост от Bacancy
Tired of creating boring and tiring Interfaces using traditional methods? Bring in all your attention here as we come up with a tech tutorial on executing the CRUD-операции с использованием Laravel Livewire. It is the simple things that matter; these steps to create, update, and delete records with the Livewire package make it a piece of cake to create Interfaces.
Введение в Laravel Livewire
Прежде чем мы начнем с учебника Laravel Livewire CRUD, давайте разберемся с Livewire, а также с тем, что и как он используется.
Что такое LiveWire?
Laravel Livewire позволяет создавать интерфейсы с удобством Laravel. Livewire — это фреймворк с полным стеком, который упрощает сложность, связанную с Vue или React. Первая версия livewire была выпущена в феврале 2020 года.
В этом блоге мы представим CRUD operations using Laravel Livewire включая все необходимые шаги, необходимые для реализации livewire в Laravel 9. Перед этим вы можете захотеть обновиться с Laravel 8 до 9.
Предварительные условия и настройка для операций Laravel Livewire CRUD
Composer установлен в вашей системе (просто нажмите команду «composer» в терминале, чтобы проверить, правильно ли установлен композитор). Вы можете получить Composer здесь (https://getcomposer.org/), если у вас его еще нет.
Как выполнять операции CRUD с помощью Laravel Livewire?
Здесь мы показали, как вы можете реализовать пакет Livewire с последней версией Laravel (v 9.19) и последовательно выполнять функции создания, обновления и удаления с помощью пакета.
1. Создайте приложение laravel
Поскольку вы знакомы с созданием приложения laravel с помощью терминала, откройте терминал и выполните приведенную ниже команду, а затем создайте новое приложение laravel в своем каталоге.
composer create-project --prefer-dist laravel/laravel application_name_here
2. Настройте детали базы данных
Открыть .env file which is located in the root folder, if .env is not existed then run the below command to make a copy from the .env-example
cp .env .env-example
Вам нужно создать новую базу данных, то же имя базы данных, которое вы должны указать в DB_DATABASE, а также заменить остальную часть переменной .env в зависимости от вашей системы.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
3. Теперь перейдите к установке пакета Livewire.
Перейдите в корневой каталог приложения и выполните приведенную ниже команду, чтобы установить пакет livewire.
composer require livewire/livewire
Нам нужно включить стиль и сценарий livewire (на каждую страницу, которая будет использовать Livewire).
<head>
# other styles here
@livewireStyles
</head>
<body>
# other body parts here
@livewire(‘<component name here>’)/You can include component anywhere in your app
@livewireScripts
<script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/b810c1e775732c06a03141e7fcdf81a0.js" data-minify="1" defer></script></body>
4. Создайте миграцию и модель
We need to create migration for the «сообщения» table and also we will create a model for posts table.
Пожалуйста, выполните приведенную ниже команду, чтобы создать файл миграции. После выполнения приведенной ниже команды новый файл будет создан в папке базы данных/миграции.
php artisan make:migration create_posts_table
Замените приведенный ниже код в create_posts_table файл миграции:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};Запустите приведенную ниже команду, чтобы создать таблицу в базе данных с указанными столбцами в миграции, после выполнения приведенной ниже команды вы сможете увидеть новые “posts” таблица в базе данных.
php artisan migrate
Теперь мы создадим модель поста, используя приведенную ниже команду. Выполнив приведенное ниже, вы сможете просмотреть новый файл модели в разделе приложение/Модели папка:
php artisan make:model Post
Открыть приложение/Модели/Post.php и замените приведенным ниже кодом
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'description'
];
public $timestamps = true;
}5. Создайте компонент Post
Теперь мы собираемся создать компонент записи, используя приведенную ниже команду.
php artisan make:livewire post
После выполнения вышеуказанной команды вы сможете увидеть новую папку Livewire в папке app/Http и resources/views.
Вывод вышеуказанной команды:
COMPONENT CREATED
CLASS: app/Http/Livewire/Post.php
VIEW: resources/views/livewire/post.blade.phpТеперь откройте приложение\Http\Livewire\Post.php и обновите следующий код в этом файле:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post as Posts;
class Post extends Component
{
public $posts, $title, $description, $postId, $updatePost = false, $addPost = false;
/**
* delete action listener
*/
protected $listeners = [
'deletePostListner'=>'deletePost'
];
/**
* List of add/edit form rules
*/
protected $rules = [
'title' => 'required',
'description' => 'required'
];
/**
* Reseting all inputted fields
* @return void
*/
public function resetFields(){
$this->title = '';
$this->description = '';
}
/**
* render the post data
* @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
*/
public function render()
{
$this->posts = Posts::select('id', 'title', 'description')->get();
return view('livewire.post');
}
/**
* Open Add Post form
* @return void
*/
public function addPost()
{
$this->resetFields();
$this->addPost = true;
$this->updatePost = false;
}
/**
* store the user inputted post data in the posts table
* @return void
*/
public function storePost()
{
$this->validate();
try {
Posts::create([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Created Successfully!!');
$this->resetFields();
$this->addPost = false;
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* show existing post data in edit post form
* @param mixed $id
* @return void
*/
public function editPost($id){
try {
$post = Posts::findOrFail($id);
if( !$post) {
session()->flash('error','Post not found');
} else {
$this->title = $post->title;
$this->description = $post->description;
$this->postId = $post->id;
$this->updatePost = true;
$this->addPost = false;
}
} catch (\Exception $ex) {
session()->flash('error','Something goes wrong!!');
}
}
/**
* update the post data
* @return void
*/
public function updatePost()
{
$this->validate();
try {
Posts::whereId($this->postId)->update([
'title' => $this->title,
'description' => $this->description
]);
session()->flash('success','Post Updated Successfully!!');
$this->resetFields();
$this->updatePost = false;
} catch (\Exception $ex) {
session()->flash('success','Something goes wrong!!');
}
}
/**
* Cancel Add/Edit form and redirect to post listing page
* @return void
*/
public function cancelPost()
{
$this->addPost = false;
$this->updatePost = false;
$this->resetFields();
}
/**
* delete specific post data from the posts table
* @param mixed $id
* @return void
*/
public function deletePost($id)
{
try{
Posts::find($id)->delete();
session()->flash('success',"Post Deleted Successfully!!");
}catch(\Exception $e){
session()->flash('error',"Something goes wrong!!");
}
}
}Теперь создайте ресурсы/представления/home.blade.php и обновите следующий код в этом файле:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Livewire Crud</title>
<link data-minify="1" href="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/npm/[email protected]/dist/css/bootstrap.min.css?ver=1672663261" rel="stylesheet" crossorigin="anonymous">
@livewireStyles
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Livewire CRUD Blog</a>
</div>
</nav>
<div class="container">
<div class="row justify-content-center mt-3">
@livewire('post')
</div>
</div>
@livewireScripts
</body>
</html>
Теперь откройте ресурсы/просмотры/livewire/post.blade.php и обновите следующий код в этом файле:
<div>
<div class="col-md-8 mb-2">
@if(session()->has('success'))
<div class="alert alert-success" role="alert">
{{ session()->get('success') }}
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger" role="alert">
{{ session()->get('error') }}
</div>
@endif
@if($addPost)
@include('livewire.create')
@endif
@if($updatePost)
@include('livewire.update')
@endif
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
@if(!$addPost)
<button wire:click="addPost()" class="btn btn-primary btn-sm float-right">Add New Post</button>
@endif
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@if (count($posts) > 0)
@foreach ($posts as $post)
<tr>
<td>
{{$post->title}}
</td>
<td>
{{$post->description}}
</td>
<td>
<button wire:click="editPost({{$post->id}})" class="btn btn-primary btn-sm">Edit</button>
<button onclick="deletePost({{$post->id}})" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="3" align="center">
No Posts Found.
</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Нам нужно создать еще два файла под resources/views/livewire/ один — create.blade.php, а второй — update.blade.php.
После создания create.blade.php вы можете заменить его содержимым ниже
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="storePost()" class="btn btn-success btn-block">Save</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
После создания update.blade.php вы можете заменить его содержимым ниже
<div class="card">
<div class="card-body">
<form>
<div class="form-group mb-3">
<label for="title">Title:</label>
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title" placeholder="Enter Title" wire:model="title">
@error('title')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="form-group mb-3">
<label for="description">Description:</label>
<textarea class="form-control @error('description') is-invalid @enderror" id="description" wire:model="description" placeholder="Enter Description"></textarea>
@error('description')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button wire:click.prevent="updatePost()" class="btn btn-success btn-block">Update</button>
<button wire:click.prevent="cancelPost()" class="btn btn-secondary btn-block">Cancel</button>
</div>
</form>
</div>
</div>
6. Определите маршруты
Open маршруты/web.php и обновите следующий код в этом файле:
Route::get('/',function(){
return view('home');
});7. Запустить проект
Теперь пришло время проверить приведенную выше демонстрацию в браузере, поэтому откройте свой терминал и выполните приведенную ниже команду из корневого каталога проекта.
php artisan serve
Вывод вышеуказанной команды будет таким, как показано ниже:
Запуск сервера разработки Laravel: http://127.0.0.1:8000
Итак, теперь откройте браузер и нажмите на созданную выше ссылку.
(Примечание: URL-адрес может зависеть от доступного порта в вашей системе).
Вот ссылка на репозиторий github https://github.com/kishanpatelbacancy/laravel-livewire-demo
Заключение
Когда мы подойдем к концу этого блога, поделитесь своими мыслями и отзывами об этих операциях CRUD, используя учебник Laravel Livewire. Если вы рассматриваете Laravel Livewire для разработки интерфейсов для ваших бизнес-идей, нанять разработчика Laravel от нас, поскольку у нас есть 1% лучших технических специалистов в мире. Наши разработчики имеют опыт работы с последними обновлениями, функциями и реализациями Laravel, и мы следуем процессам разработки Agile для вашего удобства.
