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中的Window窗口对象
Jan 16 Javascript
javascript引导程序
Oct 26 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
layui点击数据表格添加或删除一行的例子
Sep 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
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php接口技术实例详解
2016/12/07 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python的常用模块之collections模块详解
2018/12/06 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
党的群众路线对照检查材料
2014/08/27 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB