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. APP中的图片如何长按可以下载并保存图片到相册出错处理

    https://www.cnblogs.com/interdrp/p/9302164.html 接上文. 如果用户在保存图片过程中,不小心拒绝了相册的访问权限

  2. jQuery CVE-2019-11358原型污染漏洞分析和修复建议

    一.安全通告 jQuery官方于日前发布安全预警通告,通报了漏洞编号为 CVE-2019-11358的原型污染漏洞.由攻击者控制的属性可被注入对象,之后或经由触发 JavaScript 异常引发拒绝服 ...

  3. oracle显示一个月的所有天数

    效率高: ) s_date from dual connect 效率低: select to_date() s_date from all_tables where rownum <= ( fr ...

  4. sqlite "insert or replace" 和 "insert or ignore" 用法

    insert or replace:如果不存在就插入,存在就更新insert or ignore:如果不存在就插入,存在就忽略只对UNIQUE约束的字段起作用.举例:建表:CREATE TABLE T ...

  5. 无法解析依赖项。“Microsoft.Net.Http 2.2.29”与 'Microsoft.Net.Http.zh-Hans

    无法解析依赖项.“Microsoft.Net.Http 2.2.29”与 'Microsoft.Net.Http.zh-Hans 2.0.20710 约束: Microsoft.Net.Http (= ...

  6. 说说Python编码规范

    前言 已有近两个月没有发表过文章了,前段时间外甥和女儿过来这边渡暑假,平常晚上和周末时间都陪着她们了,趁这个周末有空,再抽空再把这块拾起来.         这么久没写了,再次拿起键盘,想想,发表些什 ...

  7. MVP模式和Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  8. IntelliJ IDEA配置

    1.取消idea默认打开工程: 2.导出,导入配置. 导出和导入配置好处:对IDEA配置好后导出配置,方便以后重装电脑或者重装IDEA后可以导入之前配置好的配置.避免重复配置 导出配置:File Ex ...

  9. ubuntu上Android开发环境及依赖项

    [时间:2018-07] [状态:Open] [关键词:ubuntu,系统安装,开发环境搭建,android,工具集] Ubuntu系统版本:v18.04 LTS c/c++ dev (build-e ...

  10. 代码注释中的专有词——TODO、FIXME和XXX

    [时间:2017-09] [状态:Open] [关键词:代码注释,TODO, FIXME, XXX] 阅读开源代码时可能经常遇到TODO.FIXME.XXX的单词,通常这些都是有其特殊含义的. 中文版 ...