node結(jié)合swig渲染摸板的方法
更新時(shí)間：2018年04月11日 10:38:04 作者：吳凌云
本篇文章主要介紹了node結(jié)合swig渲染摸板的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在這里就nodejs如何應(yīng)用swig摸板，總結(jié)一下一些基本的用法。
首先當(dāng)然是利用express框架在node后臺(tái)上面搭建服務(wù)
var express = require('express');
var server = express();
server.listen(8080,'localhost',(req,res)=>{
console.log('服務(wù)器啟動(dòng)...');
})
啟動(dòng)成功之后，開(kāi)始設(shè)置swig摸板的相關(guān)配置，具體代碼如下：
npm install swig -s
安裝成功之后，加上swig配置，代碼如下：
//配置摸板引擎
var swig = require('swig');
//參數(shù)1，摸板引擎的名稱，固定字段
//參數(shù)2，摸板引擎的方法
server.engine('html',swig.renderFile);
//摸板引擎存放目錄的關(guān)鍵字，固定字段
//實(shí)際存在的目錄，html文件就在html文件夾下面
server.set('views',__dirname+'/html');
//注冊(cè)摸板引擎，固定字段
server.set('view engine','html');
//關(guān)閉swig緩存,緩存的目的也是提高node服務(wù)器的響應(yīng)速度
swig.setDefaults({cache:false});
配置需要渲染的數(shù)據(jù)：
server.get('/',(req,res)=>{
//render方法只有在使用摸板引擎之后才會(huì)生效，其中 參數(shù)1是需要渲染的摸板名稱，參數(shù)2就是需要渲染到頁(yè)面的一些參數(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>
<!-- {{}} 插值表達(dá)式-->
姓名:<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 %}
<!-- 頁(yè)面上面設(shè)置數(shù)據(jù) -->
{% set arr = [1,2,3,4,5]%}
<p>{{arr.length}}</p>
<!-- 如何引入頁(yè)面-->
{% include './common.html' %}
</body>
</html>
具體頁(yè)面顯示如下：
上面講的是使用swig摸板引擎如何傳遞參數(shù)到頁(yè)面渲染，下面來(lái)看看如何使用swig提取html公共的部分：
html頁(yè)面公共的部分，比如說(shuō)header，公共的js css文件，導(dǎo)航欄等
設(shè)置一個(gè)公共的頁(yè)面：
<header>
<title>node</title>
<!-- css占位符主要用來(lái)顯示其他頁(yè)面的個(gè)性化的css文件，例如home.css about.css -->
{% block css%}
{% endblock %}
<link rel="stylesheet" href="/static/css/layout.css" rel="external nofollow" >
</header>
<!-- 所以頁(yè)面公共的導(dǎo)航欄 -->
<nav>
<li><a href="">首頁(yè)</a></li>
<li><a href="">關(guān)于我們</a></li>
<li><a href="">商品列表</a></li>
<li><a href="">登錄</a></li>
<li><a href="">注冊(cè)</a></li>
</nav>
<!-- content占位符主要用來(lái)顯示其他頁(yè)面的個(gè)性化的內(nèi)容顯示，不同的頁(yè)面有不同的顯示方式 -->
{% block content%}
{% endblock %}
<!-- js占位符主要用來(lái)顯示其他頁(yè)面的個(gè)性化的js文件，例如home.js about.js -->
{% block js%}
{% endblock %}
<script src="/static/js/layout.js"></script>
home.html
<!-- 繼承所有頁(yè)面公共的頁(yè)面模塊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 %}
當(dāng)啟動(dòng)node服務(wù)器，渲染home頁(yè)面的時(shí)候，你會(huì)看到
server.get('/',(req,res)=>{
res.render('www/home',{});
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Node.JS在命令行中檢查Chrome瀏覽器是否安裝并打開(kāi)指定網(wǎng)址
這篇文章主要介紹了Node.JS在命令行中檢查Chrome瀏覽器是否安裝，并打開(kāi)指定網(wǎng)址,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
使用Node.js腳本自動(dòng)統(tǒng)計(jì)代碼量的實(shí)現(xiàn)代碼
手動(dòng)統(tǒng)計(jì)代碼行數(shù)通常會(huì)耗費(fèi)大量時(shí)間和精力,為了提高統(tǒng)計(jì)效率并減少人為錯(cuò)誤,我們可以借助自動(dòng)化工具來(lái)完成這項(xiàng)任務(wù),本文將介紹如何使用 Node.js 腳本來(lái)自動(dòng)化統(tǒng)計(jì)項(xiàng)目代碼行數(shù),讓我們能夠輕松快捷地獲取項(xiàng)目的代碼量信息,需要的朋友可以參考下2023-12-12
node中短信api實(shí)現(xiàn)驗(yàn)證碼登錄的示例代碼
這篇文章主要介紹了node中短信api實(shí)現(xiàn)驗(yàn)證碼登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了監(jiān)控Nodejs的性能實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
本文詳細(xì)講解了Node.js進(jìn)程管理之子進(jìn)程，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Node.js的應(yīng)用場(chǎng)景有前后端分離、海量web頁(yè)面渲染服務(wù)、命令行工具和桌面端應(yīng)用等等。本篇文章選取CLI(Command Line Tools)子領(lǐng)域，來(lái)談?wù)凬ode.js編寫CLI的實(shí)踐，讓CLI切實(shí)解決實(shí)際工程問(wèn)題。2017-05-05
Node.js中http模塊和導(dǎo)出共享問(wèn)題
這篇文章主要介紹了Node.js中http模塊和導(dǎo)出共享,通過(guò)?http?模塊提供的?http.createServer()?方法，就能方便的把一臺(tái)普通的電腦，變成一臺(tái)?web?服務(wù)器，從而對(duì)外提供?web?資源服務(wù)，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了nodejs中模塊定義方法,結(jié)合實(shí)例形式分析了nodejs模塊的原理、常見(jiàn)模塊及相應(yīng)的定義方法,需要的朋友可以參考下2017-03-03
基于 Node 實(shí)現(xiàn)簡(jiǎn)易 serve靜態(tài)資源服務(wù)器的示例詳解
靜態(tài)資源服務(wù)器(HTTP 服務(wù)器)可以將靜態(tài)文件(如 js、css、圖片）等通過(guò) HTTP 協(xié)議展現(xiàn)給客戶端。本文介紹如何基于 Node 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的靜態(tài)資源服務(wù)器，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了Node.js 多線程完全指南總結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03