Laravel 8 - Livewire CRUD与Bootstrap模态
原文地址:Laravel 8 - Livewire CRUD与Bootstrap模态
在这篇文章中,我真的很想和你一起在laravel应用程序中使用bootstrap模态livewire来实现crud操作。我可以展示一个完整的Laravel Livewire CRUD操作与模态。
Livewire是Laravel的全栈框架,它使构造动态接口变得容易,而不需要离开Laravel的舒适。Livewire完全基于AJAX请求来完成所有服务器通信。
在这里,我将给你在laravel的crud操作livewire bootstrap模态的完整实例,所以我们可以遵循下面的步骤。
Laravel Livewire Crud与Bootstrap Modal
第一步:安装Laravel App
步骤2:设置数据库配置
步骤3:安装Livewire
步骤4:创建组件
步骤5:添加路由
步骤6:创建视图
步骤7:运行Application
第一步:安装Laravel App
在第一步,我们需要得到新的laravel版本的应用程序使用bellow命令。让我们打开终端并运行bellow命令。
composer create-project --prefer-dist laravel/laravel article
步骤2:设置数据库配置
成功安装laravel app后,再配置数据库设置。我们将打开.env文件并在env文件中更改数据库名称、用户名和密码。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
步骤3:安装Livewire
您只需使用下面的命令将livewire安装到我们的laravel应用程序:
composer require livewire/livewire
步骤4:创建组件
现在,你可以使用bellow命令创建livewire组件,所以让我们运行bellow命令来创建用户表单组件:
php artisan make:livewire users
Now they created fies on both path:
- app/Http/Livewire/Users.php
- resources/views/livewire/users.blade.php
Now first file we will update as bellow for Users.php file
app/Http/Livewire/Users.php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;
class Users extends Component
{
public $users, $name, $email, $user_id;
public $updateMode = false;
public function render()
{
$this->users = User::all();
return view('livewire.users');
}
private function resetInputFields(){
$this->name = '';
$this->email = '';
}
public function store()
{
$validatedDate = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
User::create($validatedDate);
session()->flash('message', 'Users Created Successfully.');
$this->resetInputFields();
$this->emit('userStore'); // Close model to using to jquery
}
public function edit($id)
{
$this->updateMode = true;
$user = User::where('id',$id)->first();
$this->user_id = $id;
$this->name = $user->name;
$this->email = $user->email;
}
public function cancel()
{
$this->updateMode = false;
$this->resetInputFields();
}
public function update()
{
$validatedDate = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
if ($this->user_id) {
$user = User::find($this->user_id);
$user->update([
'name' => $this->name,
'email' => $this->email,
]);
$this->updateMode = false;
session()->flash('message', 'Users Updated Successfully.');
$this->resetInputFields();
}
}
public function delete($id)
{
if($id){
User::where('id',$id)->delete();
session()->flash('message', 'Users Deleted Successfully.');
}
}
}
步骤5:添加路由
现在,我们需要在laravel应用程序中添加图像表单的路由。打开routes/web.php文件,添加如下路径。
ruotes/web.php
Route::view('users','livewire.home');
步骤6:创建视图
在这里,我们将为调用crud操作路由创建刀片文件。在这个文件中,我们将使用@livewireStyles, @livewireScripts和@livewire('users')。加起来。
resources/views/livewire/users.blade.php
<div>
@include('livewire.create')
@include('livewire.update')
@if (session()->has('message'))
<div class="alert alert-success" style="margin-top:30px;">x
{ { session('message') }}
</div>
@endif
<table class="table table-bordered mt-5">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($users as $value)
<tr>
<td>{ { $value->id }}</td>
<td>{ { $value->name }}</td>
<td>{ { $value->email }}</td>
<td>
<button data-toggle="modal" data-target="#updateModal" wire:click="edit({ { $value->id }})" class="btn btn-primary btn-sm">Edit</button>
<button wire:click="delete({ { $value->id }})" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="{ { asset('js/app.js') }}" defer></script>
<link href="{ { asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2>Laravel Livewire Crud</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{ { session('message') }}
</div>
@endif
@livewire('users')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
<script type="text/javascript">
window.livewire.on('userStore', () => {
$('#exampleModal').modal('hide');
});
</script>
</body>
</html>
resources/views/livewire/create.blade.php
div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput2" wire:model="email" placeholder="Enter Email">
@error('email') <span class="text-danger error">{ { $message }}</span>@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button>
<button type="button" wire:click.prevent="store()" class="btn btn-primary close-modal">Save changes</button>
</div>
</div>
</div>
</div>
resources/views/livewire/update.blade.php
<!-- Modal -->
<div wire:ignore.self class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="hidden" wire:model="user_id">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" wire:model="name" id="exampleFormControlInput1" placeholder="Enter Name">
@error('name') <span class="text-danger">{ { $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" wire:model="email" id="exampleFormControlInput2" placeholder="Enter Email">
@error('email') <span class="text-danger">{ { $message }}</span>@enderror
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" wire:click.prevent="cancel()" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" wire:click.prevent="update()" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
步骤7:运行Application
现在我们准备运行我们的示例,所以运行下面命令来快速运行:
php artisan serve
打开以下链接,大功告成
http://localhost:8000/users
{{ nComment.author.nickname }}
{{ nComment.time }}