当前位置:网站首页>小试牛刀之NunJucks模板引擎

小试牛刀之NunJucks模板引擎

2022-07-07 17:25:00 抗争的小青年

NunJucks模板引擎

NunJucks中文文档

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

初试NunJucks模板引擎

  1. 先创建项目文件夹nunjucksExprice
  2. 初始化项目文件
npm init -y
  1. 引入NumJucks

提示

终端输入

npm install nunjucks

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

  1. 引入express.js
npm install express
  1. 创建视图文件夹view
  2. 在视图文件夹中创建index.html文件
  3. 创建项目入口文件index.js
  4. 使用express创建服务器
const express = require("express")
const app = express()



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

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

  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 = true

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

在页面中这样使用

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

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

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

输出效果

Snipaste_2022-07-07_15-44-24

项目目录

Snipaste_2022-07-07_15-51-37

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

原网站

版权声明
本文为[抗争的小青年]所创,转载请带上原文链接,感谢
https://blog.csdn.net/liyuchenii/article/details/125660959