7、 jade 、 ejs、express集成模板

jade/ejs 模板引擎

http://jade-lang.com/

http://www.nooong.com/docs/jade_chinese.htm

SSR 服务器端渲染 服务器生成html字符串

cnpm i jade ejs

html                    <html>
		head                	<head>
			style             		<style></style>
			link                  <link></link>
			script                <script></link>
			                    </head>
		
		body
			div
			ul
			  li
			  
			                  </html>

jade:

var html = jade.reander(标签名);
var html = jade.reanderFile("xxx.jade",{pretty:true,data....});
pretty:美化

属性 内容

div(id="div1",class="box") 内容
div#div1.box 内容
div&attributes({id:'div1', class:'box'}) 内容
div(class=["box1","box2","box3"])

样式：

div(sytle="width:200px;....")
div(sytle={width:"200px",....})

多行 | 或 . 或 include 文件名
数据：#
循环：
        -for(){
					li
        -}
1.jade
html
	head
		style #div1{width:200px;height:200px;background:red;}
		link(rel="stylesheet",href="index.css")
		script(src="a.js")
		script 
				|window.onload = function(){
				|   alert(1);
				|}
	body
		div(style="width:200px;height:200px;background:red;")  内容
		div(style={width:"200px",height:"200px",background:"red"})  内容
		div 	aaaa
				|bbbb
				|cccc
		div(class="box1 box2 box3") class
		div(class=["box1","box2","bo3"]) class arr
		div&attributes({id:'div1', class:'box'})
		ul
			li 我叫#{name}，今年#{age}岁
		ul
			-for(var i = 0; i < data.length; i++){
				li 我叫#{data[i].name}，今年#{data[i].age}岁
			-}

1.js

var jade = require("jade");
var str = jade.renderFile("3.jade",{pretty:true,
	name:"如花",age:18,
	data:[
		{name:"如花",age:18},
		{name:"翠花",age:28},
		{name:"豆腐花",age:38}
	]

});

console.log(str);//html页面

image

ejs:

cnpm i ejs

http://www.ejs.co/ 英文

https://ejs.bootcss.com/ 中文

<% '脚本' 标签，用于流程控制，无输出。
<%= 输出数据到模板（输出是转义 HTML 标签） 原样输出
<%- 输出非转义的数据到模板 转义成标签

<%-/= include 文件名%>
<%-/= include("文件名",数据)%>
<%-/= include %>直接将文件内容引过来

js:
var ejs = require("ejs");

ejs.renderFile("52.ejs",{
	name:"翠花",age:20,
	data:[
		{name:"如花",age:18},
		{name:"翠花",age:28},
		{name:"豆腐花",age:38}
	]
},function(err,str){
	console.log(err,str);	
});
52.ejs:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<ul>

<ul>
	<%- include tmpli2.ejs%>	 
</ul>

</ul>
</body>
</html>
tmpli2.ejs:
<%for(var i = 0; i < data.length; i++){%>
	<li>我叫<%=data[i].name%>，今年<%=data[i].age%>岁</li>	
<%}%>

res:
image

express集成模板引擎

app.set("view engine","ejs/jade"); 设置模板引擎
app.set("views","./views"); 模板文件存放的目录

使用：

res.render("index",data);

consolidate

npm i consolidate

app.set("view engine",html); 设置模板引擎
app.set("views","./views"); 模板文件存放的目录
app.engine("html",consolidate.ejs/jade/pug/....); 使用什么方法去解析你的模板文件

consolidate.ejs--->ejs.renderFile
consolidate.jade--->jade.renderFile

app1.js(ejs)

var express = require("express");
var ejs = require("ejs");
var app = express();

app.listen(9000);


app.get("/index.html",function(req,res){
	
	ejs.renderFile("index.ejs",{name:"aaa",age:18},function(err,data){
		res.send(data);	
	});	
});

app2.js(ejs)

var express = require("express");
var app = express();

app.listen(9000);

//配置模板引擎
app.set("view engine","ejs");
app.set("views","./views");

app.get("/index.html",function(req,res){
	res.render("index.ejs",{name:"aaa",age:18});
});

app3.js(jade)

var express = require("express");
var app = express();

app.listen(9000);

//配置模板引擎
app.set("view engine","jade");
app.set("views","./views");

app.get("/index.html",function(req,res){
	res.render("index.jade",{name:"aaa",age:18});
});

app4.js(html)

var express = require("express");
var ejs = require("ejs");
var app = express();

app.listen(9000);

//配置模板引擎
app.set("view engine","html");
app.set("views","./views");
app.engine("html",ejs.renderFile);

app.get("/index.html",function(req,res){
	res.render("index",{name:"aaa",age:18});
});

app5.js(html)

var express = require("express");
var consolidate = require("consolidate");
var app = express();

app.listen(9000);

//配置模板引擎
app.set("view engine","html");
app.set("views","./views");
app.engine("html",consolidate.ejs);

app.get("/index.html",function(req,res){
	res.render("index",{name:"aaa",age:18});
});
posted @ 2018-07-21 16:04  飞刀还问情  阅读(423)  评论(0)    收藏  举报