2.nodejs快速构建客户端页面

最新推荐文章于 2024-09-23 19:49:36 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-09-23 19:49:36 发布

阅读量829

点赞数

分类专栏： # nodejs基础文章标签： nodejs 模版引擎 pug nunjucks koa 前端后端语法快速入门应用 macro mixin 使用

本文链接：https://blog.youkuaiyun.com/u013946061/article/details/109288961

版权

1. 重点提炼

模板引擎
pug模板引擎
- 安装pug
- 循环判断
- 混合模式
- 插值表达式
nunjucks模板引擎
- koa-nunjucks-2模块的使用
- nunjucks在koa中的使用
- nunjucks使用中的常用语法
注意：目前追求静态网页，pug、 nunjucks这种动态网页使用率很小，在录播仅做了解即可。
表达式
判断语句
循环语句
宏模式
导入导出

2. 模板引擎

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

3. 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引入外部文件
练习工具 hade；

npm i hade -g

3.1 使用koa

npm i koa koa-router koa-views pug -S 安装依赖

const Koa = require("koa");
const Router = require("koa-router"); // 路由
const views  = require("koa-views");  // 通过它来加载模版
let app = new Koa();
let router = new Router();
// 将views（模版）加载进来，第一个参数：模版存放位置  第二个参数：配置选项，让其通过pug进行加载
// __dirname 当前目录
app.use(views(__dirname+"/views",{
   
    // 模版引擎通过pug的形式进行加载
    map:{
   
        html:"pug"
    }
}));
// "/" 获取主页
router.get("/",async ctx=>{
   
    ctx.body = "hello";
});
app.use(router.routes());
app.listen(3000);

node index.js

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.45
Branch： branch02

commit description：a0.45（使用koa的pug模版引擎搭建服务）

tag：a0.45

3.2 pug的使用

根据上面的代码，将模版放在views里，它会自动查找里面的内容。

新建index.pug，输入“！”，根据代码提示点击，自动生成pug的代码（vs code）。

发现这里的标签都是单标签，那么怎么区分单标签在什么位置闭合呢？

实际通过缩进闭合，即层级关系在pug里是通过缩进体现的。注意缩进风格需要统一，否则会识别不出来而报错。

但最终渲染后显示在页面上仍旧是html。

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body
        h1 我是标题

const Koa = require("koa");
const Router = require("koa-router"); // 路由
const views  = require("koa-views");  // 通过它来加载模版
let app = new Koa();
let router = new Router();
// 将views（模版）加载进来，第一个参数：模版存放位置  第二个参数：配置选项，让其通过pug进行加载
// __dirname 当前目录
app.use(views(__dirname+"/views",{
   
    map:{
   
        html:"pug"
    }
}));
// "/" 获取主页
router.get("/",async ctx=>{
   
    // 渲染，注意渲染是需要时间，它是异步的
    await ctx.render("index.pug");
});
app.use(router.routes());
app.listen(3000);

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.46
Branch： branch02

commit description：a0.46（pug初次使用）

tag：a0.46

3.3 pug添加标签及样式

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.47
Branch： branch02

commit description：a0.47（pug添加标签及样式）

tag：a0.47

3.4 pug标签简写 => 通过class与id

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（直接写class即可，类似css的选择器形式），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.48
Branch： branch02

commit description：a0.48（pug标签简写 => 通过class与id）

tag：a0.48

3.5 pug注释

它有两种注释情形：

1、pug注释（只能在pug中看到，渲染到页面中开发者工具是看不到）;

2、html注释，但只有html注释会显示在页面中的开发者工具的元素里。

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（class），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div
        //- 我是pug注释
        //-
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.49
Branch： branch02

commit description：a0.49（pug注释与html注释的使用）

tag：a0.49

3.6 pug默认标签

内容写在下方缩进，之后，默认为当成标签（注意不识别中文。）

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（class），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div
        //- 我是pug注释
        //-
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行
        div
            hello

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.50
Branch： branch02

commit description：a0.50（pug默认标签）

tag：a0.50

3.7 pug插入标签内容

但是我们可以通过转义的方式，将其转义为标签内容

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（class），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div
        //- 我是pug注释
        //-
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行
        div
           | hello

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.51
Branch： branch02

commit description：a0.51（pug标签中插入内容）

tag：a0.51

3.8 pug变量即差值表达式

pug除了缩进和单标签外特性，还要变量特性。它可以定义变量和循环，相当于做一些js的操作，然而正常的html语言是不支持的。

用- 定义变量，不需要分号。

#{str}差值表达式，简称表达式。

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（class），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div
        //- 我是pug注释
        //-
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行
        div
           | hello
        - let str = "你好"
        p #{str}

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.52
Branch： branch02

commit description：a0.52（pug变量即差值表达式）

tag：a0.52

3.9 pug从后端获取数据渲染页面

很多情况，这个变量可以从后端推送过来。

const Koa = require("koa");
const Router = require("koa-router"); // 路由
const views  = require("koa-views");  // 通过它来加载模版
let app = new Koa();
let router = new Router();
// 将views（模版）加载进来，第一个参数：模版存放位置  第二个参数：配置选项，让其通过pug进行加载
// __dirname 当前目录
app.use(views(__dirname+"/views",{
   
    map:{
   
        html:"pug"
    }
}));
// "/" 获取主页
router.get("/",async ctx=>{
   
    // 渲染，注意渲染是需要时间，它是异步的
    await ctx.render("index.pug",{
   
        data:"我是数据",
    });
});
app.use(router.routes());
app.listen(3000);

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv") 我是类名为mydiv的div
            br
            span 我是span
        //- div 简写形式（class），style属性值是类js环境，以对象方式
        .mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
        //- div 简写形式（id）
        #myid 我是id为myid的div
        //- 我是pug注释
        //-
            我是第一行
            我是第二行
        // 我是html注释
        //
            我是第一行
            我是第二行
        div
           | hello
        - let str = "你好"
        p #{str}
        p #{data}

参考：https://github.com/6xiaoDi/blog-nodejs-novice/tree/a0.53
Branch： branch02

commit description：a0.53（pug从后端获取数据渲染页面）

tag：a0.53

3.10 pug获取后端的数组

后端不仅可以推送一个变量，还可以推送多个变量（最常见则是对象数组）。

const Koa = require("koa");
const Router = require("koa-router"); // 路由
const views  = require("koa-views");  // 通过它来加载模版
let app = new Koa();
let router = new Router();
// 将views（模版）加载进来，第一个参数：模版存放位置  第二个参数：配置选项，让其通过pug进行加载
// __dirname 当前目录
app.use(views(__dirname+"/views",{
   
    map:{
   
        html:"pug"
    }
}));
// "/" 获取主页
router.get("/",async ctx=>{
   
    // 渲染，注意渲染是需要时间，它是异步的
    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);

<!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:200px;
                height:200px;
                background:red;
            }
    body
        h1 我是标题
        div 我是div
        div(class="mydiv&