手记

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

模板引擎

模板引擎是一个从页面模板根据一定的规则生成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作为页面布局;

5人推荐
随时随地看视频
慕课网APP

热门评论

最关键的就是router路由控制器这块,这个部分挺重要的,《node.js开发指南》是好几年前的版本了,现在的Express框架都升级到了4.X了,还有很多模块都提升版本了,版本变化了很多,还有就是mongodb数据库也变化了很多,还在不断采坑中,希望有大神给个指导,这样就不会那么累;最后要说的就是本人已经找到工作了,很开心,努力没有白费,感谢慕课这个平台;在这个知识日新月异的时代,当然找到工作还要继续努力学习,加油慕课的同学们!

查看全部评论