七、 jade 、 ejs、express集成模板

時間 2019-11-24

原文原文鏈接

jade/ejs 模板引擎

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

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

cnpm i jade ejsnpm

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"])app

樣式：

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

多行 | 或 . 或 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.jscode

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 ejshtm

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

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