首页手记《Node.js开发指南》microblog手动代码三

《Node.js开发指南》microblog手动代码三

标签：

Node.js JavaScript

模板引擎

模板引擎是一个从页面模板根据一定的规则生成HTML的工具，在MVC架构中，模板引擎包含在服务器端，控制器得到用户请求后，从模板获取数据，调用模板引擎，模板引擎以数据和页面模板为输入，生成HTML页面，然后返回给控制器，生成HTML页面，然后返回给控制器，由控制器交给客户端；

一，使用模板引擎

这个案例使用的是ejs，他十分简单而且在服务器和浏览器都可以运行，

// app.js
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

表示要使用的模板引擎是ejs,页面模板在views子目录下，在routers/index.js中的，router.get()函数中通过

res.render("index",{title:"MGT360124"})
//调用模板引擎,并将产生的页面直接返回给客户端。

他接收两个参数，一个是模板名即views目录下的模板文件名，不包含文件的扩展名，第二个参数是传递给模板的数据，用于模板翻译；index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

代码中有两处<% = title %>用于模板变量显示，在显示时会被替换为res.render("index",{title:"MGT360124"}) 的MGT360124；
ejs的标签系统非常简单，它只有3种标签：

<% code %> :     JavaScript代码
<%= code %>：   显示替换过HTML特殊字符的内容
<%-  code %>  :  显示元素HTML内容

二，片段视图

Express的视图系统还支持片段视图（partials），
由于express不支持ejs模块的partials方法，所以需要自己额外安装模块：

//在microblog目录中
npm install express-partials

app.js中添加:

var partials = require('express-partials');
app.use(partials());

它就是一个页面的片段，通常是重复内容，用于迭代，通过它可以将相对独立的页面块分割出去；例如在app.js中新增：

app.get("/title",function(req,res){
        res.render("List",{
           title:"List",
           items: [ 1995,"MGT360124","express","node.js']
         });
});

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

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
   <ul><%- partial("listitem",items) %></ul>
  </body>
</html>

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

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

访问http://localhost:3000/list，可以下在源码中看到：

partial是一个可以在视图中使用函数，partial("listitem",items)它接受两个参数，第一个是片段视图名称，第二个参数是一个数组或者对象，如果是一个对象，那么视图片段代码中上下文就是这个对象，如果是一个数组，那么其中每个元素依次被迭代应用到片段视图，片段视图上下文变量名就是视图文件名，例子中为'listitem'；

三，视图助手

express提供了一种叫视图助手的工具，它的功能是允许在视图中访问一个全局的函数或者对象，不用每次调用视图解析的时候单独传入，partial就是一个视图助手；
视图助手分为两类：静态视图助手，动态视图助手；
（1）静态视图助手：可以是任何类型的对象，包括接收任意参数的函数，但是访问到的对象必须是与用户请求无关的；静态视图助手可以通过app.helpers()函数注册，它接受一个对象，对象的每个属性名称为视图助手的名称，属性值对应视图助手的值。
（2）动态视图助手只能是一个函数，这个函数不能接受参数，但是可以访问req和res对象。动态视图助手则通过app.dynmicHelpers()注册，方法与静态视图助手相同，每个属性的值必须为一个函数，该函数提供req和res。例如：

//视图助手
var util = require("util");

 app.locals.inspect = function(obj) {
    return util.inspect(obj,true,3,true);
 };

 app.use(function(req,res,next){
        res.locals.headers = function(){
            return req.headers;
        }
       next();
 })

app.get("/helper", function(req,res){
      res.render("helper",{
          title:"Helpers",
        })
})

在views目录中新建helper.ejs，内容为：

<%=  inspect(headers(),true,3,true) %>

在浏览器中输入http://localhost:3000/helper，结果为：

视图助手的本质是给所有视图注册了全局变量，因此不需要每次调用模板引擎时传递数据对象。

四，页面布局

需要在views目录导入layout.ejs，他的内容是：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%=  title %>
  </body>
</html>

layout.ejs是一个页面布局模板，他描述了整个页面的框架结构，默认情况下每个单独的页面都继承这个框架，替换掉<%- body %>部分以及页眉页脚大量内容是重复的，因此我们可以把他们放在layout.ejs中；当然这个功能并不是强制的，可以关闭也可以打开，想关闭的话可以：

//app.js
app.set("view options", {
      layout: false
});

另一种情况是：一个网站可能需要不止一种页面布局，如网站的前台展示和后台管理页面就是不同的页面布局样式风格，一套页面不能满足需求，因此可以在页面模板翻译时指定页面布局，即设置layout属性，例如：

 app.set("views options",function(req,res,next){
         res.render("userlist",{
            title:'用户列表后台管理系统',
            layout:"admin",
         })
});

这段代码会在翻译userlist页面模板时套用admin.ejs作为页面布局；

点击查看更多内容