热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

node结合swig渲染摸板的方法

本篇文章主要介绍了node结合swig渲染摸板的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在这里就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文件的具体代码如下所示:




  
  
  
  


  
摸板引擎
姓名:

{{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文件,导航栏等

    设置一个公共的页面:

    
      
      
      {% 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',{});
    })

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


    推荐阅读
    • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
    • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
    • 深入理解Cookie与Session会话管理
      本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
    • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
    • Vue 开发与调试工具指南
      本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
    • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
    • 前端开发中的代码注释实践与规范
      本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
    • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
    • Node.js 入门指南(一)
      本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
    • Docker的安全基准
      nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
    • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
      本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
    • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
    • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
      本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
    • 探讨在海外服务器上使用 sudo npm install -g cordova 时遇到的安装失败问题,并提供详细的解决方案和建议。 ... [详细]
    • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
    author-avatar
    利威尔的黑猫
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有