nodejs-5.1 ejs模板引擎
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模板引擎的更多相关文章
- 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别
一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...
- node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
- Express框架中如何引用ejs模板引擎
1.如何在项目中安装ejs模板引擎 在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...
- 在express站点中使用ejs模板引擎
在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1 安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...
- 使用ejs模板引擎
let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...
- Swiper+ ejs模板引擎+ iScroll插件知识总结
一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...
- express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用
express官网 postman工具下载地址 multer的npm文档地址 express模板引擎怎么使用 地址:http://www.expressjs.com.cn/guide/using- ...
- koa 基础（九） ejs 模板引擎的使用
1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...
- koa2--04.ejs模板引擎
首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...
随机推荐
- oracle to_date 函数
update pamsodt0p10 set cursysdate = to_date('2014-12-29 00:00:00','yyyy-mm-dd hh24:mi:ss') where cu ...
- 《Servlet与JSP核心编程》读书笔记
这本书实际是我进入JavaWeb开发的入门书籍,而且是日常碰到一些技术问题需要确认时的参考书,前一段时间在解决一个他人的问题时,我突然发现我的第一遍阅读对这本书的内容的理解还不够透彻,所以又开始N多年 ...
- com.android.dex.DexException: Multiple dex files define Lcom/sina/sso/RemoteSSO;
错误原因:ShareSDK的包里面也包含微博SDK的代码,两个Jar包含重复. 解决方法:用Winrar到ShareSDK的Jar里面把sso目录删掉,编译即可成功
- Java自学教程视频
BAT大咖助力 全面升级Android面试 BAT大牛亲授 基于ElasticSearch的搜房网实战 从天气项目看Spring Cloud微服务治理 Java企业级电商项目架构演进之路 Tomca ...
- JBOSSAS 5.x/6.x 反序列化命令执行漏洞(CVE-2017-12149)
本文主要记录一下JBOSSAS 5.x/6.x 反序列化命令执行漏洞的测试过程 仅供学习 文中利用到漏洞环境由phith0n维护: JBoss 5.x/6.x 反序列化漏洞(CVE-2017-1214 ...
- 分布式消息队列XXL-MQ
<分布式消息队列XXL-MQ> 一.简介 1.1 概述 XXL-MQ是一款轻量级分布式消息队列,支持串行.并行和广播等多种消息模型.现已开放源代码,开箱即用. 支持三种消息模式: ...
- SpringMVC解决跨域的两种方案
1. 什么是跨域 2. 跨域的应用情景 3. 通过注解的方式允许跨域 4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指 ...
- Eeffective C++ 读书笔记（ 32-38）
条款三十二:确定你的public继承塑模出is-a关系 1.所谓最佳设计,取决于系统希望做什么事,包括现在和未来. 2.好的接口可以防止无效的代码通过编译,因此你应该宁可采取“在编译期拒绝企鹅飞行”的 ...
- shiro 权限管理配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- ASCII、 Unicode 和 UTF8
ASCII: 英文字母与数字编号的一一对应.每个英文字母对应一个编号.范围0~127 Unicode: 全世界所有语言中字符与数字编号的一一对应.也即为存在的每个字符指定一个唯一的编号.范围为0~0x ...