Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8886

【Node.js Express】Node.js Expressアプリケーションにフラッシュメッセージを実装する方法

$
0
0

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

フラッシュメッセージを使うには、connect-flashパッケージを用います。
フラッシュメッセージはリクエスト間で渡されるため、セッションとクッキーに依存します。

よって下記の3つのインストールが必要となります。

npm i connect-flash cookie-parser express-session -S

インストールしたモジュールをロードし、設定します。

main.js
"use strict";//モジュールロードconstexpress=require("express"),app=express(),router=express.Router(),expressSession=require("express-session"),cookieParser=require("cookie-parser"),connectFlash=require("connect-flash"),//cookie-parserをミドルウェアとして設定router.use(cookieParser("secret_passcode"));//express-sessionをミドルウェアとして設定router.use(expressSession({secret:"secret_passcode",cookie:{maxAge:4000000},resave:false,saveUninitialized:false}));//connect-flashをミドルウェアとして設定router.use(connectFlash());//フラッシュメッセージをresのローカル変数のflashMessagesに代入 ※1router.use((req,res,next)=>{res.locals.flashMessages=req.flash();next();});

express-sessionについてはこちらも参考
【Node.js express】express-validatorでバリデーションを実装し、通過した値をセッションに格納する。

コントローラーにフラッシュメッセージの処理を組み込み(Userモデルcreateの例)

usersController.js
module.exports={create:(req,res,next)=>{letuserParams={name:req.body.name,email:req.body.email,};User.create(userParams).then(user=>{req.flash("success","account created successfully!");res.redirect("users");//上記の※1ミドルウェアを経由する。//success型}).catch(error=>{req.flash("error",`Failed ${error.message}.`);//セッションを経由して表示res.redirect("users/new");//フォームに戻す//上記の※1ミドルウェアを経由する。//error型});},};

ビュー側でフラッシュメッセージを組み込み

layout.ejs
<div class="flashes">
          <% if (flashMessages) { %>  //flashMessagesがあった場合
           <% if (flashMessages.success) { %> //success型があった場合
             <div class="flash success">
           <%= flashMessages.success %>
         </div>
           <% } else if (flashMessages.error) { %> //error型があった場合
         <div class="flash error">
           <%= flashMessages.error %>
         </div>
       <% } %>
     <% } %>
    </div>

Viewing all articles
Browse latest Browse all 8886

Trending Articles