nodeJS ejs模板引擎 片段视图+视图助手

 Express 的视图系统还支持片段视图(partials),它就是一个页面的片段,通常是重复的
内容,用于迭代显示。通过它你可以将相对独立的页面块分割出去,而且可以避免显式地使
用 for 循环。让我们看一个例子,在 app.js 中新增以下内容:

app.get('/list', function(req, res) {
res.render('list', {
title: 'List',
items: [1992, 'fangchao', 'express', 'Node.js']
});
});

在 views 目录下新建 list.ejs,内容是:

<ul><%- partial('listitem', items) %></ul>

同时新建 listitem.ejs,内容是:

<li><%= listitem %></li>

访问 http://localhost:3000/list,可以在源代码中看到以下内容:

<html>
<head>
<title>List</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<ul><li>1991</li><li>fangchao</li><li>express</li><li>Node.js</li></ul>
</body>
</html>

效果如下:


List


  • 1992
  • fangchao
  • express
  • Node.js


  partial 是一个可以在视图中使用函数,它接受两个参数,第一个是片段视图的名称,
第二个可以是一个对象或一个数组,如果是一个对象,那么片段视图中上下文变量引用的就
是这个对象;如果是一个数组,那么其中每个元素依次被迭代应用到片段视图。片段视图中
上下文变量名就是视图文件名,例如上面的’listitem’

视图助手
  Express 提供了一种叫做视图助手的工具,它的功能是允许在视图中访问一个全局的函数
或对象,不用每次调用视图解析的时候单独传入。前面提到的 partial 就是一个视图助手。
视图助手有两类,分别是静态视图助手和动态视图助手。这两者的差别在于,静态视图
助手可以是任何类型的对象,包括接受任意参数的函数,但访问到的对象必须是与用户请求无
关的,而动态视图助手只能是一个函数,这个函数不能接受参数,但可以访问 req 和 res 对象。
  静态视图助手可以通过 app.helpers() 函数注册,它接受一个对象,对象的每个属性名
称为视图助手的名称,属性值对应视图助手的值。动态视图助手则通过 app.dynamicHelpers()
注册,方法与静态视图助手相同,但每个属性的值必须为一个函数,该函数提供 req 和 res,
参见下面这个示例:

var util = require('util');
app.helpers({
inspect: function(obj) {
return util.inspect(obj, true);
}
});
app.dynamicHelpers({
headers: function(req, res) {
return req.headers;
}
});
app.get('/helper', function(req, res) {
res.render('helper', {
title: 'Helpers'
});
});

对应的视图helper、 ejs的内容如下:

<%=inspect(headers)%>

访问 http://localhost:3000/helper 结果如下图:
这里写图片描述
视图助手的本质其实就是给所有视图注册了全局变量,因此无需每次在调用模板引擎时
传递数据对象。当我们在后面使用 session 时会发现它是非常有用的

以下是一个基于 NodejsExpressEJS 的分页查询实现示例: 首先,安装必要的依赖: ``` npm install express ejs mongoose express-flash express-session ``` 然后,创建一个名为 `app.js` 的文件,引入所需模块: ```javascript const express = require('express'); const mongoose = require('mongoose'); const session = require('express-session'); const flash = require('express-flash'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 3000; // 连接 MongoDB 数据库 mongoose.connect('mongodb://localhost:27017/test', {useNewUrlParser: true, useUnifiedTopology: true}); // 定义数据库模型 const Article = mongoose.model('Article', { title: String, content: String, created_at: Date }); // 设置模板引擎和静态文件目录 app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); // 设置 session 和 flash app.use(session({ secret: 'mysecretkey', resave: true, saveUninitialized: true })); app.use(flash()); // 设置 bodyParser app.use(bodyParser.urlencoded({ extended: true })); // 定义路由 app.get('/', async function(req, res) { const perPage = 5; const page = req.query.page || 1; const articles = await Article.find() .skip((perPage * page) - perPage) .limit(perPage); const count = await Article.countDocuments(); const totalPages = Math.ceil(count / perPage); res.render('index', { articles: articles, current: page, pages: totalPages }); }); app.listen(port, function() { console.log('Server listening on port ' + port); }); ``` 在 `views` 文件夹创建一个名为 `index.ejs` 的文件,用于显示分页数据: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页查询</title> </head> <body> <h1>文章列表</h1> <% if (articles.length > 0) { %> <ul> <% articles.forEach(function(article) { %> <li><%= article.title %></li> <% }); %> </ul> <% } else { %> <p>没有文章。</p> <% } %> <% if (pages > 1) { %> <div class="pagination"> <ul> <% if (current == 1) { %> <li class="disabled"><span>«</span></li> <% } else { %> <li><a href="?page=<%= current - 1 %>">«</a></li> <% } %> <% for (var i = 1; i <= pages; i++) { %> <% if (i == current) { %> <li class="active"><span><%= i %></span></li> <% } else { %> <li><a href="?page=<%= i %>"><%= i %></a></li> <% } %> <% } %> <% if (current == pages) { %> <li class="disabled"><span>»</span></li> <% } else { %> <li><a href="?page=<%= current + 1 %>">»</a></li> <% } %> </ul> </div> <% } %> </body> </html> ``` 在上面的示例,我们使用了 `mongoose` 连接 MongoDB 数据库,并定义了一个名为 `Article` 的数据库模型。在路由,我们使用 `await` 关键字来等待查询结果,并通过 `skip()` 和 `limit()` 方法来实现分页查询。在视图,我们使用 EJS 模板引擎来生成分页链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值