node+express+ejs使用模版引擎做的一个示例demo
什么是模板引擎
模板引擎（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
在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
访问:http://localhost:3000/
点击发表新文章
点击plus提交时,又回到首页
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
nodejs 图解express+supervisor+ejs的用法(推荐)
通过node js自带的http模块搭建了一个简易的服务器,实际在开发中,一般用的是express框架,本文我们就来讲讲项目开发中必备不可少的几样东西: •服务器( express ) •路由( express.Router ) •模板引擎( ejs ) •当然再加上数据库,就可以完成一个mvc的web应用了,数据库的用法,后期我会写一个项目 一.首先,新建一个项目文件夹( ghostwu ),在命令行下切换到该目录,用npm init --yes 初始化package.json文件 安装exp
-
Nodejs+express+ejs简单使用实例代码
前几天主要看了express,今天开始接触ejs,jade还是不想看了,O(∩_∩)O哈哈~ var express = require("express"); var ejs = require('ejs'); //var fs = require("fs"); //var bodyParser = require('body-parser'); var app = express(); app.engine('html', ejs.renderFile); ap
-
NodeJS框架Express的模板视图机制分析
模板引擎 Express支持许多模板引擎,常用的有: haml 的实现Haml haml.js 接替者,同时也是Express的默认模板引擎Jade 嵌入JavaScript模板EJS 基于CoffeeScript的模板引擎CoffeeKup 的NodeJS版本jQuery模板引擎 视图渲染(view randering) 视图的文件名默认需遵循"<name>.<engine>"的形式,这里<engine>是要被加载的模块的名字.比如视图layout
-
详解在express站点中使用ejs模板引擎
使用 vs创建的express站点,默认使用的是jade模板引擎,但是我不太喜欢这种方式,因为我觉得html本身的语义特性是我喜欢的,另外html本身也足够简洁,使用html自身做为模板语言更符合我的喜好,所以我选择ejs. 1.安装 在网站根目录启动控制台,输入 npm install ejs 程序包会安装到node_modules目录下. 2 修改APP.JS 修改app.js 将view engine修改为ejs.(并将模板的后缀修改为.html) app.set('views',path
-
node+express+ejs使用模版引擎做的一个示例demo
什么是模板引擎 模板引擎(Template Engine)是一个将页面模板和要显示的数据结合起来生成 HTML 页面的工具.如果说上面讲到的 express 中的路由控制方法相当于 MVC 中的控制器的话,那模板引擎就相当于 MVC 中的视图. 模板引擎的功能是将页面模板和要显示的数据结合起来生成 HTML 页面.它既可以运 行在服务器端又可以运行在客户端,大多数时候它都在服务器端直接被解析为 HTML,解析完成后再传输给客户端,因此客户端甚至无法判断页面是否是模板引擎生成的.有时候模板引擎也可
-
node+express+ejs制作简单页面上手指南
1.建立工程文件夹my_ejs. 2.首先利用npm install express和npm install ejs 下载这两个家伙.至于要不要设置成全局的,看习惯,我习惯性的下载到本项目中的文件夹中my_ejs. 然后建立相应的文件: index.js: form.ejs: index.ejs app.js: 开始运行app.js node app.js,然后再浏览器端访问:localhost:1337 单击发表文章: 点击发表,跳转到首页. 好了到此为止,一个简易的"网站"算是出来
-
详解node+express+ejs+bootstrap构建项目
node+express+ejs+bootstrap是前端常用的项目结构,分享给大家,具体如下: 您可以通过node-express_jb51.rar 来克隆我创建好的项目结构,也可以通过下面的方式一步一步手动创建项目. 第一步 安装 新建一个项目文件夹,命名为MyProject 然后在文件夹里按住Shift点击鼠标右键,选择在此处打开命令窗口. 在打开的窗口中输入npm install express和npm install ejs去安装他们和他们所需要的依赖.安装完之后目录中会多出一个nod
-
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
本文实例讲述了Node.js基于connect和express框架的多页面实现数学运算.分享给大家供大家参考,具体如下: 1.使用connect框架 .use方法用于绑定中间件到connect服务器,它会配置一系列在接到请求时调用的中间件模块,此例中我们要配置的中间件有favicon logger static router app.get/post/put 写法:app.requestName('path', function(req, res, next){}); app-co
-
零基础实现node+express个性化聊天室的示例
本篇文章使用node+express+jquery写一个个性化聊天室,一起来get一下~(源码地址见文章末尾) 效果图 项目结构 实现功能 登录检测 系统自动提示用户状态(进入/离开) 显示在线用户 支持发送和接收消息 自定义字体颜色 支持发送表情 支持发送图片 下面将一一讲解如何实现 前期准备 node及npm环境.express.socket.io 具体实现 1.将聊天室部署到服务器 先用node搭建一个服务器,部署在localhost:3000端口,先尝试向浏览器发送一个"hello wo
-
Java操作FreeMarker模板引擎的基本用法示例小结
FreeMarker 是一个采用 Java 开发的模版引擎,是一个基于模版生成文本的通用工具. 它被设计用来生成 HTML Web 页面,特别是基于 MVC 模式的应用程序.虽然使用FreeMarker需要具有一些编程的能力,但通常由 Java 程序准备要显示的数据,由 FreeMarker 生成页面,并通过模板显示准备的数据. http://freemarker.org/ public void process(String template, Map<String, ?> data) th
-
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
目录 安装 基本使用 路由 get和post请求都可以 有字符串正则系统 正则表达式 表单提交 中间件 中间件特点: app.use() render() & send() get & post 静态化文件 模板引擎 本文实例讲述了Node Express用法.分享给大家供大家参考,具体如下: 安装 npm install --save express 基本使用 //引用express var express = require('express'); //创建app var app =
-
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
由于之前练习koa2,直接渲染的jquery写的传统页面. 这次想偷懒,直接script引入vue,发现渲染不出data值. 渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置 vue有! var myVue = new Vue({ el: '#msgBoard', delimiters:['$$','$$'], data() { return { msg: { num: 10 } } }, mounted() { console.dir(this) }, }) 补充知识
-
Node+Express+MongoDB实现登录注册功能实例
注入MongoDB 依赖 var mongoose = require("mongoose"); 由于需要进行表单处理,需要用到bodyParser中间件 bodyParser模块来做文件解析,将表单里的数据进行格式化 var bodyParser = require("body-parser"); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); 登录后将
-
Node.js 使用jade模板引擎的示例
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal