ejs官方文档：https://ejs.bootcss.com/  https://github.com/mde/ejs

模板引擎：是一种将数据和页面分离的技术.。

1.什么是 EJS？

"E" 代表 "effective"，即【高效】。

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。

EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

2.EJS特性：

  • 快速编译与绘制输出
  • 简洁的模板标签：<% %>
  • 自定义分割符（例如：用 <? ?> 替换 <% %>）
  • 引入模板片段
  • 同时支持服务器端和浏览器 JS 环境
  • JavaScript 中间结果静态缓存
  • 模板静态缓存
  • 兼容 Express 视图系统

3.EJS安装：利用 NPM 安装 EJS 很简单。

$ npm install ejs

4.EJS标签含义：

  • <% 'js脚本' 标签，用于流程控制，无输出。
  • <%= 输出数据到模板（输出是转义 HTML 标签）
  • <%- 输出非转义的数据到模板，解析识别html代码
  • <%_ 删除其前面的空格符
  • <%# 注释标签，不执行、不输出内容
  • <%% 输出字符串 '<%'
  • <%- include('shares/footer',{ }) %>

　　★在 ejs 模板中引入公共模板时, 一定要注意路径问题, 要参照当前正在使用的模板用相对路径去引入目标模板

5.ejs 的使用步骤

* 使用 npm 安装 ejs
* 在入口文件中设置模板引擎 (view 视图(模板) engine 引擎)
　　app.set('view engine', 'ejs');
　　app.set('views', 'views')
* 使用 render 方法解析模板，文件后缀为 ejs   
　　res.render('test');

* 在 views 下创建 test.ejs 文件，test.ejs模板中使用
<%= user %>
<%= user[i] %>
<%-  html %>

<%- include('shares/header') %>

<%- include('shares/header',{title:'123'}) %>

//流程控制       

 <% if( ){ %>       <% } %>

//循环控制 

<% for(var i=0;i<10;i++){ %>      <% } %>

6. 完整栗子：栗子链接

(1)数据 页面 不分离 （不使用模板引擎情况下）

//  GET  /home    显示HTML页面

var express = require('express');

var app = express();

//静态资源

//路由

app.get('/home', function(req,res){

  var isVip = true;

  var title = '商城';

  var type = isVip ? 'VIP 用户' : '普通用户';

  //显示html文档

  res.end(`<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>`+title+`</title>

</head>

<body>

  `+type+`

  <span style="color:red">网站首页</span>

</body>

</html>`);

});

app.get('/list', function(req,res){

  var isVip = true;

  var title = '商城';

  var type = isVip ? 'VIP 用户' : '普通用户';

  //显示html文档

  res.end(`<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>`+title+`</title>

</head>

<body>

  `+type+`

  <span style="color:red">网站首页</span>

</body>

</html>`);

});

app.listen(8080);

app.js

(2)使用ejs模板引擎：数据 页面 相分离

var express = require('express');

var app = express();

app.use(express.static('public'))

//设置模板引擎

app.set('view engine', 'ejs'); // 模板引擎的类型设置

app.set('views', 'views'); // 设置模板的存放位置

app.get('/home', function(req, res) {

    //返回结果

    res.render('home'); // 代码会自动到 views 下寻找一个名为 home.ejs的文件

});

app.get('/admin', function(req, res) {

    //在模板中显示数据

    // var data = {

    //  title: '小商城'

    // };

    // res.render('admin', data);

    //数据解析

    res.render('admin', {title:'大杂货铺'});

});

// 不解析转义 html 字符串

// <%- pages %>

// 转义 html 字符串

// <%= pages %>

app.get('/center', function(req, res) {

    res.render('center', { pages: '<a href="">大</a><a href="">小</a>' })

});

//include(路径,JSON参数) 使用

app.get('/page', function(req, res) {

    res.render('page',{title:'商城网'});

});

//流程控制

app.get('/if', function(req, res) {

    res.render('condition', { vip: 1, hasLogin: 0 });

});

//循环控制

app.get('/for', function(req, res) {

    var users = [

        { name: 'AAAA', age: 20 },

        { name: 'BBB', age: 10 },

        { name: 'CCC', age: 22 },

        { name: 'DDD', age: 18 },

        { name: 'EEE', age: 19 },

    ];

    var goods = [

      {

            "id": 3,

            "title": "碎花连衣裙雪纺中长款秋冬季长袖打底宽松文艺娃娃长裙小清新印花",

            "price": 78.75,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/170116\/upload_7731jih3jdd1871gk7hdei49kai24_640x900.jpg_224x340.jpg",

            "user_id": 3

        },

        {

            "id": 4,

            "title": "秋新款性感修身小香风单露肩裙不规则斜肩连衣裙",

            "price": 128.75,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/170111\/1489163244_5f88c91c5cdf08262k446i4k3ffaa_640x900.jpg_224x340.jpg",

            "user_id": 1

        },

        {

            "id": 5,

            "title": "小番茄定制春装新款绿色碎花连衣裙复古气质显瘦长袖中长款裙子",

            "price": 122.50,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/170116\/upload_4ld75e9jkc4jecl80a7f20k08l9e8_640x900.jpg_224x340.jpg",

            "user_id": 2

        },

        {

            "id": 6,

            "title": "【Lin同款】百搭纯手工亮片连衣裙",

            "price": 225.00,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/170209\/upload_80200eebh97i7lb23jggh4gg0eaai_640x900.jpg_224x340.jpg",

            "user_id": 1

        },

        {

            "id": 7,

            "title": "2017春季新款韩版时尚百搭显瘦系带长袖中长款宽松衬衫连衣裙",

            "price": 106.00,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/170208\/1190070835_1d2hhe6jke349fggk200je9dek29c_640x832.jpg_224x340.jpg",

            "user_id": 1

        },

        {

            "id": 8,

            "title": "【蕾丝公主裙】春新欧美名媛气质长袖蛋糕裙连衣裙",

            "price": 116.47,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/161215\/1492306463_3kh1dgkahadgig344ag5jiec28abc_640x900.jpg_224x340.jpg",

            "user_id": 1

        },

        {

            "id": 9,

            "title": "【金属扣连衣裙】韩国秋冬季新款金属环扣灯芯绒背带连衣裙",

            "price": 61.94,

            "pic": "http:\/\/s2.mogucdn.com\/p2\/161208\/1492306463_0bh3heel54658ihkb4cgebk66jb6e_640x900.jpg_224x340.jpg",

            "user_id": 2

        }

    ];

    res.render('for', { users: users , goods:goods});

})

app.listen(80);

app.js

7.上栗子：https://github.com/lipeifeng/myBlog/tree/master/Nodejs/ejs

（1）.node安装 EJS：

（2）.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <table>

  <thead>

    <th>姓名</th>

    <th>年龄</th>

  </thead>

  <tbody>

  <% for(var i=0;i<list.length;i++){var u=list[i]; %>

    <tr>

    <td><%=u.name%></td>

    <td><%=u.age%></td>

    </tr>

  <% } %>

  </tbody>

</table>

</body>

</html>

（3）. nodejs脚本：

var http=require('http');

var fs=require('fs');

var ejs=require('ejs');

http.createServer(function(req,res){

  var dataList={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};

  // console.log(req.url);

  fs.readFile('demo.html',function(err,data){

    // console.log(data);

    var datas=data.toString();

    var html=ejs.render(datas,dataList);

    res.end(html);

  });

}).listen(80);

（4）运行结果 ：

nodejs-5.1 ejs模板引擎的更多相关文章

  1. 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

  2. node+ejs模板引擎的应用

    前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...

  3. Express框架中如何引用ejs模板引擎

    1.如何在项目中安装ejs模板引擎 在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...

  4. 在express站点中使用ejs模板引擎

    在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1         安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...

  5. 使用ejs模板引擎

    let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...

  6. Swiper+ ejs模板引擎+ iScroll插件知识总结

    一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...

  7. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  8. koa 基础（九） ejs 模板引擎的使用

    1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...

  9. koa2--04.ejs模板引擎

    首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...

随机推荐

  1. JS基础：this的指向以及call、apply的作用

    this 的指向 在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 ...

  2. 转:<mvc:annotation-driven/>的注解意义

    <mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案.<mvc:annotation-dri ...

  3. C 实现基于角色的权限系统

    本文demo下载地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1068 实例使用C# 实现基于角色的权限 ...

  4. java-将评论内容过滤特殊表情emoj符号，保存到mysql中

    正常操作评论,保存时,若评论内容含有特殊表情符号,后台将报错如下: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8mb4_ ...

  5. Flex 将默认日期格式转化成通用格式

    flex 默认日期格式如:Wed Dec 16 00:00:00 GMT+0800 2015 想要得到的通用格式如:2015-12-16 转换方法如下: var sdate:String = &quo ...

  6. Java 核心卷学习笔记（一）

    Java基程序设计结构 1.注释 三种注释方式: // 注释单行 /* 内容 */ 注释单行 /** * 内容 */

  7. SQL Server性能优化（8）堆表结构介绍

    一.表结构综述 下图是SQL Server中表的组织形式(其中分区1.分区2是为了便于管理,把表进行分区,放到不同的硬盘数据文件里.默认情况下,表只有一个分区.).表在硬盘上的存放形式,有堆和B树两种 ...

  8. JDBC、DBUtils

    JDBC(Java Data Base Connectivity) java数据连接 可以为多种数据库,提供统一访问,它由一组用java语言编写的类和接口组成,也是java访问数据库的规范.   my ...

  9. 集成支付宝，报警告warning: (arm64) /Users/tommy/Desktop/Project/ios-msdk-git/AlipaySDK4Standard/AlipaySDK/Library/UTDI

    集成支付宝的时候遇到的问题,找到了解决办法,还说明了原因,非常好,觉得应该记下来,反正以我的记性下次一定是会忘光光哒~ 1)  Go to Build Settings -> Build Opt ...

  10. MYSQL复制原理及其流程

    Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其他主机(slave)上,并重新执行一遍来实现 ...