由node express ejs使用模板引擎制作的示例演示

什么是模板引擎

模板引擎是一种工具，它将页面模板与要显示的数据相结合，以生成HTML页面。如果上面提到的express中的路由控制方法相当于MVC中的控制器，那么模板引擎就相当于MVC中的视图。

模板引擎的功能是将页面模板与要显示的数据相结合，生成HTML页面。它可以在服务器和客户端上运行。很多时候都是在服务器端直接解析成HTML，解析后传输给客户端，客户端甚至无法判断页面是否是模板引擎生成的。有时模板引擎也可以在客户端，即浏览器上运行。典型的代表是XSLT，它以XML为输入，在客户端生成HTML页面。但是，由于浏览器兼容性问题，XSLT不是很受欢迎。目前主流是服务器运行模板引擎。

在MVC架构中，模板引擎包含在服务器端。控制器获得用户请求后，从模型中获取数据，并调用模板引擎。模板引擎将数据和页面模板作为输入，生成HTML页面，然后将它们返回给控制器，控制器再将它们返回给客户端。

前端通常使用哪些模板引擎

第一，翡翠

Jade是一个超高性能的节点JavaScript模板引擎，有着非常强大的API和很多突出的特性。主要针对节点的服务器端。

第二，EJS

EJS是一种模板引擎，我们的教程中也使用了它，因为它使用起来非常简单，并且与express集成得很好。

第三，车把

Handlebars是JavaScript的语义模板库，可以通过分离视图和数据来快速构建Web模板。它采用“无逻辑模板”的思想，在加载时进行预编译，而不是在客户端执行代码时重新编译，可以保证模板加载和运行的速度。车把与小胡子兼容，可以在车把中导入小胡子模板。

使用模板引擎

在app.js中，模板文件的存储位置和使用的模板引擎由以下两行代码设置：

//view engine setup app . set(' views '，path . join(_ dirname，' views ')；app.set('view engine '，' ejs ')；注意：我们只通过express -e blog使用ejs模板引擎初始化了一个项目。例如，在node_modules下添加了ejs模块，在views文件夹下找到了index.ejs。并不是说项目被迫只使用ejs，而不使用jade等其他模板引擎。app.set('view engine '，' ejs ')是真正指定使用哪个模板引擎的。

在routes/index.js中，模板是通过调用res.render()呈现的，生成的页面直接返回给客户端。它接受两个参数，第一个是模板的名称，即视图目录中模板的文件名和扩展名。ejs是可选的。第二个参数是传递给模板进行模板转换的数据对象。

打开view/index . ejs，内容如下：

index.ejs

！DOCTYPE html html head title %=title %/title link rel='样式表' href='/样式表/style . CSS '/head body h1 %=title %/h1当我们res.render ('index '，{title :' express'})时，pWelcome to %=title %/P/body/html；模板引擎会将%=title%替换为Express，然后向用户显示替换的页面。

呈现后生成的页面代码为：

！DOCTYPE Html Html head title Express/title link rel='样式表' href='/stylesheets/style.css '/head body h1 Express/h1 pwel come to Express/p/body/Html注意：我们通过app . use(Express . static)(path . join(_ dirname，' public ')将静态文件目录设置为公用文件夹，因此上述代码中的href='/style sheets/style . CSS '相当于href=' public/style sheets/CSS '。

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

% code %: JavaScript代码。%=代码%:显示被替换的HTML特殊字符的内容。%-代码%:显示原始HTML内容。注意：

%=代码%和%-代码%的区别，当变量密码为普通字符串时，两者没有区别。当密码比如为氕你好/h1这种字符串时，%=代码%会原样输出氕你好/h1，而%-代码%则会显示氕大的你好字符串。

一个简单的例子

通过命令新建一个EJB的项目：快速电子演示

在index.js里添加如下代码：

var express=require(' express ')；定义变量路由器快递.路由器();var items=[{title: '文章1'}，{title: '文章2'}];/*获取主页*/router.get('/'，函数(req，res，next) { res.render('index '，{title: '文章列表，items : items })；});router.get('/form '，函数(req，res，next) { res.render('form '，{title: '文章列表，消息： ' fendo 8888 ' })；});router.post('/form '，函数(req，res，next){ RES . redirect('/')；});module.exports=路由器；在视图下新建表单。EJB添加如下代码：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title %=title %/title link rel='样式表href='/样式表/style。CSS '/头体形式方法=' post ' action='/form '标签新文章/标签br text area name=' text ' cols=' 100 ' row=' 5 '/text area输入类型=' submit ' value=' pus '/input/form div %=message %/div/body/html在index.ejs里添加如下代码：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title文章列表页/title link rel='样式表href='/样式表/样式。CSS/head body h1 %=title %/h1 pa href='/form ' rel='外部' nofollow '发表新文章/a/p ul %items.forEach(函数（项){ % Li %=项。title %/Li % })%/ul/body/html运行项目： npm启动

访问：http://localhost:3000/

点击发表新文章

点击加提交时，又回到首页

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。