node+express+ejs使用模版引擎做的一个示例demo


Posted in Javascript onSeptember 18, 2017

什么是模板引擎

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

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

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

前端常用的有哪些模板引擎

一、jade

jade是超高性能的node JavaScript模板引擎,有着非常强大的API和大量杰出的特性。它主要针对node的服务端。

二、EJS

EJS是模板引擎的一种,也是我们这个教程中使用的模板引擎,因为它使用起来十分简单,而且与 express 集成良好。

三、Handlebars

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。

使用模板引擎

在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() 渲染模版,并将其产生的页面直接返回给客户端。它接受两个参数,第一个是模板的名称,即 views 目录下的模板文件名,扩展名 .ejs 可选。第二个参数是传递给模板的数据对象,用于模板翻译。

打开 views/index.ejs ,内容如下:

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>

当我们 res.render('index', { title: 'Express' }); 时,模板引擎会把 <%= title %> 替换成 Express,然后把替换后的页面显示给用户。

渲染后生成的页面代码为:

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

注意:我们通过  app.use(express.static(path.join(__dirname, 'public'))) 设置了静态文件目录为 public 文件夹,所以上面代码中的  href='/stylesheets/style.css' 就相当于 href='public/stylesheets/style.css' 。

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

  • <% code %>:  JavaScript 代码。
  • <%= code %>:显示替换过 HTML 特殊字符的内容。
  • <%- code %>: 显示原始 HTML 内容。

注意:

<%= code %> 和  <%- code %> 的区别,当变量 code 为普通字符串时,两者没有区别。当 code 比如为  <h1>hello</h1> 这种字符串时, <%= code %> 会原样输出  <h1>hello</h1> ,而  <%- code %> 则会显示 H1 大的 hello 字符串。

一个简单的例子

通过命令新建一个ejs的项目: express -e demo

node+express+ejs使用模版引擎做的一个示例demo

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

var express = require('express'); 
var router = express.Router(); 
 
 
var items=[{title:'文章1'},{title:'文章2'}]; 
 
/* GET home page. */ 
router.get('/', function(req, res, next) { 
 res.render('index',{title:'文章列表',items:items}); 
}); 
 
router.get('/form', function(req, res, next) { 
  res.render('form',{title:'文章列表',message:'fendo8888'}); 
}); 
 
router.post('/form', function(req, res, next) { 
 res.redirect('/'); 
}); 
 
 
module.exports = router;

在views下新建form.ejs添加如下代码:

<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <form method="post" action="/form"> 
    <label>new article</label><br> 
    <textarea name="text" cols="100" row="5"></textarea> 
    <input type="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='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1><%= title %></h1> 
  <p><a href="/form" rel="external nofollow" >发表新文章</a></p> 
  <ul> 
    <%items.forEach(function(item){%> 
     <li><%=item.title%></li> 
     <%})%> 
  </ul> 
 </body> 
</html>

运行项目: npm start

node+express+ejs使用模版引擎做的一个示例demo

访问:http://localhost:3000/

node+express+ejs使用模版引擎做的一个示例demo

点击发表新文章

node+express+ejs使用模版引擎做的一个示例demo

点击plus提交时,又回到首页

node+express+ejs使用模版引擎做的一个示例demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
移动端界面的适配
Jan 11 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
详解node服务器中打开html文件的两种方法
Sep 18 #Javascript
详解利用 Express 托管静态文件的方法
Sep 18 #Javascript
Express使用html模板的详细代码
Sep 18 #Javascript
Mongoose中document与object的区别示例详解
Sep 18 #Javascript
新手vue构建单页面应用实例代码
Sep 18 #Javascript
angularjs路由传值$routeParams详解
Sep 05 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
Zerg建筑一览
2020/03/14 星际争霸
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
vue如何判断dom的class
2018/04/26 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python list转dict示例分享
2014/01/28 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
策划助理岗位职责
2013/11/18 职场文书
安全生产月演讲稿
2014/05/09 职场文书
人事任命通知
2015/04/20 职场文书
通知书大全
2015/04/27 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL