Nodejs入門基礎(使用express建立jade或ejs模板)
阿新 • • 發佈:2018-12-11
建立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>