基本使用

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. JZOJ5776. 【NOIP2008模拟】小x游世界树

    题目:[NOIP2008模拟]小x游世界树: 题目的附加题解给的很清楚,这里只给一个代码: #include<iostream> #include<cstdio> #inclu ...

  2. Python飞机大战实例有感——pygame如何实现“切歌”以及多曲重奏？

    目录 pygame如何实现"切歌"以及多曲重奏? 一.pygame实现切歌 初始化路径 尝试一 尝试二 尝试三 成功 总结 二.如何在python多线程顺序执行的情况下实现音乐和音 ...

  3. mysql事物隔离

    1.读未提交(行锁) 会发生脏读,事物未提交被其他事物看到,未提交的数据为脏数据. 2.读已提交(行锁) 会发生不可重复读,事物开始时,只能看到已经提交了的事物修改. 3.重复读(行锁) 该级别保证了 ...

  4. 反连接NOT EXISTS子查询中有or 谓词连接条件SQL优化一例

    背景 今天在日常数据库检查中,发现一SQL运行时间特别长,于是抓取出来,进行优化. 优化前: 耗时:503s 返回:0 SQL代码 SELECT * FROM MM_PAYABLEMONEY_TD P ...

  5. winform ComboBox/TextBox自动提示

    ComboBox和TextBox控件都带有自动前缀匹配,只要设置其中的AutoCompleteMode,AutoCompleteSource,AutoCompleteCustomSource三个属性的 ...

  6. UVa 806 四分树

    题意: 分析: 类似UVa 297, 模拟四分树四分的过程, 就是记录一个左上角, 记录宽度wideth, 然后每次w/2这样递归下去. 注意全黑是输出0, 不是输出1234. #include &l ...

  7. TCP传输的三次握手四次挥手策略

    为了准确无误地数据送达目标处,TCP协议采用了三次握手策略.用TCP协议把数据包送出去后,TCP不会对传送后的情况置之不理,它一定会向对方确认是否成功送达.握手中使用了TCP的标志:SYN和ACK 发 ...

  8. [java基础原理] 数字类型原理

    1.常识 2.包装类型的继承树 3.通用JAVA包装类示例 package base.com.hzeng.jdk; import java.lang.annotation.Native; public ...

  9. 获取某一个<tr>中<td>的值

    $("#trId").children("td").eq(0).text(};    //当前行的第一个<td>的值    <td>下标 ...

  10. 添物不花钱学JavaEE（基础篇）－ Java

    Java Java是一面向对象语言 Write Once Run Anywhere Designed for easy Web/Internet applications, Mobile Widesp ...