转自:http://yunkus.com/connect-flash-usage/

connect-flash 用法详解

 前端工具  2016-10-05  2016-10-05  朝夕熊  11

前言

说到 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');
  4. app.use(session({
  5. secret: settings.cookieSecret, //加密
  6. key: settings.db, //cookie nam
  7. cookie: {maxAge: 60000},
  8. resave: false,
  9. saveUninitialized: true,
  10. }));
  11. app.use(flash());
  12. // set flash
  13. app.use(function (req, res, next) {
  14. res.locals.errors = req.flash('error');
  15. res.locals.infos = req.flash('info');
  16. next();
  17. });

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

68.connect-flash 用法详解 req,flash()的更多相关文章

  1. Oracle层级询语句connect by 用法详解

    如果表中包含层级数据,那么你就可以使用层级查询从句选择行层级顺序. 1.层级查询从句语法 层级查询从句语法: { CONNECT BY [ NOCYCLE ] condition [AND condi ...

  2. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  3. oracle expdp/impdp 用法详解

    http://hi.baidu.com/hzfsai/item/4a4b3fc4b1cf7e51ad00efbd oracle expdp/impdp 用法详解 Data Pump 反映了整个导出/导 ...

  4. (转)linux traceroute命令参数及用法详解--linux跟踪路由命令

    linux traceroute命令参数及用法详解--linux跟踪路由命令 原文:http://blog.csdn.net/liyuan_669/article/details/25362505 通 ...

  5. [转帖]强大的strace命令用法详解

    强大的strace命令用法详解 文章转自: https://www.linuxidc.com/Linux/2018-01/150654.htm strace是什么? 按照strace官网的描述, st ...

  6. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  7. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  8. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  9. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

随机推荐

  1. Python 从入门到精通 全程最佳实现梳理

    零零星星的时间,持续完善中...... 1.一些基础的必要信息归纳 Python 官网 www.python.org 发明者 吉多·范罗苏姆 发行时间 1991年,​26年前 编程泛型 多泛型.面向对 ...

  2. 以下三种下载方式有什么不同?如何用python模拟下载器下载?

    问题始于一个链接https://i1.pixiv.net/img-zip-...这个链接在浏览器打开,会直接下载一个不完整的zip文件 但是,使用下载器下载却是完整文件 而当我尝试使用python下载 ...

  3. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  4. FZU 1202 信与信封问题 二分图匹配

    找匹配中的关键边. 做法: 拆掉一条匹配边,然后对边两边的点做一次增广,如果可以增广,那么此边不是关键边,否则是关键边. 详情可以参见:http://www.docin.com/p-109868135 ...

  5. COGS——T1310. [HAOI2006]聪明的猴子

    http://cogs.pro/cogs/problem/problem.php?pid=1310 ★   输入文件:monkey.in   输出文件:monkey.out   简单对比时间限制:1 ...

  6. 浴谷 P1768 天路

    P1768 天路 题目描述 “那是一条神奇的天路诶~,把第一个神犇送上天堂~”,XDM先生唱着这首“亲切”的歌曲,一道猥琐题目的灵感在脑中出现了. 和C_SUNSHINE大神商量后,这道猥琐的题目终于 ...

  7. 最简单的HTML5游戏——贪吃蛇

    <html> <head> <meta charset="UTF-8"/> <title>贪吃蛇</title> < ...

  8. cocos2d-x 2.2.0 怎样在lua中注冊回调函数给C++

    cocos2d-x内部使用tolua进行lua绑定.可是引擎并没有提供一个通用的接口让我们能够把一个lua函数注冊给C++层面的回调事件. 翻看引擎的lua绑定代码,我们能够仿照引擎中的方法来做. 值 ...

  9. Yocto tips (10): Yocto hellworld 加入一个软件包

    Yocto中一个软件包是放在bb文件里的,然后非常多的bb文件集成一个recipe(配方),然后很多的recipe又组成一个meta layer.因此,要加入一个包事实上就是在recipe以下加入一个 ...

  10. VS 2015支持C语言和C++程序

    先要安装C++的相关支持控件! 然后就可以使用VS编写C++或者C程序了. 默认支持的是C++,将后缀名改为C就是支持C了. 学习数据结构算法之类的,就可以通过VS来学习了. 安装 新建C++项目 C ...