ejs 模板 html转移,ejs模板 - 木子丰咪咕晶 - OSCHINA - 中文开源技术交流社区

最新推荐文章于 2022-09-05 10:16:13 发布
最新推荐文章于 2022-09-05 10:16:13 发布
阅读量271 收藏
点赞数
文章标签： ejs 模板 html转移

ejs是Embedded JavaScript的简写

1.创建一个ejs模板

var ejs = require('ejs');

var template = '';

var context = {message: 'Hello template!'};

console.log(ejs.render(template, context));//console.log(ejs.render(template, {locals: context}));

通过ejs.render(template, options)就可以将数据传递给模板,从而渲染展示出页面

cache Compiled functions are cached, requires filename

filename Used by cache to key caches

scope Function execution context

debug Output generated function body

compileDebug When false no debug instrumentation is compiled

client Returns standalone compiled function

open Open tag, defaulting to "

close Closing tag, defaulting to "%>"

All others are template-local variables

需要注意的是:context变量名是自定义的,但是不可以使用:

cache,filename,scope,debug,compileDebug,client,open,close这些名称

这些名称是模板引擎设置相关的保留值

2.字符转义:ejs.render()传递数据时会将一些特定的字符进行转义,以防止脚本攻击

var ejs = require('ejs');

var template = '';

var context = {message: ""};

console.log(ejs.render(template, context));

打印结果

<script>alert('XSS attack!');</script>

另:如果你确定传递的数据是可信的,则可以在模板标签中用

var ejs = require('ejs');

var template = '';

var context = {

message: ""};

}

console.log(ejs.render(template, context));

这样alert的弹窗效果就出来了

3.自定义ejs模板的标签符号

var ejs = require('ejs');

ejs.open = '{{'

ejs.close = '}}'

var template = '{{= message }}';

var context = {message: 'Hello template!'};

console.log(ejs.render(template, context));

4.使用ejs过滤器操作模板数据:

格式:

last    first

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:Enter the Void

get:0    get:1....

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:Bambi

capitalize(首字母大写)    upcase    downcase

var ejs = require('ejs');

var template = '';

var context = {name: 'bob'};

console.log(ejs.render(template, context));

//输出结果:Bob

过滤器支持链式写法

var ejs = require('ejs');

var template = '';

var context = {name: 'bob'};

console.log(ejs.render(template, context));

//输出结果:BOB

size    length

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:3

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:3

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:21

var ejs = require('ejs');

var template = '';

var context = {'movies': [

'Bambi',

'Babe: Pig in the City',

'Enter the Void'

]};

console.log(ejs.render(template, context));

//输出结果:21

(+ - * /)plub:n    minus:n    times:n    divided_by:n

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City',age: 19},

{name: 'Bambi', age: 21},

{name: 'Enter the Void', age: 13}

]};

console.log(ejs.render(template, context));

//输出结果:24

truncate:3(留3个字符)    truncate_words:3(留3个单词)

var ejs = require('ejs');

var template = '';

var context = {title: 'The Hills are Alive With the Sound of Critters'};

console.log(ejs.render(template, context));

//输出结果:The

var ejs = require('ejs');

var template = '';

var context = {title: 'The Hills are Alive With the Sound of Critters'};

console.log(ejs.render(template, context));

//输出结果:The Hills are

replace:pattern,substitution    append:val    prepend:val

var ejs = require('ejs');

var template = "";

var context = {weight: '40 kilogram'};

console.log(ejs.render(template, context));

//输出结果:40 kg

var ejs = require('ejs');

var template = "";

var context = {weight: '40 '};

console.log(ejs.render(template, context));

//输出结果:40 kg

var ejs = require('ejs');

var template = "";

var context = {weight: '40'};

console.log(ejs.render(template, context));

//输出结果:$40

sort   reverse   sort_by:"key"    get:"key"

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City',age: 19},

{name: 'Bambi', age: 21},

{name: 'Enter the Void', age: 13}

]};

console.log(ejs.render(template, context));

//输出结果:13,19,21

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City',age: 19},

{name: 'Bambi', age: 21},

{name: 'Enter the Void', age: 13}

]};

console.log(ejs.render(template, context));

//输出结果:21,19,13

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City'},

{name: 'Bambi'},

{name: 'Enter the Void'}

]};

console.log(ejs.render(template, context));

//输出结果:Babe: Pig in the City

map:"key"    join:'val'

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City',age: 19},

{name: 'Bambi', age: 21},

{name: 'Enter the Void', age: 13}

]};

console.log(ejs.render(template, context));

//输出结果:19,21,13

var ejs = require('ejs');

var template = "";

var context = {'movies': [

{name: 'Babe: Pig in the City',age: 19},

{name: 'Bambi', age: 21},

{name: 'Enter the Void', age: 13}

]};

console.log(ejs.render(template, context));

//输出结果:19;21;13

自定义过滤器    round:3(保留3个小数位)

var ejs = require('ejs');

var template = '';

var context = {price: 21};

ejs.filters.round = function(number, decimalPlaces) {

number = isNaN(number) ? 0 : number;

decimalPlaces = !decimalPlaces ? 0 : decimalPlaces;

return number.toFixed(decimalPlaces);

};

console.log(ejs.render(template, context));

//输出结果:23.940

5.缓存模板

EJS支持可选的缓存模板功能,模板被解析后就缓存到内存中,这样渲染该模板速度会更快,因为这样省去了解析模板的过程

此功能一般只在production模式下使用,development模式下一般不使用.(产品模式下模板不会再有内容变动,而开发模式下,模板内容发生变化后,一般是希望立即看到效果,如果缓存起来却适得其反)

