Node.js和Express简单入门介绍(4)

模板引擎(Template Engine)是一个将页面模板和要显示的数据结合起来生成 HTML 页面的工具。如果说上面讲到的 express 中的路由控制方法相当于 MVC 中的控制器的话,那模板引擎就相当于 MVC 中的视图。

模板引擎的功能是将页面模板和要显示的数据结合起来生成 HTML 页面。它既可以运 行在服务器端又可以运行在客户端,大多数时候它都在服务器端直接被解析为 HTML,解析完成后再传输给客户端,因此客户端甚至无法判断页面是否是模板引擎生成的。有时候模板引擎也可以运行在客户端,即浏览器中,典型的代表就是 XSLT,它以 XML 为输入,在客户端生成 HTML 页面。但是由于浏览器兼容性问题,XSLT 并不是很流行。目前的主流还是由服务器运行模板引擎。

在 MVC 架构中,模板引擎包含在服务器端。控制器得到用户请求后,从模型获取数据,调用模板引擎。模板引擎以数据和页面模板为输入,生成 HTML 页面,然后返回给控制器,由控制器交回客户端。

==ejs 是模板引擎的一种,它使用起来十分简单,而且与 express 集成良好。==

我们通过以下两行代码设置了模板文件的存储位置和使用的模板引擎:(app.js文件中进行的设置)

app.set('views', __dirname + '/views'); app.set('view engine', 'ejs');

<!DOCTYPE html> <html> <head> <title><%= title %></title> <link href='https://www.jb51.net/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%- title %></p> </body> </html>

说明:

ejs 的标签系统非常简单,它只有以下三种标签:

<% code %>:JavaScript 代码。

<%= code %>:显示替换过 HTML 特殊字符的内容。(也就是说如果code中有标签,则会原样输出,不会让浏览器解析)

<%- code %>:显示原始 HTML 内容。(如果有a标签,在浏览器端这则会看到一个超链接)

路由代码:

router.get('https://www.jb51.net/', function(req, res, next) { res.render('index', { title: "<a href='https://www.baidu.com'>百度 </a>"}); }); // 则会用title的值去替换ejs中的相应的代码。

则生成的代码:

<!DOCTYPE html> <html> <head> <title>&lt;a href=&#39;&#39;&gt;百度 &lt;/a&gt;</title> <link href='https://www.jb51.net/stylesheets/style.css' /> </head> <body> <h1>&lt;a href=&#39;&#39;&gt;百度 &lt;/a&gt;</h1> <p>Welcome to <a href='https://www.baidu.com'>百度 </a></p> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyspg.html