模板引擎
1.pug模板引擎
2.nunjucks模板引擎
模板引擎：是web应用中动态生成html的工具，负责将数据和模板结合；也就是说，可以将服务器的数据通过该工具，使数据可以在.pug的文件里面是访问数据。
pug
安装pug
npm i pug -g
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;
}
body
div 我是div
div(class="mydiv") 我是类名为mydiv的div
span 我是span
//- div简写形式
.mydiv2(style={width:"100px",height:"100px"}) 我是div2
#myid 我是id为myid的div
//- 我是pug注释
//- 我是第一行注释
第二行注释
//我是html注释
//我是第一行注释
第二行注释
//- 可以定义一些变量，就想js的一些操作
- let str="你好"
//- 插值表达式
p #{str}
//- 很多时候，这些变量都是由后端推送过来的
p #{data}
//循环后端传过来的users数组-第一种循环方式each
ul
each item,index in users
li #{item.name}-#{item.age}-#{index}
//第二种循环方式for
ul
- for(let i=0;i<4;i++)
li #{i}
//- 相当于switch的语句 case - when
- let num = 1
case num
when 1
p num 是一
when 2
p num 是二
default
p num 其他值
//- 混合模式-相当于函数
mixin mydiv
div 我是在哪使用就在哪调
+mydiv
+mydiv
//- 带参数的混合模式
mixin pet(name,age)
p 这是只#{name}-#{age}
+pet("猫",2)
//- 引入外部文件-公共部分
include common.pug
//写js代码
script(type="text/javascript").
console.log(1)
koa框架中使用pug
安装
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()
app.use(views(__dirname+"/views",{//服务器会自动去views的文件夹中找对应的模板
map:{
html:"pug"
}
}))
router.get("/",async ctx=>{
// ctx.body="hello"
let users=[{name:"张三1",age:20},{name:"张三2",age:22}]
await ctx.render("index.pug",{
data:"我是数据",
users
})
})
app.use(router.routes())
app.listen(3000)
