Rendering using node+swig-JS Tutorial-php.cn

This time I will bring you the use of node swig rendering and what are the precautions for using node swig rendering. The following is a practical case, let's take a look.

First of all, of course, we use the express framework to build services on the node background.

var express = require('express'); var server = express(); server.listen(8080,'localhost',(req,res)=>{ console.log('服务器启动...'); })

Copy after login

After the startup is successful, start setting up the relevant configuration of the swig template. The specific code is as follows:

npm install swig -s

Copy after login

Installation After success, add swig configuration, the code is as follows:

//配置摸板引擎 var swig = require('swig'); //参数1，摸板引擎的名称，固定字段 //参数2，摸板引擎的方法 server.engine('html',swig.renderFile); //摸板引擎存放目录的关键字，固定字段 //实际存在的目录，html文件就在html文件夹下面 server.set('views',__dirname+'/html'); //注册摸板引擎，固定字段 server.set('view engine','html'); //关闭swig缓存,缓存的目的也是提高node服务器的响应速度 swig.setDefaults({cache:false});

Copy after login

Configure the data that needs to be rendered:

server.get('/',(req,res)=>{ //render方法只有在使用摸板引擎之后才会生效，其中 参数1是需要渲染的摸板名称，参数2就是需要渲染到页面的一些参数 res.render('temp',{ name:'张三', user:{ name:'栗子', age:18 }, lists:['item1','item2','item3','item4','item5', 'item6','item7','item8','item9','item10','item11','item12', 'item13','item14','item15','item16','item17','item18','item19', 'item20','item21','item22','item23','item24','item25','item26'] }); })

Copy after login

The specific code of the html file is as follows:

      Document 
  摸板引擎
  姓名:{{name}}
 {% if user.name == '栗子' && user.age == '18'%} 姓名:栗子
 {% elseif user.name == '张三'%} 张三
 {% endif %} 遍历数组
 {% for items in lists%} items
 {% endfor %}  {% set arr = [1,2,3,4,5]%} {{arr.length}}
  {% include './common.html' %}

Copy after login

The specific page display As follows:

The above describes how to use the swig template engine to pass parameters to page rendering. Let’s take a look at how to use swig to extract the public parts of html:

Public parts of the html page, such as header, public js css files, navigation bar, etc.

Set a public page:

 node  {% block css%} {% endblock %}  
   首页
 关于我们
 商品列表
 登录
 注册
 
  {% block content%} {% endblock %}  {% block js%} {% endblock %}

Copy after login

home.html

 {% extends './layout.html'%} {% block css %}  {% endblock %} {% block content %} 1
 2
 3
 4
 5
 6
 {% endblock %} {% block js %}  {% endblock %}

Copy after login

When starting the node server and rendering the home page, you will see

server.get('/',(req,res)=>{ res.render('www/home',{}); })

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!