7、 jade 、 ejs、express集成模板
jade/ejs 模板引擎
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
<% '脚本' 标签，用于流程控制，无输出。
<%= 输出数据到模板（输出是转义 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集成模板的更多相关文章
- Express下ejs的视图模板引擎的建立
写在前面 由于Express升级到4.0,将ejs的用法忽略,改为用户自定义形式,所以要引入库index.js作为引擎,来支持ejs的模板引擎(点击下载). 首先是建立一个名字叫nodeitem,引擎 ...
- Express：模板引擎深入研究
深入源码 首先,看下express模板默认配置. view:模板引擎模块,对应 require('./view'),结合 res.render(name) 更好了解些.下面会看下 view 模块. v ...
- express jade ejs 为什么要用这些？
express是快速构建web应用的一个框架 线上文档 http://www.expressjs.com.cn/ 不用express行不行呢? 看了网上的回答:不用express直接搭,等你 ...
- 模板引挚 jade ejs
// asl sum翡翠 后台使用如下: const jade = require('jade') //pretty 美化的意思,指的是渲染的布局会美化 2020-2-15 var str = j ...
- node jade || ejs引擎模板
1.jade:破坏式2.ejs:保留式 -------------------------------------------------------------------------------- ...
- express 默认模板引擎
使用express -t ejs microblog创建出来的居然不是ejs项目,而是jade项目.现在的版本已经没有-t这个命令了,改为express -e microblog.运行完之后,根据提示 ...
- nodejs express template (模版)的使用 (ejs + express)
var app=require("express").createServer(); app.set("view engine","ejs" ...
- express html模板项目搭建
初学express的亲们,估计要弄ejs和jade会比较烦躁,那就先html开始,简单笔记如下: 1.新建项目文件夹demotest 2.进入demotest >express -e ...
- Jade（Pug） 模板引擎使用文档
本篇内容 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includ ...
随机推荐
- Nginx的https配置记录以及http强制跳转到https的方法梳理
一.Nginx安装(略)安装的时候需要注意加上 --with-http_ssl_module,因为http_ssl_module不属于Nginx的基本模块.Nginx安装方法: 1 2 # ./con ...
- 11、TopN实战
1.Java版本: 1.1.取前3 package sparkcore.java; import java.util.List; import org.apache.spark.SparkConf; ...
- android：如何通过chrome远程调试APP中的webView的h5代码
今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chro ...
- Javascript 面向对象的编程思想
面向对象,首先得有类的概念,没有类造不出来对象,,Javascript把函数名看成类. 其次分为不同结构层,如三层架构.MVC.MVVM. 本文根据实际项目演练,分为几个适用的结构层,如果项目不大一般 ...
- 在 CentOS 7上Virtualbox+phpVirtualBox完整虚拟化环境部署
一.phpVirtualBox简介 VirtualBox是一套为不同操作系统而设的 x86 虚拟化产品.它是一个机器/硬件的虚拟化产品,功能上与 VMware Server.Parallel ...
- MySQL遇到Deadlock found when trying to get lock，解决方案
最近遇到一个MYSQL update语句出现Deadlock found when trying to get lock的问题,分析一下原因. 什么情况下会出现Deadlock found when ...
- Vmware 虚拟机无法启动
问题背景: 自己的电脑坏了,用的事小伙伴的电脑,安装VMware 软件,然后创建虚拟机(放在移动硬盘上).在操作虚拟主机的时候,中间不小心碰到了移动硬盘, 然后移动硬盘就掉线了.这个时候再去启动虚拟主 ...
- C# 批量图片打包下载
实现点击下载功能,可以一次性下载多个附件.具体实现代码如下 : private void Com_XZTP_FJ(string maiId, string wtfjdz, string CLwtfjd ...
- Fluent动网格【9】：区域运动
本文所述的区域运动并非动网格中的运动域,而是指在多参考系(MRF)或滑移网格中所涉及到的区域的运动. 在滑移网格中指定区域运动时,除了能够指定绝对运动外,还能指定某一区域与其他区域间的相对运动,如图所 ...
- 安全工具-cansina
Cansina是一款Web内容的发现工具,使用该工具指定详细的web目录内容作为payload即可破探测出web路径等资源. 工具安装操作如下 pip install --user requests[ ...