node結(jié)合swig渲染摸板的方法

更新時間：2018年04月11日 10:38:04 作者：吳凌云

本篇文章主要介紹了node結(jié)合swig渲染摸板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在這里就nodejs如何應(yīng)用swig摸板，總結(jié)一下一些基本的用法。

首先當然是利用express框架在node后臺上面搭建服務(wù)

var express = require('express');
var server = express();

server.listen(8080,'localhost',(req,res)=>{
   console.log('服務(wù)器啟動...');
})

啟動成功之后，開始設(shè)置swig摸板的相關(guān)配置，具體代碼如下：

npm install swig -s

安裝成功之后，加上swig配置，代碼如下：

//配置摸板引擎
var swig = require('swig');
//參數(shù)1，摸板引擎的名稱，固定字段
//參數(shù)2，摸板引擎的方法
server.engine('html',swig.renderFile);
//摸板引擎存放目錄的關(guān)鍵字，固定字段
//實際存在的目錄，html文件就在html文件夾下面
server.set('views',__dirname+'/html');
//注冊摸板引擎，固定字段
server.set('view engine','html');
//關(guān)閉swig緩存,緩存的目的也是提高node服務(wù)器的響應(yīng)速度
swig.setDefaults({cache:false});

配置需要渲染的數(shù)據(jù)：

server.get('/',(req,res)=>{
  //render方法只有在使用摸板引擎之后才會生效，其中 參數(shù)1是需要渲染的摸板名稱，參數(shù)2就是需要渲染到頁面的一些參數(shù)
  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']
  });
})

html文件的具體代碼如下所示：

<!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</title>
</head>
<body>
  <div>摸板引擎</div>
  <!-- {{}} 插值表達式-->
  姓名:<p>{{name}}</p>
  {% if user.name == '栗子' && user.age == '18'%}
  姓名:<p>栗子</p>
  {% elseif user.name == '張三'%}
  <p>張三</p>
  {% endif %}
  <p>遍歷數(shù)組</p>
  {% for items in lists%}
  <li>items</li>
  {% endfor %}
  
   <!-- 頁面上面設(shè)置數(shù)據(jù) -->
  {% set arr = [1,2,3,4,5]%}
  <p>{{arr.length}}</p>
  <!-- 如何引入頁面-->
  {% include './common.html' %}
</body>
</html>

具體頁面顯示如下：

上面講的是使用swig摸板引擎如何傳遞參數(shù)到頁面渲染，下面來看看如何使用swig提取html公共的部分：

html頁面公共的部分，比如說header，公共的js css文件，導(dǎo)航欄等

設(shè)置一個公共的頁面：

<header>
  <title>node</title>
  <!-- css占位符主要用來顯示其他頁面的個性化的css文件，例如home.css about.css -->
  {% block css%}
  {% endblock %}
  <link rel="stylesheet" href="/static/css/layout.css" rel="external nofollow" >
</header>
<!-- 所以頁面公共的導(dǎo)航欄 -->
<nav>
  <li><a href="">首頁</a></li>
  <li><a href="">關(guān)于我們</a></li>
  <li><a href="">商品列表</a></li>
  <li><a href="">登錄</a></li>
  <li><a href="">注冊</a></li>
</nav>
 <!-- content占位符主要用來顯示其他頁面的個性化的內(nèi)容顯示，不同的頁面有不同的顯示方式 -->
{% block content%}
{% endblock %}
 <!-- js占位符主要用來顯示其他頁面的個性化的js文件，例如home.js about.js -->
{% block js%}
{% endblock %}
<script src="/static/js/layout.js"></script>

home.html

<!-- 繼承所有頁面公共的頁面模塊layout.html -->
{% extends './layout.html'%}
{% block css %}
<link rel="stylesheet" href="/static/css/home.css" rel="external nofollow" >
{% endblock %}
{% block content %}
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
 <li><a href="">4</a></li>
 <li><a href="">5</a></li>
 <li><a href="">6</a></li>
{% endblock %}

{% block js %}
<script src="/static/js/home.js"></script>
{% endblock %}

當啟動node服務(wù)器，渲染home頁面的時候，你會看到

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

nodejs前端模板引擎swig入門詳解

node
swig

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

node結(jié)合swig渲染摸板的方法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

node結(jié)合swig渲染摸板的方法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