页面渲染传参的方式 - Node实战

news/2024/6/18 18:57:59

动态页面的开发,基本会涉及一个比较关键的问题,那就是传参。后台把不同的参数传递给前台,前台页面根据不同的参数显示不同的页面效果,这叫做渲染。

不同的后台开发环境均有不同的渲染方式,Node开发过程中,传递参数的方式非常简单直观。直接就是渲染模版即可,如下代码:

res.render('error', {
  message: err.message,
  error: err
});

渲染页面模版error,给它传递了2个参数。这样前台页面模版就可以使用这两个参数了。如下error页面代码:

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

当然页面上不仅仅只可以使用render方法传递的那几个参数,如果你使用的是express框架的话,你还可以通过app.locals以及res.locals对象赋值的方式传递其他的参数到页面模版引擎。例如:

router.use(function (req, res, next) {
  res.locals.period = moment().day(5).format('YYYYMMDD');  // 得到本周五的日期
  res.locals.prePeriod = moment().day(5 - 7).format('YYYYMMDD'); // 得到上周五的日期
});

这个路由方法,会将period以及prePeriod两个变量传递到该路由下所有路径的模版引擎上。在该路由下的所有页面模版上均可以使用这两个变量。

但是,存在另外一种情况,页面跳转的时候,参数该什么传递呢?

页面的跳转,例如:res.redirect('/login'),这条语句是把请求跳转到另外一个路径上;或者,res.redirect('back')返回上一页。页面的跳转相当于重新访问一遍目标路径的路由。这种情况下,我们想传递参数,通过redirect方法貌似不可以实现。可能有人会想到使用session对象来作为一个中介进行传参,参数展现后就自动删除该条session,没错,这就是connect-flash模版所实现的功能。

具体可参考:

  1. Express框架之connect-flash详解 - 高山上的鱼 - 博客频道 - CSDN.NET。

  2. connect-flash 用法详解 - 云库网

原理和使用方法都已经有了,我就不赘述了,我的使用场景一般都是当进入一个没有权限访问的页面时,跳转到登陆界面所提示信息的展现。好多场景其实是可以通过前台Ajax来取代的,例如:登陆界面的验证等等。

总结

Node Web开发中,后台三种传参渲染页面的方式:

  1. 普通页面渲染使用res.render()方法;

  2. 还有别忘了express提供的app.locals以及res.locals对象;

  3. 针对跳转页面的场景可以尝试使用connect-flash模块;


更多内容请访问:LP's Blog


http://www.niftyadmin.cn/n/2108707.html

相关文章

毁灭程序员效率的 15 个障碍

转载仅供本人存档及后续研究使用&#xff0c;请尊重原创。 转载自&#xff1a;https://blog.csdn.net/Px01Ih8/article/details/81151251 会议&#xff0c;什么都不懂的经理&#xff0c;生产效率指标——这就是你和下一个伟大软件之间的天堑。 昨天必须得发布产品。用户争闹和…

Hive简介及使用

一、Hive简介 1、hive概述Apache Hive™数据仓库软件有助于使用SQL读取&#xff0c;编写和管理驻留在分布式存储中的大型数据集。可以将结构投影到已存储的数据中。提供了命令行工具和JDBC驱动程序以将用户连接到Hive。数据计算&#xff1a;mapreduce分布式计算>难度大hive&…

配置Maven_OPTS解决Maven中OutOfMemory错误

当Maven项目很大&#xff0c;或者你运行诸如 mvn site 这样的命令的时候&#xff0c;maven运行需要很大的内存&#xff0c;在默认配置下&#xff0c;就可能遇到java的堆溢出。如&#xff1a; [INFO] Building jar: /home/dl9pf/svn/mindquarry/mindquarry-jcr/mindquarry-jcr-c…

PagedDataSource 分页

DataSoure:数据源AllowPageing:是否允许分页PageSize:页面记录数CurrentPageIndex:当前页面publicPagedDataSource pds(intpg) //根据一个传来的整数作为当前页码并返回分页后的数据源{ PagedDataSource pds new PagedDataSource(); pds.DataSource dt("…

Linux必学的网络操作命令

Linux必学的网络操作命令 来源&#xff1a;赛迪网开发者论坛 作者&#xff1a;曹元其 因为Linux系统是在Internet上起源和发展的&#xff0c;它与生俱来拥有强大的网络功能和丰富的网络应用软件&#xff0c;尤其是TCP/IP网络协议的实现尤为成熟。Linux的网络命令比较多&#xf…

HTTP之基本认证

认证认证就是要给出一些明。当出示像护照或驾照那样有照片的件时&#xff0c;就给出了一些证据&#xff0c;说明你就是你所声称的那个人。在自动取款机上输入PIN码&#xff0c;或在计算机系统的对话框中输入密码时&#xff0c;也是在证明你就是你所声称的那个人现在&#xff0c…

Android 添加两个(多个)FileProvider节点(解决头像拍照和第三方SDK(例如融云)拍照的FileProvider冲突问题)

在android7.0以后&#xff0c;修改了对私有存储的限制&#xff0c;导致在获取资源的时候&#xff0c;不能通过Uri.fromFile(...)来获取Uri了&#xff1b;但是在写入数据的时候可以通过Uri.fromFile(...)来获取Uri。Android官方给出的方法是通过FileProvider来解决这一问题。 但…

SELECT 语句中的 for update (以及 lock in share mode

SELECT 语句中的 for update &#xff08;以及 lock in share mode&#xff09; 的用法试验。这个语句限制在事务表的其他连接上进行UPDATE或者DELETE操作。连接1命名为A。连接2命名为B。有几个先决条件&#xff1a;1、当autocommit 系统变量值为off 或者为0 的时候起作用。2、…