成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

node結(jié)合swig渲染摸板實現(xiàn)前后端不分離

jeffrey_up / 3200人閱讀

在這里就nodejs如何應(yīng)用swig摸板，總結(jié)一下一些基本的用法。
首先當(dāng)然是利用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文件的具體代碼如下所示：




    
    
    
    Document


    
摸板引擎

    
    姓名:
{{name}}

    {% if user.name == "栗子" && user.age == "18"%}
    姓名:
栗子

    {% elseif user.name == "張三"%}
    
張三

    {% endif %}
    
遍歷數(shù)組

    {% for items in lists%}
    
  • items
    • 
    {% endfor %}
    
     
    {% set arr = [1,2,3,4,5]%}
    
    {{arr.length}}
    
    
    {% include "./common.html" %}

    具體頁面顯示如下：

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

    
    node
    
    {% block css%}
    {% endblock %}
    

    


 
{% block content%}
{% endblock %}
 
{% block js%}
{% endblock %}

    home.html

    
{% extends "./layout.html"%}
{% block css %}

{% endblock %}
{% block content %}
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
{% endblock %}

{% block js %}

{% endblock %}

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

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94106.html

    相關(guān)文章

    • Django項目前端工程化的探索

      摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...

      jsummer 評論0 收藏0

    • Django項目前端工程化的探索

      摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...

      buildupchao 評論0 收藏0

    • Django項目前端工程化的探索

      摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...

      Jackwoo 評論0 收藏0

    • Django項目前端工程化的探索

      摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...

      HackerShell 評論0 收藏0

    • Node中間層實踐（一）——基于NodeJS的全棧式開發(fā)

      摘要：總結(jié)我覺得，以后基于的全棧式開發(fā)的模式將會越來越流行，這也會引領(lǐng)前端步入工程化時代。歡迎繼續(xù)關(guān)注本博的更新中間層實踐一基于的全棧式開發(fā)中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理 版權(quán)聲明：更多文章請訪問我的個人站Keyon Y，轉(zhuǎn)載請注明出處。 前言 近期公司有個新項目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...

      warkiz 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <