Laravel 8 - Livewire CRUD与Bootstrap模态

发布：1年前更新：1年前计算机编程语言 PHP编程 563 浏览

原文地址：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

新鲜事儿

Laravel 8 - Livewire CRUD与Bootstrap模态

第一步:安装Laravel App

步骤2:设置数据库配置
成功安装laravel app后，再配置数据库设置。我们将打开.env文件并在env文件中更改数据库名称、用户名和密码。

步骤4:创建组件

步骤5:添加路由

步骤6:创建视图

步骤7:运行Application

评论

{{ nComment.author.nickname }}

服务器优惠活动

Vultr 美国VPS,日本VPS,欧洲VPS限时优惠活动新用户注册即赠送$100体验金(长期有效)

腾讯云轻量服务器 2核4G8M带宽首单特惠，不限新老用户，74元/1年 | 222元/3年

腾讯云轻量服务器 2核4G5M带宽，不限新老用户 1年229元

腾讯云 1核2G1M带宽首年99元，3年298元。新老用户皆可参加。

新鲜事儿

Laravel 8 - Livewire CRUD与Bootstrap模态

第一步:安装Laravel App

步骤2:设置数据库配置成功安装laravel app后，再配置数据库设置。我们将打开.env文件并在env文件中更改数据库名称、用户名和密码。

步骤4:创建组件

步骤5:添加路由

步骤6:创建视图

步骤7:运行Application

评论

相关文章

服务器优惠活动

Vultr 美国VPS,日本VPS,欧洲VPS限时优惠活动 新用户注册即赠送$100体验金(长期有效)

腾讯云 轻量服务器 2核4G8M带宽 首单特惠，不限新老用户，74元/1年 | 222元/3年

腾讯云 轻量服务器 2核4G5M带宽，不限新老用户 1年229元

腾讯云 1核2G1M带宽 首年99元，3年298元。新老用户皆可参加。

步骤2:设置数据库配置
成功安装laravel app后，再配置数据库设置。我们将打开.env文件并在env文件中更改数据库名称、用户名和密码。

Vultr 美国VPS,日本VPS,欧洲VPS限时优惠活动新用户注册即赠送$100体验金(长期有效)

腾讯云轻量服务器 2核4G8M带宽首单特惠，不限新老用户，74元/1年 | 222元/3年

腾讯云轻量服务器 2核4G5M带宽，不限新老用户 1年229元

腾讯云 1核2G1M带宽首年99元，3年298元。新老用户皆可参加。