0x01 背景

在写后台增删改查的时候,出于用户体验,每个操作都需要添加相应的提示,虽然Laravel有一定的提示。但是我个人感觉还是太繁琐不人性化,不便于后期维护。

Laravel自带的提示是在操作完成后添加一个一次性Session,然后再页面输出

return redirect('/')->with('message', 'Message sent!');

view输出的时候。

@if(Session::has('message'))
 <div class="alert alert-info"> {{Session::get('message')}} 
 </div> 
 @endif

这样写呢,我个人感觉,每一次操作都需要在每个页面写,如果我们后期进行更改的时候,需要每个页面的改,相对来说不便于维护。我由此方法进行了一下改造。

0x02 准备提示页面

新建一条路由,一个控制器,一个对应的view页面。

路由:

  Route::resource('/prompt','PromptController');

控制器:

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class PromptController extends Controller
{
    public function index()
    {
        //验证参数
    if(!empty(session('message')) && !empty(session('url')) && !empty(session('jumpTime'))){
        $data = [
            'message' => session('message'),
            'url' => session('url'),
            'jumpTime' => session('jumpTime'),
            'status' => session('status')
        ];
    } else {
        $data = [
            'message' => '请勿非法访问!',
            'url' => '/',
            'jumpTime' => 3,
            'status' => false
        ];
    }
        return view('admin.prompt',['data' => $data]);
    }
}

view页面:

<body>

        <div class="wrapper-page">
            <div class="panel panel-color {{ $data['status']?'panel-inverse':'panel-danger' }}">

                <div class="panel-heading">
                   <h3 class="text-center m-t-10">{{ $data['message'] }}</h3>
                </div>

                <div class="panel-body">
                    <div class="text-center">
                        <div class="alert {{ $data['status']?'alert-info':'alert-danger' }} alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            浏览器页面将在<b id="loginTime">{{ $data['jumpTime'] }}</b>秒后跳转......
                        </div>
                        <div class="form-group m-b-0">
                            <div class="input-group">
                                {{--<input type="password" class="form-control" placeholder="Enter Email">--}}
                                <span class="input-group-btn"> <button type="submit" class="btn {{ $data['status']?'btn-success':'btn-danger' }}">点击立即跳转</button> </span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <script src="/js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //循环倒计时,并跳转
                var url = "{{ $data['url'] }}";
                var loginTime = parseInt($('#loginTime').text());
                console.log(loginTime);
                var time = setInterval(function(){
                    loginTime = loginTime-1;
                    $('#loginTime').text(loginTime);
                    if(loginTime==0){
                        clearInterval(time);
                        window.location.href=url;
                    }
                },1000);
            })
//点击跳转
            $('.btn-success').click(function () {
                var url = "{{ $data['url'] }}";
                window.location.href=url;
            })
        </script>

    </body>

创建好以后,以后使用的时候,只需要在操作完成后来一句。

return redirect('/prompt')->with(['message'=>'添加会员失败!','url' =>'/users/create', 'jumpTime'=>3,'status'=>false]);

就可以像ThinkPHP一样的,跳转到提示页,再跳转到指定的URL了。

解释:
message:需要在提示页提示的内容。
url:需要最后跳转的url。
jumpTime:在提示页等待的时间,秒为单位。
status:状态,因为提示有正确提示与错误提示,不同的提示提示页面可以设置不同的CSS,从而达到区分。

0x03 结束

到这里就全部完成了,如果您有更好的方法,欢迎与我沟通。上方关于我有QQ。谢谢