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>

Nodejs入门基础（使用express创建jade或ejs模板）

猜你喜欢