博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
node结合swig渲染摸板实现前后端不分离
阅读量:7104 次
发布时间:2019-06-28

本文共 2023 字,大约阅读时间需要 6 分钟。

在这里就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',{});})

    图片描述

    转载地址:http://wuuhl.baihongyu.com/

    你可能感兴趣的文章
    Zabbix系统数据采集方法总结
    查看>>
    手工编译LAMP
    查看>>
    HTML --段落
    查看>>
    广义表
    查看>>
    输出一个整数的每一位
    查看>>
    学习Spark的入门教程——《Spark核心源码分析与开发实战》
    查看>>
    MYSQL函数
    查看>>
    CentOS7.4安装部署KVM虚拟机
    查看>>
    2015年度总结
    查看>>
    3.c#-练习_编程实现计算几天_如46天_是几周零几_天._6周零4天
    查看>>
    yum install redis安装的配置文件
    查看>>
    Linux LVM逻辑卷
    查看>>
    layoutSubviews总结
    查看>>
    Lintcode93 Balanced Binary Tree solution 题解
    查看>>
    SELECT ... INTO OUTFILE中面临的secure_file_priv问题
    查看>>
    MySQL 导出数据字典
    查看>>
    MySQL带有视图数据库在恢复数据时视图变成数据表的解决方法
    查看>>
    4-Nginx 日志管理
    查看>>
    寒冰linux视频教程笔记2 基础操作
    查看>>
    js 去抖技术应用例子
    查看>>