nodejs学习过程

# 模板引擎 
## 什么是模板引擎 
模板引擎(Template Engine)是一个从页面模板根据一定的规则生成 HTML的工具,既建立一个HTML模板,插入可执行的代码。PHP、ASP、JSP、Vm都是模板引擎。 
## 为什么不直接用HTML 
如果一个网站全部资源都要用静态的HTML来展现,那一个网站要成千上万的静态页面,关键还很不灵活。 
因此用嵌入逻辑的模板来构建网站,降低了动态网站的开发门槛,在通过MVC模式消除逻辑和页面的耦合程度。 
## 模板引擎与控制器 

***图1-3 模板引擎在MVC中的位置***


## 设置模板引擎 
在app.js中,设置模板引擎和页面模板的位置。 
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
```nodejs routes/index.js片段
res.render('index', { title: 'Express' });
```
res.render 的功能是调用模板引擎,并将其产生的页面直接返回给客户端。它接受两个参数,第一个是模板的名称,即 views 目录下的模板文件名,不包含文件的扩展名;第二个参数是传递给模板的数据,用于模板翻译。 
```ejs index.ejs
<h1><%= title %></h1>
Welcome to <%= title %>

```
上面代码其中有两处 <%= title %>,用于模板变量显示,它们在模板翻译时会被替换成 Express,因为 res.render 传递了 { title: 'Express' }。 
## Ejs的标签 
ejs 的标签系统非常简单,它只有以下3种标签: 
<% code %>:JavaScript 代码。 
<%= code %>:显示替换过 HTML 特殊字符的内容。 
<%- code %>:显示原始 HTML 内容。 
## Layout.ejs 
之前已经提到过,Layout.ejs相当于Java的装饰模式,会自动替换<%- body %>、<%- title %>等部分的内容。 
可以在app.js中通过以下代码关闭。 
```nodejs app.js片段
app.set('view options', {
layout: false
});
```
Layout是默认的装饰页面,还可以通过如下代码指定装饰的页面。 
```nodejs index.js片段
function(req, res) {
res.render('userlist', {
title: '用户列表后台管理系统',
layout: 'admin'
});
};
```
这样就会自动套用admin.ejs来装饰了。 
# 片段视图 
片段视图 (partials),它就是一个页面的片段,通常是重复的内容,用于迭代显示。类似Jsp的 <c:foreach>来循环生成页面的方式。 
Express3.x是某人不适用片段视图的,之前已经有说如何导入片段视图插件已经如何适用插件了,就不重复列举了。直接上个例子吧。 
```nodejs app.js片段
app.get('/userlist',routes.userlist);
```
```nodejs routes/index.js片段
exports.userlist = function(req, res) {
res.render('list',{
        title:'List',
        items:[1988,'David','birthday','HelloWorld']
});
};
```
partial 是一个可以在视图中使用函数,它接受两个参数,第一个是片段视图的名称,第二个可以是一个对象或一个数组,如果是一个对象,那么片段视图中上下文变量引用的就是这个对象;如果是一个数组,那么其中每个元素依次被迭代应用到片段视图。片段视图中上下文变量名就是视图文件名,例如上面的'listitem'。 
```ejs views/list.ejs
[list]<%- partial('listitem', items) %>[/list]
```
```ejs views/listitem.ejs
[*]<%= listitem %>

```
运行结果: 

# 视图助手 
上一章节的partial就是一种视图助手,视图助手分为两种:静态视图助手和动态视图助手。Partial属于静态视图助手。 
静态视图助手可以是任何类型的对象,包括接受任意参数的函数,但访问到的对象必须是与用户请求无关的,而动态视图助手只能是一个函数,这个函数不能接受参数,但可以访问 req 和 res 对象。 
Express3.x中,视图助手的使用发生了变化,我试验了挺久的,终于知道如何解决了。边看代码边解释吧。 
```nodejs app.js
……
var util = require('util');
var partials = require('express-partials');
……

// helpers
app.locals({
inspect: function(obj) {
return util.inspect(obj, true);
}
});
// dynamicHelpers
app.use(function(req,res,next){
res.locals.headers= req.headers;
res.locals.dyvar = "This is a dynamic var!";
next();
});


app.use(app.router);
……
app.get('/helper',routes.helper);
……
```
开始要先引入util模块,因为测试方法需要用到。 
然后看备注可以看到helpers和dynamicHelpers在3.x中如何实现,特别要记住,一定要放在app.use(app.router);这句话之前,否则在locals里面设置的值是无效的。 
然后就是添加路由规则模块的方法。 
```nodejs routes/index.js片段
exports.helper =  function(req, res) {
res.render('helper', {
title: 'Helpers'
});
```
```ejs views/helper.ejs
<%= locals.dyvar %>
<%=inspect(locals.headers)%> 
```
注意:在页面中应用一定要记得要locals.headers 
然后就可以运行看结果了。 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值