connect-flash 用法詳解

轉自：http://yunkus.com/connect-flash-usage/

前言

說到 connect-flash ,估計也有很多朋友像我一樣被它虐了好一陣子，很多朋友可能都會遇到過這個問題：Express4.x 中的 connect-flash 為什么不起作用？或者 connect-flash 怎么用？諸如此類的問題，在這里我就給大家戳破 connect-flash 的神秘面紗！

官方解釋

The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being displayed to the user. The flash is typically used in combination with redirects, ensuring that the message is available to the next page that is to be rendered.

大概的意思就是 flash 是 session 中一個用於存儲信息的特殊區域。消息寫入到 flash 中，在跳轉目標頁中顯示該消息。flash 是配置 redirect 一同使用的，以確保消息在目標頁面中可用。

flash 可用於一次性的消息提示，比如注冊，登錄頁面，當你再次刷新時，flash就沒有提示消息了。

connect-flash安裝

工欲善其事,必先利其器，所以我們先來看看怎么安裝 connect-flash。其實它的安裝跟其它的模塊安裝是一樣的，所以你很輕易的就可以把它安裝好，切換到項目目錄，運行如下命令行：

1. $ npm install connect-flash

安裝完之后，你還需要安裝一個 express-session 模塊，因為 connect-flash 是需要存儲在 session 模塊，運行如下命令行：

1. $ npm install express-session

注意

安裝connect-flash和express-session這兩個模塊時不要在命令行中添加-g（全局安裝），因為安裝到全局后，可以在你收入這兩個模塊時就會出現路徑的問題，為了盡可能地減少繁瑣的操作，我們直接安裝到當前項目目錄即可！

配置

 配置 app.js 文件

安裝完以上兩個模塊后，我們需要對相應的文件進行配置，打開app.js 添加如下代碼：

1. var settings = require('./settings'); //配置信息
2. var flash = require('connect-flash');
3. var session = require('express-session');
5. app.use(session({
6. secret: settings.cookieSecret, //加密
7. key: settings.db, //cookie nam
8. cookie: {maxAge: 60000},
9. resave: false,
10. saveUninitialized: true,
11. }));
12. app.use(flash());
14. // set flash
15. app.use(function (req, res, next) {
16. res.locals.errors = req.flash('error');
17. res.locals.infos = req.flash('info');
18. next();
19. });

代碼中的settings.cookieSecret、settings.db是兩個變量，它們的值已經事先寫到了一個settings.js文件里了。

1. module.exports = {
2. cookieSecret: 'orders',
3. db: 'ordersdb',
4. host: 'localhost',
5. port: 27017
6. }

如果你覺得麻煩，你可以不使用變量的方式，直接給 secret ，key 寫值。

如何使用

1. // 登錄
2. router.get('/login', function(req, res, next) {
3. res.render('login', { title: '歡迎登錄' });
4. });
5. router.post('/login', function(req, res, next) {
6. User.get(req.body.username,function(err,user){
7. if(!user || user.name === ''){
8. req.flash('error','用戶不存在');
9. return res.redirect('login');
10. }
11. if(req.body.password != user.password){
12. req.flash('error','密碼不對');
13. return res.redirect('login');
14. }
15. req.flash('info','登錄成功');
16. res.redirect('login');
17. })
18. });

上面我以登錄的路由代碼作為例子，一看就懂，只需要在要顯示信息的地方添加形如：req.flash('error','用戶不存在');的代碼就可以了。那怎么才能在頁面中調用這些提示信息呢？我們接着往下看。下面是一個簡單的調用例子，但也足以把問題說明白了。

1. <div class="wrap">
2. <div class="wrap-left">
3. <ul>
4. <li><a href="/">主頁</a></li>
5. <li><a href="/login">登錄</a></li>
6. <li><a href="/reg">注冊</a></li>
7. </ul>
8. </div>
9. <div class="wrap-right">
10. <h1><%= title %></h1>
11. <div class="wrap-content">
12. <form method="post">
13. <ul>
14. <li>用戶名：<input type="text" name="username"></li>
15. <li>密碼：<input type="text" name="password"></li>
16. <li><button>登錄</button></li>
17. <li><%= errors %></li>
18. </ul>
19. </form>
20. </div>
21. </div>
22. </div>

代碼中的<%= errors %>就是調用相應的信息的方法，為什么要這樣寫呢？為什么里面的一個 errors，而不是 我們在 index.js 中寫的req.flash('error','用戶不存在');中的 error 變量呢？這個你看看我們一開始在 app.js 中的配置代碼你就明白了。我們已經把req.flash('error');的提示信息賦值給了res.locals.errors，而我們如果要調用locals 中的 errors 變量，不需要寫成locals.errors，而是直接寫變量名 errors 就可以了。

conncet-flash 模塊的用法就給大家分享到這里了，這里只給你一個實現的思路，並不會給你一個面包，但你可以通過這個思路做一個美味的面包。人人都討厭伸手黨，總想着天上掉面包，不如自己去做面包，人必自救，而后人救之。