node結合swig渲染摸板-js教程-PHP中文網

首頁

web前端

js教程

node結合swig渲染摸板

Apr 10, 2018 pm 05:00 PM

node swig 渲染

這篇文章給大家分享的內容是關於node結合swig渲染摸板，有著一定的參考價值，有需要的朋友可以參考一下

在這裡就nodejs如何應用swig摸板，總結一下一些基本的用法。
首先當然利用express框架在node後台上面搭建服務

var express = require(&#39;express&#39;);
var server = express();

server.listen(8080,&#39;localhost&#39;,(req,res)=&gt;{
     console.log(&#39;服务器启动...&#39;);
})

登入後複製

啟動成功之後，開始設定swig摸板的相關配置，具體程式碼如下：
npm install swig -s
安裝成功之後，加上swig配置，程式碼如下：

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

登入後複製

配置需要渲染的資料：

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

登入後複製

html檔案的具體程式碼如下所示：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p&gt;摸板引擎&lt;/p&gt;
    &lt;!-- {{}} 插值表达式--&gt;
    姓名:&lt;p&gt;{{name}}&lt;/p&gt;
    {% if user.name == &#39;栗子&#39; &amp;&amp; user.age == &#39;18&#39;%}
    姓名:&lt;p&gt;栗子&lt;/p&gt;
    {% elseif user.name == &#39;张三&#39;%}
    &lt;p&gt;张三&lt;/p&gt;
    {% endif %}
    &lt;p&gt;遍历数组&lt;/p&gt;
    {% for items in lists%}
    &lt;li&gt;items&lt;/li&gt;
    {% endfor %}
    
     &lt;!-- 页面上面设置数据 --&gt;
    {% set arr = [1,2,3,4,5]%}
    &lt;p&gt;{{arr.length}}&lt;/p&gt;
    &lt;!-- 如何引入页面--&gt;
    {% include &#39;./common.html&#39; %}
&lt;/body&gt;
&lt;/html&gt;

登入後複製

具體頁面顯示如下：
node結合swig渲染摸板

上面講的是使用swig摸板引擎如何傳遞參數到頁面渲染，下面來看看如何使用swig提取html公共的部分：
html頁面公共的部分，比如說header，公共的js css文件，導航欄等
設定一個公共的頁面：

&lt;header&gt;
    &lt;title&gt;node&lt;/title&gt;
    &lt;!-- css占位符主要用来显示其他页面的个性化的css文件，例如home.css about.css --&gt;
    {% block css%}
    {% endblock %}
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/layout.css&quot;&gt;
&lt;/header&gt;
&lt;!-- 所以页面公共的导航栏 --&gt;
&lt;nav&gt;
    &lt;li&gt;&lt;a href=&quot;&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot;&gt;关于我们&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot;&gt;商品列表&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot;&gt;登录&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot;&gt;注册&lt;/a&gt;&lt;/li&gt;
&lt;/nav&gt;
 &lt;!-- content占位符主要用来显示其他页面的个性化的内容显示，不同的页面有不同的显示方式 --&gt;
{% block content%}
{% endblock %}
 &lt;!-- js占位符主要用来显示其他页面的个性化的js文件，例如home.js about.js --&gt;
{% block js%}
{% endblock %}
&lt;script src=&quot;/static/js/layout.js&quot;&gt;&lt;/script&gt;

登入後複製

home.html

&lt;!-- 继承所有页面公共的页面模块layout.html --&gt;
{% extends &#39;./layout.html&#39;%}
{% block css %}
&lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/home.css&quot;&gt;
{% endblock %}
{% block content %}
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;6&lt;/a&gt;&lt;/li&gt;
{% endblock %}

{% block js %}
&lt;script src=&quot;/static/js/home.js&quot;&gt;&lt;/script&gt;
{% endblock %}

登入後複製

當啟動node伺服器，渲染home頁面的時候，你會看到

server.get(&#39;/&#39;,(req,res)=&gt;{
    res.render(&#39;www/home&#39;,{});
})

登入後複製

node結合swig渲染摸板

#相關推薦：

node實作基於token的驗證

實例詳解node.js如何取得SQL Server資料庫

以上是node結合swig渲染摸板的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

node結合swig渲染摸板

熱門文章

熱門工具標籤

熱門文章

熱門文章標籤

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題