var cache = process.env.NODE_ENV === 'production';

var output = ejs.render(

template,

{students: students, cache: cache, filename: filename}

);

Express中缓存模板与不缓存模板的差别

74844c0f5798901f07fcd536813f4378.png

Express中模板查找规则

a0357bf5d02d131e91c66f78fc81dc9c.png

Express中向模板传递的值的获取规则

61c179c795ab721caba241ac9686d076.png

Express在模板中提供的应用级变量 settings

该变量包含了所有通过app.set()所设置的变量,如果有了app.set('title', 'test'),在模板中我们可能直接通过settings.title来获取.

Welcome to .

6.使用include在模板中引入其它模板

如果index.ejs内容如下:

hello world!

a.ejs内容为:

this is a.ejs

则通过index.ejs模板渲染出的内容为:

this is a.ejs

hello world!

毛佳旗
关注
ejs模板及node中的使用
codingWeb的博客
03-23 478
一、简介 相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网：https://ejs.bootcss.com/ 二、ejs基本使用 这里我们使用如下配置文件： 我们啊可以通过下面的方式实现基本的ejs操作： app.js文件： const express=require(...
EJS模板引擎
weixin_34023863的博客
06-15 133
前面的话 　　nodejs的模板引擎有很多， EJS是比较简单和容易上手的。本文将详细介绍EJS   概述 　　EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装 【安装】 　　ejs可以配合express框架使用，或直接在node中...
ejs模板引擎
weixin_30755709的博客
10-25 186
第一部分：ejs模板引擎 ejs-cli ejs预先定义好 数据---将数据注入到模板中->|编译 带有数据的html页面 cnpm install ejs-cli -g ...
ejs 模板 html转移,ejs模板使用
weixin_42543309的博客
06-17 315
这里重点要理解下 %= 和 %- 的区别= 是值计算 会获取变量的计算的值- 是值替换 不会有任何改动原封不动的输出用，里面的变量一定是普通的数据格式内容，可以是字符串，可以是数组，可以对象。。里面的变量一定是字符串而且还是标签字符串，如果不是变量而是一段HTML文件，那么就要考虑被转义的情况，要用使用 会在处理其他数据结构带来问题，比如对象，数组等等被转义的内容参与计算是可以反转义的，但是想...
ejs-compiled-loader：用于Webpack的EJS加载器（无前端依赖项）
02-06
用于webpack的ejs-compiled-loader 用于EJS加载器。 使用函数来编译模板。 要使用使用1.x分支和1.xx版本。 安装 npm install ejs-compiled-loader 用法 var template = require ( "ejs-compiled-loader!./file....
ejs-serve：:hammer::eyes:在浏览器中构建，监视和提供EJS模板
02-15
在浏览器中构建，监视和提供EJS模板。 :waving_hand: 介绍 是一个用于开发/使用EJS模板的CLI工具。 用数据呈现您的EJS模板 将文件提供给您的浏览器 监视文件更改并自动重新加载浏览器 您的工作目录中没有多余的...
express-ejs模板语法（八）
01-08
ejs 语法 变量的声明 变量的使用 循环语句 arr:['张三','李四',王五,小明] 姓名： 循环语句 list=[ {title:'昌平马池口大雨',authour:'于成龙',times:'2019-4-9'}, {title:'吉利大学',authour:'蒋伟',times:'...
node.js 使用ejs模板引擎时后缀换成.html
01-01
这是一个小技巧，看着.ejs的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。 1.在app.js的头上定义ejs: 代码如下: var ejs = require(‘ejs’); 2.注册html模板引擎： 代码如下: app....
atomic-lab：基于部分模板的styleguide生成器（html ejs haml）
02-03
它支持haml，ejs和jade。 它支持scss，less和手写笔 通过包含模板标签来定义自定义元素 安装 $ npm install atomic-lab --save-dev 构建样式指南 通过npx $ npx atomic-lab build 或$（npm bin） $ $(npm bin)/...
ejs模板
weixin_48879122的博客
09-05 1186
简述ejs的基础语法
ejs（视图模板）
tian_to_tian的博客
08-31 1774
一、ejs是什么？ ejs是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。 模板：结构+数据 MVC框架（Model View Controller）：经典MVC模式中，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。其中，View的定义比较清晰，就是用户界面。 二、如何使用ejs 1、了解，视图模板（页面+数据） 2、下载 npm ins...
EJS模板介绍
qq_26530207的博客
05-17 1322
刚开始接触EJS，对EJS还不是很了解，自己也做一定的总结
EJS模板学习
sunpowerz的博客
05-28 697
“E” 代表 “effective”，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。 特性 快速编译与绘制输出 简洁的模板标签：&lt;% %&gt; 自定义分割符 引入模板片段 同时支持服务器端和浏览器 JS 环境 JavaScript 中间结果静态缓存 模板静态缓存 兼容 Express 视图系统 使用 服务端使用 ...
node.js 模板引ejs
guugle2010的专栏
08-25 922
ejs速度不是最快的，推荐最多大概是因为其简单的语法结构。主要通过来嵌套代码。比如符合阅读逻辑，同时也省去不少学习语法的成本。 另有一些自定义的方法：如link_to(name, url)，img_tag(url)等。 还可以支持json。 =========== ejs的特性：     1、缓存功能，能够缓存已经解析好的html模版；     2、用于执行其中javascript代码
Node.js EJS 模板快速上手指南
示例展示了如何读取模板文件，定义数据，然后使用`ejs.render()`渲染模板。在模板中，`<% if... %>`、`<% names.forEach... %>`等语句展示了EJS如何处理条件判断和循环。`options`对象可以包含用户数据，如`users`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值