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 文件名
数据：#{name}
循环：
        -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页面

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:

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});

});

7、 jade 、 ejs、express集成模板的更多相关文章

  1. Express下ejs的视图模板引擎的建立

    写在前面 由于Express升级到4.0,将ejs的用法忽略,改为用户自定义形式,所以要引入库index.js作为引擎,来支持ejs的模板引擎(点击下载). 首先是建立一个名字叫nodeitem,引擎 ...

  2. Express：模板引擎深入研究

    深入源码 首先,看下express模板默认配置. view:模板引擎模块,对应 require('./view'),结合 res.render(name) 更好了解些.下面会看下 view 模块. v ...

  3. express jade ejs 为什么要用这些？

    express是快速构建web应用的一个框架   线上文档 http://www.expressjs.com.cn/ 不用express行不行呢?    看了网上的回答:不用express直接搭,等你 ...

  4. 模板引挚 jade ejs

    // asl sum翡翠 后台使用如下: const jade = require('jade') //pretty 美化的意思,指的是渲染的布局会美化   2020-2-15 var str = j ...

  5. node jade || ejs引擎模板

    1.jade:破坏式2.ejs:保留式 -------------------------------------------------------------------------------- ...

  6. express 默认模板引擎

    使用express -t ejs microblog创建出来的居然不是ejs项目,而是jade项目.现在的版本已经没有-t这个命令了,改为express -e microblog.运行完之后,根据提示 ...

  7. nodejs express template (模版)的使用 (ejs + express)

    var app=require("express").createServer(); app.set("view engine","ejs" ...

  8. express html模板项目搭建

    初学express的亲们,估计要弄ejs和jade会比较烦躁,那就先html开始,简单笔记如下:   1.新建项目文件夹demotest 2.进入demotest    >express -e ...

  9. Jade（Pug） 模板引擎使用文档

    本篇内容 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includ ...

随机推荐

  1. 2012服务器在IIS部署的SLL(https)网址谷歌浏览器无法访问的问题解决

    服务器环境:Windows Server 2012,IIS8. 当绑定了https,使用IE和Firefox浏览器能够正常访问,但是使用谷歌浏览器会出现net::ERR_CONNECTION_ABOR ...

  2. 记录一次使用VS2015编译错误的原因查找(boost+gdal)

    编译错误说明 在一个解决方案中的项目A中使用到了boost,完全没有问题.在项目B中也使用了boost库,编译的时候就产生了一堆错误. 原因查找 两个项目通过对比,唯一的不同就是项目B使用了gdal库 ...

  3. Visual Studio进行Web性能测试- Part III

    Visual Studio进行Web性能测试- Part III 原文作者:Ambily.raj 对于一个多用户的应用程序,性能是非常重要的.性能不仅是执行的速度,它包括负载和并发方面.Visual ...

  4. 单片机成长之路（avr基础篇）- 003 AVR单片机的BOOT区

    BOOT区的由来基于一个简单的道理,即单片机的程序是保存在FLASH中的,要运行程序就必须不停的访问FLASH存储器.对于一般的FLASH存储器,数据的写入需要一定的时间来完成,在数据写入完成之前,存 ...

  5. 【转载】VMware虚拟机NAT模式网络配置图文教程

    原文:https://blog.csdn.net/dingguanyi/article/details/77829085 一.引言 在Windows上搭建集群实验环境时,为能够让集群结点之间相互通信, ...

  6. pilicat-dfs 霹雳猫-分布式文件系统

    pilicat-dfs 霹雳猫-分布式文件系统 一种可以将网站图片或上传的文件,进行分布式存放的服务,可自动复制到多台物理机器,可满足高可用和负载均衡 已编译好的程序包 http://git.osch ...

  7. 严选 | Elasticsearch史上最全最常用工具清单【转】

    1.题记 工欲善其事必先利其器,ELK Stack的学习和实战更是如此,特将工作中用到的“高效”工具分享给大家. 希望能借助“工具”提高开发.运维效率! 2.工具分类概览 2.1 基础类工具 1.He ...

  8. Win2012R2 AD主域控登录密码忘记

    按照普遍的修改cmd.exe 的方法,还需要注意,DC主控制器修改密码需要在后面加上 /domain net user administrator 123 /domain

  9. 下载Chrome商店和Youtube资源

    下载chrome浏览器插件 站点:http://cooal.cn/crx.php 操作步骤: 1.打开扩展介绍页面 (在 三道杠图标>工具>扩展程序 里相应扩展的"访问网站&qu ...

  10. HAProxy配置说明(转)

    原文地址:http://www.cnblogs.com/sagech/p/5695466.html global # 全局参数的设置 log 127.0.0.1 local0 info # log语法 ...