node(二)

模板引擎

pug

index.js ) 一些配置

const Koa = require("koa");
const Router = require("Koa-router");
const views = require("koa-views");
let app = new Koa();
let router = new Router();
app.use(views(__dirname+"/views",{
    map:{
        html:"pug"
    }
}));
router.get("/",async ctx=>{
    // ctx.body = "hello";
    let users = [
        {name:"张三",age:20,height:"178px"},
        {name:"李四",age:21,height:"170px"},
        {name:"王五",age:22,height:"173px"}
    ]
    await ctx.render("index.pug",{
        data:"我是数据",
        users
    });
})
app.use(router.routes());
app.listen(3000);

index.pug )主要内容与html呈现到浏览器一样的!
　　注意点: tab就要用tab风格缩进

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        style.
            .mydiv{
                width:100px; height:100px; border:1px solid red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv
        .mydiv2(style={width:"100px",height:"100px",border:"1px solid pink"}) 我是div2
        #myid 我是id为myid的div
        //- 我是pug注释
        //- 
            我是第一行
            我是第二行
        // 我是HTML注释
        //
            我是第一行
            我是第二行
        div
            | hello
        - let str = "你好"
        p #{str}
        p #{data}
        ul
            each item,index in users
                li(class="hello") 姓名是: #{item.name};年龄是: #{item.age};升高是: #{item.height};索引值是: #{index}
        - for(let i = 0;i<4;i++)
            span 我是循环出来的数据 #{i} <br/>
        - let num = 1
            case num
                when 1
                    p num 是一
                when 2
                    p num 是二
                default
                    p num 是其他值
        mixin mydiv
            div 我是非常常用div
        +mydiv
        +mydiv
        mixin pet(name,sex)
            p 这是一只#{name};它的性别是#{sex}
        +pet("狗","公")
        +pet("猫","母")
        include common.pug
        script(type="text/javascript").
            console.log(111)

common.pug )模板

h2 我是公共模板

模板引擎

pug

猜你喜欢