在学习node的时候,flash是困扰我最久的一个中间件,之前一直都没有很好的理解,这里做一个总结。

  参考自:http://yunkus.com/connect-flash-usage/

什么是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之前,要引入express-session模块,它往往用在登录和注册,消息只会通知一次就消失了,其中redirect和flash是不能分开使用的。

安装与配置

  即通过npm安装 express-session模块 和 connect-flash模块 即可。

  配置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: },
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();
});

 注意:上面定义locals对象下变量的时候一定要有next()向下传递,否则生产线就会停止。 

 另外,settings信息是必须配置的,这样更容易维护:

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

如何使用

  

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

  <h5 class="text-center"><%= success %></h5>
<h5 class="text-center"><%= error %></h5>

结束

express中connect-flash中间件的使用的更多相关文章

  1. Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API

    A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...

  2. 理解express中的中间件

    express是轻量灵活的node.js Web应用框架”.它可以帮助你快速搭建web应用.express是一个自身功能极简,完全是由**路由**和**中间件**构成的一个web开发框架,本质上说,一 ...

  3. express中的中间件理解

    什么是中间件 中间件是一个可访问请求对象(req)和响应对象(res)的函数,在 Express 应用的请求-响应循环里,下一个内联的中间件通常用变量 next 表示.中间件的功能包括: 执行任何代码 ...

  4. express 中文文档

    express() 创建一个express应用程序 var express = require('express'); var app = express(); app.get('/', functi ...

  5. 精华 对express中next函数的一些理解

        关于next主要从三点来进行说明: next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么? Next的作用 我们在定义express中间件函数的时候都会将第三个参 ...

  6. express中使用 connect-flash 及其源码研究

    刚开始摸node.js, 在用express 4.x 的过程中 有一个connect-flash的玩意 如上图, 在 /reg 页面提交注册信息的时候 如若两次输入的密码不匹配则调用请求对象req的f ...

  7. Core 1.0中的管道-中间件模式

    ASP.NET Core 1.0中的管道-中间件模式 SP.NET Core 1.0借鉴了Katana项目的管道设计(Pipeline).日志记录.用户认证.MVC等模块都以中间件(Middlewar ...

  8. [转] 对express中next函数的一些理解

    最近公司在使用node做前后端分离,采用的web框架是express,所以对express框架进行了深入的了解,前段时间写了篇关于express路由的文章,但是在那篇文章中貌似少了一个很重要的内容,就 ...

  9. express文件上传中间件Multer详解

    express文件上传中间件Multer详解 转载自:https://www.cnblogs.com/chengdabelief/p/6580874.html   Express默认并不处理HTTP请 ...

  10. 在Express中使用Multiparty进行文件上传及POST、GET参数获取

    Express 版本:4.14.1 在Express中,文件上传需要用到multiparty中间件,在项目目录中,通过npm install multiparty –save进行安装必要组件. 前端H ...

随机推荐

  1. 模仿添加QQ好友桌面快捷方式

    /** * * @param context * @param tname 桌面快捷方式的名字 * @param icon 好友头像 */ public static void addShortCut ...

  2. 百度地图android客户端的AndroidMainfest.xml的学习和android版本号

    平时写android产品相关的东西接触比较少,于是找个例子学习下. 众所周知,Apk文件是可以反编译的,虽然看不到代码,xml还是可见的. 把百度地图android客户端反编译之后,来学习下它的And ...

  3. sql 插入

    今天处理了一个有关数据库表数据批量插入的问题.部分细节,自己之前没有遇到过.索性就整理下来,做个备忘录. 主要是将一个表的数据导入到另一张表中.这种插入方法,需注意两张表的对于字段的数据结构需要保持一 ...

  4. 浅谈《守望先锋》中的 ECS 构架

    https://blog.codingnow.com/2017/06/overwatch_ecs.html 今天读了一篇 <守望先锋>架构设计与网络同步 .这是根据 GDC 2017 上的 ...

  5. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

  6. 【bzoj3172】: [Tjoi2013]单词 字符串-AC自动机

    [bzoj3172]: [Tjoi2013]单词 先用所有单词构造一个AC自动机 题目要求的是每个单词在这个AC自动机里匹配到的次数 每次insert一个单词的时候把路径上的cnt++ 那么点p-&g ...

  7. poj2947(高斯消元解同模方程组)

    题目链接:http://poj.org/problem?id=2947 题意:有n 种装饰物,m 个已知条件,每个已知条件的描述如下: p start enda1, a2......ap (1< ...

  8. BZOJ1096 [ZJOI2007]仓库建设(斜率优化)

    题目背景 小B的班级数学学到多项式乘法了,于是小B给大家出了个问题:用编程序来解决多项式乘法的问题. 题目描述 L公司有N个工厂,由高到底分布在一座山上. 工厂1在山顶,工厂N在山脚. 由于这座山处于 ...

  9. plsql查询结果中文乱码

    网上的教程很多,但是这里需要说明的是如果没有安装oracle客户端的情况下,该怎么修改注册表里面的oracle参数呢? 当然有些是不需要改注册表的,只需要配置环境变量就可以了,但是有的时候发现改了之后 ...

  10. 使用box-shadow 实现水波、音波的效果

    用到的工具 animation box-shadow html: <div class="watersource"> </div> css: .waters ...