脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node swig渲染摸板

node结合swig渲染摸板的方法

 更新时间：2018年04月11日 10:38:04   作者：吴凌云  
本篇文章主要介绍了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文件的具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>摸板引擎</div>
  <!-- {{}} 插值表达式-->
  姓名:<p>{{name}}</p>
  {% if user.name == '栗子' && user.age == '18'%}
  姓名:<p>栗子</p>
  {% elseif user.name == '张三'%}
  <p>张三</p>
  {% endif %}
  <p>遍历数组</p>
  {% for items in lists%}
  <li>items</li>
  {% endfor %}
  
   <!-- 页面上面设置数据 -->
  {% set arr = [1,2,3,4,5]%}
  <p>{{arr.length}}</p>
  <!-- 如何引入页面-->
  {% include './common.html' %}
</body>
</html>

具体页面显示如下：

上面讲的是使用swig摸板引擎如何传递参数到页面渲染，下面来看看如何使用swig提取html公共的部分：

html页面公共的部分，比如说header，公共的js css文件，导航栏等

设置一个公共的页面：

<header>
  <title>node</title>
  <!-- css占位符主要用来显示其他页面的个性化的css文件，例如home.css about.css -->
  {% block css%}
  {% endblock %}
  <link rel="stylesheet" href="/static/css/layout.css" rel="external nofollow" >
</header>
<!-- 所以页面公共的导航栏 -->
<nav>
  <li><a href="">首页</a></li>
  <li><a href="">关于我们</a></li>
  <li><a href="">商品列表</a></li>
  <li><a href="">登录</a></li>
  <li><a href="">注册</a></li>
</nav>
 <!-- content占位符主要用来显示其他页面的个性化的内容显示，不同的页面有不同的显示方式 -->
{% block content%}
{% endblock %}
 <!-- js占位符主要用来显示其他页面的个性化的js文件，例如home.js about.js -->
{% block js%}
{% endblock %}
<script src="/static/js/layout.js"></script>

home.html

<!-- 继承所有页面公共的页面模块layout.html -->
{% extends './layout.html'%}
{% block css %}
<link rel="stylesheet" href="/static/css/home.css" rel="external nofollow" >
{% endblock %}
{% block content %}
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
 <li><a href="">4</a></li>
 <li><a href="">5</a></li>
 <li><a href="">6</a></li>
{% endblock %}

{% block js %}
<script src="/static/js/home.js"></script>
{% endblock %}

当启动node服务器，渲染home页面的时候，你会看到

server.get('/',(req,res)=>{
  res.render('www/home',{});
})

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

您可能感兴趣的文章:

相关文章

  • Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址

    Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址

    这篇文章主要介绍了Node.JS在命令行中检查Chrome浏览器是否安装，并打开指定网址,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 使用Node.js脚本自动统计代码量的实现代码

    使用Node.js脚本自动统计代码量的实现代码

    手动统计代码行数通常会耗费大量时间和精力,为了提高统计效率并减少人为错误,我们可以借助自动化工具来完成这项任务,本文将介绍如何使用 Node.js 脚本来自动化统计项目代码行数,让我们能够轻松快捷地获取项目的代码量信息,需要的朋友可以参考下
    2023-12-12
  • node中短信api实现验证码登录的示例代码

    node中短信api实现验证码登录的示例代码

    这篇文章主要介绍了node中短信api实现验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 监控Nodejs的性能实例代码

    监控Nodejs的性能实例代码

    这篇文章主要介绍了监控Nodejs的性能实例代码,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-07
  • Node.js进程管理之子进程详解

    Node.js进程管理之子进程详解

    本文详细讲解了Node.js进程管理之子进程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • Node.js编写CLI的实例详解

    Node.js编写CLI的实例详解

    Node.js的应用场景有前后端分离、海量web页面渲染服务、命令行工具和桌面端应用等等。本篇文章选取CLI(Command Line Tools)子领域，来谈谈Node.js编写CLI的实践，让CLI切实解决实际工程问题。
    2017-05-05
  • Node.js中http模块和导出共享问题

    Node.js中http模块和导出共享问题

    这篇文章主要介绍了Node.js中http模块和导出共享,通过 http 模块提供的 http.createServer() 方法，就能方便的把一台普通的电脑，变成一台 web 服务器，从而对外提供 web 资源服务，本文给大家详细讲解，需要的朋友可以参考下
    2022-10-10
  • nodejs中模块定义实例详解

    nodejs中模块定义实例详解

    这篇文章主要介绍了nodejs中模块定义方法,结合实例形式分析了nodejs模块的原理、常见模块及相应的定义方法,需要的朋友可以参考下
    2017-03-03
  • 基于 Node 实现简易 serve静态资源服务器的示例详解

    基于 Node 实现简易 serve静态资源服务器的示例详解

    静态资源服务器(HTTP 服务器)可以将静态文件(如 js、css、图片）等通过 HTTP 协议展现给客户端。本文介绍如何基于 Node 实现一个简易的静态资源服务器，感兴趣的朋友一起看看吧
    2022-06-06
  • Node.js 多线程完全指南总结

    Node.js 多线程完全指南总结

    这篇文章主要介绍了Node.js 多线程完全指南总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03

最新评论