【Laravel5基礎】20 – フラッシュメッセージ

Flash Message

まえがき

前のセクションでは、Laravel フロントエンドアセット、Laravel のフロントエンド管理ツール elixir + gulp について理解しました。このセクションでは PHP に戻り、フラッシュ メッセージの使用方法について説明します。

手順

開発環境: Windows 7

Laravelバージョン: 5+

IDE: Phpstorm

フラッシュメッセージ、フラッシュ、フラッシュ、一瞬、メッセージ、メッセージとは。おそらく直訳すると「フラッシュ メッセージ」になります。これは元々は Rails に由来し、ページ上に何らかのプロンプト情報を表示するために使用されます。この概念を Laravel に導入し、ページ上で必要な情報の入力を求めるプロンプトを作成します。

ユーザーがウェブサイト上で何かをしたとき、あなたは彼らの行動に応答する必要があります。たとえば、登録する場合は、「登録が成功しました」というプロンプトが表示される必要がありますが、これは jsのalert()の効果ではなく、alert()の意図によるものです。

もしかしたらブログシステムでも使えるかもしれません。新しい記事を作成すると、すぐに記事一覧ページにジャンプしますが、これはかなり唐突です。たとえそれが完了しているとわかっていても、作成が完了したことを思い出させてくれるのは、とてもうれしいことです。

Flash メッセージを追加します

まず、ArticlesController.php を開いて、store() メソッドを見つけます。これが、書かれた記事を保存するメソッドを実装する方法です。コードは次のとおりです:

public function store(ArticleRequest $request)    {        $article = new Article($request->all());        Auth::user()->articles()->save($article);        return redirect('articles');    } 

記事が正常に作成されると、ページは /articles にリダイレクトされます。この時点で、セッション内に Flash メッセージ オブジェクトを作成し、それを k-v でラップできます:

public function store(ArticleRequest $request)    {        $article = new Article($request->all());        Auth::user()->articles()->save($article);        \Session::flash('flash_message','Your article has been created!');        return redirect('articles');    } 

。

これまでのところ、まだ表示できません。表示したい場合は、k に基づいて v を抽出する必要があります。ここでセッションに flash() メソッドがある理由は、これが Laravel フレームワークで記述されているためです。これとフラッシュの違いは、フラッシュが「ワンショット ディール」であることです。リクエストごとに 1 つのリクエストの場合、ページをリロードするとフラッシュ メッセージは消えますが、put は異なります。

Flash メッセージを表示する

master.blade.php に行きます。ここで、すべてのレイアウト ファイルの形式が定義されています。ここに次のコードを追加します。

<divclass="container">                                                                @if (Session::has('flash_message'))                                                    <divclass="alert alert-success">                                                          {{Session::get('flash_message')}}                                          </div>      @endif    @yield('content')                                                              </div>                                                                              <divclass="footer">                                                                    @yield('footer')                                                                </div>   

論理ステートメントを元のコンテンツに追加して、セッション オブジェクトに「flash_message」という名前のキーがあるかどうかを判断します。存在する場合は、それを抽出してコンテンツに表示します。

この時点で、フラッシュメッセージ j が表示されます。サーバーを起動し、localhost:8888/articles/create にアクセスし、ログインして記事を公開すると、上部に緑色のプロンプトが表示されます。ページをリロードすると、プロンプトが表示されなくなります。 flash ~

flash メッセージが消える

はい、ページをリロードするたびに、これはどのような不正行為ですか? 何をするか？ その後、それに十字を追加するか、定期的にそれを消します。

フラッシュメッセージを消します

まず十字を見てください。

今ブレードに次の文を追加します:

<divclass="container">                                                                @if (Session::has('flash_message'))                                                    <divclass="alert alert-success">                                                          <buttontype="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>                {{Session::get('flash_message')}}                                          </div>      @endif    @yield('content')                                                              </div>                <scriptsrc="//code.jquery.com/jquery.js"></script>                        <scriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <divclass="footer">                                                                    @yield('footer')</div> 

2 つのアクションを作成しました。最初に、以下の 2 つの js ファイルを導入し、2 番目に、上にボタン制御コードを追加します。意味も非常に明確です。

ブラウザに移動し、localhost:8888/articles/create にアクセスします。作成が完了すると、プロンプトの右上隅に小さな十字が表示され、クリックすると消えるため、ページをリロードする必要がなくなります。 。

自動的に消えるフラッシュメッセージ

以下のロジックに従って、プロンプトは重要なものと重要でないものに分けられ、重要でないものは時間に応じて自動的に消え、重要なものはユーザーに表示されます。十字をクリックします。

それでは、実装方法を見てみましょう:

<divclass="container">    @if (Session::has('flash_message'))        <divclass="alert alert-success {{ Session::has('flash_message_important') ? 'alert-important':''}}">                @if (Session::has('flash_message_important'))                        <buttontype="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>                @endif                {{Session::get('flash_message')}}        </div>    @endif    @yield('content') </div><scriptsrc="//code.jquery.com/jquery.js"></script><scriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script>        $('div.alert').not('.alert-important').delay(3000).slideUp(300);</script> <divclass="footer">    @yield('footer') </div> 

まず、セッション内のキーを判断します

という名前のキーがある場合は、div クラスにアラート-重要を追加します。属性を指定しない場合は追加されません。

@if (Session::has('flash_message_important'))                        <buttontype="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>@endif 

この文の意味は、重要な flash_message がある場合はバツ印が表示されるということです。

最後に、div を自動的に消すための jquery js の一部が追加されます。重要なメッセージでない場合は、3 秒間表示された後、自動的に消えるというロジックです。

localhost:8888/articles/create で作成した後の効果を確認できます。

クロスの効果を確認したい場合は、ArticlesController.php に戻って文を追加してください

Session::flash('flash message important',true); 記事を保存して作成して試してみてください~

もう一つ フラッシュメッセージを追加する別の方法があります

セッションを追加する別の方法があります。 ArticlesControler.php を開いて、次のコードを追加します:

public function store(ArticleRequest $request)                                      {                                                                                      $article = new Article($request->all());                                            Auth::user()->articles()->save($article);                                           //\Session::flash('flash_message','Your article has been created!');                //\Session::flash('flash_message_important',true);         return redirect('articles')->with([                                                    'flash_message'=>'Your article has been created!',                                  'flash_message_important'=>true]);     }               

これもOKです。

概要

プロンプト手法としての Flash メッセージは、Web デザインにおいて人間的な側面を果たし、ユーザーにより多くの選択肢、より思慮深い、より良いインタラクションを提供します。