NodeJS+Express中集成Flash消息

中间件: connect-flash 地址:https://github.com/jaredhanson/connect-flash

flash消息用于重定向跳转时传递消息,在Express中集成方法如下:

在项目中集成

  1. 安装connect-flash中间件
npm install --save connect-flash
  1. 在main js 中引入(通常是app.js或者项目名.js文件)中间件并加载
var flash = require('connect-flash');
app.use(flash());

到这里,我们的集成工作已经完成,就可以在router中使用类似 req.flash('flash_success_message', '文章添加成功!'); 传递flash消息了! 下面教大家如何完整定义一套flash message前后端解决方案

在项目中使用

一套完整的flash解决方案我的理解是: 后端发送flash message,前端动态响应flash message一次。 为什么说是“一次”呢?举个栗子: 当我们开发删除数据功能时,通常会这么做:点击删除按钮,将数据ID传递到后端,后端通过id,将数据从数据库里删除,并重定向redirect到数据列表页,重定向的时候,我们可以发送一条flash message,告诉用户数据删除成功。这个时候,当我们再次刷新数据列表页时,将不会出现之前那条flash message

下面我们开始处理整套flash message流程:

  1. 在main js(通常是app.js或者项目名.js文件)中所有的路由的最上面加入flash message处理中间件:
app.use(function (req, res, next) {
    res.locals.flash_success_message = req.flash('flash_success_message'); 
    res.locals.flash_error_message = req.flash('flash_error_message');        
    next();
});

一定要放到所有路由的最上面,因为express处理请求是由上往下,这样可以将所有的请求都过滤一遍。

  1. 在页面中统一处理 我用的是express-handlebarsbootstrap,所以处理方式如下:
{{#if flash_success_error}}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>错误!</strong> {{flash_success_error}}.
    </div>
{{/if}}
{{#if flash_success_message}}
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>恭喜!</strong> {{flash_success_message}}.
    </div>
{{/if}}

具体意思就是:前端视图中动态判断中间件中定义的flash_success_errorflash_success_message两个变量,如果有值,就将其对应的内容渲染处理。

至此,整个开发过程完毕。

有兴趣的童鞋可以关注一下我的开源项目ANodeBlog了解更多内容!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券