亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

jeffrey_up / 3262人閱讀

在這里就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)成功之后，開始設(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文件的具體代碼如下所示：




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

    具體頁(yè)面顯示如下：

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

    
    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)啟動(dòng)node服務(wù)器，渲染home頁(yè)面的時(shí)候，你會(huì)看到

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

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94106.html

    相關(guān)文章

    • Django項(xiàng)目前端工程化的探索

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

      jsummer 評(píng)論0 收藏0

    • Django項(xiàng)目前端工程化的探索

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

      buildupchao 評(píng)論0 收藏0

    • Django項(xiàng)目前端工程化的探索

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

      Jackwoo 評(píng)論0 收藏0

    • Django項(xiàng)目前端工程化的探索

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

      HackerShell 評(píng)論0 收藏0

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

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

      warkiz 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <