1. 程式人生 > >Nodejs入門基礎(使用express建立jade或ejs模板)

Nodejs入門基礎(使用express建立jade或ejs模板)

建立index.jade(約等於新型的html編碼格式)
建立index.ejs(基本跟html沒區別)

jade1.js

var express = require("express");//匯入express
var app = express();//例項化

app.set("view engine","jade");//設定模板引擎(jade,ejs)

app.set("views",__dirname+"/jade");//載入模板檢視路徑,根據目錄下的jade檔案裡面的內容

app.use(express.static("static"));//靜態內容

app.get("/",function(req,res){
    res.render("jade1",{title1:"豪哥的個人主頁"});//傳遞該值,到時在jade1.jade獲取出來
}).listen(3000);

 

jade1.jade

 

doctypehtml
html(lang="en")
    head
        //標題,用於獲取上面的值
        title #{title1}


        //*********以下內容用於測試新編碼方式

        //meta編碼
        meta(charset="UTF-8")
        //設定方法
        script(type='text/javascript').
            var a=100;
            console.log(a);
            function clickBtn(){
                alert("我出來了");
            }
        //style樣式
        style.
            h1{
                color:red;
            }
        //引入index.css
        link('rel=stylesheet type="text/css" href=./index.css')
    body
        .col#test
            //h1標籤
            h1 豪哥

            //按鈕點選事件
            button(onclick="clickBtn()") 點選

            //超連結
            a(href="http://www.baidu.com" target="-blank" style="{color:red}") 百度

            -for(var i=0;i<3;i++)   //迴圈遍歷輸出
                div #{i}

            -var str="課工場"  //宣告變數並賦值給div
                div=str

            -var a =false,b=false   //判斷條件
                if a
                    div a is true
                else if b
                    div b is true
                else
                    div all is false

            -var arr=['豪哥','玲姐']    //迴圈遍歷陣列資訊
                each item in arr
                    div=item+"愛上"

 

 

ejs1.js

 

var express = require("express");//匯入express
var app = express();//例項化

app.set("view engine","ejs");//設定模板引擎(jade,ejs)

app.set("views",__dirname+"/ejs");//載入模板檢視路徑

app.use(express.static("static"));//靜態內容

app.get("/",function(req,res){
    res.render("ejs1",{title1:"豪哥的個人主頁"});//傳遞值
}).listen(3000);

 

 

 

ejs1.ejs

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=title1%></title>
</head>
<body>

</body>
</html>