网站首页 » 前端开发 » 前端工具 » connect-flash 用法详解
上一篇:
下一篇:

connect-flash 用法详解

前言

说到 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。其实它的安装跟其它的模块安装是一样的,所以你很轻易的就可以把它安装好,切换到项目目录,运行如下命令行:

$ npm install connect-flash

安装完之后,你还需要安装一个 express-session 模块,因为 connect-flash 是需要存储在 session 模块,运行如下命令行:

$ npm install express-session
注意

安装connect-flash和express-session这两个模块时不要在命令行中添加-g(全局安装),因为安装到全局后,可以在你收入这两个模块时就会出现路径的问题,为了尽可能地减少繁琐的操作,我们直接安装到当前项目目录即可!

配置

 配置 app.js 文件

安装完以上两个模块后,我们需要对相应的文件进行配置,打开app.js 添加如下代码:

var settings = require('./settings'); //配置信息
var flash = require('connect-flash');
var session = require('express-session');

app.use(session({
  secret: settings.cookieSecret,  //加密
  key: settings.db, //cookie nam
  cookie: {maxAge: 60000},
  resave: false,
  saveUninitialized: true,
}));
app.use(flash());

// set flash
app.use(function (req, res, next) {
  res.locals.errors = req.flash('error');
  res.locals.infos = req.flash('info');
  next();
});

代码中的settings.cookieSecretsettings.db是两个变量,它们的值已经事先写到了一个settings.js文件里了。

module.exports = {
  cookieSecret: 'orders',
  db: 'ordersdb',
  host: 'localhost',
  port: 27017
}

如果你觉得麻烦,你可以不使用变量的方式,直接给 secret ,key 写值。

如何使用

// 登录
router.get('/login', function(req, res, next) {
  res.render('login', { title: '欢迎登录' });
});
router.post('/login', function(req, res, next) {
  User.get(req.body.username,function(err,user){
      if(!user || user.name === ''){
        req.flash('error','用户不存在');
        return res.redirect('login');
      }
      if(req.body.password != user.password){
        req.flash('error','密码不对');
        return res.redirect('login');
      }
      req.flash('info','登录成功');
      res.redirect('login');
  })
});

上面我以登录的路由代码作为例子,一看就懂,只需要在要显示信息的地方添加形如:req.flash('error','用户不存在');的代码就可以了。那怎么才能在页面中调用这些提示信息呢?我们接着往下看。下面是一个简单的调用例子,但也足以把问题说明白了。

<div class="wrap">
<div class="wrap-left">
	<ul>
		<li><a href="/">主页</a></li>
		<li><a href="/login">登录</a></li>
		<li><a href="/reg">注册</a></li>
	</ul>
</div>
<div class="wrap-right">
	<h1><%= title %></h1>
	<div class="wrap-content">
	<form method="post">
		<ul>
			<li>用户名:<input type="text" name="username"></li>
			<li>密码:<input type="text" name="password"></li>
			<li><button>登录</button></li>
			<li><%= errors %></li>
		</ul>
	</form>	
	</div>
</div>
</div>

代码中的<%= errors %>就是调用相应的信息的方法,为什么要这样写呢?为什么里面的一个 errors,而不是 我们在 index.js 中写的req.flash('error','用户不存在');中的 error 变量呢?这个你看看我们一开始在 app.js 中的配置代码你就明白了。我们已经把req.flash('error');的提示信息赋值给了res.locals.errors,而我们如果要调用locals 中的 errors 变量,不需要写成locals.errors,而是直接写变量名 errors 就可以了。

conncet-flash 模块的用法就给大家分享到这里了,这里只给你一个实现的思路,并不会给你一个面包,但你可以通过这个思路做一个美味的面包。人人都讨厌伸手党,总想着天上掉面包,不如自己去做面包,人必自救,而后人救之。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/connect-flash-usage/

评论11
  1. 寒子lll 2016年12月19日 at pm4:12 回复

    [/强][/强][/强]

  2. 正在学习node的小白一枚 2017年3月15日 at pm3:14 回复

    写的挺好的,解决了我的困扰~
    给个建议 能否将node.js的相关文章和 前端文章划分开来 比较容易查阅

    • 朝夕熊 2017年3月15日 at pm9:19 回复

      谢谢你的建议,我会继续努力做得更好,希望下次再来的时候会有家的感觉。

  3. Shsgear 2017年5月7日 at pm9:45 回复

    很用心的文章,问个问题,这个应该不会和express的error handle冲突吧

    • 朝夕熊 2017年5月8日 at pm5:26 回复

      谢谢认可,和 Express的 error handle 是不会冲突的!

  4. Wilson 2017年7月2日 at am11:21 回复

    写的不错,不过先要用express生成框架。
    npm install -g express-generator
    express -e FlashExpressPrj

    • 朝夕熊 2017年7月2日 at pm12:24 回复

      谢谢补充

  5. Wilson 2017年7月2日 at pm4:52 回复

    res.render(‘login’, { title: ‘欢迎登录’ });
    =>
    res.render(‘login’, {
    title: ‘欢迎登录’,
    errors: req.flash(‘error’).toString()
    });

  6. Wilson 2017年7月2日 at pm4:55 回复

    最好把

    改成

  7. Wilson 2017年7月2日 at pm4:57 回复

    改成

  8. Wilson 2017年7月2日 at pm4:59 回复

    最好应该在ejs模版文件中加上关于errors的判断
    if (errors) 才显示 errors的逻辑

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END