※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。
フラッシュメッセージを使うには、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>