@H_4030@什么是模板引擎
@H403_0@模板引擎(Template Engine)是一个将页面模板和要显示的数据结合起来生成 HTML 页面的工具。如果说上面讲到的 express 中的路由控制方法相当于 MVC 中的控制器的话,那模板引擎就相当于 MVC 中的视图。
@H_403_0@模板引擎的功能是将页面模板和要显示的数据结合起来生成 HTML 页面。它既可以运 行在服务器端又可以运行在客户端,大多数时候它都在服务器端直接被解析为 HTML,解析完成后再传输给客户端,因此客户端甚至无法判断页面是否是模板引擎生成的。有时候模板引擎也可以运行在客户端,即浏览器中,典型的代表就是 XSLT,它以 XML 为输入,在客户端生成 HTML 页面。但是由于浏览器兼容性问题,XSLT 并不是很流行。目前的主流还是由服务器运行模板引擎。
@H_403_0@在 MVC 架构中,模板引擎包含在服务器端。控制器得到用户请求后,从模型获取数据,调用模板引擎。模板引擎以数据和页面模板为输入,生成 HTML 页面,然后返回给控制器,由控制器交回客户端。
@H_4030@
前端常用的有哪些模板引擎
@H403_0@
一、jade
@H_403_0@jade是超高性能的node JavaScript模板引擎,有着非常强大的API和大量杰出的特性。它主要针对node的服务端。 @H_403_0@二、EJS
@H_403_0@EJS是模板引擎的一种,也是我们这个教程中使用的模板引擎,因为它使用起来十分简单,而且与 express 集成良好。 @H_403_0@三、Handlebars
@H_403_0@Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。 @H_403_0@使用模板引擎
@H_403_0@在app.js中通过以下两行代码设置了模板文件的存储位置和使用的模板引擎:注意:
@H_403_0@<%= code %> 和 <%- code %> 的区别,当变量 code 为普通字符串时,两者没有区别。当 code 比如为hello
这种字符串时, <%= code %> 会原样输出hello
,而 <%- code %> 则会显示 H1 大的 hello 字符串。 @H_403_0@一个简单的例子
@H_403_0@通过命令新建一个ejs的项目: express -e demovar items=[{title:'文章1'},{title:'文章2'}];
@H_403_0@在views下新建form.ejs添加如下代码:
/ GET home page. /
router.get('/',function(req,res,next) {
res.render('index',{title:'文章列表',items:items});
});
router.get('/form',next) {
res.render('form',message:'fendo8888'});
});
router.post('/form',next) {
res.redirect('/');
});
module.exports = router;
<%=message%>