模板引擎

最新推荐文章于 2022-12-29 20:26:35 发布

大大艺术家

最新推荐文章于 2022-12-29 20:26:35 发布

阅读量731

点赞数

分类专栏：后端文章标签： nodejs

本文链接：https://blog.csdn.net/Joy_Huu/article/details/109240054

版权

后端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、模板引擎是什么？

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

二、pug模板引擎

1. 安装插件

创建项目
命令行

npm i koa koa-router koa-views pug -S

下载需要用的插件 koa koa-router koa-views 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 => {
	let users = [{name:'joy', age: 18},{name:'tom', age: 20},{name:'sam', age: 15}]
	// 第二个参数用来传参
	await ctx.render('index.pug',{
		data: 'hello world',
		users
	})
})
app.use(router.routes())
app.listen(8800)

koa是基于nodejs的web框架
__dirname表示当前目录

views/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.
			.mybox{
				width: 100px;
				height: 100px;
				background-color: red;
			}
	body
		h1 我是标题
		div(class='mybox') hello world
		span you know me
		.yellowBox(style={width:'200px',height:'200px',background:'yellow'}) yellowbox

缩进表示一个小模块
空格用来分割标签名和内容
style=({width:'200px'})用来写行间样式
style标签样式，后面要加.
直接类名，默认生成指定类名的div标签

2. 注释

//- 我是pug的注释
//- 我是pug的第一行注释
	我是pug的第二行注释
// 我是html的注释
// 
	我是html的第一行注释
	我是html的第二行注释

//- 表示不显示在html上，只显示在pug内
// 表示显示也显示在html上

3. 转意

div 
	| hello

使用|

4. 定义变量

 - let str = '你好'

-来定义变量

5. 使用变量

p #{str}

使用插值表达式来使用变量

6. 循环判断

- 方法一：each in

ul
	each item, index in users
		li myname is #{item.name},im #{item.age} years old

- 方法二: for

-for(let i = 0; i < 2; i++)
	p #{i}

- 方法三： case when

-let num = 3
	case num 
		when 1
			p one 
		when 2 
			p two
		default 
			p others

7. 混入

- 混入模块及使用

mixin mydiv
	its useful div 
+mydiv

mixin 定义， +使用

-混入类函数及使用

//- 混入类函数
mixin pet(name, sex)
	p this is #{name}, it is #{sex}
//- 使用类函数	
+pet('dog', 'girl')
+pet('cat', 'boy')

8. include 混入文件

include 1.html

三、nunjucks模板引擎

index.js

const Koa = require('koa')
const Router = require('koa-router')
const nunjucks = require('koa-nunjucks-2')

let app = new Koa()
let router = new Router()

app.use(nunjucks({
	ext: 'html', // 官方说.njk会更好
	// 路径是当前文件夹下面的views文件
	path: __dirname + '/views',
	nunjucksConfig:{
		trimBlocks: true // 防止Xss漏洞
	}
}))
router.get('/', async ctx => {
	// 传参
	await ctx.render('index',{
		username: 'joy',
		num: 4,
		person: [{
			name: 'joy',
			age: 17
		},{
			name: 'tom',
			age: 15
		}],
		str: 'hello world'
	})
	//ctx.body='hello world'
})
router.get('/son', async ctx => {
	await ctx.render('son')
})
router.get('/import', async ctx => {
	await ctx.render('import')
})
app.use(router.routes())
app.listen(8000)

如果index.html发生改变，但是index.js没有发生改变，刷新页面不会更新，因为nodemon只监听了index.js，需要重启nodemon才能更新数据

1. 下载插件

命令行

npm i koa koa-router koa-nunjucks-2 -S

2. 注释

nunjucks注释

{# 我是nunjucks注释 #}

html注释

<!-- 我是html注释 -->

3. 判断语句

{% if num < 3 %}
<p> num less than 3</p>
{% elseif num > 3 %}
<p> num larger than 3</p>
{% else %}
<p> num equal to 3</p>
{% endif%}

4. 循环语句

<ul class='myUl'>
	{% for item in person%}
	<li>my name is {{item.name}}, im {{ item.age }} years old</li>
	{% endfor%}
</ul>

5. 过滤器

<!-- 过滤器，可以自己写，也可以用官方的,可以连写 -->
{{ str | replace('world','世界') | capitalize}}

过滤器可以自己写，也可以用官方定义的，可以连写

6. 宏标签函数功能

{% macro pet(name='monkey', sex) %}
<p>its {{ name }}, it is a {{ sex }}</p>
{% endmacro %}
{{ pet('dog', 'girl') }}
{{ pet('cat', 'boy') }}

可以定义默认值，name='monkey'

7. import 文件里的macro部分

import.html

<!-- 可以引入一个文件里的macro -->
<!-- 如果macro有默认参数，就从第二个参数开始传，并不是替换默认参数 -->
{% import 'index.html' as obj%}
{{ obj.pet('girl')}}

在这里插入图片描述

8. include 引入其它文件

{% include '1.html' %}

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>hello world</h1>
	</body>
</html>

9. extends 继承模板

parent.html

<div>
	{% block left %}
		左边内容
	{% endblock %}
	{% block right %}
		右边内容
	{% endblock %}
	{% block someValue %}
		something
	{% endblock %}
</div>

son.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 继承父级模板 -->
		{% extends 'parent.html' %}
		{% block left%}
			我是son的左边部分
		{% endblock %}
		{% block right%}
			我是son的右边部分
		{% endblock %}
		<!-- 继承父级内容 -->
		{% block someValue %}
			{{ super() }}
		{% endblock %}
	</body>
</html>