Prólogo: Este artículo está relacionado con el aprendizaje de la práctica de la capa intermedia de Nodo. Se recomienda que lea el texto original de la práctica de la capa intermedia de Nodo
por Keyon Y. Antes de comenzar este artículo, también puede leer lo siguiente, Práctica de la capa intermedia del nodo (1) - desarrollo de pila completa basado en NodeJS , Práctica de la capa intermedia del nodo (2) - estructura del proyecto de construcción , Práctica de la capa intermedia del nodo (3) - El paquete web La configuración es útil para comprender el contenido de este artículo. (PD: Nodo Xiaobai que sigue pagando deudas ╮(╯▽╰)╭)
1. Introducción al Pug
pug es un motor de plantillas muy conciso y flexible. Cuando se usa con express, configúrelo en el archivo de inicio (app.js).
// 设置模板类型
app.set('view engine', 'pug');
// 设置模板文件路径
app.set('views', path.resolve(__dirname, 'src/Views'));
Listo para usar.
En segundo lugar, la herencia de pug.
extiende y bloquea implementar la herencia de pug.
Proponga la parte común/repetitiva de html y escríbala en layout.pug
// Shared/layout.pug
doctype html
html
head
meta(charset="UTF-8")
title #{
title}
meta(name="keywords" content=keywords)
meta(name="description" content=description)
meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
meta(name="renderer" content="webkit")
link(rel='stylesheet' href='/Contents/base.css') //- 公用样式
block links
script(type='text/javascript', src='/assets/jquery-1.10.2.min.js')
body
include header
block content
include footer
include ../Include/toplink
block scripts
script(type='text/javascript', src='/Scripts/base.js') //- 公用js
block javascript
// Home/index.pug
extends ../Shared/layout
block links
link(rel='stylesheet' href='/Contents/index.css')
block scripts
script(type='text/javascript', src='/Scripts/index.js')
block content
include ../Include/homeInclude
.container
.clear
3. Mixin - programación funcional de html
Pug puede realizar la programación funcional de html a través de mixin
//- include/homeInclude.pug
mixin homeBtnBox(num)
//- num: 0-报名中 1-已结束
.hr_btnBox
a(href="/User" + targetId + "/Mas" class=num == 0 ? "active" : "") 报名中
a(href="/User" + targetId + "/Mas/Require/Finish" class=num == 1 ? "active" : "") 已结束
//- home/home.pug
include ../include/homeInclude //- 引入编写mixin的pug文件
+homeBtnBox(1) //- 传参调用
El método de juzgar y vincular múltiples nombres de clase.
.btn(class={
"btn_t1": item.status == 0, "btn_t2": item.status == 1, "btn_t3": item.status == 2})
Los estudiantes que han usado ng y vue están familiarizados con este método, y también se puede usar en pug, pero solo el atributo de clase puede usar este método de juicio, y otros atributos, como href, título, valor, etc., no se pueden usar. utilizado de esta manera.
Cuarto, el método de enlazar datos después de operaciones lógicas.
A veces, los datos devueltos por el backend deben procesarse antes de que puedan usarse. Puede escribir un método de procesamiento de datos en la capa intermedia del nodo y devolverlo después de la operación . O también puede probar el siguiente método: Pug usa un – para indicar una pieza de código que no da salida, proporciona un entorno de ejecución de sintaxis js, calcula js y luego vincula el resultado del cálculo a la plantilla pug .
Blog de referencia:
Práctica de la capa intermedia del nodo (4): motor de plantilla pug https://juejin.cn/post/6844904191610060808