如何使用node结合swig渲染摸板

这次给大家带来如何使用node结合swig渲染摸板,使用node结合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' %}

    登录后复制

    具体页面显示如下:

    如何使用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渲染摸板

    相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

    推荐阅读:

    如何使用JS实现合并多个数组去重算

    jquery动态添加点击事件步奏详解

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

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

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

    (0)
    上一篇 2025年3月8日 07:54:50
    下一篇 2025年3月1日 09:35:35

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

    相关推荐

    • 怎样操作vue select组件使用与禁用

      这次给大家带来怎样操作vue select组件使用与禁用,操作vue select组件使用与禁用的注意事项有哪些,下面就是实战案例,一起来看一下。 业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件…

      2025年3月8日
      200
    • vue的select内置组件使用步骤详解

      这次给大家带来vue的select内置组件使用步骤详解,vue的select内置组件使用注意事项有哪些,下面就是实战案例,一起来看一下。 1.整合了第三方 jQuery 插件 (select2) html, body { font: 13p…

      2025年3月8日
      200
    • 怎样操作bing Map在vue项目中使用

      这次给大家带来怎样操作bing Map在vue项目中使用,操作bing Map在vue项目中使用的注意事项有哪些,下面就是实战案例,一起来看一下。 写在最前面 拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地…

      2025年3月8日 编程技术
      200
    • 怎么使用node实现基于token身份验证

      这次给大家带来怎么使用node实现基于token身份验证,使用node实现基于token身份验证的注意事项有哪些,下面就是实战案例,一起来看一下。 最近研究了下基于token的身份验证,并将这种机制整合在个人项目中。现在很多网站的认证方式都…

      编程技术 2025年3月8日
      200
    • 怎样对vue脚手架及vue-router进行使用

      这次给大家带来怎样对vue脚手架及vue-router进行使用,对vue脚手架及vue-router进行使用的注意事项有哪些,下面就是实战案例,一起来看一下。 首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官…

      2025年3月8日 编程技术
      200
    • 如何操作vue组件使用props传递数据

      这次给大家带来如何操作vue组件使用props传递数据,操作vue组件使用props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 prop…

      2025年3月8日
      200
    • 手写Node静态资源服务器的实现方法

      这篇文章主要介绍了手写node静态资源服务器的实现方法,现在分享给大家,也给大家做个参考。 想写静态资源服务器,首先我们需要知道如何创建一个http服务器,它的原理是什么 http服务器是继承自tcp服务器 http协议是应用层协议,是基于…

      2025年3月8日 编程技术
      200
    • 浅谈Node 调试工具入门教程

      这篇文章主要介绍了浅谈node 调试工具入门教程,现在分享给大家,也给大家做个参考。 JavaScript 程序越来越复杂,调试工具的重要性日益凸显。客户端脚本有浏览器,Node 脚本怎么调试呢? 2016年,Node 决定将 Chrome…

      2025年3月8日 编程技术
      200
    • 怎样使用Angular4的router

      这次给大家带来怎样使用Angular4的router,使用Angular4的router的注意事项有哪些,下面就是实战案例,一起来看一下。 router,也就是路由,是前端中一个比较重要的概念。通过router把特定的地址和对应的页面关联后…

      2025年3月8日 编程技术
      200
    • 怎样使用JS EventEmitter

      这次给大家带来怎样使用JS EventEmitter,使用JS EventEmitter的注意事项有哪些,下面就是实战案例,一起来看一下。 2个多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模块 ev…

      2025年3月8日
      200

    发表回复

    登录后才能评论