node.js阶段 - 处理前端数据的“利器”模板引擎

模板引擎

web应用中，动态生成html的工具，负责数据与模板的结合
常见的模板引擎有 ejs，jade（pug），nunjucks等

pug

编译 工具下载 npm install pug-cli -g
pug 生成的文件名 -w ( 跟随修改实时变化 )
pug 生成的文件名 -P ( 将生成的文件整理为可阅读格式 )
pug 生成的文件名 -w ( 跟随修改实时变化 )

注意事项

• 层级关系由缩进来表示
• 统一使用空格 或 统一使用 tab
• 没有闭合标签（ 不需要 ）

pug 页面元素

    h1 标题
    div div标签
    div(class="mydiv") 类名为mydiv的 div 
    .ball 第二个div (直接写类名,也是div)
    #box 不仅可以写class类名(页面上显示为div)
    p p标签

css 样式

• 内联样式

	style.
		.mydiv{
			width:200px;
			background:red;
			color:white;
			text-align:center;
			line-height:40px;
		}

• 行间样式

	.mydiv2(style={width:'100px'})

• 外联样式

    link(rel="stylesheet" href="index.css" type="text/css")

关于注释

• 单行注释

	//- pug的注释 不会被加载
	// html注释，只是读取

• 多行注释

    //-
		第一行
		第二行	
	// 
		多行注释1
		多行注释2	

标签和JS联用

    // 接收服务器端返回的数据
	// p #{data}
    p #{data}

	// 使用自身的数据
	- let str = "hello"
	p #{str}

使用判断、循环、函数、混入模式

    ul
		each item in users
			li 姓名是：#{item.name};年龄是：#{item.age};身高是：#{item.height}

	- for(let i = 0;i < 4;i++)
		span 我是循环出来的数据#{i}

	- let num = 1;
		case num
			when 1
				p num 为1
			when 2
				p num 为2
			when 3
				p num 为3
			default
				p num 为未知的数值

类似函数

	mixin mydiv
		div 我是常见的div
	+ mydiv
	+ mydiv
	+ mydiv

	mixin pet(name,sex)
		p 这是一只#{name}，他的性别是#{sex}
	+pet("萨摩耶","公")
	+pet("哈士奇","公")

script便签

	// 引入时 直接写文件名 js部分会在引入依赖时，自动查找
	script(src="a.js" type="text/javascript")
	
    script(type="text/javascript").
		console.log(24)

特殊格式，转义符

	div 
		| 文本也可以这样写

公共模板

    include common.pug
    //-  整个pug页面引入(common.pug)
    div(class="mydiv") 类名为mydiv的 div 
		include common.pug

---

nunjucks

{{ }} 方式取值访问
限制不在那么严格 需要使用缩进格式

if判断

    {% if age > 20 %}
    <p>age的值大于20</p>
    {% elseif age < 20 %}
    <div>age的值小于20</div>
    {% else %}
    <p>age的值等于20</p>
    <!-- 记得写结束符号 且 endif 没有空格间隔 -->
    {% endif %}

循环结构

    <ul>
        {% for item in arr %}
        <li>姓名是 {{item.name}},身高是{{item.height}}</li>
        {% endfor %}
    </ul>

过滤器

    {{str | replace("world","世界") | capitalize}}

宏标签

类似函数

    {% macro pet(name="猫咪",sex="未知") %}
    <p>它是一只{{name}}，性别是{{sex}}</p>
    {% endmacro %}

    {% macro person(name="光达",height="……") %}
    <p>人类个体{{name}}，身高是{{height}}</p>
    {% endmacro %}

    {{pet("狗子","公的")}}
    {{pet("袍子","母的")}}
    {{pet("水獭")}}

引入模板

    {% include 'footer.html' %}
    
	{# html注释 <!-- --> 会出问题 调用整体页面 #}
    {# 引入index文件 将index文件中的页面调用过来 #}
    {% include 'index.html' %}

    {# 导入index文件 只是拿到index的数据 #}
    {% import 'index.html' as obj %}

    {{obj.pet("郭","公子")}}
    {{obj.person("秦","178")}}