基本使用

Render 渲染字符串

Compile编译字符串到模板函数（需调用才能生成html内容）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ejs</title>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"></div>

    <script src="ejs.js"></script>

    <script>

        var html = ejs.render('<%= "hello,world" %>',''); // 直接输出html

        var template = ejs.compile('<%= 456 %>'); // 输出一个函数

        var result  = template(); // 处理之后，成为html

        document.getElementById('div1').innerHTML=html;

        document.getElementById('div2').innerHTML=template;

        document.getElementById('div3').innerHTML=result;

    </script>

</body>

</html>


hello,world

function (data) { var include = function (path, includeData) { var d = utils.shallowCopy({}, data); if (includeData) { d = utils.shallowCopy(d, includeData); } return includeFile(path, opts)(d); }; return fn.apply(opts.context, [data || {}, escapeFn, include, rethrow]); }

456

使用模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ejs</title>

</head>

<body>

    <script id="users" type="text/template">

        <% if (names.length) { %>

            <ul>

                <% names.forEach(function(name){ %>

                    <li><%= name%></li>

                <% }) %>

            </ul>

        <% } %>

    </script>

    <script src="ejs.js"></script>

    <script>

        var users = document.getElementById("users").innerHTML;

        var namesArr = ['zhangsan','lisi','wangwu']; // 从接口中获取

        var html  = ejs.render(users,{names:namesArr});

        document.body.innerHTML = html;

    </script>

</body>

</html>


zhangsan

lisi

wangwu

node中使用

npm install ejs

新建ejs01.js

var ejs = require("ejs");

var people = ['geddy', 'neil', 'alex'];

var html = ejs.render('<%= people.join(", "); %>', {people: people});

console.log(html);

node 执行

$ node ejs01.js

geddy, neil, alex

一个综合的例子：

新建模板ejs02.ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <title><%=title%></title>

    <meta charset="utf-8"/>

</head>

<body>

name:<%= userInfo.name %><br/>

age:<%= userInfo.age %><br/>

<%%= %> 使用方法：变量若包含 '<' '>' '&'等字符会被转义 ：

message:<%= userInfo.message %>

<br/>

<%%- %> 使用方法：输出变量原值，不转义:

message:<%- userInfo.message %>

<%# 注释不显示 %>

<br/>

<%

if(userInfo.age > 5){

%>

5+

<%

}else{

%>

5-

<%

}

%>

</body>

</html>

新建控制器

ejs02.js

var ejs = require("ejs");

var fs = require("fs");

//var people = ['geddy', 'neil', 'alex'];

//var html = ejs.render('<%= people.join(", "); %>', {people: people});

var title="hello world";

var userInfo = {

    name : "devil13th",

    age : 5,

    school : "THD",

    message : "<div>i'm message</div>"

}

fs.readFile("ejs02.ejs","utf-8",function(err,data){

    console.log(data);

    console.log("========================");

    var text = ejs.render(data,{title:title,userInfo:userInfo});

    console.log(text);

})

console.log("finish");

这个时候执行node ejs02.js

$ node ejs02.js

finish

<!DOCTYPE html>

<html lang="en">

<head>

    <title><%=title%></title>

    <meta charset="utf-8"/>

</head>

<body>

name:<%= userInfo.name %><br/>

age:<%= userInfo.age %><br/>

<%%= %> 使用方法：变量若包含 '<' '>' '&'等字符会被转义 ：

message:<%= userInfo.message %>

<br/>

<%%- %> 使用方法：输出变量原值，不转义:

message:<%- userInfo.message %>

<%# 注释不显示 %>

<br/>

<%

if(userInfo.age > 5){

%>

5+

<%

}else{

%>

5-

<%

}

%>

</body>

</html>

========================

<!DOCTYPE html>

<html lang="en">

<head>

    <title>hello world</title>

    <meta charset="utf-8"/>

</head>

<body>

name:devil13th<br/>

age:5<br/>

<%= %> 使用方法：变量若包含 '<' '>' '&'等字符会被转义 ：

message:&lt;div&gt;i'm message&lt;/div&gt;

<br/>

<%- %> 使用方法：输出变量原值，不转义:

message:<div>i'm message</div>

<br/>

5-

</body>

</html>

还可以继续升级，创建server_ejs02.js

var ejs = require("ejs");

var fs = require("fs");

var http = require("http");

http.createServer(function(req,res){

    fs.readFile("ejs02.ejs","utf-8",function(err,data){

        res.writeHead(200,{'Content-Type':'text/html'});

        var title="hello world";

        var userInfo = {

            name : "devil13th",

            age : 5,

            school : "THD",

            message : "<div style='border:1px solid red;'>i'm message</div>"

        };

        var html = ejs.render(data,{title:title,userInfo:userInfo});

        res.end(html);

    })

}).listen(3000);

console.log("server running ...");

