NunJucks模板引擎

NunJucks中文文档

模板引擎有很多,我之前就曾用过ejs,都是对页面进行渲染.接下来带大家简单体验一下Nunjucks。真别说，插值语法有点vue的那股味道了。

初试NunJucks模板引擎

先创建项目文件夹nunjucksExprice
初始化项目文件

npm init -y

引入NumJucks

提示

终端输入

npm install nunjucks

等待安装完成后，我们在安装express.js，来搭建一个服务器。

引入express.js

npm install express

创建视图文件夹view
在视图文件夹中创建index.html文件
创建项目入口文件index.js
使用express创建服务器

const express = require("express")
const app = express()app.listen('80', () => {console.log('express is running at http://127.0.0.1/');
})

一个简单的服务器就创建好了。

在入口文件中引入nunjucks，并使用node.js自带的path模块设置模板路径。

const express = require("express")
const nunjucks = require("nunjucks")
const path = require("path")
const app = express()//设置模板存储位置
app.set("view", path.join(__dirname, "view"))
//设置模板引擎
nunjucks.configure("view", {autoescape: true,  //是否自动匹配express: app
})
//设置视图引擎
app.set("view engine", "html")//设置路由，进行页面渲染
app.get("/", (req, res) => {res.render("index")
})app.listen('80', () => {console.log('express is running at http://127.0.0.1/');
})

上面的代码也可以这样写，这两种写法是等价的，唯一不同的区别在于一个设置了视图引擎，所以在渲染页面的时候不用加.html后缀，一个没有设置，就需要加上.html后缀，否则模板引擎找不到页面。
const express = require("express")
const nunjucks = require("nunjucks")
const path = require("path")
const app = express()//设置模板存储位置
app.set("view", path.join(__dirname, "view"))
//设置模板引擎
nunjucks.configure("view", {autoescape: true,  //是否自动匹配express: app
})app.get("/", (req, res) => {res.render("index.html")
})app.listen('80', () => {console.log('express is running at http://127.0.0.1/');
})

功能小试

接下来和我一起了解一下NumJucks的使用方法吧。

和ejs一样，NumJucks在渲染页面的时候也可以传值(key:value)的形式。

传递变量

我们创建一个变量str

str = 'Word'
app.get("/", (req, res) => {res.render("index.html",{str})
})

str:ES6语法，键值一样写一个就行。

在页面中这样使用

{{str}}

循环遍历

我们创建一个数组

let list = ['橘子', '桃子', '西瓜']app.get("/", (req, res) => {res.render("index.html",{list})
})

在页面中这样使用

  <ul>{% for item in list%}<li>{{item}}</li>{% endfor %}</ul>

可以看到它的使用方式不再和ejs一样，ejs的模板语法为<%%>，这里要稍加区分。

同时在循环结尾处，必须要有 {% endfor %}

我们创建一个对象数组

var items = [{ name: '张三', age: 20 }, { name: '王五', age: 19 }]

在页面中这样使用

  <ul>{% for item in items%}<ol>{{item.name}} - {{item['age']}}</ol>{% endfor%}</ul>

判断

我们创建一个布尔类型变量

var  isDelete = trueapp.get("/", (req, res) => {res.render("index.html",{isDelete})
})

在页面中这样使用

  {% if isDelete %}<h3>欢迎登陆</h3>{% else %}<h3>请登陆</h3>{% endif %}

同样，{%endif%} 也是不可缺少的。

因为isDelete的值是true，那么页面会显示"欢迎登陆"

输出效果

项目目录

这里就带大家体验了平时开发中比较常用的功能了，更多用法请到官方文档查阅。我已经放到本文首了，方便大家查阅。

小试牛刀之NunJucks模板引擎相关推荐

http+nunjucks模板引擎、koa+nunjucks模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
nunjucks 模板引擎常用语法学习总结
文章目录 nunjucks模板引擎 nunjucks模板注释 koa-nunjucks-2的使用 nunjucks 插值语法 nunjucks 的判断语句 nunjucks 的循环语句 nunjuck ...
Nunjucks模板入门
一.为什么要用Nunjucks? 我们上节课设置页面内容时,是用模板字符串来写的,但是内容多的时候,这样就不好看,也不方便. 二.安装 1.koa-views:告诉计算机,要用哪个模板引擎 2.nun ...
Node——Nunjucks模板入门
一.模板引擎概述之前我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并不友好,我们更希望直接发 ...
Node-05Nunjucks模板引擎
1.Nunjucks概述在之前的例子中直接在此处写html并不友好,这里需要使用模板引擎直接设置并响应整个html文件,并可以将后台数据绑定到模板中,在发送回客户端,本例选择Nunjucks模板引 ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
Node 端使用 $ npm install nunjucks 0 $npminstallnunjucks 下载后可直接 require('nunjucks') 使用浏览器端使用可直接使用 nun ...
说说如何用JavaScript实现一个模板引擎
前言不知不觉就很长时间没造过什么轮子了,以前一直想自己实现一个模板引擎,只是没付诸于行动,最近终于在业余时间里抽了点时间写了一下.因为我们的项目大部分用的是 swig 或者 nunjucks ,于是 ...

小试牛刀之NunJucks模板引擎

NunJucks模板引擎

初试NunJucks模板引擎

提示

功能小试

传递变量

循环遍历

判断

输出效果

项目目录

小试牛刀之NunJucks模板引擎相关推荐

最新文章

热门文章