一、模板引擎简介
- node.js里的模板引擎，就是通过【node.js来生成html页面】。不需要通过前台，自已进行生成 。
- 模板引擎分两种：【jade】 和 【ejs】。
- jade模板引擎是破坏性的、侵入性的，强信赖，一旦使用，终生使用, jade可自动识别单双标签，例如 input编译过来是 <input />。
- ejs模板引擎是非侵入性的，弱信赖，比较温和。
二、jade 模板引擎操作
一、下载 jade模板
cnpm i jade
二 、【.jade】文件书写规则
1. 【.jade】 文件是根据缩进情况来规定层级情况 。
html
head
body
div
div
span
通过【jade.renderFile】编译出来的效果如下：
image.png
2. 【.jade】文件里标签属性放在()里面，多个属性的话用逗号分隔开.
p(title="导出",class="top_right")
通过【jade.renderFile】编译出来的效果如下：
image.png
3. 【.jade】文件属性也可以进行简写或混写。
//- jade文件属性进行简写,见下面的div 和 p
//- jade文件属性也可以混着写，见下面的 span
html
head
body
div.box
p#left_top
span.name(title="文字")
通过【jade.renderFile】编译出来的效果如下：
image.png
4. 【.jade】 文件style属性也可以当作JSON来处理，例如下面的div,这种写法只归 【style】 属性所拥有。
p(class="selected active left_top")
p(class= ['selected', 'active', 'left_top'])
通过【jade.renderFile】编译出来的效果如下：
image.png
5. 【.jade】文件class属性也可以当作数组来处理，例如下面的p ,这种写法只归 【class】 属性所拥有。
div(style="width:200px;height:200px;background:red;")
div(style= {'width':'200px', 'height': '200px', 'background': 'red'})
通过【jade.readfile】编译出来的效果如下：
image.png
6. 【.jade】 文件往标签输入内容，直接加一个空格，再输入内容
//- 往【.jade】文件里输入标签内容，直接加一个空格，再输入内容
html
head
body
a(href="http://www.baidu.com") 百度
p(id="name") 搜索
通过【jade.renderFile】编译出来的效果如下：
image.png
7. 【.jade】可以自定义标签，和 前台html一样可以自定义标签。
html
head
body
aaa
通过【jade.renderFile】编译出来的效果如下：
image.png
8. 【.jade】用 【｜】竖线后面跟内容，这样【｜】竖线后面的内容可以不进行编译，保持原样。
html
head
script
|wiondow.onload=function() {
| let a = 2;
| console.log(2)
|}
body
div
|abc
通过【jade.renderFile】编译出来的效果如下：
image.png
9. 【.jade】要想标签后面的内容不让编译，除了【｜】竖线后面跟内容，也可以标签后面加一个 . 【点】，表示这个标签子级里都保持原样，不要编译。
html
head.
div
spcrpt.
window.onload = function() {
let a = 2;
console.log(2)
}
body
div
通过【jade.renderFile】编译出来的效果如下：
image.png
10. 【.jade】想要内容不进行编译，除了 ｜后面跟内容 ，标签加.【点】。我们也可以把不编译的内容单独放在一个文件里，例如我们现在的index.js, 用 include加文件名。
html
head
script
include index.js
body
div
通过【jade.renderFile】编译出来的效果如下：
image.png
11. 【.jade】里面放变量， #{变量名}加变量名，并且把变量编译出来，#{变量名}等价于【=】,style和class变量不用加#{}，直接等于变量就行,class如果想要在变量的基础上，再加个其他没有的样式名，直接在后面class="样式名"就行
【jade 文件】如下内容：
html
head
body
div 我的名字是：#{name}
p #{name}
p=name
p(style = json)
div(class = arr)
div(class = arr class="especial")
【js文件】如下内容：
// 把引擎模板中的变量赋值，并且编译出来
const jade = require('jade');
let str = jade.renderFile('./www/read8.jade', {
pretty: true,
name: 'gg',
json: {width:'200px', height: '200px', background: 'red'},
arr: ['top_left', 'active', 'selected']
})
console.log(str)
通过【jade.renderFile】编译出来的效果如下：
image.png
12. 【.jade】用 【-】横杠加js内容，编译的时候可以把【-】横杠后面的内容当作js来进行解析。
html
head
body
-var a = 12;
-var b = 5;
div #{a+b}
通过【jade.renderFile】编译出来的效果如下：
image.png
13. 【.jade】for循环一个标签，标签里面的内容不确定，对应jade10.js编译结果。
【.jade】文件内容如下：
html
head
body
-for(var i=0; i<arr.length; i++)
div=arr[i]
【jade.js】文件内容如下：
const jade = require('jade');
let str = jade.renderFile('./www/read10.jade', {
pretty: true,
arr: ['内容1','内容2','内容2','内容2']
})
console.log(str)
通过【jade.renderFile】编译出来的效果如下：
image.png
14. 【.jade】要想变量里的内容原样输出，需要【!=】，表示强调要把变量里的内容输出,对应jade11.js。
【.jade】文件内容如下：
p!=content
p=content
【jade.js】文件内容如下：
const jade = require('jade');
let str = jade.renderFile('./www/read11.jade', {
pretty: true,
content: '<h2>标题</h2><p>这是一段话</p>'
})
console.log(str)
通过【jade.renderFile】编译出来的效果如下：
image.png
15. 【.jade】条件判断进行编译，用-if，如果我们前面是js，加了【-】，后面也可以不加【-】。
-var a = 17;
-if(a%2===0)
div(style={background:'red'}) 偶数
-else
div(style={background: 'blue'}) 奇数
-var b = 2;
if(b%2===0)
p(style={background:'red'}) 偶数
else
p(style={background: 'blue'}) 奇数
通过【jade.renderFile】编译出来的效果如下：
image.png
16. 【.jade】原生的我们多个判断可以用switch，现在jade文件也能用，不过把case变成原生的switch,when变成原生的case,jade也有自己的default。
html
head
body
-var a = 4;
case a
when 0
div 数字为0
when 2
div 数字为2
when 4
div 数字为4
default
div 为其他数字
通过【jade.renderFile】编译出来的效果如下：
image.png
三 、渲染纯标签, jade.render('标签名')
// 查看jade渲染是一个什么文件
const jade = require('jade');
let str = jade.render('html')
console.log(str)
预览：
image.png
四 、渲染【jade文件】, jade.renderFile( '文件名', {pretty: true} )
// 编译【.jade】文件标签里有内容
const jade = require('jade');
let str = jade.renderFile('./www/read2.jade', {pretty: true});
console.log(str)
预览如下：
image.png
五、读取 【jade文件，写入html文件里】
// 把【.jade】文件渲染出来再写入html中
const jade = require('jade');
const fs = require('fs')
let str = jade.renderFile('./www/read.jade', {pretty: true})
fs.writeFile('./build/write.html', str, (err) => {
if(err)
console.log('写入失败')
else
console.log('写入成功')
})
预览：
image.png
六 、【jade模板应用】
- 1.新建一个【index.jade】文件
doctype
html
head
meta(charset="UTF-8")
title jade测试页面
style.
p{
color:red;
font-size:14px;
text-align:center;
margin-right:15px;
background:#eeee;
}
body
-var a = 0;
while a < 12
if a%4===0 && a!==0
p.last=a++
else
p=a++
- 2.新建一个【index.js】文件
const jade = require('jade');
const fs = require('fs')
let str = jade.renderFile('./www/index.jade', {pretty: true})
// 把这个index.jade文件编译后写入index.html文件里
fs.writeFile('./build/index.html', str,(err, data) => {
if(err)
console.log('编译失败')
else
console.log('成功')
})
-
3.运行node index.js查看index.html 如下：
image.png
三、ejs 模板引擎操作
一、下载ejs
cnpm i ejs
二、【.ejs】 模板引擎书写规则
一. 【.ejs】文件中引入变量 <%= 变量名 %>
- 新建一个 【read.ejs】文件，里面和前台html一样写，唯一不同html里可带参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
// 这里<%= name %>中name为参数
我的名字是 <%= name %>
</body>
</html>
2）【ejs 模板引擎】解析 【.ejs 文件】
// 编译一个ejs文件
const ejs = require('ejs');
let str = ejs.renderFile('./www/read.ejs', {name: 'xxl'}, (err,data) => {
if(err)
console.log('编译失败')
else
console.log(data)
})
预览：
image.png
二. 【.ejs】<%- 变量名 %> 进行不转义输出
- 【.ejs】文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<%
var str="<div></div>";
%>
<%- str %>
</body>
</html>
- 【ejs.js】文件内容如下
const ejs = require('ejs');
ejs.renderFile('./www/read3.ejs', {}, (err, data) =>{
console.log(data)
})
// <%- 变量名 %>是不转义输出，<%= 变量名 %> 是经过转义输出
3）运行结果如下
image.png
三. 【.ejs】<% include 文件名 %> 引用文件进行输出
- 【.ejs】文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% include text.txt %>
</body>
</html>
2）【ejs.js】文件内容如下：
const ejs = require('ejs');
ejs.renderFile(('./www/read4.ejs'), {}, (err, data) => {
console.log(err)
})
// <% include 文件名 %> .ejs文件引用一个文件进来
网友评论