执行node server_ejs02.js

$ node server_ejs02.js

server running ...

直接就可以在浏览器中访问了。

EJS基本使用的更多相关文章

  1. nodejs 返回html页面--使用 ejs 模板

    nodejs 可以直接在返回中使用html标签,例如下面的格式,返回 hello world 将会使用 h1 字体. app.get('/html',function(req,res){ res.st ...

  2. 【nodejs笔记3】Express基本用法，和路由控制，和模板渲染ejs

    1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', ...

  3. Nodejs express中创建ejs项目,解决express下默认创建jade,无法创建ejs问题

    最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: express -t ejs microblog 可是执行后,仍 ...

  4. ejs模板中的四种表达式输出形式

    在ejs模板中,通常会用下面四种方式在HTML中输出服务端的变量或表达式的值: 1. 直接在<%%>中写表达式或变量.这种情况通常只是用来进行表达式计算或给变量赋值,不会有任何输出,被称作 ...

  5. NodeJS实战：Express+Mongoose+ejs

    元宵还没到,先向所有朋友拜一个晚年~~~ 文章目录: 1.组件版本号 -- --node -- --express -- --Mongoose 2.初始化项目 firstblood -- --用 ex ...

  6. nodejs学习笔记(2)--Express下安装模版引擎ejs

    成功安装完express后,输入express -help,根据提示安装ejs(如下图): 根据提示-e实现安装ejs,注意此处有坑:之前安装的时候根据教程(node.js开发指南第五章5.2.2节) ...

  7. ejs模板

    nodejs的模板引擎有很多, ejs是比较简单和容易上手的.常用的一些语法: 用<%...%>包含js代码 用<%=...%>输出变量 变量若包含 '<' '>' ...

  8. node入门 express ejs

    hello.js var express = require("express"); var app = express(); app.get("/hello" ...

  9. 最新版EJS的include函数已支持参数传递

    最新版的express中partial函数已经被移除,使用include虽然可以实现同样的效果,但是代码看起来很不爽比如 1 <%-partial("user/home",{ ...

  10. 如何在 ejs 模板中使用 helper function 外部函数进行特殊处理？

    一般我们想要在 ejs 模板中使用外部函数用于特殊的处理,比如:<%= ellipsis(title, 30) %> 通常的做法是: 使用 app.locals 来定义: app.loca ...

随机推荐

  1. Try, throw和catch用法

    PHP 5 提供了一种新的面向对象的错误处理方法. 使用思路如下: 1.Try - 使用异常的函数应该位于 "try" 代码块内.如果没有触发异常,则代码将照常继续执行.但是如果异 ...

  2. [Python3网络爬虫开发实战] 3.1.1-发送请求

    使用urllib的request模块,我们可以方便地实现请求的发送并得到响应,本节就来看下它的具体用法. 1. urlopen() urllib.request模块提供了最基本的构造HTTP请求的方法 ...

  3. [Python3网络爬虫开发实战] 1.3.2-Beautiful Soup的安装

    Beautiful Soup是Python的一个HTML或XML的解析库,我们可以用它来方便地从网页中提取数据.它拥有强大的API和多样的解析方式,本节就来了解下它的安装方式. 1. 相关链接 官方文 ...

  4. php - namespace篇

    之前没有系统学习过PHP语言,直接上手TP框架了,所以认为namespace和use是TP框架的一部分,最近学习语言模块的时候遇到了这个问题,所以汇总了一下. PHP中命名空间可以解决两类问题: 用户 ...

  5. Html、Css、JavaScript 遇到的问题总结

    $('body').scrollTop()无效得解决方案 鼠标滑轮获取到得值为0:var scrollTop = $('body').scrollTop(); 在页面中加一个随着页面滚动条滚动的小图片 ...

  6. 解决Antimalware Service Executable CPU，内存占用高的问题

    1.win键+R键打开运行对话框框,输入gpedit.msc打开本地组策略编辑器(组策略):2.依次打开计算机配置-管理模板-Windows组件-Windows Defender:3.如果要关闭Win ...

  7. python pip 安装一些包找不到的问题 Could not find a version that satisfies....

    有时我们使用下载python 自带的pip 安装一些工具包时,会报如下错误 找不到满意的版本,这时就是我们的pip可能需要升级了,所以使用 python -m pip install --upgrad ...

  8. NOIP2013提高组D2T3 华容道

    n<=30 * m<=30 的地图上,0表示墙壁,1表示可以放箱子的空地.q<=500次询问,每次问:当空地上唯一没有放箱子的空格子在(ex,ey)时,把位于(sx,sy)的箱子移动 ...

  9. noip 2011

    铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺 ...

  10. Ubuntu 16.04安装SwitchHosts

    下载: https://github.com/oldj/SwitchHosts/releases 解压: unzip SwitchHosts-linux-x64_v3.3.6.5287.zip 移动: ...