node.js学习笔记:ejs语法

学习笔记
, ,

ejs的语法与原生js的更接近，相对于jade没有那么强势。

ejs语法

1. 输出内容

和jade思路一样，但是语法略有不同。

1
2
3
4
const ejs = require("ejs");
ejs.renderFile("view/1.ejs", {变量}, (err, data) => {
  console.log(data);
})

2. 变量

  • <%=变量=%>

  • 变量可以接受任意数据类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	我的名字：<%=json.arr[0].name %>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    const ejs = require("ejs");
    ejs.renderFile('view/1.ejs',{json: {arr:[
    	{name: "nikkkki", pass: 123456},
    	{name: "tom", pass: 654321},
    	{name: "rose", pass: 6666666}]
    }},(err,data) => {
    	console.log(data);
    });

    image-20180815212059899

3. js语法语句

  • 循环

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<% for(var i=0; i<json.arr.length; i++){ %>
    	<div>用户名： <%=json.arr[i].name%> 密码: <%=json.arr[i].pass%></div>
    	<% } %>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const ejs = require("ejs");
    ejs.renderFile('view/1.ejs',{json: {arr:[
    	{name: "nikkkki", pass: 123456},
    	{name: "tom", pass: 654321},
    	{name: "rose", pass: 6666666}]
    }},(err,data) => {
    	console.log(data);
    });

    image-20180815212728782

4. html标签非转义输出

  • 用-减号代替=等号

    1
    2
    3
    4
    const ejs = require("ejs");
    ejs.renderFile('view/1.ejs',{content:"<div><p>example</p></div>"},(err,data) => {
    	console.log(data);
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<%-content%>
    </body>
    </html>

    image-20180815213333496

5. 引用

  • Include引入其他文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div>
    		<% include ../data/1.txt %>
    	</div>
    </body>
    </html>

    image-20180815213609299

  • include中不能用变量

  • 原则是：凡是符合js原生语法的内容都可以用原生语法的方式来写，如果不符合原生语法，需要将每句分别用<% %>标记