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

nbsp;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’ %}

具体页面显示如下:
node结合swig渲染摸板

上面讲的是使用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',{});})

    登录后复制

    node结合swig渲染摸板

    相关推荐:

    node实现基于token的身份验证

    实例详解node.js如何获取SQL Server数据库

    以上就是node结合swig渲染摸板 的详细内容,更多请关注【创想鸟】其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

    发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2773831.html

    (0)
    上一篇 2025年3月8日 13:59:12
    下一篇 2025年2月18日 18:40:21

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    • node的process与child_process模块的使用详解

      这次给大家带来node的process与child_process模块的使用详解,使用node的process与child_process模块的注意事项有哪些,下面就是实战案例,一起来看一下。 进程的概念 在Node.js中每个应用程序都是…

      编程技术 2025年3月8日
      200
    • express+multer实现node图片上传的具体步奏

      这次给大家带来express+multer实现node图片上传的具体步奏,express+multer实现node图片上传的注意事项有哪些,下面就是实战案例,一起来看一下。 下文给大家介绍使用express+multer实现node中的图片…

      编程技术 2025年3月8日
      200
    • vue路由在history模式下刷新时渲染页面无反映的处理方法

      这次给大家带来vue路由在history模式下刷新时渲染页面无反映的处理方法,处理vue路由在history模式下刷新时渲染页面无反映的注意事项有哪些,下面就是实战案例,一起来看一下。 解决vue-router嵌套路由(子路由)在histo…

      2025年3月8日 编程技术
      200
    • node Async的异步处理使用详解

      这次给大家带来node Async的异步处理使用详解,node Async异步处理使用详解的注意事项有哪些,下面就是实战案例,一起来看一下。 最近在研究nodejs,令我感受比较深的是……熟悉js代码的地球人都知道,js的加载顺序很重要!很…

      编程技术 2025年3月8日
      200
    • Node的模块系统使用详解

      这次给大家带来Node的模块系统使用详解,Node模块系统使用的注意事项有哪些,下面就是实战案例,一起来看一下。 模块是构建应用程序的基础,也使得函数和变量私有化,不直接对外暴露出来,接下来我们就要介绍Node的模块化系统和它最常用的模式 …

      编程技术 2025年3月8日
      200
    • node操作文字生成图片

      这次给大家带来node操作文字生成图片,node操作文字生成图片的注意事项有哪些,下面就是实战案例,一起来看一下。 解决思路 文字转svg -> svg转png -> 合并图片 相关轮子 images Node.js 轻量级跨平…

      编程技术 2025年3月8日
      200
    • 使用React将组件渲染到指定DOM节点

      这次给大家带来使用React将组件渲染到指定DOM节点,使用React将组件渲染到指定DOM节点的注意事项有哪些,下面就是实战案例,一起来看一下。 众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结…

      编程技术 2025年3月8日
      200
    • node服务器跨域步奏详解

      这次给大家带来node服务器跨域步奏详解,node服务器跨域的注意事项有哪些,下面就是实战案例,一起来看一下。 背景 我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,…

      2025年3月8日
      200
    • Angular实现服务端渲染案列详解

      这次给大家带来Angular实现服务端渲染案列详解,Angular实现服务端渲染的注意事项有哪些,下面就是实战案例,一起来看一下。 Angular在服务端渲染方面提供一套前后端同构解决方案,它就是Angular Universal(统一平台…

      2025年3月8日 编程技术
      200
    • node实现登录时图片验证码功能

      这次给大家带来node实现登录时图片验证码功能,node实现登录时图片验证码功能的注意事项有哪些,下面就是实战案例,一起来看一下。 实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字,全平台支持,用起来…

      2025年3月8日 编程技术
      200

    发表回复

    登录后才能评论