• koa + pug模板引擎

    模板引擎

    • 模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合。
    • 常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；
    • 使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；

    pug模板引擎使用

    安装pug

    • npm i pug -g

    pug常用语法

    • pug语法：通过缩进关系，代替以往html的层级包含关系，注意要统一使用tab或者空格缩进，不要混用
      • 内联书写层级,a: img
      • style属性：div(style={width:”200px”,color:”red”})
      • 使用”-”来定义变量，使用“=”把变量输出到元素内；
      • 通过 #{variable} 插 相应的变量值
      • html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）
      • 文本通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 在html标签标记后 通过空格隔开 本内容 在html标签标记后通过添加引号“.”添加块级文本
      • 注释：可以通过双斜杠进 注释，jade有3种注释 式，可以分别对应输出html 注释、 输出html注释、块级html注释
      • 循环：each val in [1,2,3]
      • 判断语句：”if else” case when default
      • mixin：混合模式
      • include common/footer.pug 通过include引入外部文件

    demo

    • index.pug
    <!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
        style.
            .mydiv{
                width:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            span 我是span
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        #myid 我是id为myid的div
        //- 我是pug注释
        //- 
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行
        div
           | hello
        - let str = "你好"
        p #{str}
        p #{data}
        ul
            each item,index in users
                li 姓名是：#{item.name};年龄是：#{item.age};身高是：#{item.height};索引是：#{index}
        - for(let i=0;i<4;i++)
            span 我是循环出来的数据#{i}
        - 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(1111);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • common.pug
    h2 我是公共模板

    • 1
    • 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:"178cm"},{name:"李四",age:25,height:"179cm"},{name:"王五",age:26,height:"180cm"}]
    await ctx.render("index.pug",{
        data:"我是数据",
        users
    });
});
app.use(router.routes());
app.listen(3000);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
  • 相关阅读:
    crmeb从创建数据表到实现最基础增删改查的实现全过程【带附件】
    VALSE2022天津线下参会个人总结8月23日-2
    Unity中的【格式化数据】进行【系列化】后传到服务器再【反系列化】操作（二）
    数据库实验八 视图
    第 365 场 LeetCode 周赛题解
    基于Springboot外卖系统08：员工账号状态管理功能+对象转换器+扩展Spring mvc的消息转换器
    Facebook：数字时代的文化交流平台
    时间序列-AR MA ARIMA
    圆满收官，百花齐放！2022企业级低代码应用大赛获奖结果公布
    CSS特效013：背景色彩不停流动效果
  • 原文地址：https://blog.csdn.net/weixin_44178305/article/details/127941817