MEAN 全栈框架之 EJS 模板引擎

MEAN 全栈开发系列文章,这里只是授课的部分课件,目的是为了便于学生在课外参考。


什么是模板引擎

模板引擎(Tempalte Engine)是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。在谈到MVC设计模式时,常常这么理解:Express中的路由控制器方法相当于MVC中的控制器(Controller),而模板引擎就相当于MVC中的视图(View)。

模板引擎的功能是将页面模板和要显示的数据结合起来生成HTML页面,它既可以运行在服务器端,又可以运行在客户端。大多时候,它都是在服务器端直接被解析为HTML的,解析完成后,再传输到客户端,因此客户端甚至无法判断页面是不是由模板引擎生成的。当然,模板引擎也可以运行在客户端,这里所说的客户端是指浏览器。考虑到浏览器的兼容性问题,还是由服务器端运行模板引擎为好。

模板引擎工作原理,如图所示:

模板引擎工作原理

简单说来,HTML = Template + Data。值得一提的是,这里的Data是JSON对象,不能使用JSON字符串,单纯的JSON字符串是渲染不出来的。
在MVC设计模式中,模板引擎放在了服务器端。当控制器得到用户的请求后,从模型(Model)获取到数据,再调用模板引擎。模板引擎以数据和页面模板为输入,生成HTML页面,然后返回控制器,由控制器交回给客户端。

模板引擎的种类有很多,我们这里单说 EJS.

EJS 模板引擎

EJS是Embedded JavaScript的缩写,这个词描述得通俗易懂:通过嵌入具有JavaScript特色的功能来进行HTML模板的渲染。也可以说,EJS是一个基于JavaScript的模板库,用来从JSON数据中生成HTML字符串。
EJS比较通俗易懂,从代码展示效果来看,它仍然是HTML结构,但同时又具有额外的功能,可以有效地复用已有的代码块。如果有一个现有的HTML项目,所需要做的全部工作就是用.ejs扩展名重新命名文件,然后,就可以使用EJS的特殊功能了。
有过Java开发经验的人,初看EJS模板引擎并不陌生,一方面它的语法与Java中的VELOCITY相似,另一位方面完全把视图解耦出来,性能也比较出色。
EJS:本身中规中矩,从编码风格来看,EJS文件酷似HTML文件。不管是Node.js、Java还是.Net开发者,对EJS都比较熟悉。
从我经历的项目来看,还是推荐使用EJS。原因是,那些已经具有ASP/JSP开发经验的人,已经很习惯EJS的操作了。选择主流的框架,有这方面技能的人多,便于产品的后期维护。
本书所讲解的基于MEAN全栈的实例,所选用的模板引擎都是EJS。


从前面的示例中可以看出,EJS是一个通用的模板引擎,并不是说只有Node.js才可以用EJS,其他的前端框架也可以用EJS。在MEAN全栈框架中,如何使用EJS模板引擎呢?这里分两种情况。
(1)在一个已有的Express工程中,引入EJS模板引擎。这种应用场景是,项目之前用的其他的模板引擎,现在想改为EJS,这就要安装EJS。可以通过npm指令安装:

npm install pjs
(2)还有一种场景是新创建一个Express工程时,引入EJS模板引擎。我们知道,如果不加限定条件,默认创建的Express工程使用的是Jade模板引擎,如果想使用EJS,只需在创建Express工程时,加上ejs限定条件就可以了。创建命令为:
express --view=ejs project name
例如,创建一个基于EJS模板引擎的Express工程,只需要简单的几步。

创建工程Express工程

在终端窗口进入到指定的工程目录,执行命令:

express --view=ejs modem
终端窗口的执行过程(省略)
经过简单的两行命令,一个基于EJS模板引擎的Express工程就创建成功了。

启动应用

仍然是在工程所在路径下,在终端窗口执行命令:

npm start

这时候,在浏览器地址栏中输入 “http://localhost:3000/

默认创建的Express 工程

这里呈现的Express页面就是index.html,它是由视图(index.ejs)和路由控制器(index.js)相互作用的结果。
视图(View)文件: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>

路由(route)index.js文件代码如下。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) 
{
    res.render('index', { title: 'Express' });
});

module.exports = router;

路由器所渲染的文件,正是index.ejs。
所传入的JSON对象,正是{title: 'Express'}。

res.render('index', { title: 'Express' });


不错,EJS模板引擎确实是起作用了,因为它已经渲染出了一个HTML页面。那么,这个EJS模板引擎是在哪里做的设置的呢?

EJS模板引擎的触发

我们所创建的这个基于EJS模板引擎的Express工程,绝非是一个简单的Hello World,它把视图、路由、模板引擎有效地融合在了一起。在整个应用中,其关键作用的是工程中的app.js
文件,代码如下。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
//view engine setup

  //设置模板引擎
 app.set('views', path.join(__dirname, 'views'));** 
 app.set('view engine', 'ejs');** 
app.set('views', path.join(__dirname, 'views'));


用来设置视图所存放的目录。这些.ejs文件,只有放在工程的views目录下,才能被正常访问。

app.set('view engine', 'pjs');


参考书: 《 全栈开发之道:MongoDB+Express+AngularJS+Node.js

AngularJS ui-router的应用场景


更多全栈技术,请关注微信公众号: “全栈工程师的早读课”,每天早8:00 准时推送技术文章。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,123评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,031评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,723评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,357评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,412评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,760评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,904评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,672评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,118评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,264评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,857评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2 348

推荐阅读更多精彩内容