node结合swig渲染摸板实现前后端不分离

jeffrey_up 发布于2019-08-22 16:10 / 3193人阅读

在这里就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前后端分离框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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