node結合swig渲染摸板實現前后端不分離

jeffrey_up 發布于2019-08-22 16:10 / 3196人閱讀

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

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

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

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

//配置摸板引擎
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});

配置需要渲染的數據：

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"]
    });
})

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




    
    
    
    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" %}

具體頁面顯示如下：

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


    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 %}

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

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

云服務器 GPU云服務器前后端不分離 jsp 前后端分離前后端分離開發 js前后端分離框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94106.html

Django項目前端工程化的探索

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

jsummer 2019-07-25 10:44 評論0 收藏0
Django項目前端工程化的探索

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

buildupchao 2019-08-29 11:10 評論0 收藏0
Django項目前端工程化的探索

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

Jackwoo 2019-08-01 15:38 評論0 收藏0
Django項目前端工程化的探索

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

HackerShell 2019-08-20 10:26 評論0 收藏0
Node中間層實踐（一）——基于NodeJS的全棧式開發

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

warkiz 2019-08-22 13:59 評論0 收藏0