单击Laravel 8中的“寄存器”按钮后添加加载图像

Question

我是新的Laravel和使用Laravel版本8现在。

注册页面中有表单提交。

当用户填写他们的信息并单击register按钮时，另一个应用程序将被部署到新服务器上。因此，在单击resgister按钮后调用deploy。

如您所知，在单击按钮后，会有一些时间部署到新服务器。所以在这个例子中，我想添加加载图像。

寄存器表单在register.blade.php和api调用中，寄存器操作在寄存器控制器中。

下面是代码的一些部分。

@extends('layouts.central')

@section('content')

<div>
    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
            <form action="{{ route('central.tenants.register.submit') }}" method="POST">

                <div class="mt-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 leading-5">
                        Full name
                    </label>
                </div>

                <div class="mt-6">
                    <label for="domain" class="block text-sm font-medium text-gray-700 leading-5">
                        Domain
                    </label>
                </div>

                <div class="mt-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 leading-5">
                        Email address
                    </label>
                </div>

                <div class="mt-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 leading-5">
                        Password
                    </label>
                </div>

                <div class="mt-6">
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 leading-5">
                        Confirm Password
                    </label>
                </div>

                <div class="mt-6">
                    <span class="block w-full rounded-md shadow-sm">
                        <button type="submit" class="btn">
                            Register
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

我是RegisterController.php

<?php

namespace App\Http\Controllers\Central;

use App\Actions\CreateTenantAction;
use App\Http\Controllers\Controller;
use App\Models\Tenant;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    public function show()
    {
        return view('central.register');
    } 

    public function submit(Request $request)
    {
        $data = $this->validate($request, [
            'domain' => 'required|string|unique:domains',
            'company' => 'required|string|max:255',
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255|unique:tenants',
            'password' => 'required|string|confirmed|max:255',
        ]);

       ....

        here are api calls for deploying to new server

        $data['password'] = bcrypt($data['password']);
        $tenant = (new CreateTenantAction)($data, $data['domain']);


        return redirect()->away("http://{$siteDomain}");
    }
}

在这种情况下，我必须在哪里添加加载部分？不需要在controller.php中添加任何代码？

你能在我的代码中做出或添加正确的答案吗？非常感谢和感激。

Answer 1

将其添加到根布局的任何根css文件或头样式：

CSS

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.75) url("/your_loading_image.gif") no-repeat center center;
    z-index: 99999;
}

将此div添加到您的根布局中，如app布局或主布局：

html

<div id='loader'></div>

然后，在注册页面中，将jquery代码脚本添加到底部：

脚本

<script>
$(function() {
    $( "form" ).submit(function() {
        $('#loader').show();
    });
});
</script>

Answer 2

我想把我的想法加进去，在测试之后，它能很好地工作。

HTML部分

  <button class="btn btn-success btn-lg submit" type="submit">
<span class="btn-txt">SUBMIT</span>
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>                 
 </button>

然后在JQuery中：

 $(document).ready(function() {
            $("#clientform").submit(function() {
                $(".spinner-border").removeClass("d-none");
                $(".submit").attr("disabled", true);
                $(".btn-txt").text("Processing ...");
            });

让我解释一下发生了什么。我们添加了一个span，它具有一个默认隐藏的类bootrap旋转器。在submit按钮文本上添加了一个类来跨. button。然后，在表单提交的Jquery中，我们要删除类“d”，禁用按钮并添加处理.文本到.类。

我希望我已经用清楚的话解释了。